ZK 框架的分析与应用

489687009 贡献于2014-11-15

作者 微软用户  创建于2013-04-16 14:57:00   修改者think  修改于2014-11-15 06:13:00字数49578

文档摘要: 摘要ZK是一套以AJAX/XUL/Java为基础的网页应用程序开发框架,用于丰富网页应用程序的使用界面。最大的好处是,在设计AJAX网络应用程序时,轻松简便的操作就像设计桌面程序一样。ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了丰富多样、可重复使用的XUL与HTML组件,以及以XML为基础的使用界面设计语言ZKUser-interfacesMarkupLanguage(ZUML)。通过ZK这个框架,软件开发者基本可以脱离美工,由开发人员自己来布局页面,这样能够大大提高软件开发的效率。由于ZK是一个国外的框架,现在国内研究它的人也不是很多,资料相当匮乏。基本上只能参考官方的英文文档,这将许多对ZK感兴趣的人拒之门外。本文将粗略介绍ZK的原理,详细介绍ZK开发时所用到的组件、布局、设计模式,并会在结束时给出一个ZK+Spring+Hibernate来开发项目的例子。
关键词:

 ZK框架的分析与应用 Analysis and Application of ZK Framework 第页/共78页 摘 要 ZK是一套以 AJAX/XUL/Java 为基础的网页应用程序开发框架,用于丰富网页应用程序的使用界面。最大的好处是,在设计AJAX网络应用程序时,轻松简便的操作就像设计桌面程序一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了丰富多样、可重复使用的XUL与HTML组件,以及以 XML 为基础的使用界面设计语言 ZK User-interfaces Markup Language (ZUML)。 通过ZK这个框架,软件开发者基本可以脱离美工,由开发人员自己来布局页面,这样能够大大提高软件开发的效率。 由于ZK是一个国外的框架,现在国内研究它的人也不是很多,资料相当匮乏。基本上只能参考官方的英文文档,这将许多对ZK感兴趣的人拒之门外。 本文将粗略介绍ZK的原理,详细介绍ZK开发时所用到的组件、布局、设计模式,并会在结束时给出一个ZK+Spring+Hibernate来开发项目的例子。 关键词: ZK Framework;Spring;Hibernate;MVVM Abstract ZK is a set of AJAX / XUL / Java-based Web application development framework for rich web application user interface. The biggest benefit is in the design of AJAX web applications, easy and simple operation like design desktop applications. ZK includes an AJAX-based, event-driven (event-driven), highly interactive engine, while also providing a rich and varied, reusable XUL and HTML components, and XML-based user interface language ZK User-interfaces Markup Language (ZUML). ZK framework, software developers can be basically out of the art, by the developer to the layout of the page, this can greatly improve the efficiency of software development. ZK is a framework of foreign, domestic research and its people is not a lot of data are very scarce. Basically can only refer to the official English documents, which will shut out many people interested in ZK. The rough principle to ZK, detailing the components, layout, design patterns used in the development ZK and will be given at the end of a ZK + Spring + Hibernate examples of development projects. Keywords: ZK Framework; Spring; Hibernate; MVVM 目 录 摘 要 I Abstract II 1 ZK框架的引入 1 1.1 概述 1 1.2 构建一个简单的ZK应用 1 2 如何组建UI 1 2.1 使用基于xml的方式 1 2.2 使用纯Java代码的方式 1 2.3 xml与java代码混用的方式 2 2.4 zk中组建UI时需要了解的xml基础 2 3 ZK页面中的基本概念:桌面、页面、组件 2 3.1 Desktop、Page和Component之间的关系 3 3.2 将Component附加到Page上 3 3.3 销毁Page上的Component 4 3.4 使用ZK Studio来编辑zul页面 4 4 ZK常用基本组件 5 4.1 输入框组件汇总 5 4.2 容器组件 8 4.2.1 Window组件 8 4.1.2 Window组件的常用属性 11 4.2 Grid组件 13 4.2.1 Grid、Listbox、Tree的比较 13 4.2.2 Grid概观 13 4.2.3 Grid展现大批量数据 14 4.2.4 使用Paging组件来为Grid分页 15 4.2.5 Paging组件的onPaging事件 17 4.2.6 Grid的排序功能 19 4.2.7 使用grid的Model来动态展现数据 20 4.2.8 Grid的辅助标题(Auxiliary Headers) 20 4.2.9 使用span属性来合并单元格 22 4.2.10 Grid组件的常用属性 23 4.2.11 Grid表头上的弹出菜单:Menuepopup 23 4.2.12 Grid中Detail组件的使用 25 4.2.13 foot组件 26 4.2.14 Grid中使用Group组件分组 27 4.3 List组件 29 4.3.1 List组件概观 29 4.3.2 mold为select的lisbox 30 4.3.3 listbox的常用属性 30 4.3.4 listbox的分页 31 4.3.5 listbox的自动排序功能 31 4.4 Tree组件 33 4.5.2 Button组件 35 4.5.3 验证码Captcha 38 4.5.4 combobutton组件 38 4.5.5 Fisheye组件 40 4.5.6 HTML组件 42 4.5.7 Iframe组件 43 4.5.8 Include组件 43 4.5.10 Imagemap组件 48 4.5.11 Label组件 48 4.5.12 Menue组件 49 5 根据需求和条件手动控制页面的加载和组件的创建 50 5.1 根据条件来控制组件的创建 50 5.1.1 if和unless属性(适用于所有组件) 51 5.1.2 switch和case(适用于zk标签) 51 5.1.3 choose和when(适用于zk标签) 52 5.2 根据需求加载页面或组件 52 6 迭代赋值 53 7 XML命名空间简介 56 8 Zscript的使用 57 9 在ZUML页面上使用tld文件中指定的函数 58 10 自定义变量解析器 60 11 ZK-MVVM开发模式 61 11.1 ZK MVP开发模式 62 11.2 MVVM开发模式 62 11.3 为什么要使用MVVM的设计模式 65 12 ZK数据绑定注解 66 12.1 单向绑定与双向绑定 66 12.2 模板绑定 67 12.3 表单绑定 67 12.4 条件绑定 67 12.5 数据绑定中使用EL表达式 67 13 ZK开发中使用的注解 68 13.1 Client端ZUL页面上使用的注解 68 13.2 Server端ViewMole中使用的注解 69 14 构建第一个MVVM页面 70 15 ZK6 MVVM结合Spring 74 结束语 77 致谢 77 参考文献 78 1 ZK框架的引入 1.1 概述 ZK是一套以 AJAX/XUL/Java 为基础的网页应用程序开发框架,用于丰富网页应用程序的使用界面。最大的好处是,在设计AJAX网络应用程序时,轻松简便的操作就像设计桌面程序一样。 ZK包含了一个以AJAX为基础、事件驱动(event-driven)、高互动性的引擎,同时还提供了丰富多样、可重复使用的XUL与HTML组件,以及以 XML 为基础的使用界面设计语言 ZK User-interfaces Markup Language (ZUML)。 通过ZK这个框架,软件开发者基本可以脱离美工,由开发人员自己来布局页面,这样能够大大提高软件开发的效率。 1.2 构建一个简单的ZK应用 2 如何组建UI 组建UI即创建我们展示给Client端的View层页面。 2.1 使用基于xml的方式 2.2 使用纯Java代码的方式 第 页, 共 78 页 2.3 xml与java代码混用的方式 2.4 zk中组建UI时需要了解的xml基础 通常情况下,我们都是使用XML的方式来组建UI,XML文件有严格的语法。如:必需要有结束标签;标签之间的嵌套要合理;等等。 XML文件中的表示的是处理命令。它位于xml文件的第一行,它和根元素是一个级别的。 在XML文件中是不能使用特殊字符的,如果我们一定要用那么就要将它替换掉: 特殊字符 替换成 < < > > & & “ " ‘ ' \t(Tab) 当属性值中要使用时才需要替换 \n 当属性值中要使用时才需要替换 3 ZK页面中的基本概念:桌面、页面、组件 我们通过浏览器去访问ZK应用的时候,浏览器展示给我们的是ZK的一个Desktop,而在一个Desktop中可以包含多个Page。组成一个Page的基本元素就是ZK Component(ZK组件) 第 页, 共 78 页 。 3.1 Desktop、Page和Component之间的关系 桌面(Desktop) 它是zul页面的集合,即一个Desktop可以包含多个zul页面。 页面(Page) zul页面是组件的集合。 组件(component) ZK组件是组成zul页面的最小单位。 组件是一种用户接口(UI),比如一个标签、一个按钮。所有的ZK组件都实现了org.zkoss.zk.ui.Component接口 下面我们通过一幅图来看它们之间的关系: 注:使用Include组件包含一个页面时,如果我们设置它的mode(模式)为defer(延迟),那么,将有两个页面在这个Desktop上被创建 3.2 将Component附加到Page上 一个组件只有附加到一个page时才能在client端得到显现。要使一个组件属于一个page的话有两种方式: 1、 将组件添加到一个已经附加到page的组件上。相应的api:Component.appendChild(org.zkoss.zk.ui.Component) 第 页, 共 78 页 、Component.insertBefore(org.zkoss.zk.ui.Component, org.zkoss.zk.ui.Component)、Component.setParent(org.zkoss.zk.ui.Component) 2、 使用Component.setPage(org.zkoss.zk.ui.Page)直接将组件添加到一个page上,这个组件就成为了该页面的根组件。 3.3 销毁Page上的Component ZK的组件之间是树状结构的,每一组件都只有一个根。 从页面上销毁一个组件可以通过下面两种方式来实现: 1、 组件不是根组件时:Component.setParent(null) 组件是根组件时:Component.setPage(null) 2、 Component.detach() 很显然第二种方式要简便。 销毁一个组件下面的所有组件可以通过如下代码来实现: Component.getChildren().clear(); 它等同于 for (Iterator it = comp.getChildren().iterator(); it.hasNext();) { it.next(); it.remove(); } 3.4 使用ZK Studio来编辑zul页面 建议使用ZK Studio来编辑zuml页面,它里面有很好的content assist和visual editor功能。我们只需要在eclipse上安装一个ZK Studio插件就可以了。 你也可以直接使用XML Editor来编辑zuml页面,不过最好是在window组件中加上schema,再在eclipse中配置好对应的xsd文件,一样可以实现content assist的功能。 4 ZK常用基本组件 4.1 输入框组件汇总 在ZK中,输入框被细分成了很多种:textbox、intbox、decimalbox、doublebox、datebox、timebox、spinner、combobox、bandbox 组件的常用属性有(属性是可选的):constraint、disabled、maxlength、readonly 组件名 用途 textbox 用于输入文本。 例1: 效果图: 例2: 效果图: intbox 用于输入整数,其他的按键都会被屏蔽。比如输入字母时不会有任何反应 例: 效果图: decimalbox 用于输入小数,其他的按键都会被屏蔽。 例: 效果图: doublebox 用于输入双精度数,其他的按键都会被屏蔽 datebox 用于输入日期,它自带一个日历控件,且可以对日期进行格式化。 例: 效果图: 未点击时: 第 页, 共 78 页 点击后: timebox 用于输入日期,注意:它的value是Date类型的。 例: Date now = new Date(); 效果图: spinner 用于输入整数,其他的按键都会被屏蔽,组件上的箭头用于增加或减小输入框中的值。它的value只能是int类型的整数。step属性用于控制增长的歩长 例: 效果图: combobox 下拉框。默认情况下是可以输入值的,设置了disabled=”true”之后,就只能通过鼠标选择而不能输入值。 例: 效果图: 未点击时: 点击后: bandbox 一般用作搜索框。可以使用buttonVisible="false"将组件上的按钮隐藏 第 页, 共 78 页 例: 效果图: 4.1.1 对输入框输入内容的约束和验证 输入框通常都有一个constraint属性,它是用来约束用户输入的,使用constraint属性可以控制输入控件接受什么值。 当失去光标的焦点时,如果不符合约束条件,就会弹出出错信息。 在ZK中提供了两种约束用户输入的方式:第一是使用ZK自定义的约束条件;第二是使用正则表达式。 constraint属性可以使用的值有:no positive、no negative、 no zero、no empty、no future、no past、no today 和一个正则表达式的集合。 no positive、no negative、 no zero适用于intbox。 no future、no past和no today 约束仅适用于datebox。 no empty适用于任何组件。 正则表达式约束仅适用于字符串类型组件,例如textbox、combobox和bandbox。 ① ZK自定义的约束条件 constraint中可以使用的约束条件表 约束条件 解析 no empty 输入不能为空 no future 不能是以后的时间。用于datebox no negtive 不能输入负数。用于intbox no past 不能是过去的时间。用于datebox no positive 不能是正数。用于intbox no today 不能是今天。用于datebox no zero 不能是0。用于intbox between yyyyMMdd and yyyyMMdd 控制时间在一个范围内。 例: after yyyyMMdd 例: 第 页, 共 78 页 before yyyyMMdd end_before end_after after_start after_end 指定弹出的错误提示框的位置。 例: 效果图: ② 使用正则表达式 例: 效果图: 也可以不指定出错信息,这时会使用默认的出错信息。 例: 效果图: 如果是在java代码中,我们可以这样指定控件的constraint: new Textbox().setContraint("/.+@.+\\.[a-z]+/"); 4.2 容器组件 容器组件可以用来包含其他组件。 4.2.1 Window组件 Window组件是我们在ZK中使用最多的一个组件。 一个Window组件,就像HTML中的div标签一样,用来将组件组合在一起。 和其他组件不同,Window组件具有如下特点: ◆ Window组件是ID空间宿主。Window组件下的任何组件(包括它自身)都可以通过这个Window组件的id来进行检索。使用:id.getFellow(java.lang.String) ◆ Window组件可以设置成overlapped(重叠)、popup(弹出)、embeded(嵌入) ◆ Window可以作为一个模态窗口(modal dialog) 第 页, 共 78 页 ① Window组件的模式(mode) zul页面中,使用mode属性来设置Window的模式。 Window组件有5种不同的模式:overlapped、popup、modal、hightlighted、embeded 默认的是embeded模式。 我们可以通过Window.setMode(java.lang.String)来改变Window的模式。 我们也可以通过调用Window.doOverlapped()、Window.doPopup()、Window.doModal()、Window.doHightlighted()、Window.doEmbeded()来改变Window的模式。 例:
使用div组件(或span组件)将两个组件包含后,它们只占用了一个单元格的位置。