ZK框架学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/I_will_try/article/details/61916108
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 命名空间内处理onOKonCancel事件,如下。
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>
当一个组件被手动创建时,它并没有自动被加到页面。换句话说,它并不在用户的浏览器中出现。为了将它加到页面,你可以调用setParentappendChildinsertBefore方法来为其指定一个父类(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接口中的addEventListeneremoveEventListener方法来动态地添加或移除事件监听器。如下所示,动态添加的事件监听器必须实现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 }}
阅读更多
换一批

没有更多推荐了,返回首页