妖气重重: 开发

Ext学习笔记（一）

Tue, 21 Aug 2007 11:19:30 GMT

不怎么敢用“学习笔记”，这种字眼的，害怕自己写得不好，被骂。不过，这次也就认真写次学习笔记吧，Share是一种和平主义的精神，呵呵。

Ext，在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为一个独立的项目进行开发，并不再依赖于YUI，在使用Ext的过程当中，你可以使用Ext-base, Prototype+script.aculo.us，jQuey和YUI四种中的一种，我因为比较习惯使用prototype，所以会选择Prototype+script.aculo.us的组合。jQuery也是一个写得很优美的框架，没有用过，以后抽空看看代码，应该获益匪浅。

Ext官方网站：http://www.extjs.com

JSEclipse：http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_jseclipse

Firebug：http://www.getfirebug.com

从Ext的站点上下载最新版本的文件，解压什么的我就不说，我想说一下这个文档的结构：

├─adapter           存放所有adapter的文件夹
├─build               经过压缩（build）过的文件
├─docs               文档
├─examples         DEMO
├─package          按包分类的文件
├─resources        资源文件，包括CSS和一些图片
└─source            源代码

使用过程当中，除非你特别介意JS文件的加载是否影响速度，大可只引入ext-all.js和ext-all.css两个文件，Ext在包管理方面，我觉得应该向Dojo学习下。

JS和CSS引入的顺序：

引入JS：按照底层依赖的不同：

Ext Stand-alone：
ext-base.js
ext-all.js (or your choice of files)

Yahoo! UI (.12+)：
yui-utilities.js
ext-yui-adapter.js
ext-all.js (or your choice of files)

jQuery (1.1+)：
jquery.js
jquery-plugins.js // required jQuery plugins
ext-jquery-adapter.js
ext-all.js (or your choice of files)

Prototype (1.5+) / Scriptaculous (1.7+)：
prototype.js
scriptaculous.js?load=effects (or whatever you want to load)
ext-prototype-adapter.js
ext-all.js (or your choice of files)

把相应的文件引入到HTML的head里后，你就可以写你自己的第一Ext的Demo了。

function InitDialog() {
var dialog = new Ext.BasicDialog("hello-dlg", {
id: "hello-dialog",

            title: "Hello",
          autoTabs:true,
          width:500,
          height:300,
          shadow:true,
          minWidth:300,
          minHeight:250,
          proxyDrag: true
  });
  dialog.addKeyListener(27, dialog.hide, dialog);
  dialog.addButton('Submit', dialog.hide, dialog).disable();
  dialog.addButton('Close', dialog.hide, dialog);

  Ext.ComponentMgr.register(dialog);

}

function OnButtonClick() {
var dialog = Ext.getCmp("hello-dialog");
dialog.show();
}

Ext.onReady(InitDialog);

</script>

<div id="hello-dlg"></div> 渲染DIV用到的层

这里有四处要注意一下：

id: "hello-dialog", Compoent的ID，有了这个ID才能用ComponentMgr.register来在全局进行注册
Ext.ComponentMgr.register(dialog); 注册组件

var dialog = Ext.getCmp("hello-dialog"); 根据ID来得到组件
Ext.onReady(InitDialog); Ext.onRead是注册一个在整个页面的DOM构建完成会被执行的函数

呵呵，第一个例子就出来了，试试看吧~

动态加载CSS

Sun, 15 Apr 2007 04:05:53 GMT

这里说的动态加载是指加载外部CSS文件和动态创建样式表元素，在这里我总结的方法可能不全，但是尽量希望能把自己在使用的过程当中用到的一些方法提供给大家。

首先来说如何动态加载一个外部的CSS文件：(假设文件名为style.css)

最没有技术含量的方法：
document.write("<link rel="stylesheet" type="text/css", href="style.css"></link>");

@import(style.css)
这种方法只能用在外部CSS文件或style结点中，基本上不能算作是动态。在FF和IE中均可行。

使用document.createStyleSheet()方法
这个方法是IE only的，参数可以传递一个样式表中的值，如body{background: blue;}或者是一个外部CSS文件的URL，使用方法如document.createStyleSheet(style.css)，此URL的地址相对于当前页面。

动态创建link结点
function LoadCss(cssUrl) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = "cssUrl";
    document.getElementsByTagName("body").item(0).appednChild(link);
}
这个方法在FF和IE中均可以使用，当然同样的思路还可以来创建style结点，然后使用XMLHttpRequest方法来加载cssURL中的内容，并把创建的style结点的innerHTML设置成XMLHttpRequest的responseText，但由于我认为这是最不经济、最不合理的一种方法，所以在这也就不讲了。

更新当前某个link结点
思路同上，但是这种作法是替换掉一个已有的link标签，可以用于更换网站的Theme，基本代码如下：
function ChangeTheme(cssUrl) {
var theme = document.getElementByName("theme"); //假设存在id为theme的结点
theme.href = cssUrl;
}
这种方法我测试过，在FF和IE中均可行。

动态创建样式元素

如果我想在网页上增加一个如下的CSS元素，应该怎么做呢？
.focus {
color: red;
font-style: bold;
}
当然，我可以创建一个style结点，然后把上面这段内容放到innerHTML中，那有没有别的办法呢？到目前为止，我还不知道除了上面那个方法以处一个在FF和IE中均可行的方法。不过在IE中我们可以这样做：
var sheet = document.createStyleSheet();
sheet.addRule(".focus", "color: red; font-style: bold;");

文章中如有不对的地方，欢迎大家给我指正。

下篇BLOG预告，我将总结一下如何动态的加载一个js文件。

关于一个开源QQ去广告显IP插件可行性的论证

Wed, 11 Apr 2007 10:51:55 GMT

题目很长，可能读着有些绕口，可以简单地介绍一下。就是利用开源的方式开发一款QQ的插件，用于完成去广告显示IP等功能，类似于珊瑚虫、飘云等的插件。这个呢，是从高二就开始有的一个想法，当时因为技术的原因，自己只会用修改资源文件的方式来去广告，对于显IP则无能为力了。而这个想法现在又出现在脑海里，是因为看了木子（原来木子QQ的开发者）的文章，看到他数落珊瑚虫和其他一些类似插件的行为，木子说到珊瑚虫已经找到了一种营利模式；看到飘云要小范围开源，然后又看了几篇关于类似技术分析的文章，觉得现在如果有时间的话，倒是可以尝试来完成这样一件事情。还有也许是出于个人的一点偏好吧，好多插件现在做得都太大了，我只需要一个Simple的插件就行。呵呵，Simple is beautiful！

不过现在自己考虑的主要有以下几个问题：

开源的模式是否适用于这类插件的开发，特别是在国内这种环境下。
是否会引起与现在许多类似插件一样的法律问题。
能不能找到志同道合愿意做这件事情的朋友。

只希望如果自己决定做了，能够好好地把这件事情做下去。