ZK框架的分析与应用
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代码的方式
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组件）。
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)、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的功能。
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul
">
4 ZK常用基本组件
4.1输入框组件汇总
在ZK中，输入框被细分成了很多种：textbox、intbox、decimalbox、doublebox、datebox、timebox、spinner、combobox、bandbox
组件的常用属性有（属性是可选的）：constraint、disabled、maxlength、readonly
组件名
用途
textbox
用于输入文本。
例1："Jerry"width="150px"/>
效果图：
例2："password"value="foo"width="150px"/>
效果图：
intbox
用于输入整数，其他的按键都会被屏蔽。比如输入字母时不会有任何反应
例："no negative,no zero"width="150px"value="12345678"/>
效果图：
decimalbox
用于输入小数，其他的按键都会被屏蔽。
例："###.##"value="154.326"width="150px"/>
效果图：
doublebox
用于输入双精度数，其他的按键都会被屏蔽
datebox
用于输入日期，它自带一个日历控件，且可以对日期进行格式化。
例："db"width="150px"format="yyyy/MM/dd"/>
效果图：
未点击时：
点击后：
timebox
用于输入日期，注意：它的value是Date类型的。
例：
Date now = new Date();
"${now}"/>
效果图：
spinner
用于输入整数，其他的按键都会被屏蔽，组件上的箭头用于增加或减小输入框中的值。它的value只能是int类型的整数。step属性用于控制增长的歩长
例："123345"step="2"/>
效果图：
combobox
下拉框。默认情况下是可以输入值的，设置了disabled=”true”之后，就只能通过鼠标选择而不能输入值。
例：
"湖南"/>
"北京"/>
"上海"/>
效果图：
未点击时：
点击后：
bandbox
一般用作搜索框。可以使用buttonVisible="false"将组件上的按钮隐藏
例："123"/>
效果图：
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
控制时间在一个范围内。
例："between 20071225 and 20071203"/>
after yyyyMMdd
例："after 20071225"/>
before yyyyMMdd
end_before
end_after
after_start
after_end
指定弹出的错误提示框的位置。
例："no empty, start_before"/>
效果图：
② 使用正则表达式
例："/.+@.+\.[a-z]+/:邮箱地址不正确"/>
效果图：
也可以不指定出错信息，这时会使用默认的出错信息。
例："/.+@.+\.[a-z]+/"/>
效果图：
如果是在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）
① 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的模式。
例：
"win"title="Hi!"border="normal"width="200px">
"Help"/>
"Hello, Wolrd!"/>
"CLOSE"onClick='win.setVisible(false)'/>
"Overlap"onClick="win.doOverlapped();"/>
"Popup"onClick="win.doPopup();"/>
"Modal"onClick="win.doModal();"/>
"Embed"onClick="win.doEmbedded();"/>
"Highlighted"onClick="win.doHighlighted();"/>
"true"/>
"SHOW"onClick='win.setVisible(true)'/>
效果图：
embeded：这是默认的模式。这种模式下，我们不能改变Window的位置。
overlapped：overlapped模式下的Window与其他的组件是层叠的。用户可以使用鼠标拖拽它。开发人员可以通过Window.setLeft(java.lang.String)和Window.setTop(java.lang.String)来设置它的位置。
popup：popup模式和overlapped模式相似。它们之间不同是：在popup模式下，我们只要点击其他组件的话，这个弹出的Window就会自动消失。
modal：modal与hightlighted模式基本上是相同的。modal模式下，Window之外的组件是不能够操作的（如下图）。
hightlighted：
4.1.2 Window组件的常用属性
window属性表
属性名
说明
border
取值有：normal、none（默认为none）
例：
"border为none"border="none"width="200px">
border为none的Window
"border为none"border="normal"width="200px">
border为normal的Window
closable
一旦我们关闭了这个Window，那么这个页面上将不会有这个Window存在，也不能对它进行引用，否则会报错，这是也隐藏最大的不同。我们也可以通过Window.detach()来实现相同的效果。
Window关闭的时候会触发onClose事件。
我们可以重写onClose方法来实现我们自己想要的操作。比如，我们想在点击关闭按钮的时候将Window隐藏，而不是detach
例：
"myWin"closable="true"title="Demo"border="normal"width="200px"
onClose="self.visible = false; event.stopPropagation();">
点击关闭按钮，Window将会被隐藏，而非detach
"SHOW"onClick='myWin.setVisible(true)'/>
效果图：
contentStyle
通过这个属性，我们可以为Window定制样式。
例1：
"My Window"border="normal"width="200px"contentStyle="background:yellow">
Hello, World!
效果图：
例2：
"win"title="Hi"width="150px"height="100px"contentStyle="overflow:auto"border="normal">
当我们设置了overflow:auto之后，当内容超过了可显示的区域之后，就会出现滚动条
效果图：
position
我们可以为mode为overlapped、pupup和modal的Window设置位置。
如："300px"mode="overlapped"position="right,bottom">
可供选择的position有：center、left、right、top、bottom
sizable
用于设置Window是否可以改变大小。
当用户改变Window的大小时会触发onSize事件
title AND caption
用来设置标题。（注：caption是一个组件，而非属性）
例：
"My Window"border="normal"width="200px">
"/imgs/sml4.gif"label="Hi there!"/>
"Hello, World!"/>
效果图：
4.2 Grid组件
Grid组件是处理与展现大量数据的组件。与它功能类似的组件有：Grid、Listbox、Tree。
4.2.1 Grid、Listbox、Tree的比较
Grid和Listbox都是用来展现列表数据的。而Tree主要用来展示分层数据。
Listbox和Tree允许用户选中它所展现的一条或多条数据（可以通过ZK提供的方法来获取选中的数据），而Grid则不行。
Grid、Listbox和Tree都支持分页，具体请查阅Paging组件。
4.2.2 Grid概观
相关子组件：grid、columns、colum、rows、row
组件名
说明
grid
使用它来定义一个grid
columns
用来设置grid的标题头。
column
位于columns里面，用来设置列的相关属性
rows
用来展现数据
row
位于rows里面，用来展现一行数据
例1：
"500px">
"Column 1"/>
"Column 2"/>
"Column 3"/>
"true"/>
请填写红包祝福语或标题
