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如下 组件的使用 publicclassSimpleCtrlextendsGenericForwardComposer Textboxtb 得到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 throwsWrongValueException Stringret super getValue if null ret 给textbox指定该类 forEach属性 forEach属性用来控制要创建多少组件 例如当需要为一个下拉框初始化选项时 就可以使用该属性 TestCtrl类代码如下 forEach属性 publicclassTestCtrlextendsGenericForwardComposer Listlist 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实例设置为一个变量 此组件在arg0 component 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类代码如下 publicclassDateBindCtrlextendsGenericForwardComposer Listlist privateStringvalue publicStringgetValue returnvalue publicvoidsetValue Stringvalue this value value publicListgetList returnlist 数据绑定 publicvoidonClick cal if null value 常用界面 Executions用于处理客户端的request 例如ServletRequest Sessions获取当前session 具体方法名可以参见ZK的API