ZK框架学习

ZK框架学习

1. 架构概况

ZK包括一种基于AJAX机制用来实现自动的交互性，一套丰富的基于XUL的组件用以丰富可用性，和一种的标记语言用来简化开发。

基于AJAX的机制包括三个部分，描绘如下：ZK 加载器(ZK loader)，ZK AU引擎(ZK AU Engine )，和ZK客户端引擎(ZK Client Engine)。

基于用户的请求，ZK 加载器(ZK loader)加载一个ZK页面，解释它，并将结果送到HTML页面来响应URI请求。ZK页面是用一种被称为ZUML的标记语言写成的。ZUML，就像HTML，被用来描述什么组件被创建，以及如何把它们呈现出来。这些组件一旦被创建，就会一直处于可用状态知道会话超时。

然后ZK AU[ 17] 引擎(ZK AU Engine )和ZK客户端引擎(ZK Client Engine)作为投手和捕手一起工作。它们将在浏览器端发生的事件送到运行在服务器端的应用程序，然后更新浏览器段的DOM树，基于组件如何被应用程序操纵。这种方式即所谓的事件驱动编程模型。

执行流

1. 当用户在浏览器中键入一个URL或点击一个超链接时，一个请求便被送到了Web服务器，如果URI符合ZK的配置[18]，ZK 加载器则援引担任这一要求 。
2. ZK 加载器(ZK loader)加载指定的页面然后解释它，以据此创建和适的组件。
3. 当解释完整个页面后，ZK 加载器(ZK loader)将结果送到一个HTML页面。然后这个HTML页面被送回浏览器和ZK客户端引擎(ZK Client Engine)[19]一起。
4. ZK客户端引擎(ZK Client Engine)坐落在浏览器，以监视由客户的活动触发的事件，例如挪动鼠标，或改变某个值。一旦监测到，它就通知ZK AU引擎通过发送一个ZK请求[20]。
5. 当从客户端引擎接到ZK请求后，如果有需要的话AU引擎就更新相应组件的内容。然后，AU引擎通过调用相关的事件处理程序(如果有的话)来通知应用程序。
6. 如果应用程序选择改变组件的内容，添加或移动组件，AU引擎通过ZK响应(ZK responses)将更新后组件的新内容送至客户端引擎。
7. 这些ZK响应实际上是一些命令，这些命令指示客户端引擎如何更新DOM树的内容。

2. 组件，页面和桌面

又小到大，组件（像button，lable等样式UI），页面（组件的集合，即构成一个网页），桌面(页面的集合，处理相同的请求)。

3. 常见属性

use与 forward 属性一起使用

window通常由一些按钮，菜单项目和其他组件组成。例如，

<window use="MyWindow"> ... <button label="OK"/> <button label="Cancel"/></window>

当用户点击按钮时， onClick事件会被送至按钮本身。但是这些事件最好在window内处理而不是散落这些按钮。为了这样，你可以按如下方式使用 forward属性。

<window use="MyWindow"> ... <button label="OK" forward="onOK"/> <button label="Cancel" forward="onCancel"/></window>

在这里OK按钮的 forward属性指定接收 onClick事件后将其作为 onOK 事件转向空间所有者(例如，window)。同样，针对Cancel 按钮的 onClick事件会转向 onCancel事件。因此你可以在 MyWindow 命名空间内处理 onOK和 onCancel事件，如下。

public class MyWindow extends Window { public void onOK() { //called when the OK button is clicked (or the ENTER button is pressed) } public void onCancel() { //called when the Cancel button is clicked (or the ESC button is pressed) }}

apply 属性

若你喜欢使用MVC(模型-试图-控制者)方法，例如，你不想在window(视图)内嵌入处理代码，可以实现一个类来初始化window。这个类必须实现 org.zkoss.zk.ui.util.Composer接口。

import org.zkoss.zk.ui.util.Composer;import org.zkoss.zul.Window;public class MyComposer implements Composer { public void doAfterCompose(Component comp) { ((Window)comp).setTitle("My Title"); //do whatever initialization you want //comp is Window since we will specify it to a window later }}

在这里我们假设你有三个监听器， MyCreate，MyOK，和 MyCancel。参考下面的事件章节获取事件监听器的解释。

然后，使用apply属性指定类，如下。

<window apply="MyComposer">...</window>

window仍然作为 org.zkoss.zul.Window 的一个实例被创建，且作为 comp参数被传递给 doAfterCompose方法。然后，你可以处理你所希望的初始化。

若你想apply多个composer，使用逗号隔开。另外，你可以使用EL表达式来返回类，它的名称， Composer实例，或 Composer实例的集合。

<window apply="MyComposer, AnotherComposer"> <textbox apply="${c:mycomposer()}"/></window>

4. 手动创建组件

除了讲述什么组件可以在ZUML页面被创建外，开发人员可以手动创建组件。所有的组件都是具体的(concrete)，你可以直接[ 15]通过它们的构造函数(constructors)来创建它们。

<window id="main"> <button label="Add Item"> <attribute name="onClick"> new Label("Added at "+new Date()).setParent(main); new Separator().setParent(main); </attribute> </button> <separator bar="true"/></window>

当一个组件被手动创建时，它并没有自动被加到页面。换句话说，它并不在用户的浏览器中出现。为了将它加到页面，你可以调用 setParent， appendChild或 insertBefore方法来为其指定一个父类(parent)，如果父类组件是页面的一部分，那么它也变成了页面的一部分。

组件类并没有destroy 或close方法[ 16]，当一个组件从页面中被拆卸的时候就会从浏览器中内移除。它表现的就像附着在页面上一样。

<window id="main"> <zscript>Component detached = null;</zscript> <button id="btn" label="Detach"> <attribute name="onClick"> if(detached != null) { detached.setParent(main); detached = null; btn.label = "Detach"; } else { (detached = target).setParent(null); btn.label = "Attach"; } </attribute> </button> <separator bar="true"/> <label id="target" value="You see this if it is attached."/></window>

5. 动态地添加与移除事件监听器

开发人员可以使用 org.zkoss.zk.ui.Component接口中的 addEventListene和 removeEventListener方法来动态地添加或移除事件监听器。如下所示，动态添加的事件监听器必须实现 org.zkoss.zk.ui.event.EventListener接口。

void init(Component comp) { ... comp.addEventListener("onClick", new MyListener()); ...}class MyListener implements org.zkoss.zk.ui.event.EventListener { public void onEvent(Event event) throws UiException { ...//processing the event }}