ZKOverview(zk学习概论).ppt

,ZKOverview,Oct19,2010,什么是ZKZK架构架构图执行流程如何使用ZK配置文件创建ZK组件组件的使用ID空间常用的属性数据绑定常用接口,什么是ZK,ZK是一个事件驱动(event-driven)的，基于组件(component-based)的，用以丰富网络程序中用户界面的框架，其主要思想就是将所有客户端工作移至服务端完成。,ZK架构,ZK基于AJAX的机制并包括三个部分：ZK加载器(ZKloader)，ZKAU引擎(ZKAUEngine)，和ZK客户端引擎(ZKClientEngine)。,ZK架构,ZK执行流程,当用户在浏览器中键入一个URL或点击一个超链接时，一个请求便被送到了Web服务器，如果URI符合ZK的配置，ZK加载器则援引担任这一要求。ZK加载器(ZKloader)加载指定的页面然后解释它，以据此创建和适的组件。当解释完整个页面后，ZK加载器(ZKloader)将结果送到一个HTML页面。然后这个HTML页面和ZK客户端引擎(ZKClientEngine)一起被送回浏览器。,ZK执行流程,ZK客户端引擎(ZKClientEngine)坐落在浏览器，以监视由客户的活动触发的事件，例如挪动鼠标，或改变某个值。一旦监测到，它就通知ZKAU引擎通过发送一个ZK请求。当从客户端引擎接到ZK请求后，如果有需要的话AU引擎就更新相应组件的内容。然后，AU引擎通过调用相关的事件处理程序(如果有的话)来通知应用程序。,ZK执行流程,如果应用程序选择改变组件的内容，添加或移动组件，AU引擎通过ZK响应(ZKresponses)将更新后组件的新内容送至客户端引擎。这些ZK响应实际上是一些命令，这些命令指示客户端引擎如何更新DOM树的内容。,如何使用ZK,配置文件添加ZK.xml文件到WEB-INF目录下。在WEB.xml中增加zkLoader以及auEngine等配置选项。创建ZK组件在zul页面中通过标签创建。（常用）使用richlet方式在JAVA代码中创建。（不常用）,通过标签创建组件,编辑页面hello.zul内容如下HelloWorld!输入URLhttp:/localhost:8080/ZK，可以看到如下画面,组件的使用,在构筑ZK应用时，通常以window为最外层容器，并将相关组件放置于其中，然后再使用apply属性为window增加事件监听处理能力。现在用一个点击按钮改变文本框内容的例子来进行说明，编写zul代码如下：,组件的使用,打开页面，可以看到界面为：此时页面还不能响应操作，需要为window添加apply属性，并指定处理类。编写类SimpleCtrl如下：,组件的使用,publicclassSimpleCtrlextendsGenericForwardComposerTextboxtb;/得到zul中textbox的引用，属性名必须与id一致publicvoiddoAfterCompose(Componentcomp)throwsException/重写该方法可以进行初始化操作super.doAfterCompose(comp);(Window)this.self).setTitle(“Demo”);/设置标题/监听按钮的点击事件，方法名格式为onXXX$id,XXX为事件名，/id为需要监听的组件IDpublicvoidonClick$btn()tb.setValue(“setvalue”);/改变textbox的值,ID空间,在了解ZK的ID空间前，首先需要了解一下这样三个概念：组件、页面和桌面。组件即一个UI对象，如输入框，下拉框，按钮等。页面是一系列组件的集合，它可以理解为一个zul页面。桌面是由页面构成的集合，一个zul页面可以直接或间接包含另外一个zul页面。由于这些页面是为服务同样的URL请求而创建的，它们被统称为桌面。页面和桌面的创建都是由ZK自动完成的，开发人员不能手动控制。在Executions类中有一个方法为CreateComponents可以手动加载一个zul页面，但该方法返回的是一个component而不是page。,ID空间,在实际开发中，我们经常会使用多个zul页面来构成一个桌面，因此每个页面中自定义的组件ID有可能会出现重复的情况，ID空间就是为了解决这一问题而引入的。所有实现了IdSpace接口的组件都可以形成一个ID空间，例如window、page和include，其中window是使用最为频繁的一个组件，一般将它作为一个页面的最高组件来使用。一个ID空间的最高组件即为空间的所有者，可以使用getSpaceOwner方法来获得这个组件。以下图为列，我们来看一下ID空间的具体使用方法。,ID空间,图中有三个空间，P,A和C，空间P包括P，A，F和G。空间A包括A，B，C和D。空间C包括C和E。在相同ID空间内的组件称为fellows，例如A，B，C和D就是同一ID空间内的fellows。为了获得另一个fellow，可以使用IdSpace或Component接口中的getFellow方法。请注意可以getFellow方法可以被同一ID空间内任何组件调用，并不仅限于空间所有者。,ID空间,同样，对于在同一空间内的任何组件，getSpaceOwner方法返回的是同样的对象，与是否是空间所有者无关。Path类提供了在ID空间内简化定位组件的工具。其使用类似java.io.File：Path.getComponent(/A/C/E);newPath(A/C,E).getComponent();,常用的属性,EL表达式Apply属性Use属性forEach属性Forward属性,EL表达式,像JSP一样，可以在ZUL页面的任何部分使用EL表达式，EL表达式的语法格式为$expr，例如：10“/,Apply属性,Apply属性用于对某个组件添加一个控制器类，从而可以实现对该组件进行初始化操作，以及该各种事件的处理。这个类必须实现org.zkoss.zk.ui.util.Composer接口，在实际开发开发中，我们选择去继承org.zkoss.zk.ui.util.GenericForwardComposer，而不是重新编写。,Use属性,Use属性用于给组件指定一个类，该类需继承自组件，通过对类方法的重写来达到定制组件的目的。例如我们需要一个textbox，如果输入为空时，返回值为empty，否则返回大写。publicclassTestTextboxextendsTextbox/重写父类的getValue方法publicStringgetValue()throwsWrongValueExceptionStringret=super.getValue();if(null!=ret给textbox指定该类,forEach属性,forEach属性用来控制要创建多少组件，例如当需要为一个下拉框初始化选项时，就可以使用该属性。TestCtrl类代码如下：,forEach属性,publicclassTestCtrlextendsGenericForwardComposerListlist=newArrayList();publicTestCtrl()super();list=newArrayList();list.add(newBook(book1,21);list.add(newBook(book2,22);list.add(newBook(book3,23);list.add(newBook(book4,24);list.add(newBook(book5,25);/与foreach属性中的.list对应publicListgetList()returnlist;,Forward属性,Forward属性用于将组件的某个事件转发至指定的处理方法。对多个组件的事件进行集中处理是其典型的应用场景，例如在某表格中有若干记录，每个记录都有一个按钮，点击按钮做相应的处理。代码如下：,Forward属性,TestCtrl代码如下:publicclassTestCtrlextendsGenericForwardComposer。/省略初始化代码/按钮的点击事件会被转发到这个方法publicvoidonForwardBtnClick(ForwardEventevent)Stringno=(String)event.getData();/获取到参数,数据绑定,数据绑定是一种机制，在UI组件和数据源之间自动完成数据的复制。应用程序开发人员只需要告诉数据绑定管理器关于UI组件和数据源的联系即可。然后，数据绑定管理器会自动完成加载(将数据从数据源加载至UI组件)并保存(将数据从UI组件保存至数据源)工作。数据绑定一般需要进行如下步骤：建立数据绑定管理器将UI组件关联至数据源指定数据加载策略,建立数据绑定管理器,可以通过在页面顶部定义页面初始化来建立数据绑定管理器。然后初始器类会做如下事情：1.创建一个AnnotateDataBinder实例。2.使用存储在组件内的binder将AnnotateDataBinder实例设置为一个变量，此组件在arg0component-path被指定(若arg0未指定，则使用Page代替)。3.调用DataBinder.loadAll()通过关联的数据源初始化所有的UI组件。,将UI组件关联至数据源,在组件标签中添加如下代码来声明绑定关系component-name描述一个UI组件。bean-name描述一个数据源。attribute-name描述UI组件或数据源的一个属性。如果需要将一个集合与组件绑定，则该组件必须要支持集合绑定，如grid、listbox等。绑定代码如下：,将UI组件关联至数据源,variable-name仅对于child-component和它的子组件是可见的。,指定数据加载策略,数据绑定管理器是被事件或者用户的活动触发的。因此，必须使用load-when标签来指定数据加载事件，使用save-when来指定数据保存事件。写法如下：ponent-id描述一个UI组件的ID。2.event-name描述事件名称。,数据绑定,下面以一个简单的例子来说明如何进行数据绑定。,数据绑定,DateBindCtrl类代码如下:publicclassDateBindCtrlextendsGenericForwardComposerListlist;privateStringvalue;publicStrin