AJAX without javascript by ZK

ZK是一个利用服务器端技术去实现AJAX功能的框架.在ZK的文档中这样描述(简译):

ZK是一个event-driven, component-based的实现胖客户界面进行WEB程序开发的framework. ZK包含一个AJAX-based  event-driven 引挚,丰富的XUL和XHTML组件,并且标识了一种新的误言叫做ZUML (ZK User Interface Markup Language)

使用ZK你可以用具有胖客户组件特性的XUL和XHTML组件来展现你的WEB程序以及操作它们以响应用户的事件.就如同在使用desk top a pplications一样.

和其它大多数的framework不同, AJAX是一个behind-the-scene技术.自动同步组件的内容以及很流畅的事件操作处理流程....

也许你已经明白了,在通常的AJAX框架中(如DWR),都是想办法将JAVA方法暴露给JS,以便可以在页面中随时调用(利用XMLHTTPREQUEST).而ZK相反,他积极的将页面上JS可以实现的内容尽可能的使用JAVA CODE来处理,也许你觉得很复杂,我们可以通过一个简单的HelloWord来看看ZK的特性.

在你已经将ZK安装在你所使用的Web Server5 上之后,写一个Application是非常快速的.创建一个文件叫做hello.zul, 按如下代码, 放在正确的目录下.

 <window  title="Hello"  border="normal">Hello  World!</window>

 然后,在浏览器中输入这个URL: http://localhost/myapp/hello.zul, 那么,你将会看到.

(具体图片示例,请看在线实例演示: http://www.potix.com/zkdemo/userguide/)

在一个Z UML页面中,一个XML元素标示将创建一个什么样的组件.在这个例子中,放入了一个

w indow (com.potix.zul.html.Window). XML属性被用来指定Window组件的成员变量值.

上例中,创建了一个具有标题和边的Window ,它们的值分别以title 和 border 的值设为" Hello"和 " normal".

 

文字在X ML元素中,同样被指定了一个名字Label作为组件而被使用.(com.poitx.zul.html.Label). 所以上面的例子相当于如下代码:

 

<window   title="Hello"   border="normal">

     <label  value="Hello  World!"/>

 </window>

 

让我们加一些交互在上面:

 

 

 

<window   title="Hello"   border="normal">

    <button  label="Say  Hello"  onClick="alert(&quot;Hello  World!&quot;)"/>

 </window>

你将会看到如下效果:

(具体图不再上传,可以查看下面网址的在线示例中的例http://www.potix.com/zkdemo/userguide/)

onClick属性专门用来给组件增加点击事件监听.属性值可以是任何的JAVA代码.

注意,我们使用 &quot;在XML中来表示(").

Alert方法是一个用来显示消息框的全局方法. 它有一个简洁的方法定义在 com.potix.zul.html.Messagebox class.

<button  label="Say  Hello"  onClick="Messagebox.show(&quot;Hello  World!&quot;)"/>

注意:

1. 被插入在ZUML中的所有Scripts都将在Server端执行,他们是JAVA.不是Java Script.
2. ZK在运行时使用 BeanShell 去解释JAVA代码,所以你可以定义全局方法,就好像alert.
3. 所有  java.lang,  java.util,  com.potix.zk.ui,  com.potix.zk.ui.event  a nd

   com.potix.zul.html  包中的类,在你的代码插入之前已经被引入了Z UML页面.

在以后的文章里将为大家介绍更多关于ZK的教程.

1.  

这里是一个简单的例子,你可以去ZK的网站去了解更多:

• 网站:http://www.potix.com
• 在线示例:http://www.potix.com/zkdemo/userguide/

1.