ZK框架的分析与应用

前言：本文是在下的在学习ZK官方文档时整理出来的初稿。本来里面有很多的效果图片和图片代码的。奈何博客园中图片不能粘贴上去，所以感兴趣的筒子们就将就吧。内容中，如有不好的地方，欢迎斧正！

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的功能。

<window xmlns="http://www.zkoss.org/2005/zul"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://www.zkoss.org/2005/zul

http://www.zkoss.org/2005/zul/zul.xsd">

4 ZK常用基本组件

4.1 输入框组件汇总

在ZK中，输入框被细分成了很多种：textbox、intbox、decimalbox、doublebox、datebox、timebox、spinner、combobox、bandbox

组件的常用属性有（属性是可选的）：constraint、disabled、maxlength、readonly

组件名

用途

textbox

用于输入文本。

例1：<textbox value="Jerry" width="150px" />

效果图：

例2：<textbox type="password" value="foo" width="150px" />

效果图：

intbox

用于输入整数，其他的按键都会被屏蔽。比如输入字母时不会有任何反应

例：<intbox constraint="no negative,no zero" width="150px" value="12345678" />

效果图：

decimalbox

用于输入小数，其他的按键都会被屏蔽。

例：<decimalbox format="###.##" value="154.326" width="150px" />

效果图：

doublebox

用于输入双精度数，其他的按键都会被屏蔽

datebox

用于输入日期，它自带一个日历控件，且可以对日期进行格式化。

例：<datebox id="db" width="150px" format="yyyy/MM/dd" />

效果图：

未点击时：

点击后：

timebox

用于输入日期，注意：它的value是Date类型的。

例：

Date now = new Date();

</zscript>

效果图：

spinner

用于输入整数，其他的按键都会被屏蔽，组件上的箭头用于增加或减小输入框中的值。它的value只能是int类型的整数。step属性用于控制增长的歩长

例：<spinner value="123345" step="2"/>

效果图：

combobox

下拉框。默认情况下是可以输入值的，设置了disabled=”true”之后，就只能通过鼠标选择而不能输入值。

例：

</combobox>

效果图：

未点击时：

点击后：

bandbox

一般用作搜索框。可以使用buttonVisible="false"将组件上的按钮隐藏

例：<bandbox value="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	控制时间在一个范围内。例：<datebox constraint="between 20071225 and 20071203"/>
after yyyyMMdd	例：<datebox constraint="after 20071225"/>
before yyyyMMdd
end_before end_after after_start after_end	指定弹出的错误提示框的位置。例：<textbox constraint="no empty, start_before"/> 效果图：

② 使用正则表达式

例：<textbox constraint="/.+@.+\.[a-z]+/:邮箱地址不正确" />

效果图：

也可以不指定出错信息，这时会使用默认的出错信息。

例：<textbox constraint="/.+@.+\.[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的模式。

例：

<zk>

</caption>

</window>

</zk>

效果图：

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的Window

</window>

border为normal的Window

</window>

closable

一旦我们关闭了这个Window，那么这个页面上将不会有这个Window存在，也不能对它进行引用，否则会报错，这是也隐藏最大的不同。我们也可以通过Window.detach()来实现相同的效果。

Window关闭的时候会触发onClose事件。

我们可以重写onClose方法来实现我们自己想要的操作。比如，我们想在点击关闭按钮的时候将Window隐藏，而不是detach

例：

<window id="myWin" closable="true" title="Demo" border="normal" width="200px"

onClose="self.visible = false; event.stopPropagation();">

点击关闭按钮，Window将会被隐藏，而非detach

</window>

效果图：

contentStyle

通过这个属性，我们可以为Window定制样式。

例1：

Hello, World!

</window>

效果图：

例2：

当我们设置了overflow:auto之后，当内容超过了可显示的区域之后，就会出现滚动条

</window>

效果图：

position

我们可以为mode为overlapped、pupup和modal的Window设置位置。

如：<window width="300px" mode="overlapped" position="right,bottom">

可供选择的position有：center、left、right、top、bottom

sizable

用于设置Window是否可以改变大小。

当用户改变Window的大小时会触发onSize事件

title AND caption

用来设置标题。（注：caption是一个组件，而非属性）

例：

</window>

效果图：

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：

<zk>

</columns>

<rows>

<row>

</row>

<row>

</row>

<row>

</row>

</rows>

</grid>

</zk>

效果图：

4.2.3 Grid展现大批量数据

在grid中，我们有两种方式来展现大批量数据：一是使用滚动条；二是使用分页。

① 使用滚动条

只需要为grid的hight属性设置一个值，当数据展现超过这个hight时，滚动条会自动出现。

例：

我们在上面的例子中的grid标签上加个属性height=”100px”，即<grid width="500px" height="100px">。得到的效果图如下：

② 使用分页

在grid中添加属性：mold=”paging” pageSize=”n”即可。当展现的数据量超过n条时，分页控件会自动出现。

(注意：这里的分页只是页面上的分页，而不是后台的分页。有人叫这种分页为假分页)

例：

我们将上面代码中的height去掉，加上属性：mold="paging" pageSize="3"

效果图：

pageSize的默认值为：20

除此指定mold=”paging”之外，我们还可以使用Paging组件来实现分页。详情请参照后续Paging分页的介绍。

4.2.4 使用Paging组件来为Grid分页

使用Paging组件，我们可以自定义的放置paging组件的位置。还可以使用一个Paging组件来控制多个grid，这时需要指定Grid组件的paginal属性为同一个Paging。

例：

<vbox>

<hbox>

</columns>

<rows>

<row>

</row>

<row>

</row>

<row>

</row>

<row>

</row>

</rows>

</grid>

</columns>

<rows>

<row>

</row>

<row>

</row>

<row>

</row>

<row>

</row>

<row>

</row>

</rows>

</grid>

</hbox>

</vbox>

效果图：

4.2.5 Paging组件的onPaging事件

当用户点击paging组件的时候，会触发onPaging事件。如果想实现后台自动分页，我们就可以通过这个事件来实现。

例：

</columns>

</rows>

</grid>

<![CDATA[

import org.zkoss.zul.event.PagingEvent;

class Student{

private int id;

private String name;

public Student(){}

public Student(int id, String name){

this.id = id;

this.name = name;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

List stuList = new ArrayList();

Student stu1 = new Student(1, "张三");

Student stu2 = new Student(2, "李四");

Student stu3 = new Student(3, "王五");

Student stu4 = new Student(4, "朱红");

stuList.add(stu1);

stuList.add(stu2);

stuList.add(stu3);

stuList.add(stu4);

final int PAGE_SIZE = myPaging.getPageSize();

public void nextPage(Event event){

PagingEvent pe = (PagingEvent) event;

int pgno = pe.getActivePage();//页数(从零计算)

int start = pgno * PAGE_SIZE;

int end = start + PAGE_SIZE;

end = end>stuList.size()?stuList.size():end;

System.out.println(start+","+end);

rowsId.getChildren().clear();//清空数据

createData2View(start, end);

}

private void createData2View(int start, int end){//显示数据

for(int i=start; i<end; i++){

Student stu = (Student)stuList.get(i);

Row row = new Row();

Label lab1 = new Label();

lab1.setValue(stu.getId()+"");

Label lab2 = new Label();

lab2.setValue(stu.getName());

lab1.setParent(row);

lab2.setParent(row);

rowsId.appendChild(row);

}

public void init(){

createData2View(0, 3);

myPaging.setTotalSize(stuList.size());//总数据量

}

]]>

</zscript>

</window>

效果图：

除了可以在onPaging事件上写函数之外，我们还可以使用下面的代码来为Paging组件添加事件监听器：

pagingId.addEventListener("onPaging", new EventListener() {

public void onEvent(Event event) {

……

}

};

4.2.6 Grid的排序功能

通过在column上设置属性sort，即可实现排序功能。详情请参见Listbox的排序。

4.2.7 使用grid的Model来动态展现数据

例：

<zscript><![CDATA[

String[] data = new String[10];

for (int j = 0; j < data.length; ++j) {

data[j] = "option " + j;

}

ListModel strset = new SimpleListModel(data);

]]></zscript>

</columns>

</grid>

</window>

效果图：

4.2.8 Grid的辅助标题（Auxiliary Headers）

除了使用columns来添加表头以外，我们还可以使用辅助表头auxhead来添加表头。

auxhead支持rowspan和colspan属性，这是column所不支持的。

columns和column只能用在grid组件里面，而auxheader、auxhead可以用在Listbox、Grid和Tree组件里面。

例：

<zk>

<grid>

</auxhead>

</auxhead>

</columns>

<rows>

<row>

</row>

</rows>

</grid>

</zk>

效果图：

4.2.9 使用span属性来合并单元格

例：

<zk>

</columns>

<rows>

<row>

</row>

</row>

</row>

</row>

<row>

<div>

</div>[微软用户1]

<span>

</span>

</row>

</rows>

</grid>

</zk>

效果图：

4.2.10 Grid组件的常用属性

属性名	说明
sizedByContent	根据内容改变大小。取值：true、false 一般与span=”true”连用。例如： <grid sizedByContent="true" span="true" width="800px">
span	当设置了sizeByContent后，每一列都只会占用它需要的宽度。如果我们想每一列都看起来宽松一点的话，就可以设置span=”true”
emptyMessage	当展现的内容为空时，就会显示我们设置的emptyMessage中的内容。例如：<grid id="test1" emptyMessage="没有相关数据">
sizable	columns组件的属性，设置sizable=”true”后，用户就可以使用鼠标来更改列宽。例如：<columns sizable="true">

4.2.11 Grid表头上的弹出菜单：Menuepopup

默认情况下menuepopup被设置成none，我们可以在columns组件上设置menuepopup=”auto”来显示一个默认的弹出菜单。你也可以为组件设置自己定义的弹出菜单。

① 默认的Menuepopup：

例：

<zk>

</columns>

<rows>

<row>

</row>

<row>

</row>

<row>

</row>

</rows>

</grid>

</zk>

效果图：

鼠标移上点击→

（勾选的列即为显示出来的列）

② 自定义的Menuepopup

例：

<zk>

</menupopup>

</columns>

<rows>

<row>

</row>

<row>

</row>

<row>

</row>

</rows>

</grid>

</zk>

效果图：

4.2.12 Grid中Detail组件的使用

detail组件是用来展示详情部分，主行和详情部分在同一行上。

例：

<grid>

</columns>

<rows>

<row>

<image sclass="myimg" width="100px" height="100px"

src="/imgs/tea1.gif" />

这里面可以有其他的组件来展示详细信息。也可以直接使用文字来描述……

</hlayout>

</detail>

</row>

</rows>

</grid>

效果图：

展开时：

收拢后：

4.2.13 foot组件

用来显示grid的foot。

例：

</columns>

<rows>

<row>

</row>

<row>

<hbox>

</listbox>

</hbox>

</row>

</rows>

<foot>

<footer>footer1</footer>

<footer>footer2</footer>

</foot>

</grid>

效果图：

4.2.14 Grid中使用Group组件分组

支持groupfoot。

例：

<zk>

</columns>

<rows>

<row>

</row>

<row>

</row>

<row>

</row>

<row>

</row>

<row>

</row>

</groupfoot>

</rows>

</grid>

</zk>

效果图：

收起来：

4.3 List组件

相关子组件：listbox、listitem、listcell、listhead、listheader

listbox组件可以用来展示列表数据。用户可以选中列表数据中的某一条记录。

listbox的mold：default、select、paging。

如果我们使用mold=”select”，那么它将被解析成HTML的select标签。

4.3.1 List组件概观

例1：

</listhead>

</listitem>

</listitem>

</listitem>

</listfooter>

</listfooter>

</listfoot>

</listbox>

</window>

效果图：

4.3.2 mold为select的lisbox

当listbox的mold属性为select时，可以作为一个下拉框来使用。

例：

<zk>

</listbox>

</zk>

效果图： →

4.3.3 listbox的常用属性

属性名	说明
sizedByContent	根据内容改变大小。取值：true、false 一般与span=”true”连用。例如： <listbox sizedByContent="true" span="true" width="800px">
span	当设置了sizeByContent后，每一列都只会占用它需要的宽度。如果我们想每一列都看起来宽松一点的话，就可以设置span=”true”
emptyMessage	当展现的内容为空时，就会显示我们设置的emptyMessage中的内容。如：<listbox id="test1" emptyMessage="没有相关数据">
sizable	listhead组件的属性，设置sizable=”true”后，用户就可以使用鼠标来更改列宽。例如：<listhead sizable="true">

4.3.4 listbox的分页

同grid组件类似，只要在listbox组件上加上属性mold="paging" pageSize="n"即可。如果不指定pageSize，则会使用默认值20。

4.3.5 listbox的自动排序功能

我们通过listheader上的sort属性来实现listbox的自动排序。默认情况下的设置为sort=”auto”。它能对这一列所展示的字符串进行自动排序。如果我们想自定义的控制，根据指定的字段来排序，可以使用sort="auto(field1[,field2...])"的格式来指定。

① 默认的排序功能

例：

<zk>

</listhead>

</listitem>

</listitem>

</listitem>

</listbox>

</zk>

效果：

② 根据指定的字段来排序，使用sort="auto(field1[,field2...])"的格式

例：

<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit"?>

<![CDATA[

class Person {

private String firstName;

private String lastName;

private int age;

public Person(String firstName, String lastName, int age) {

this.firstName = firstName;

this.lastName = lastName;

this.age = age;

}

public String getFirstName() {

return firstName;

}

public String getLastName() {

return lastName;

}

public String getFullName() {

return firstName + " " + lastName;

}

public int getAge() {

return age;

}

java.util.List persons = new java.util.ArrayList(8);

persons.add(new Person("Tom", "Yeh", 43));

persons.add(new Person("Henri", "Chen", 43));

persons.add(new Person("Jim", "Yeh", 39));

]]>

</zscript>

<listheader label="Full Name"

sort="auto(lastName, firstName)" />

</listhead>

</listitem>

</listbox>

</window>

效果图：

→

4.4 Tree组件

tree组件可以实现与listbox相似的功能。但是我们通常都是用tree组件来做树状的菜单。这里不做过多介绍。

请看下面的例子：

<zk>

</treerow>

</treerow>

</treerow>

</treeitem>

</treerow>

</treeitem>

</treerow>

</treeitem>

</treechildren>

</treeitem>

</treechildren>

</treeitem>

</treechildren>

</tree>

</west>

</borderlayout>

</window>

</zk>

效果图：

4.5 开发中的ZK常用组件

4.5.1 A组件

例1：

<grid>

<rows>

<row>What ever content</row>

</rows>

</grid>

</a>

效果图：

a组件中的路径都是相对路径。如果路径是以斜杠（/）开头，那么则表示是当前的context path（上下文路径）。其他的路径都是相对于文件本身的路径而言的。

a组件可以包含其他的组件，但是它的子组件也要能处理鼠标点击事件。

4.5.2 Button组件

按钮组件有两种类型，button和toolbarbutton，它们的主要功能是类似的，只是其外观显示不同。

在解析时，button组件使用html中的button标记，而toolbarbutton则使用的是html中的a标记。

① button组件的属性

属性名

说明

label

指定按钮上的文字

image

为按钮指定图像

dir

用于控制图像和文字哪个显示在前面，默认是图像显示在前面。

若dir="reverse"则文字显示在前面

orient

控制布局是横向还是纵向，默认是横向布局。

orient="vertical"则为纵向布局

onClick

按钮被点击后进行的响应

href

按钮被点击后跳转的页面

mold

取值有：default、trendy、os

autodisable

通过设置这个属性，可以防止重复提交。

例：

效果图：

如果在按钮的id前面加上加号（+），则点击一次后被指定的按钮将变成disabled，需要我们手动变回enabled；如果不加+，则点击时的这次request完成以后，按钮将自动从disabled变成enabled

② 配置button默认的属性

在zk.xml中做如下设置，则可以使按钮的默认mold变成trendy：

<library-property>

<name>org.zkoss.zul.Button.mold</name>

<value>trendy</value>

</library-property>

在zk.xml中做如下设置，则可以使按钮的autodisable指向它自身：

<language-addon>

<component-name>button</component-name>

<extends>button</extends>

<property-name>autodisable</property-name>

<property-value>self</property-value>

</property>

</component>

</language-addon>

③ button上面使用图片

例1：

<?page title="button标签"?>

</window>

效果图：

④ 按钮的onClick与href属性

我们可以通过两种方式为一个按钮指定动作：一是通过onClick来监听；二是使用href来指定一个路径。这两种方式中，href的优先级要高于onClick。如果同时指定两者，则onClick不会被发送。

⑤ 使用html中的button标签

通过指定xml命名空间为native，则ZK解析器会按照html的格式来解析这个命名空间下的组件。(很少用)

例：

（实际应用中，我们可以使用下面的代码跳转到一个jsp页面，或者一个actoin中，等等）

<n:form action="/foo/my_handler" xmlns:n="native">

</n:form>

4.5.3 验证码Captcha

例：

<vbox>

<zscript><![CDATA[

void check(){

if(!tb.getValue().toLowerCase().equals(cpa.getValue().toLowerCase())){

Messagebox.show("请输入正确的验证码");

tb.setValue("请输入");

}

]]>

</zscript>

</vbox>

效果图：

4.5.4 combobutton组件

combobutton是一种特殊的按钮，它里面可以包含一个popup或者menuepopup做为child

例：

<zk>

<popup>

<vbox>

<hbox>

</hbox>

</listhead>

</listitem>

</listitem>

</listbox>

</vbox>

</popup>

</combobutton>

</menupopup>

</menu>

</menupopup>

</combobutton>

</zk>

autodrop属性用于设置鼠标滑过时是否自动打开弹出框。

效果图：

→ →

4.5.5 Fisheye组件

例：

<zk>

<checkbox label="Attach icon edge at bottom"

onCheck='fsb.attachEdge=self.checked?"bottom":"top"' />

<checkbox label="Vertical orient"

onCheck='fsb.orient=self.checked?"vertical":"horizontal"' />

<fisheyebar id="fsb"

style="position:absolute;margin:80px 150px;" attachEdge="top"

itemWidth="80" itemHeight="80" itemMaxHeight="160"

itemMaxWidth="160">

<fisheye

image="/imgs/button04.jpg"

label="folder" onClick="alert(self.label)" />

<fisheye

image="/imgs/button05.jpg"

label="search" onClick="alert(self.label)" />

<fisheye

image="/imgs/button06.jpg"

label="project" onClick="alert(self.label)" />

<fisheye

image="/imgs/button08.jpg"

label="Email" onClick="alert(self.label)" />

<fisheye

image="/imgs/button21.gif" label="Globe"

onClick="alert(self.label)" />

<fisheye

image="/imgs/button23.gif"

label="telescope" onClick="alert(self.label)" />

</fisheyebar>

</div>

</zk>

效果图： →

→

4.5.6 HTML组件

如果我们要在页面上直接使用html标签而不让zk的解析器来解析，那么我们就可以使用html组件。配合<![CDATA[]]>一起使用。

注意：html组件中的内容不是这个组件的child。我们可以在里面使用EL表达式

例：

<html><![CDATA[

<h4>Hi, ${win.title}</h4>

<p>It is the content of the html component.</p>

]]></html>

</window>

效果图：

4.5.7 Iframe组件

iframe组件和HTML中的ifram标签的功能相同。

iframe组件和include组件很相似，但是它们有很大的不同：

◆ include包含进来的子页面是属于当前的页面的，也就是属性当前desktop的一部分。我们可以直接访问include包含进来的组件。包含的动作是在server端，browser对此一无所知。

◆ iframe包含进来的子页面是作为一个单独的页面来加载的。包含的动作发生在browser端。

例：

</window>

4.5.8 Include组件

include组件是一个ID空间宿主。所以不用担心两个include组件中的id会重复。

src属性可以指定为一个servlet、jsp、zul等等。

Include可以包含ZUML页面、静态页面、JSP页面或者一个servlet。

当我们使用Include包含的是一个非ZUML的页面时，那么那个页面中的内容将会被作为Include组件的内容。

当我们使用Include包含一个ZUML页面时，那个被包含的ZUML页面中的组件将会作为Include组件的子组件

例：

简单的include用法我们就不再多言。我们重点讲一下include关于url的参数传递。

① include中通过路径来传递参数

include.zul页面：

<zk>

<![CDATA[

class User{

private int id;

private String name;

private String sex;

public User() {

}

public User(int id, String name, String sex) {

this.id = id;

this.name = name;

this.sex = sex;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public String getSex() {

return sex;

}

public void setSex(String sex) {

this.sex = sex;

}

User user = new User(1, "小张", "女");

]]>

</zscript>

Hello, World!

使用include时，两种传值的方式

</window>

</zk>

temp.zul页面：

</window>

效果图：

通过代码的话，我们可以使用：Include.setDynamicProperty(java.lang.String, java.lang.Object)来传递参数。

接收传递过来的参数时，我们可以使用：Execution.getParameter(java.lang.String)或者使用javax.servlet.ServletRequest的接口，也就是说我们可以通过EL表达式来得到传递的参数值。

通过url，我们只能传递string类型的参数。传递复杂数据类型的参数时请参照上面的例子。

② 刷新include包含进来的页面

例：

<div style="color:red">Hello, World!刷新include进来的页面</div>

</window>

解析：

1、Load按钮所设置的的路径是恒定不变的。当第二次再点击时，就不会进行刷新了。

2、通过先设置inner.src=null后，再设置它的值，这样就可以完成刷新同一个页面了。例如：Reload1按钮

3、通过inner.invalidate()也可以实现相同的效果

4.5.9 Image组件

例：

<zk>

Location: <textbox onChange="updateMap(self.value)"/>

Map: <image id="image"/>

<zscript><![CDATA[

void updateMap(String location) throws Exception{

if (location.length() > 0) {

org.zkoss.image.AImage img = new org.zkoss.image.AImage(location);

image.setContent(img);

}

]]>

</zscript>

</zk>

效果图：

Image组件还支持javax.awt.image.RenderedImage产生的图片：

例：

<zscript><![CDATA[

import java.awt.*;

import java.awt.image.*;

import java.awt.geom.*;

int x = 10, y = 10;

void draw(int x1, int y1, int x2, int y2) {

BufferedImage bi = new BufferedImage(400, 300, BufferedImage.TYPE_INT_RGB);

Graphics2D g2d = bi.createGraphics();

Line2D line = new Line2D.Double(x1, y1, x2, y2);

g2d.setColor(Color.blue);

g2d.setStroke(new BasicStroke(3));

g2d.draw(line);

img.setContent(bi);

}

draw(x, y, x += 10, y += 10);

]]>

</zscript>

</window>

4.5.10 Imagemap组件

例：

点击图片显示点击的坐标

点击我们设置的区域，显示对应的区域id

</imagemap>

</window>

第一个imagemap的效果图：

4.5.11 Label组件

Label组件是一个特别常用的组件。用法也很简单。我们这里主要讲一下它的3个属性：pre、multiline和maxlength

属性名	说明
pre	用来屏蔽多余的空白字符。多余即首尾的空白字符（处理后被去掉），和中间多个空白字符（处理后变成一个）。
multiline	取值：true、false。是否显示多行
maxlength	最多显示几个字符

例：

<zscript><![CDATA[

lbl1.value = " this thing has spaces.\nnext line.";

lbl2.value = " this thing no space.\nnext line.";

lbl3.value = " this is more than 10 chars.";

]]></zscript>

</vbox>

</window>

效果图：

4.5.12 Menue组件

例：

</menupopup>

</menu>

</menupopup>

</menu>

</menupopup>

</menu>

</menubar>

</window>

效果图：

→ →

5 根据需求和条件手动控制页面的加载和组件的创建

5.1 根据条件来控制组件的创建

ZK中提供了很多根据条件来创建组件的方式。注意他们和visible的区别。visible是控制组件的显示和隐藏，而这里要介绍的是控制组件是否创建。

5.1.1 if和unless属性（适用于所有组件）

基本上所有的zk组件都有if和unless属性，他们用于控制组件是否被创建。

例1：当param.readonly为true时，我们使用label组件，否则使用textbox组件

例2：只有当a等于1，b不等于2的时候，这个window才会被创建

...

</window>

5.1.2 switch和case（适用于zk标签）

我们一般用switch case组合来控制ZUML页面的创建。第一个匹配成功的条目才会被创建，只要一个匹配成功，就不再做匹配。没有case属性的zk标签是默认的匹配项。

例：

当${fruit}值为apple时被创建

</zk>

当${fruit}值为${special}时被创建

</zk>

<zk>

当上面没有一个匹配成功时被创建

</zk>

我们也可以为case指定多个值，只要其中的一个能够匹配成功，那么整个表达式就匹配成功，该zk标签中的内容将被创建。

例：

当${fruit}的值为apple 或 ${special} 时被创建

</zk>

我们还可以在case中使用正则表达式：

例：

Evaluate if the regular expression, ap*.e"., matches the switch

condition.

</zk>

5.1.3 choose和when（适用于zk标签）

choose when的功能与switch case差不多，这里不再过多介绍。

例：

Evaluated if the when condition is true.

</zk>

Evaluated if none of above cases matches.

</zk>

注：你不需要为choose属性指定值，它的作用仅仅是为了标识choose的结束，即：通过它可以找到choose结束的地方

5.2 根据需求加载页面或组件

一个ZUML文件可以被划分成多个页面，一般情况下，这些页面都是同时被加载进来的。这样，在页面首次被加载的时候将会消耗很多带宽，为了提高性能，我们可以通过fulfill属性来延迟页面的加载，也就是我们说的根据需求来加载。

不仅是页面可以延迟加载，组件也是可以延迟加载的。例如下拉框，我们在点击它的时候才加载里面的数据的话，我们也可以为其设置fulfill属性

例1：当combobox收到了onOpen的事件后再加载里面的数据

</combobox>

例2：通过事件触发和组件的id来指定组件的加载

Any content created automatically when btn is clicked

</div>

不属于同一个id空间的两个组件，我们可以通过路径来指定：

Any content created automatically when btn is clicked

</window>

按需加载一个页面：

我们也可以为fulfill属性指定一个页面。这个延迟加载的页面将会作为相应的组件的children。

<zk>

</zk>

6 迭代赋值

默认情况下，ZK加载器为zuml页面中的每个XML元素实例化一个组件。如果我们想生成一个组件集的话，我们可以通过forEach来实现。

例：

</listbox>

它等同于

</listbox>

也等同于

<zscript><![CDATA[

String[] grades = new String[] {"Best", "Better", "Good"};

]]></zscript>

</listitem>

当ZK加载器通过集合中的项目来迭代的时候，它会更新两个隐含对象：each和forEachStatus。

这种迭代方式依赖于forEach属性的值的类型。

forEach属性的值必须是一个集合类型。大致有以下几种情况：

① java.util.Collection：迭代Collection集合中的每个元素

② java.util.Map：迭代Map中的每一个Map.Entry

③ java.util.Iterator：迭代Iterator中的每个元素

④ java.util.Enumeration：迭代Enumeration中的每个元素

⑤ Object[]、int[]、short[]、byte[]、char[]、float[]、double[]：迭代数组中的每个元素

⑥ null：不会生成任何组件，将会被忽略

看下面这个例子：

<zk>

String[] classes = new String[] {"College", "Graduate"};

Object[] grades = new Object[] {

new String[] {"Best", "Better"}, new String[] {"A++", "A+", "A"}

};

</zscript>

</listhead>

<listitem label="${forEachStatus.previous.each}: ${each}"

forEach="${grades[forEachStatus.index]}"/>

</listbox>

</hlayout>

</zk>

效果图：

将<hlayout></hlayout>去掉后的效果图：

解析：forEach就好比一个for循环，它循环的范围就是forEach所在的标签的开始标签至结束标签处。故，在上例中，listbox处的forEach循环它里面的listhead和listitem组件。我们不难发现，这是一个两重循环。listitem处还有一个forEach，也就是第二重循环。循环第一次开始时，listheader处的each被赋值为”College”。listitem处又有一个forEach，这时each从属于listitem处的forEach，这时我们要引用上一层循环中的each的话，只能通过forEachStatus.previous.each来得到。

注：forEach好比一个for循环，each就好比一个iterator

forEach和each组合在一起可以与下面的代码类比：

while(iterator.hasNext()){//forEach开始处

each = iterator.next();//给each属性赋值

}

我们可以在zscript中直接使用each和forEachStatus：

<zscript><![CDATA[

self.parent.appendChild(new Label("" + each));

]]></zscript>

</button>

</window>

效果图：

你不能在事件监听器中获得each和forEachStatus的值，因为当页面加载完成后，each已经不存在了，而这个时候我们再去触发事件想要得到each中的值的话，就不能够实现了。

一个简单的解决办法就是在页面加载的时候就将第一个each的值都用组件的属性存放起来，这样的话，当页面加载完成后，我们就可以通过检索预先存放的属性值来得到我们想要的值了。

例：

<button label="${each}" forEach='"中国","美国"'

onClick='alert(self.getAttribute("country"))'>

<custom-attributes country="${each}"/>

</button>

</window>

注：用户自定义属性，属性名是随便取的，但是标签名一定是custom-attribute

迭代集合中的一部分：通过指定forEachBegin和forEachEnd

<grid>

<rows>

${each.name} ${each.title}

</row>

</rows>

</grid>

7 XML命名空间简介

在ZK中标准的命名空间有3个：client、native、zul

ZK解析器在加载一个页面的时候，首先通过页面的拓展名来确定页面默认的命名空间。

在ZK工程中一般有两种页面：.zul和.zhtml。.zul的页面默认按zul的命名空间来进行解析。.zhtml的页面默认按native的命名空间来解析（即把它当成一个普通的html页面）。

如果我们想在默认的命名空间下使用不同的命名空间，让zk解析器按指定的命名空间来解析的话，我们就可以通过下面的方式来指定页面的命名空间。

① 指定由客户端（前台）来控制组件，而不是后台

② 使用html的形式来解析组件（在zul页面中）

<n:table xmlns:n="native">

<n:tr>

<n:td>Username</n:td>

<n:td><textbox/></n:td>

</n:tr>

<n:tr>

<n:td>Password</n:td>

<n:td><textbox type="password"/></n:td>

</n:tr>

</n:table>

③ 使用zul的形式来解析组件（在zhtml页面中）

<u:window xmlns:u="zul"/>

</p>

8 Zscript的使用

zscript是zuml页面上的页面脚本。

zuml页面中的脚本分两种：1、客户端脚本 2、服务器端脚本

zscript是属于服务器端脚本。<zscript>里面的代码是java代码，它运行在服务器端，所以它能够访问java包，在它里面你也可以定义变量、方法甚至是类，在同一个page下它对EL表达式是可见的。也就是说，EL表达式可以使用<zscript>中的变量、方法、类等。

在zscript中的代码必须是一段有效的xml文本。所以，在用要特殊字符的时候我们需要转义。为了避免转义，我们通常使用CDATA来包围这段代码。<![CDATA[代码]]>

书写zscript的方式大致有三种：

1、标准格式：

<![CDATA[

//代码

]]>

</zscript>

2、将zscript写在事件监听器上

如下面的例子

3、将zscript写在attribute中

如果处理事件处理器的代码比较复杂，我们可以在attribute元素中指定事件的名字，然后编写代码。上面的代码可以写为：

<attribute name="onClick"><![CDATA[

String tmp=inner.src;

inner.src=null;

inner.src=tmp;

]]></attribute>

</button>

zscript中的变量对EL表达式是可见的：

例：

<![CDATA[

Date now = new Date();

]]>

</zscript>

9 在ZUML页面上使用tld文件中指定的函数

在页面上，我们经常会对一些内容进行格式化，然后再输出。通常我们都将这些转换函数写成一个公有的函数。在ZK中我们可以通过以下步骤来实现在页面上调用指定的函数：

1、用一CommonUtils类将所有的公共函数写在一起：

例：

public class CommonUtils {

public static final String TIME_PATTERN_DEFAULT = "yyyy-MM-dd HH:mm:ss"; private static String getPattern(String pattern){

if("".equals(pattern) || null==pattern){

pattern = TIME_PATTERN_DEFAULT;

}

return pattern;

}

public static String parseDateToString(Date date, String pattern){

String redate = null;

pattern = CommonUtils.getPattern(pattern);

SimpleDateFormat sdf = new SimpleDateFormat(pattern);

redate = sdf.format(date);

return redate;

}

2、新建一个tld文件来描述CommonUtils类中的每一个公共函数

<name>parseDateToString</name>

<function-class>com.cn.developer.common.CommonUtils</function-class>

<function-signature>

java.lang.String parseDateToString(java.util.Date, java.lang.String)

</function-signature>

Returns a formatted date.

</description>

</function>

</taglib>

3、在页面上引用我们的tld文件

<?taglib uri="/tld/commonFunction.tld" prefix="c"?>

<![CDATA[

Date now = new Date();

]]>

</zscript>

</window>

访问上面的页面的效果图：

10 自定义变量解析器

将EL表达式中特定的名字转换成我们指定的值。

下面举一个例子：

<zk>

</listbox>

</zk>

如果直接访问这个页面，肯定会报错。因为zk无法解析customers。下面的操作将会解析出这个页面。

首先，我们定义一个类，这个类要实现VariableResolver接口：

public class CustomerResolver implements VariableResolver {

@Override

public Object resolveVariable(String name) throws XelException {

if ("customers".equals(name))

return Customer.getAll("*");

return null; //not a recognized variable

}

在Customer类中加入静态的方法Customer.getAll(java.lang.String)

public class Customer {

private int id;

private String name;

private String sex;

public Customer() {

}

public Customer(int id, String name, String sex) {

this.id = id;

this.name = name;

this.sex = sex;

}

//略去getter和setter

//..........

public static List<Customer> getAll(String str){

List<Customer> list = new ArrayList<Customer>();

list.add(new Customer(1, "张三", "男"));

list.add(new Customer(2, "李四", "女"));

return list;

}

resolver.zul：

<?variable-resolver class="com.cn.developer.resolver.CustomerResolver"?>

<zk>

</listbox>

</zk>

最后得到的效果：

我们可以将这个Resolver设置成全局的，而不需要每个页面都引用，可以在zk.xml中加入下面的代码：

<listener-class> com.cn.developer.resolver.CustomerResolver </listener-class>

</listener>

10 ZK-MVVM开发模式

ZK6.0之前的版本都是采用MVP(Model-View-Presenter)设计模式。从ZK6.0开始就有了很大的不同，采用MVVM(Model-View-ViewModel)设计模式。

10.1 ZK MVP开发模式

我们通过一个例子来剖析MVP的开发模式。

假如我们要实现下面的功能：Client客户端页面上点击一个按钮，然后从Server服务端返回消息”Hello World”

MVP通过下图所示来实现：

作用过程：

①用户在屏幕上点击按钮(一个动作action)，一个通信事件就被触发。

②后台的事件监听器(event listener)处理这个事件(event)。

③访问数据库(access data)并返回

④用户界面元素(UI element)被改变，相应的把视觉反馈(visual feedback)呈现给用户

语法(syntax)	说明(explanation)
viewModel="@id(name) @init(expression)"	用于设置ViewModel。 ◆ 一个拥有apply="org.zkoss.bind.BindComposer"属性的组件可以使用这个注解，如果没有这个注解，那么这个组件将会被设置到一个composer上。 ◆ expression：如果它被赋予一个Class，那么这个Class将创建一个ViewModel实例。
comp-attribute="@load(expression)"	单向绑定。用来加载属性的表达式 ◆ 用户可以在表达式中指定绑定条件，通过参数before和after来设定。例如@load(vm.filter, after='myCommand')，这表示Binder会在执行完command方法myCommand之后加载这个属性
comp-attribute="@save(expression)"	单向绑定。保存组件的属性值到ViewModel属性中的表达式。 ◆ 用户可以在表达式中指定绑定条件，通过参数before和after来设定。例如：@save(vm.filter, before='myCommand')，这表示Binder会在执行command方法myCommand之前保存这个属性到ViewModel
comp-attribute="@bind(expression)"	双向绑定。在组件的属性和ViewModel的属性之间实现双向绑定，它不支持条件绑定，也就是说在绑定时不能使用条件。 ◆ 它等同于@load(expression) @save(expression) ◆ 如果组件的属性不支持@save的话，Binder将会自动忽略它 ◆ 通知改变(notify change)的例子：对于表达式vm.filter，如果任意一个通知(notification)说vm或vm.filter改变了，那么这个属性将会被重新加载 ◆ 复杂一点的例子：对于表达式e.f.g.h，如果任何一个通知(notification)说e.f.g.h、e.f.g、e.f或者e被改变了，那么组件的属性将会被重新加载
@converter(expression, arg = arg-expression)	为绑定提供一个转换器conveter。 ◆ 如果expression是一个ZK提供的conveter，那么它将会直接被使用 ◆ 如果expression是一串字符，那么它将会从ViewModel中查找相应的getConveter方法，方法的名字为get+expression返回值为Conveter。参照上面提到conveter的代码。 ◆ 在执行conveter之前，你可以传递多个参数给conveter。这些参数将会在调用conveter方法之前被赋值。
comp-event="@command(expression, arg =another-expression)"	组件的事件绑定，绑定到相应的事件command方法。 ◆ expression必须是ViewModel中的一个command方法的名字（当然，这个方法必须是以@command为注解的） ◆ 事件被触发时，它将会按照ZK Bind Lifecycle来执行这个command方法

语法(syntax)	说明(explanation)
@NotifyChange on setter	它是用于ViewModel类属性的setter方法上的，当调用了属性的setter方法之后，它将会通知(notify)Binder该属性的值被改变了。它是默认开启的，所以，当通知目标(notification target)和属性相同时，在属性的setter方法上你可以省略不写这个注解。 ◆ 我们可以为属性properties指定name，通过@NotifyChange(expression)、@NotifyChange({expression1,expression2,……})，当指定的属性改变时调用这个setter方法
@NotifyChange on command method	它可以用于command方法上，当这个command方法被调用时，通知Binder属性值改变了
@NotifyChangeDisabled on setter	这个注解用在属性的setter方法上可以使setter方法默认开启的@NotifyChange关闭
@Command('commanName')	定义一个command方法。commandName是可选的，如果不指定的话，command方法的名字默认就是它所注解的方法的名字。

秒客网

ZK框架的分析与应用

相关文章