BlogJava-jasmine214--love-随笔分类-Ajax

Mootool-Ajax 写法（包括其他JS库的）

幻海蓝梦 — Tue, 20 Jul 2010 03:47:00 GMT

摘要: 原文：http://www.masterboke.com/2009/01/12/javascritpprototypejquerymootools%E7%9A%84ajax%E4%BD%BF%E7%94%A8/ 老是记不住各个框架的AJAX写法，今天总结了一下，发现了一些小不同。 Javascript及prototype写法： vi... 阅读全文

幻海蓝梦 2010-07-20 11:47 发表评论

MooTools vs Prototype 核心源码比较

幻海蓝梦 — Tue, 20 Jul 2010 03:44:00 GMT

原文：http://cssrainbow.cn/articles/resources/595.html

MooTools是一个简洁，模块化，面向对象的JavaScript框架。它能够帮助你更快，更简单地编写可扩展和兼容性强的 JavaScript代码。

Mootools跟prototypejs相类似，语法几乎一样。

但它提供的功能要比prototypejs多，而且更强大。比如增加了动画特效、拖放操作等等。

建议大家可以用它来代替prototypejs。

我为什么选择mootools,抛弃了prototype. (mootools 与 prototype 核心代码分析)

原文作者：小胖儿的大城

原文链接地址：http://www.javaeye.com/topic/122425

前言

最近喜欢上了mootools(相见恨晚啊),在公开表示了对他的偏爱.
很多朋友都问我为什么要移情别恋,其实理由还是蛮多的.

今天在这里打算列举出一部分.让更多的朋友能够了解一下mootools,也希望有更多的朋友喜欢上他.

文章的标题注定了我会更多的讲述 mootools比prototype好的地方,
希望大家不要被我的误导,以为mootools处处都比prototype好.
mootools还是有一些不足的.

本次对比针对 mootools 1.11版和 prototype 1.51版,
只比较了一些核心代码,其他的工具方法,辅助函数不再本文讨论之内.

开始前,再次重申一遍:我曾经很爱prototype,而且我将永远都会用"伟大"来形容它.

好下面对比正式开始 (
mootools以下简称moo.
本文所引用的代码, 只是起到说明作用,不保证他们都可以被正确的执行.
同时为了使本文简洁一些,引入的一些 moo和prototype的代码也只是片段或是伪代码.
)

一. 类机制

js里的类实际上就是function.
如果不使用任何框架和组件,那么想创建一个自己类也不是难事,方法如下:

														var PersonClass=function(name,gender){
this.name=name;
this.gender=gender;
alert("My name is "+this.name);
}
var myGirlFriend=new PersonClass('Vickey','female');

执行后, 会创建一个PersonClass类的实例myGirlFriend, 并执行function内的语句.
那些语句可以理解为是类的构造函数.

Prototype
现在来看看在prototype的帮助下如何去定义这个类:

														var PersonClass =Class.create();
 PersonClass.prototype.initialize=function(name,gender){
this.name=name;
this.gender=gender;
alert("My name is "+this.name);
};
var myGirlFriend=new PersonClass('Vickey','female');//如果想给类增加属性和方法时使用   
 PersonClass.prototype.XXX=...;//或者是使用 prototype提供的   
 Object.extend(PersonClass.prototype,{...});

(关于Object.extend稍后在对比继承机制时再细说.)

再来看看prototype是实现类机制的核心代码.

														var
														Class
														=
														{
														
    create:function(){
returnfunction(){
this.initialize.apply(this, arguments);
}
}
}

通过看代码不难看出,prototype的Class实际上只是帮助我们抽象出了"类的构造函数".
而当我们在prototype的这种机制下进行类的定义时,实际上带来的好处是非常有限的.
prototype的Class只是从结构对我们的类进行了重新规划. 而这样的规划意义并不是很大.
而且prototype带有强制性,即, initialize 是必须要定义的.
实际上这里存在一个缺陷, Class应该提供一个默认的initialize(一个空函数就好),
或者是在create返回的function里进行必要的判断.
(prototype1.6的类机制变化比较大,但是还没仔细研究过,所以不敢轻易评论).

Mootools

现在来看看在 moo的帮助下如何去定义一个类:

														var PersonClass =newClass({
    initialize:function(name,gender){
this.name=name;
this.gender=gender;
alert("My name is "+this.name);
}
});
var myGirlFriend=new PersonClass('Vickey','female');

其中类的 initialize 不是必须的.
如果你想给 PersonClass 增加属性和方法,你可以在new Class的参数里直接以 json方式定义.
也可以使用如下方式

PersonClass.implement({
    age:0,
    getName :function(){
returnthis.name;
}
},{...}, ..... 
);

implement支持多个{}.关于implement稍后在对比继承机制时再细说.

在来看一下moo类机制的一些核心代码.

														var
														Class
														=
														function
														(properties){
var klass =function(){
return(arguments[0]!==null&amp;&amp;this.initialize&amp;&amp; $type(this.initialize)==
'function')?this.initialize.apply(this, arguments):this;
};
    $extend(klass,this);
    klass.prototype= properties;
    klass.constructor=Class;return klass;
 
};
Class.prototype={
    extend:function(properties){
var proto =newthis(null);
for(var property in properties){
var pp = proto[property];
           proto[property]=Class.Merge(pp, properties[property]);
}
returnnewClass(proto);
},
    implement:function(){
for(var i =0, l = arguments.length; i &lt; l; i++)
            $extend(this.prototype, arguments[i]);
}
};

代码的具体原理就不细说了.大家在moo的Class里看到了 extend 和implement,那下面就来具体说一说moo和prototype的继承机制吧.

二. 继承机制

Prototype
prototype提供的继承很简单.

Object.extend=function(destination, source){
for(var property in source){
     destination[property]= source[property];
}
return destination;
}

他只是把source里的属性赋给destination,同时会覆盖destination里的同名属性.
他可以用于对象,也可以用于类,当要实现类的继承时,destination要使用 MySubClass.prototype.

prototype的继承机制可以说是非常薄弱的.

Mootools

moo提供了三种继承机制:

首先他也提供了简单的继承机制:
Objcet.extend (注意,不是上面代码中 Class 里的 extend)
他的代码如下

														var $extend =function(){
var args = arguments;
if(!args[1]) args =[this, args[0]];
 
for(var property in args[1])
      args[0][property]= args[1][property];
 
return args[0];
};
Object.extend= $extend;

他的使用方法和 prototype 完全一样.

但是大家可能注意到了这句 if (!args[1]) args = [this, args[0]]; 这句的纯在使得下面的代码写法成为可能.

														var myObjcet={....};
 myObjcet.extend=$extend;
 myObjcet.extend(objA);
 myObjcet.extend(objB);
 myObjcet.extend(objC);

简单的一句话,让extend的用法增加了更多的灵活性,不得不赞一个了!!!

下面说说重点, moo的类里的extend和 implement
先说 implement,之前已经说了一些了

														var MyClassA =newClass();
MyClassA.implement({
   methodA :function(){... }
});

执行后 MyClassA 将拥有 methodA.

implement用来向类中添加属性和方法(会覆盖同名属性和方法),相当于
Object.extend (MyClassA.prototype , {… } )
但是Object.extend 不支持多个source,implement可以,示例如下:
MyClassA.implement( objA , objB, objC … );

下面来看看moo的Class.extend.
moo的Class.extend才是我们期待的真正的"类继承",看一下官方的示例

														var Animal =newClass({
    initialize:function(age){
this.age= age;
}
});
var Cat = Animal.extend({
    initialize:function(name, age){
this.parent(age);//will call the previous initialize;  			
this.name=name;
}
});

看那个parent() !!!!
通过moo的Class.extend实现的继承提供一个关键的方法 parent().
使用他你可以调用父类中的同名方法,好像java里的super一样.
这个示例已经可以说明一切了.

关于prototype和moo的类机制和继承机制的对比就到这里,孰优孰劣大家心里应该有数了吧.

三.抽象对象

再来看一看"抽象对象". 这个虽然对于开发人员来说用处不大,但还是对比一下吧,小细节也能看出作者的用心.

Prototype
prototype的抽象对象很简单
var Abstract = new Object();
具体的意义不大.

Mootools
moo的的抽象对象相对更完善一些.

														var Abstract =function(obj){
    obj = obj ||{};
    obj.extend= $extend;
return obj;
};

支持自定义抽象(以参数形式传入),同时会为抽象对象自动添加extend方法.

四. 关于 $()

Prototype
prototype的$大家都比较熟悉了, 工作原理就是
通过id取得一个页面元素(或者直接传入一个页面元素对象),然后给他增加一些prototype提供的方法和属性,来方便开发人员对页面元素的使用.

Mootools
moo在这方面做的差不多.
不同的主要有两点, 首先moo为页面元素增加的方法和属性与prototype的不同(这个稍后会介绍),另外一个不同是moo的$兼具了对象管理的一个功能.
他引入了一个 Garbage 类, 来对页面元素进行一个统一的管理和回收(主要是回收).
可以更好的减少js(或浏览器)造成的内存泄露等问题.

具体的大家可以看一下代码,在这里就不详细说明了.

五.关于 Array Enumerable Hash

prototype 和 moo 都提供了集合迭代方法 (each)
这个网上已经有一篇不错的对比文章,我就不在这里重复了
http://blog.fackweb.cn/?p=50.

moo的 forEach/each方法: function(fn, bind){..}
那个bind 结合代码和上面那篇文章, 大家应该可以很好的看出来prototype和moo的不同与优劣.

prototype里面有 Enumerable 的概念,moo没有.
但是我个人一直觉得 Enumerable 比较鸡肋.
在实际开发中,很少使用.
Enumerable的功能完全可以用普通json对象或者是 Hash来实现.
moo的作者也许同样这么认为.所以不再设置一个鸡肋的 Enumerable类.
但是请大家放心, Enumerable 能做的事情, 在moo里也能完成.

可以理解为

moo的 Array + Hash +{} 完全可以接替 prototype的 Array + Enumerable + Hash +{}
当然对于一些工具方法两者提供的都不太一样,不好比较,但是那些方法都是附属品.
我们完全可以自己来实现,所以不在这次的比较范畴之内.

六. 关于 Element

两者的 Element 从作用上看类似.都是一种对页面元素的包装,为页面元素添加了一些诸如 addEvent remove style之类的方法.
但是大家通过看代码可以发现 moo的实现明显更简洁更OO.

同时还有一个关键的不同,prototype又提取出了一个Form对象,里面包含了很多表单相关的方法.
同时还衍生出了 serializeElements Method 等等很多类和方法,代码瞬间变得异常复杂和难以琢磨.

而moo中没有Form对象,在moo中,Form本身就是一个Element 他没什么特别的,这样的思想类似components模式
普通Element具备的方法 Form 都应该具备, Form具备的方法 Element也都应该包含.form 和其他页面元素没什么不同.
form元素只是一个包含了 input select textarea等子元素,同时拥有action target等属性而已.
一个div 一个span 一个td… 同样可以包含input select textarea子元素,同样可以拥有.action target属性.
浏览器处理他们的方式可能不同,但是在moo面前,大家完全平等.

其实prototype里 form和普通页面元素几乎也是平等的,但是问题就是,既然是平等的,又何必硬生生的造出Form以及那么多的衍生物呢?

七.Ajax

Prototype
prototype的ajax实现主要是靠一个 Ajax类来实现.(但是这个类形同虚设,大家更多的是和 Ajax.Request 类打交道.

先来看一个prototype下一个简单的ajax提交实例:

														var myAjax =new Ajax.Request(
     url,
{
     parameters: myData ,
     onComplete: callBackFunction 
}
);

其中 myData 可以是字符 : "name=Vickey&gender=female";
也可以是对象 { name : Vickey, gender : female }

Mootools
moo首先在将ajax机制分层.提取出了一个基类:XHR.
目前XHR有两个子类, 一个是 Ajax ,另一个是Json.Remote.

在moo下一个简单的ajax提交实例:

														var myAjax =new Ajax(
    url,
{
     data : myData ,
     onComplete: callBackFunction  
}
).request();

大家可以看到request成为了Ajax对象的一个方法,这样的设计显然是更合理更自然也更OO的.

而且关键的一点是,你可以提前创建好你需要的ajax对象.在需要发出请求时再发出请求.

1
2
3

														var myAjax =new Ajax(...);
.....   
myAjax.request();

同时还有一个重要特性, request是支持参数的,这个参数就是你要提交的数据.

也就是说,你可以在new Ajax时不指定数据或者指定一个默认数据.
在提交的时候可以提交另一个data.如.

myAjax.request(yourData);

其中data可以是字符串,可以是对象, 也可以是一个页面元素.

要用ajax提交一个form 或者一个 div下的所有表单元素,只是改变一下 myData.
var myData= $("formID"); // var myData= $("divID");
然后就和普通的ajax提交完全一样了.

myAjax.request(myData);

当然还有更oo的方式 :
myData.send({onComplete: callBackFunction });

用后一种方式的时候要保证提交的元素有action属性,没有你就赋一个 myData.action=url.
prototype里如何实现这一功能呢??

Prototype
Form.request($("formID") ,{ onComplete: callBackFunction });

当然prototype里也可以类似moo的做法 , 只要让myData=$("formID").serialize(true) 就可以了.
但是这一个小小的不同,反映出了设计上的差距.

Mootools
moo的Json.Remote类,简单,但是很实用:

														var jSonRemoteRequest =new Json.Remote(
  url ,
{
   onComplete:callBackFunction 
}
).send({name:'Vickey',gender:'female'});

这个类和Ajax类的本质区别是,
他提交的是一个序列化后的 json字符串("{name: ‘Vickey’,gender: ‘female’ } "),而不是把 json对象转化成QueryString ("name=Vickey&gender=female");

结束语

写这篇文章不是要批评prototype,以我现在的水平还没那个资格.
只是和mootools对比后, prototype在设计上的不足立刻就显现了出来.

虽然prototype新版本变化很多,很多我上面提到的一些不足都改正了,而且也加入了很多以前不具备的新的特性.
但是prototype现在的发展停留在:"修补不足,增加功能"的阶段,而没有从设计上进行深层次的重构,所以我不认为他在mootools面前有足够的底气.

至于jquery我没有深入研究过,但是它的设计觉得完全是prototype风格的, 注意,我说的是设计风格,而不是代码风格.
代码上他可能写的更精妙,更有趣,但是设计上依然是prototype风格:薄弱的类机制,靠简单的extend支撑起整个系统.
JQuery在很多方面很出色,但是归根结底他和prototype走在一条路上,只是在有些方面他走的更快.

mootools并非完美无缺,但是至少现在他美的地方比prototype更多,缺的地方比prototype更少.

所以,我选择mootools. 你呢??

不要听评论,不要看介绍, 只要看看他们的源代码, 同时动手用他们写些东西, 你的答案自然会浮现出来.

幻海蓝梦 2010-07-20 11:44 发表评论

Mootools ---DOM操作

幻海蓝梦 — Mon, 19 Jul 2010 11:47:00 GMT

原文：http://www.bianceng.cn/webkf/mootools/201007/18103_2.htm
Mootools DOM操作
Ajax开发中，做的最多的就是对DOM的操作，增删节点，设置样式等等等等，如果按照常规的javascript开发的话，工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫，对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题)，让我们的开发事半功倍。

mootools也提供了一套非常出色的解决方案，并且更OO。

首先，之前，通常我们创建DOM节点，都使用document.createElement()方法，而我们看mootools式的创建方法：

js 代码

1.var myInput = new Element('input');
非常的优雅啊。

方法： $

美元，又见美元！

$基本上成了javascript框架中的标志性建筑了，短小精悍的语法使我们的代码看起来舒服不少，也使我们的js文件瘦了下身。

时下，各大javascript框架中都会提供$这个方法，基本上它都有按照id来获取DOM元素的功能，但各个框架在具体诠释它的时候各有不同的手法，功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素，而jQuery里的$更是非常强，可以按照CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的，只不过是$$这个方法)。

这是mootools中的$()的最常用用法，它返回id为my_div的元素，并且这个元素被加上了所有mootools所进行的扩展。

js 代码

1.var mydiv = $('my_div');
如果你使用document.getElmentById来获取的元素，则此时这个元素将没有包含mootools的任何扩展，你可以把这个元素对象作为参数调用$方法，之后返回的元素将被加上mootools的扩展。

js 代码

1.var mydiv_noextend = document.getElementById('my_div');
2.var mydiv_extended = $(mydiv_noextend);
方法： $$

功能：通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)

js 代码

1.$$('a'); //获取页面上所有超链接标签对象
2.$$('a','b'); //获取页面上所有超链接标签和粗体标签
3.$$('#my_div'); //获取id为my_div的元素
4.$$('#my_div a.myClass'); //获取id为my_div的元素子元素，并且这些自元素是的所有class="myClass"的标签

=================================Element扩展方法=====================================

方法： inject

作用：可以用来把当前元素插入到指定元素之前(before)，之中(inside)，之后(after)。

java 代码

1.$('myDiv3').inject($('myDiv1'),'before'); //把myDiv3插入到myDiv1之前

方法： injectBefore

作用：可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)

js 代码

1.$('myDiv3').injectBefore($('myDiv1'));

方法：injectAfter

作用：可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)

js 代码

1.$('myDiv3').injectAfter($('myDiv1'));

方法：injectInside

作用：可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)

js 代码

1.$('myDiv3').injectInside($('myDiv1'));

方法：adopt

作用：可以在当前元素中插入指定元素(参数可以是元素id，元素引用，html元素tag名)

js 代码

1.$('myDiv').adopt($('myDiv1'));
2.$('myDiv').adopt('myDiv1');
3.$('myDiv').adopt('button');

方法：remove

作用：删除元素

js 代码

1.$('myDiv').remove();

方法：clone

参数列表：

contents - 是否连带节点的内容进行复制(deep clone)，如果不指定，则连带。

作用：复制元素

js 代码

1.$('myDiv').clone();
2.$('myDiv').clone(false); //只复制myDiv本身，不复制其content和子元素

方法：replaceWith

作用：用其他元素替换当前元素

js 代码

1.var a = new Element('button');
2.a.value = 'test';
3.$('myDiv1').replaceWith($(a));

幻海蓝梦 2010-07-19 19:47 发表评论

用wz_jsgraphics.js（javascript图形库）进行画矢量图,兼容多浏览器

幻海蓝梦 — Wed, 14 Jul 2010 03:22:00 GMT

原文： http://squll.blogbus.com/logs/3932957.html
序：在 www.sitepoint.com 上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/ ，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页上画出漂亮的矢量图形了。进入这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ，映入眼帘的是折线、多边形、圆等常见的一些几何图形，起初我以为不过是一些图片罢了，当我看到这行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后，并细细阅读了关于它的说明后，才意识到除了VML 和 SVG可以在网页上绘制显示矢量图形，仅用DHTML 和 Javascript 同样可以做到这一切！是不是觉得很吃惊呢？(双击一下这个文档，看看放大后的矢量图形吧)，ok!废话少说，下面我将详细介绍一下这个图形库。

★ 总览 (overview)

该图形库使用了 DHTML 和 Javascript 技术，它可以画线，圆，椭圆，折线，多边形，矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的，另外，使用这个图形库画出的图形是完全被优化到像素级的！

★ 浏览器的兼容性

Linux 系统 :
Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.

Windows 系统 :
Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

说明：如果在网页全部加载完成后，使用这个矢量图形库进行绘制，在 Opera 版本 7 以前的浏览器中不会执行， Netscape 版本 4 也不会执行。相反，当 HTML 页面正在被解析时，使用这个图形库进行绘制是全部浏览器均能做到的。

★ 怎样使用这个矢量图形库？

1 ．包含这个库

插入下面的代码到你的 html 文件的开头部分（在和之间）：

2 ．使用层（ div 或 layer ）作为画布（ canvases ）
如果是当页面正被载入时，直接在 html 页面中绘制，那么这个步骤不是必须的。

如果在页面加载完成后绘制，应该设置几个具有绝对坐标的层，作为你的画布，每一个层应该有一个唯一的 id:

...

3 ．下载并保存这个图形库

到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下载，将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中，如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下，记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。

★ 怎样使用这个矢量图形库中的绘制函数？

1 ． 创建一个 jsGraphics 对象

a) 在页面完全载入后绘制：

（这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行）

还记得前面用 div 元素创建的画布吗？看下面的示例，需要为 div 创建相应的 jsGraphics 对象，这些代码必须插入到相关的 div 元素结束标志后面，但必须在的前面， div 元素的 id 作为 new jsGraphics(); 的构造参数，像下面这样：

如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：

b ）在页面载入的时候绘制
（在 Netscape 4 和 Opera 5/6 可以执行）

只需要将构造参数设为空：

你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。

2. 图形绘制函数

为确保所有浏览器能正确执行，这里选择页面载入时进行绘制，即上文的 b 方式

一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：

开始画时应首先选择画笔颜色，否则，画笔的颜色取默认值－黑色。坐标值作为绘制图形方法的参数，如果采用上文的 a 方式构造图形对象，那么坐标值是相对于 div 元素的左上角的。每一个画布（图形对象），它的 paint 方法必须被显示的调用以产生 html 格式的图形，否则，在你的屏幕上什么都不会发生。

函数名（方法）	示例代码（用 jg 图形对象）
setColor( "#HexColor" ); 指定画笔颜色，一旦设置后，这个颜色会一直保留，直到下一次再重新指定画笔颜色，这个颜色值可以类似于 html 中的 #rrggbb 颜色表示，用名称表示颜色也可以，例如：“ maroon ”	jg.setColor("#ff0000"); or with identical result jg.setColor("red");
setStroke( Number ); 指定画笔采用的线厚度，这个厚度一旦被设置，会一直保留，直到下一次重新指定一，默认厚度是 1px. 要设置点划线型，需要传 Stroke.DOTTED 参数，点划线型同样适用于矩形，多边型，折线和椭圆。	jg.setStroke(3); or jg.setStroke(Stroke.DOTTED);
drawLine( X1, Y1, X2, Y2 ); 画线。从第一个坐标点到第二个坐标点，线的厚度由 setStroke 设置。	jg.drawLine(20,50,453,40);
drawPolyline( Xpoints, Ypoints ); 一条折线是一系列线段的集合， Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明： var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5);	var Xpoints = new Array(10,85,93,60); var YPoints = new Array(50,10,105,87); jg.drawPolyline(Xpoints,Ypoints);
drawRect( X, Y, width, height ); 一个矩形的外边线。参照左上角的坐标点，并指定矩形的宽度和高度。	jg.drawRect(20,50,70,140);
fillRect( X, Y, width, height ); 填充矩形，参照左上角的坐标点，并指定矩形的宽度和高度。	jg.fillRect(20,50,453,40);
drawPolygon( Xpoints, Ypoints ); 多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明： var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5); 如果始点和终点末被指定，多边线将会自动闭合。	var Xpoints = new Array(10,85,93,60); var Ypoints = new Array(50,10,105,87); jg.drawPolygon(Xpoints, Ypoints); Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.
fillPolygon( Xpoints, Ypoints ); 填充矩形。参数作用见 drawPolygon()	jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));
drawEllipse( X, Y, width, height ); 画椭圆边线。参照椭圆的外接矩形， x 和 y 是这个外接矩形的左上角坐标	jg.drawEllipse(20,50,70,140); or jg.drawOval(20,50,70,140);
fillEllipse( X, Y, width, height ); 填充椭圆。参数见 drawEllipse()	jg.fillEllipse(20,50,71,141); or jg.fillOval(20,50,71,141);
drawString( "Text", X, Y ); 写文本至由 x 和 y 坐标指定的位置。不同于 Java ，坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义，举个例子： "Some Text more Text" 会被转义为两行 setFont( "font-family", "size+unit", Style ); 在 drawString() 之前调用。指定字体，大小，样式，字体和大小可以是与 HTML 中指示的一样，至于样式，可以使用的有： Font.PLAIN 默认样式，非粗体和斜体 Font.BOLD 粗体 Font.ITALIC 斜体它们可以结合使用	jg.setFont("arial","15px",Font.BOLD); jg.drawString("Some Text",20,50);
drawImage( "src", X, Y, width, height ); 在指定的位置画图像， ”src” 参数指定图像所在路径， width 和 height 参数允许调整图像宽高。	jg.drawImage("friendlyDog.jpg", 20,50,100,150);
paint(); 必须显示调用，才能真正在 html 页面上画图形，不推荐每隔一段（每画一个图形）就调用一次。像下面这样的调用应该避免 : jg.drawEllipse(0, 0, 100, 100); jg.paint(); jg.drawLine(200, 10, 400, 40); jg.paint(); ... 像下面这样的调用性能会很高 : jg.drawEllipse(0, 0, 100, 100); jg.drawLine(200, 10, 400, 40); /... 还有其它画的方法 ... / jg.paint(); // 最后调用 paint()	jg.paint();
clear(); 与图形对象关联的 div 画布中的图形被清除（在 div 中不是由这个图形对象创建的内容是不会被改变的）	jg.clear();
setPrintable( true ); 默认情况下，打印这些图形是不太可行的，因为浏览器的默认打印设置中会关闭打印背景，调用 setPrintable() ，并设置参数为 true ，将重置图形为可打印的（至少在 Mozilla/Netscape 6+ and IE 中）

幻海蓝梦 2010-07-14 11:22 发表评论

ZK + Spring + Hibernate最简单的例子

幻海蓝梦 — Sun, 11 Jul 2010 08:25:00 GMT

原文：http://chanson.javaeye.com/blog/164786
1、Spring+Hibernate配置起来很简单，具体就不细说了，网上多的是。

2、ZK显示页面
【query.zul】














《说明》：
A、
这个别忘记了，刚学的时候就是因为它报了不少错误。
B、use="chanson.common.web.ui.ListTestBean"
这个类就是衔接前后台的关键类。
C、${*.*}这个是标准的EL写法。

3、ListTestBean——最关键的衔接类
public class ListTestBean extends Listbox {

    public void onCreate() {
    ITestLogic testLogic = (ITestLogic) SpringFactory
.getBeanFactory().getBean("testLogic");
    List testList = testLogic.find("from Test");
        Iterator it = testList.iterator();
        while(it.hasNext()) {
            Test test = (Test) it.next();
            Long id = test.getId();
            String name = test.getName();
            Integer sex = test.getSex();
            Date birthday =test.getBirthday();
            Double money = test.getMoney();

            Listitem listitem = new Listitem();
            listitem.setValue(id);
            listitem.setParent(this);

            Listcell nameCell = new Listcell(name);
            Listcell sexCell = new Listcell(sex.toString());
            Listcell birthdayCell = new Listcell(birthday.toString());
            Listcell moneyCell = new Listcell(money.toString());
            nameCell.setParent(listitem);
            sexCell.setParent(listitem);
            birthdayCell.setParent(listitem);
            moneyCell.setParent(listitem);
        }
     }
}
《说明》：
A、例子是一个简单的查询，所以看起来也比较简单。
B、该类的作用有点像似servlet，只是省略了页面跳转
C、setter/getter真是麻烦，得找找更简洁的方法

【附录】
1）、数据库设计——test表
CREATE TABLE `test` (
`id` decimal(22,0) NOT NULL default '0',
`name` varchar(100) default NULL,
`sex` int(1) default NULL,
`birthday` datetime default NULL,
`money` decimal(15,4) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2）、其他应该没什么了吧？
3）、页面效果图

幻海蓝梦 2010-07-11 16:25 发表评论

ZK--学习研究1/2/3

幻海蓝梦 — Sun, 11 Jul 2010 08:01:00 GMT

原文：http://jerrysun.blog.51cto.com/745955/280525
由于工作的变动，已经很久没有更新Blog了。来到新公司又马不停蹄的开始了自己的工作，现在终于可以忙里偷闲了，呵呵。

　　虽然说新公司的业务和自己之前从事的是两个领域，不过好在技术还是Java，而且在新公司的第一个项目还和之前的一样，开发一个内容管理系统，哈哈，这个可是我比较擅长的。在经历两月的时间之后，终于满足了需求的内容，顺利上线。不过又出了新问题，就是界面比较难看，这时领导提议说“要不你用ZK改造吧，公司之前的系统也是ZK做的”。这个提议倒是不错，不过对于我来说又是一个挑战。

　　google了一下，发现ZK在国内使用的不是很多，资料也不是很全。只能是摸着河过石头了。不会写，还不会抄吗，先下载ZK官网的Demo看看再说

　　下了Demo，搭建环境，运行，发现ZK确实比较好用，非常类似于微软的.Net，它提供了很多组件，使用这些组件可以很快的进行开发。我认为ZK最好的地方在于code-behind，这一点和.Net是非常类似的。这样就不用再像写JSP的时候那样将一些具体的操作代码写到页面中，使页面代码非常难阅读；而它又比WebWork更加灵活，有些东西不需要再重新修改WebWork中的组件（由于敝人对于WebWork的使用不是很精通，请各位WebWork、Structs达人不要拍砖）。

　　也许是我接触的东西少吧（作为一个程序员，实在是惭愧啊），总之ZK让我觉得很容易上手，后面的应用也说明了这一点。

书接上回，前面说了那么多，到底ZK有啥好处呢？这个就只可意会不可言传了，呵呵。

　　举个例子，假设有个列表需要显示，在页面中可以使用table或者是ul li来实现，table的代码如下：

"0" cellpadding="0" width="90%" border="0"class="table_cont">

<%
 //判断列表是否为空
 if(activeList==null || activeList.isEmpty() || activeList.size()<1)
 {
 //为空，显示提示信息
 out.print("");
 }
 else
 {
 //不为空，显示列表内容
 out.println("\n\n");
 Iterator iter = activeList.iterator();
 Active active = null;
 while(iter.hasNext())
 {
 active = (Active)iter.next();
 out.println("");
 out.print("");
 if(active.getCreateDt()!=null)
 {
 out.print("");
 }
 else
 {
 out.print("");
 }
 if(active.getStatus()==1)
 {
 out.print("");
 }
 elseif(active.getStatus()==2)
 {
 out.print("");
 }
 out.print("");
 out.println("");
 }
 }
%>

名称	活动日期	状态	操作
目前 "+strProvinceName+" 还没有活动
"+active.getTitle()+"	"+active.getCreateDt().toString().substring(0,10)+"		上线	下线	+province+"&activeId="+active.getId()+"\">修改 "); out.print("+province+"&activeId="+active.getId()+"\">删除

　　效果图如下：

可以看出其中有一些的判断，然后还要担心“<%”和“%>”是否匹配，“{”和“}”是否匹配等等情况。如果是ZK的话，这些不必要的担心就可以省去了。

　　页面（list.zul）代码：

xmlversion="1.0"encoding="UTF-8"?>
pagetitle="列表"contentType="text/html;charset=UTF-8"?>
<zk>
<windowstyle="heigth:100%; border:0; text-align:center;"id="winList">
 <stylesrc="../styles/global.css">style>
 <divstyle="padding-top:20px; vertical-align:bottom;">
 <labelvalue="列表"/><separator/>
 div>
 <divstyle="padding:0px 0px 0px 0px;text-align:center;width:80%;">
 <labelid="lblTips"visible="false"style="color:#FF0000;"/>
 <listboxid="blacklistList"style="width:100%;">
 <listheadstyle="text-align:center;">
 <listheaderlabel="用户号码"style="width:15%;"/>
 <listheaderlabel="用户类别"style="width:15%;"/>
 <listheaderlabel="说明"style="width:35%;"/>
 <listheaderlabel="添加日期"style="width:15%;"/>
 <listheaderlabel="操作"style="width:20%;"/>
 listhead>
 listbox>
 div>
 <zscriptlanguage="Java">
 import com.zk.list;
 list ui = new list();
 ui.setWinMain(winlList);
 ui.showAllBlacklist();
 ]]>
 zscript>
window>
zk>

　　逻辑处理代码（list.java）：

publicvoid showAllBlacklist()
{
  try
  {
    // 得到列表
    BlacklistIF blacklistIf = ServiceLocator.getBlacklistIF();
    List blacklistList = blacklistIf.findAllBlacklist(-1);

    // 判断列表是否为空
    if(blacklistList.size()>0 && !blacklistList.isEmpty())
    {
      this.showList(blacklistList);
    }
  }
  catch(Exception ex)
  {
    ex.printStackTrace();
  }
}

privatevoid showList(List blacklistList)
{
  // 得到列表组件，用于显示群发安排列表
  Listbox listbox = (Listbox)winMain.getFellow("blacklistList");

  // 列表的行组件
  Listitem listitem = new Listitem();

  // 列表的列组件
  Listcell listcell = new Listcell();

  for(int i=0;i  {
    // 用户号码
    listcell.setLabel(blacklistList.get(i).getMobile());
    listitem.appendChild(listcell);

    // 用户类别
    listcell = new Listcell();
    switch(blacklistList.get(i).getType())
    {
      case 1:
        listcell.setLabel("黑名单");
        break;
      case 2:
        listcell.setLabel("黄名单");
        break;
      case 3:
        listcell.setLabel("绿名单");
        break;
      case 4:
        listcell.setLabel("非彩信用户");
        break;
    }
    listitem.appendChild(listcell);

    // 说明
    listcell = new Listcell();
    if(blacklistList.get(i).getDescription().equals(""))
    {
      listcell.setLabel("暂无");
    }
    else
    {
      listcell.setLabel(blacklistList.get(i).getDescription());
    }
    listitem.appendChild(listcell);

    // 添加日期
    listcell = new Listcell();
    listcell.setLabel(blacklistList.get(i).getCreateDate().toString().substring(0,10));
    listitem.appendChild(listcell);

    // 显示操作按钮
    Hbox hbox = new Hbox();

    // 彩信产品的id，添加事件监听时要用final修饰的变量
    finalint id = Integer.parseInt(blacklistList.get(i).getId().toString().trim());
    // 添加一个查看按钮
    Button button = new Button();
    button.setLabel("查看");
    // 为查看按钮添加一个
    button.addEventListener(Events.ON_CLICK, new EventListener()
    {
      publicvoid onEvent(Event arg0) throws Exception {
        showBlacklistDetail(String.valueOf(id));
      }
    });
    button.setVisible(false);
    hbox.appendChild(button);

    // 添加一个删除按钮
    button = new Button();
    button.setLabel("删除");
    // 为删除按钮添加一个
    button.addEventListener(Events.ON_CLICK, new EventListener()
    {
      publicvoid onEvent(Event arg0) throws Exception {
        delBlacklist(String.valueOf(id));
      }
    });
    hbox.appendChild(button);

    listcell = new Listcell();
    listcell.appendChild(hbox);
    listitem.appendChild(listcell);

    // 将当前行在列表中显示
    listbox.appendChild(listitem);

    listitem = new Listitem();
    listcell = new Listcell();
  }
}

　　效果图如下：

　　可以看到，这样就达到了逻辑处理和页面显示的代码分离，使得页面显示的代码更加清晰，而逻辑处理类的作用也更加明显。
前面已经看见效果了，咱们就来开始实际应用它吧。首先要做的是搭建开发环境，访问ZK的官方网站http://www.zkoss.org/，在页面的顶部导航，或者右侧可以看到download，点击download进去，在页面的Downloads列表中选择第二项“ZK studio”，这时会进入另一个页面，此时我们只要在MyEclipse中的插件管理面板中将“Online Installation”下面的地址粘贴进去，点击OK就好了。接下来就是等待MyEclipse帮我们把ZK插件安装好。

　　安装好以后，会弹出一个对话框，要输入用户名和密码，这个只要在ZK的网站上注册一下就好了。我尝试过不输入用户名、密码，结果ZK不能正常使用了

　　开发环境有了，接下来就是来编写我们的第一个ZK工程了。在MyEclipse中选择file->new->project 然后选择ZK Project，然后next，输入工程名，finish就可以了。这时会询问是否切换到ZK的编辑面板，这个就因人而异吧，自己喜欢就好。

　　在ZUL文件的代码中，你会看到“New Content Here!” 这句话，把它替换成你自己想写的内容，保存，然后部署到Tomcat下，访问这个ZUL文件，就能看到效果了。

　　效果图如下：

　　代码如下：

pagetitle="new page title"contentType="text/html;charset=UTF-8"?>
<zk>
<windowtitle="new page title"border="normal">
我的第一个ZK页面，hoho
window>
zk>

　　嘿嘿，第一个ZK页面出来喽

幻海蓝梦 2010-07-11 16:01 发表评论

ZK--如何使用JSP

幻海蓝梦 — Sun, 11 Jul 2010 07:55:00 GMT

原文：http://hi.baidu.com/zk_ajax/blog/item/883b0f36030da1dca3cc2bb3.html
Zk 使用的是 zul ，据说是 xul 的扩展，反正对于我这种用惯 JSP 的人实在不习惯，于是便尝试并搜索着如何将 zk 整合到 JSP 中，还真找到了，不过 JSP 文件就必须严格遵守 XML 格式了，例如 就得写成
或

了，刚开始狂报错，基本上都是标签未关闭，实在不惯啊。哈，进正题了。

还记得那个 zkajax 工程吗，打开它，然后打开 web.xml 文件 ( 如果不知道这个文件的位置，我就该哭了 ) ，如果出现的是图形，就点下面 Source 即可出现代码。

在标签的前面添加如下的 filter(Ctrl+Shift+F5 可以对齐文本 )

zkFilter

org.zkoss.zk.ui.http.DHtmlLayoutFilter

extension

html

zkFilter

*.jsp

REQUEST

INCLUDE

FORWARD

ERROR

在 WebContent 目录下新建一个 test_jsp 文件，内容如下

<%@ page language="java" pageEncoding="UTF-8"%>

测试 zk jsp

测试 zk jsp" border="normal" width="100px">

测试 zk jsp

在这文件上点右键 ->Rin As->Run on server, ，即可看到运行结果，大概是下图的样子：

是不是字体很小？我觉得太小了，于是我修改 css 文件中的字体，我把大部分该成了 10pt ( 原来为 x-small 或 xx-small ) ，此文件为与 zul.jar\web\zul\css\normie.css.dsp ，然后再运行就是下图的样子了：

感觉到变化了吧。

幻海蓝梦 2010-07-11 15:55 发表评论

ZK DEMO--在本地部署环境

幻海蓝梦 — Sun, 11 Jul 2010 07:53:00 GMT

原文：http://hi.baidu.com/zk_ajax/blog/item/05c0f61133ce3d7fcb80c476.html
班主任让人帮忙做一个教师管理系统，我看着是一个机会，就跟一位同学去了。算是接下了一个项目。另我吃惊的是可以有一小笔收入，心中暗喜。

接下来不好过了，后台技术足够了 , 缺一个做界面的，要是 dorado 不付费早用它了。接下来费了好大劲终于找到了一个开源的东西 ---zk ，一个作界面的不二之选。

扯远了，接下来是正题。

可以在 http://www.zkoss.org/ 上下到有关 zk 需要的东西，我用的版本是 zk-2.3.0.zip 。

下面介绍如何在 eclipse 部署 zk 环境

(1) 打开 eclipse, File->New->Project->Web->Dynamic Web Project ，即新建一个动态网站，工程名为 zkajax 。我个人倾向于在 Java Psrspective 环境下工作。

(2) 将 zk-2.3.0\demo\src\zkdemo\WebContent 下的文件放在工程中的对应位置

(3) 将 zk-2.3.0\zk-2.3.0\dist\lib 下的所有 jar 引入路径 ( 放在 WEB-INF/lib 下 )

(4) 将 zk-2.3.0\demo\src\zkdemo\src 下的 java 文件放在工程的三 src 下

(5) 最后是下图的样子

(6) 运行，在工程 zkajax 上点右键 ->Run As->Run on Server ，选中 tomcat ，点 Finish 即可，网页出来后点 Zk Demo ，效果图如下：

幻海蓝梦 2010-07-11 15:53 发表评论

10种加速Ajax开发的主流框架

幻海蓝梦 — Thu, 08 Jul 2010 01:19:00 GMT

原文：http://www.slfans.com/?action-viewnews-itemid-17119　
1. APS.NET的官方解决方案
　　ASP.NET AJAX
　　网址：ajax.asp.net

　　ASP.NET AJAX是微软.NET平台上的解决方案，提供涵盖伺服器端与用户端所需的AJAX技术与JavaScript整合机制。

　　透过与下载与安装ASP.NET AJAX到Visual Studio 2005当中，即可利用预设的控制项，开发出一些视觉特效与非同步传输的应用。

　　另外，ASP.NET AJAX也提供控制项的Toolkit，包含开发人员想自行开发AJAX应用时所需的基底类别与专案范本。

　　ASP.NET AJAX除了处理浏览器的相容性问题，也让用户端的JavaScript在开发时加入物件导向特性，例如型别系统、资料型别、命名空间、事件等，使得程式码更容易除错、维护与重复使用。

　　虽然ASP.NET AJAX提供伺服器与用户端的解决方案，透过Visual Studio2005加持，也让开发、除错的难度降低，不过和其他AJAX框架相比，许多AJAX效果和功能都还在测试阶段（在CTP版本中供用户测试），可以应用的功能有限。

　　2.支援「上一页」与加入「我的最爱」功能
　　Dojo
　　网址：dojotoolkit.org

　　一些轻巧的Ajax框架，用意在解决JavaScript遇到的易用性或特效问题，相较之下，Dojo更像是个面面俱到的JavaScript 工具套餐，号称可以降低网页或网页应用程式前端开发速度。

　　Dojo支援拖拉、淡出、淡入、移动、透明、操作SVG图档等动态效果，它的Widget也让使用者可以轻易使用选单，分页标签（tab）、树状结构、日历、文字编辑器等效果，当然也支援非同步处理的Ajax功能。

　　另外，Ajax由于以动态的方式操作文件物件，导致使用者习于使用上一页、下一页的功能无法使用，也无法利用像是「我的最爱」的功能，将使用者所需的页面留下正确的书签，但这些需求Dojo都已有解法。

　　比起其他轻巧型的Ajax框架，要摸熟Dojo显然要下较多的功夫才能掌握，目前文件较少也是个问题。不过由于它的功能更为完整，因此开发人员需要自行加工的地方就相对较少。

　　3.可由JavaScript呼叫Java语法
　　DWR(Direct Web Remoting)
　　网址：www.getahead.ltd.uk/dwr

　　DWR是设计给Java语言的Ajax框架，让开发人员可以利用JavaScript程式呼叫Java语法。

　　DWR的运作可分为两个部分，一方面用在浏览器上，处理连接伺服器端Java程式，另一部分则是用来展示回传资料。透过DWR呼叫Java的函式，它会处理连接处理的细节，而当资料被处理完成后，DWR就会执行回呼函式，以进行后续呈现的处理。

　　在安装DWR时必须编辑Web应用程式的部署描述档案，而且也要编辑DWR特定档案。 DWR配置档案指定了可以远端建立和呼叫的类别。档案中包含伺服器程式码的JAR档案，另外还有JavaScript档案，提供一些辅助函式，处理互动呈现的效果。

　　DWR最大的好处就在于让Java开发人员可以利用熟悉的语法来处理页面与资料，并且能配合Struts、Tapestry来使用。不过从用户端呼叫远端伺服器的Java程式，仍存在一些安全上的疑虑，在使用时必须注意。

　　4.以易用性、简化语法为目标
　　jQuery
　　网址：jquery.com

　　jQuery是最近大受瞩目的Ajax框架，它以Prototype为本，简化并提升JavaScript语法的功能。

　　jQuery有点像是将Prototype所做的事再推向极端，让使用者改变原有撰写JavaScript的方法。它最为人称道的地方，就在于强大的存取页面元素功能，无论是文件的节点、CSS的选取子或Xpath表达式，都能利用「$（）」函式快速存取，并赋予它更多的功能。

　　此外，它的chainable方法能将一串处理函式结合在一起，让程式码更为简洁。另外jQuery也提供一些动态效果，不过和其他框架相比，这部分就显得阳春许多。

　　jQuery的优劣其实都在同一件事情上，一方面它简化JavaScript的语法，让撰写程式更为简便，就好用的目的而言，的确是相当成功。然而这却让JavaScript的程式码会发展成另一种样子，对于初学者而言，一开始学习时，必须要花点时间去适应。

　　5.依功能需求，下载模组化工具
　　MooTools
　　网址：mootools.net

　　前身是以轻巧著称的Moo.fx，与Prototype有着相似的概念和语法，但在物件导向上做得更为彻底，而且在动画效果和互动行为上，提供更多的功能与应用，能让使用者更快的写出物件导向概念的JavaScript语法。

　　MooTools的下载档依模组分为核心、类别、原生语法、网页元素、浏览器视窗、动画效果、拖曳、远端传输与外挂程式，除了核心程式是必要下载之外，其他可依使用者需求，下载所需的JavaScript档案，借此减少档案的体积。

　　虽然MooTools将JavaScirpt物件导向化的结果做得更彻底，有利于程式的扩展与维护，不过也挑战原先熟悉JavaScript物件观的人，需要较多的时间适应。

　　不过无论是网站本身呈现、程式语法展示，甚至是模组下载介面，MooTools都展现相当精致的动态效果，参与网站的示范，很快就能实作。

　　6.大大扩充JavaScript基本功能
　　Prototype
　　网址：prototype.conio.net

　　Prototype不像其他框架，有许多炫人耳目的动态效果，而是专注在改良JavaScript本身的功能，让JavaScript更容易使用，也更具物件导向风格。

　　Prototype在简化JavaScript方法上，提供许多方便的语法，最著名的如「$（）」函式，只要将DOM节点的ID传入这个函式，就能取得这个节点物件，简化了DOM的操作方法。而这个方式也几乎成为其他开发框架延用的功能。其他如「$F（）」函数能直接处理Web表单元件的值，「$A（）」函数能将列举的字串转换成阵列等，都是Prototype经典功能。

　　在非同步处理上，它也提供了Ajax.Request、Ajax.Updater等类别，让开发人员在处理非同步运作时可以利用它提供的方法，让沟通行为更为容易、正确。

　　虽然Prototype没有太多花俏的功能，不过它简化JavaScript的特性，仍让许多Web开发人员衷情于它。

　　7.平顺、丰富的动画效果
　　Rico
　　网址：openrico.org

　　Rico是基于Prototype之上的Ajax框架，在西班牙文中，「rico」即为「rich」的意思，这也说明Rico的目标是提供开发人员利用JavaScript达到丰富的网页元件与应用。

　　Rico提供非同步的Ajax应用，可让非同步回应绕送到一个或多个回呼以操作DOM或JavaScript物件。在动画效果方面，支援如拖曳功能、缩放、过场、进度指标和黄褪技术等，可立即套用丰富的效果。

　　由于Rico志在让JavaScript也能表现出Flash般的动画效果，因此像是网页元件的颜色、形状或下拉效果的变化都相当平滑，也能让 DIV方块做出圆角的效果，让视觉表现更具Web 2.0风格。

　　Rico的LiveGrid功能同样是为人所称道之处。它能让表单资料产生更多元的表现方式，突破表格的检视行为。例如它可以让使用者在触动卷动轴时，动态下载资料，利用这种方式，可以分段下载，就无需采用分页检视的手法。

　　8. RoR与CakePHP的指定框架
　　Script.aculo.us
　　网址：Script.aculo.us

　　Script.aculo.us是建立在Prototype之上的Ajax框架，是解决视觉效果与互动行为的轻巧框架，Ruby on Rails及PHP上的开发框架CakePHP等，都是使用Script.aculo.us作为Ajax的解决方案。

　　在视觉效果上，Script.aculo.us利用改变透明度、大小、位置以及结合以上三种元素，产生更多种变化，例如淡进、淡出、闪动、提示等数十种视觉效果，可让页面效果更具变化，引导使用者与介面程式互动等。

　　在互动介面方面，提供了拖曳元件、就地编辑元件（In-Place Editor）、水平、垂直拉动卷轴、自动完成、元件排序、购物车等，这些预先打包成套的功能，解决了浏览器相容性的问题，也让使用者很容易可以直接导入在现有的专案功能中，节省自行开发的时间。

　　此外，Script.aculo.us包含单元测试（Unit Test）框架，可以利用本身的test物件，用来验证程式执行的状态，并且支援模拟滑鼠与键盘的功能。

　　9.有Yahoo!网站服务背书的框架
　　Yahoo! User Interface
　　网址：developer.yahoo.com/yui/

　　Yahoo! User Interface（YUI）是Yahoo!所提供的Ajax框架，提供便捷的开发方式与许多JavaScript函式库，使用者可以利用它来开发互动式的介面与Ajax效果。 YUI可分为三大部分，包含工具、CSS和控制元件等函式库，工具部分是核心物件，负责一些较底层的处理功能，CSS则提供像版面规画、字体工具。而控制元件则有自动完成、月历、树状结构这些工具。

　　由于YUI实际应用在Yahoo!的网站中，因此实作的可靠性相当不错，在YUI网站上也提供不少范例与文件，能协助使用者快速上手。虽然 YUI是由Yahoo!所推出，不过它遵循JavaScript的语法规则，并将样式、内容与行为分离，开发人员如果要扩充功能，也相当容易。

　　一般Ajax框架都需要置放在网站的伺服器端，随着页面一起下载，YUI除了采取这种方式之外，也提供使用连结的方式，使用者只要在应用的页面中将路径指向YUI主机即可。

　　10.适合Java开发环境的企业级解决方案
　　ZK
　　网址：www.zkoss.org

　　ZK是基于Ajax、XUL（XML User Interface Language）、Java网页应用程式的开发框架，让网页的操作行为可以像是桌面应用程式一般。

　　不同于用户端的Ajax解决方案，ZK由伺服器端出发，利用ZK处理Ajax互动的引擎，处理用户端的页面行为，也因此大为降低利用 JavaScript作为动态开发语法时，常遇到的浏览器相容问题。

　　ZK提供超过70个XUL组件及80个XHTML组件，因此一些网页或应用程式常见的功能，ZK都提供现成的工具可让使用者立即应用，只需利用 ZK以XML为基础的使用介面设计语言，即可产生这些组件。应用的人则可在后端利用Java语言进行来处理程式逻辑与资料传递。

　　由于ZK利用Java语言开发，属于以伺服器为中心的解决方案，因此必须安装支援Java的应用程式伺服器（如Tomcat）才能执行。

幻海蓝梦 2010-07-08 09:19 发表评论

ZK框架学习总结

幻海蓝梦 — Wed, 07 Jul 2010 12:32:00 GMT

原文：http://qa.taobao.com/?p=7145&cpage=1

1、ZK框架简介

ZK框架是一个用JAVA实现的简单但是功能强大的表现层框架。它包括了一个基于Ajax的事件驱动引擎、这也是它的最大特色。可以做到没有JavaScript，只通过ZUML(ZK User Interface Markup Language)这种标识语言即可做到界面创建和事件响应。

ZK的实现完全用java实现，开发过程中不会有任何的JavaScript代码，但是通过将zul文件（ZK的源文件，类似于jsp文件）通过ZK引擎编译后查看页面源代码，结果还是可以看到，ZK实现的本质还是通过 JavaScript+CSS来处理异步请求的。

组件是ZK中最常见的元素。有点类似于JAVA Swing或者VB这样的基于组件的编程。结合ZK Studio，可以达到可视化和动态地查看页面效果。

特征：

它是一个表现层工具。可以与hibernate,iBatis，spring等凡是与JAVA有关的结合构建一个完整的WEB应用。
以服务端为中心的框架。它封装了Ajax的后台处理技术。服务端由两个重要部分实现：ZK加载器，ZK异步更新引擎。前者负责解析URL请求，生成HTML页面；后者负责监听和处理客户端的Ajax请求，同时更新ZK组件的属性，然后将Ajax响应发回给客户端。
基于组件的GUI。页面的可视部分都是由组件构成。类似于HTML标签，但是比HTML标签更灵活。

不足之处：

ZK与JAVA结合紧密。由于ZK的组件都是由JAVA实现，所以对组件的控制也仅限于用JAVA语言。无法与控制层解耦。
学习资料和文档比较少。最全面的ZK应用其实还是官方的DEMO。连《ZK框架——Ajax开发实践》一书都是用的官方例子。所以对有些事件或者属性只有自己探索。
ZK的测试比较薄弱。对页面无法用工具进行测试。只能用手动测试。调试也不方便。出错了的话错误信息不明确，无法很快定位问题。

2、安装部署开发环境

2.1 工具及安装

需要安装的工具有JDK、Tomcat（或者其他服务器）、My Eclipse（或者Eclipse）、 ZK开发包、ZK Studio。JDK、Tomcat、My Eclipse安装都不用介绍了，主要介绍ZK相关的部门。我的环境是JDK 1.6.0_16+Tomcat 6+My Eclipse 6.0。

准备工作：

l 下载ZK包和demo。http://www.zkoss.org/download/zk.dsp。在Windows下开发选择zk-bin-5.0.2.zip，Linux 下选择zk-bin-5.0.2.tar.gz。下载好后还需要下载一个demo包。这个demo包里面包含了一些xml模板，创建ZK页面时可以根据模板快速生成。demo下载选择zk-demo-5.0.2.zip。

然后下载ZK Studio。ZK Studio是My Eclipse一个插件。提供了对ZK文件的时时查看和组件的可视化编辑以及一些通用页面原型。最好还是下载这个插件，方便开发。这个插件可在线安装或者直接下载。安装步骤可参考页面：
ZK Studio界面1

ZK Studio界面2

2.2 ZK环境的配置

解压zk-bin-5.0.2.zip，创建用户自定义库：在My Eclipse里面选择windows->Preferences->JAVA->Build Path->User Libraries。添加3个用户库。名字随便取，可以分别叫：ZK Ajax Frame、ZK Ajax Framework Extendsion以及ZK Ajax Framework Forge Library。分别对应zk-bin-5.0.2目录结构中dist下的lib、lib/ext以及lib/zkforget中的jar包。配置好后的用户库如下图：

: 自定义的用户库

添加xsd到用户xml catalog entry里。这是为了确保可以更好的地使用My Eclipse XML Editor的功能。打开window->preferences->My Eclipse->Files and Editors->XML->XML Catalog。添加zk-bin-5.0.2/dist/xsd/zul.xsd。

添加xml文件模板：将zkdemo\WebContent\WEB-INF下的lang-addon.xml、 portlet.xml，zk.xml和web.xml四个文件复制到My Eclipse安装目录下的myeclipse\eclipse\plugins \com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\xml。文件夹名字可能因为My Eclipse版本不同而不同。只要以com.genuitec.eclipse.wazardsXXX这样开头的文件夹就行。然后将这四个文件分别改名为：LangAddon.vtl、Portlet.vtl、ZK.vtl、ZKWeb.vtl。打开四个文件，将这一行都改成。继续在这个xml文件夹里面新建一个名为ZUL.vtl的文件。内容如下：

xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:schemaLocation=”http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul “>

修改 My Eclipse安装目录下的myeclipse\eclipse\plugins \com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710 \ templates.xml。在后面添加如下代码：

name=”XML template for a web.xml file with ZK capability”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/LangAddon.vtl”

name=”XML template for a lang-addon.xml file for ZK”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/Portlet.vtl”

name=”XML template for a port-let.xml file for ZK”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/ZK.vtl”

name=”XML template for a zk.xml file”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/ZUL.vtl”

name=”XML template for a *.zul file”/>

添加新的文件类型。打开window->preferences->general-content types，给Java Source File添加*.zs，给XML添加*.zul，给JSP添加*.dsp，给HTML添加*.zhtml。到此，ZK环境完全搭建完成。开发好的ZK应用可以直接打成war包进行部署。十分地简单。

3、快速搭建页面

有两种方式创建ZK Project。第一种方式是直接在ZK Welcome Page里面新建一个ZK工程，这样不用再添加ZK库。第二种方式是先创建一个Web Project，然后在Build Path里面添加刚才添加的三个User Libraries。然后在WebRoot里面添加zul文件即可。添加zul文件要选择新建XML Advanced Tempaltes文件。

打开zul文件可以选择Open with Zul Editor。这样便可以利用zk studio的可视化编程进行开发。

除了ZK自己提供的一些组件外，html的标签在ZK中完全可以继续用。但是为了避免ZK解释HTML标签，通常要使用将HTML标签围入其中。换言之，他们并不是子组件。而是被存储在content属性内。

组件可以从zk palet直接拖拉进代码区，然后可以在中查看和设置组件支持的所有属性和事件。其特点就是高效地组建页面。如果不添加任何JAVA代码，那么创建一个页面的效率不亚于直接用Axure创建界面原型。图4是一个界面demo。无任何js和CSS代码。当然，ZK框架并不排斥使用CSS代码。利用style属性可以设置CSS样式，还可以通过

BlogJava-jasmine214--love-随笔分类-Ajax

Mootool-Ajax 写法（包括其他JS库的）

MooTools vs Prototype 核心源码比较

前言

一. 类机制

二. 继承机制

三.抽象对象

四. 关于 $()

五.关于 Array Enumerable Hash

六. 关于 Element

七.Ajax

结束语

Mootools ---DOM操作

用wz_jsgraphics.js（javascript图形库）进行画矢量图,兼容多浏览器

ZK + Spring + Hibernate最简单的例子

ZK--学习研究1/2/3

ZK--如何使用JSP

ZK DEMO--在本地部署环境

10种加速Ajax开发的主流框架

ZK框架学习总结

原文：http://qa.taobao.com/?p=7145&cpage=1

1、ZK框架简介

2、安装部署开发环境

2.1 工具及安装

ZK Studio界面2 2.2 ZK环境的配置

3、 快速搭建页面

ZK Studio界面2

2.2 ZK环境的配置

3、快速搭建页面