试着运行例子
1.下载todo.zip 文件 并且解压里面的war包文件和一个文件夹。
2.部署war包到Tomcat下$TOMCAT_HOME/webapps/ 目录下 Tomcat会自动解压war包。
3.复制hsqldb文件夹 (数据库文件)到磁盘的根目录下面(例如 c:\)。
4.启动tomacat。
5.打开你的浏览器,访问http://localhost:8080/todo/todo.zul(端口号是在tomcat配置文件里面配置的)你将看到下面的这个截图:
功能描述:
1. 上图所示按钮所对应的事件,当按下“Add“按钮的时候,增加一条记录到数据库。
2. 选择表格中任意一行将显示该行记录的所有字段信息,可以点击“Update”按钮去更新字段信息。
3. 选择表格中任意一行,点击“Delete”按钮去删除选择的记录。
用户界面:
你的第一个ZK组件
第一步是创建一个扩展名为.ZUL文件,我们把它命名为todo.zul,然后把todo.zul 放到web的根目录下面,例如:$TOMCAT_HOME/webapps/ProjectName/ 。
你可以向定义HTMl 组件一样在定义ZK组件在todo.zul文件中 向下图所示,定义一个窗口组件:
这个时候 打开你的Tomcat ,用浏览器浏览地址为:http://localhost:8080/todo/todo.zul ,这个时候将会出现一个窗体,窗体名称为To do List。
ZK中所有的东西都是组件,你可以改变组件的属性值。例如你可以改变title,width,border 等属性值在窗体组件中。这个是非常简单明了,现在你就可以试试改变这些属性,看一下效果。
ZK组件的等级关系
接下来,我们就要使用更多的ZK组件来丰富我们的页面。现在我们需要一个显示数据的表格,我们可以定义一个listbox(列表)组件,这个组件可以显示和修改我们的数据。 Listbox组件需要有结束标示,如下图所示
在这个例子当中,listbox(列表)组件成为了window(窗体)组件的一个子组件。
确实,这种情况在ZK组件中我们称之为等级(包含)关系。在实际的开发页面的时候,如果你错误的定义,组件将会出现页面异常。
比如说,你把window(窗体)组件作为listbox的一个子组件,就会出现页面异常。
嵌套组件:
定义一个listbox,我们用Id(id=“box”)描述控件的唯一性。所以我们可以用“box”来引用定义的listbox组件。 Listbox是个嵌套组件,他可以包括两种子组件:listhead(列表头),listitem(列表项),如下图所定义:
我们还没有完成。我们在第一三个表头组件来表示三列:“Item”,“Priority”,“Date”,
注意组件的结束符。
好了,看看界面效果吧:
现在,我们在表格中定义了三列,表格中的每一行需要三个字段来填充。定义三个listcell(单元格)组件包含在listitem(列表项)中,如下图所示:
列表组件的嵌套结构如下图所示:
输入组件:
为了显示列表三个字段,我们需要输入信息,包括Item字段 ( 文本内容 ),prority字段(数值型) date 字段 (日期型)。
要完成以上的工作,我们需要定一个 textbox(文本框),一个inputbox(输入框)和一个databox(日期选择框)三个组件,如下图所示:
看一下现在的页面效果:
布局组件:
我了区分三个输入框在列表框显示位置,我们可以定义个groupbox(分组框)组件给输入组件分组,同时groupbox的边框会环绕在输入组件四周:
为了分组组件,我们可以定义个标题。这个标题标签处于groupbox组件的顶端,这个标题很向HTML的 legend标签,页面效果如下所示:
持久层
在下面的章节中,我们首先介绍下数据库概要(database schema)和领域对象(domain Object)及Dao对象。
数据库概要:
我们把数据持久化到数据库的表中,需要相应的在数据库建立四个字段:id,name,prority,date 数据库字段,设计如下图所示:
Field | Type |
id | varchar(50) |
name | varchar(50) |
priority | int |
date | date |
领域对象:
根据上面的数据库表字段,我们可以封装成需要的领域对象。
Dao 对象:
为了与数据库简单的交互,我们需要Dao 对象。Dao对象里面封装了几个方法:findAll(),delete(),insert(),update()。
台界面与后台数据库进行交互
根据我们的需求,我们想实现增加,修改,编辑,删除事件。在下面的介绍当中,我们会学习到如何实现前台与后台数据库之间的交互。
java代码配合ZK组件使用
ZK众多特性中,有一项是在zul页面当中可以支持java代码。 ZK有三点规定要求:直接可以在页面中嵌入java代码;可以把java代码放在独立的文件中;或者页面文件直接引用编译后的class文件;当然,本指南是按照第一种规定以方便解释。
Zul页面嵌入java代码:
首先,我们需要从数据库中加载数据。我们可以定义标签,在标签里面嵌入我们java代码。 <zscript>元素专门定义脚本的标签。我们可以在ZUL页面定义。这里可以定义全局的变量和方法,也可以实例与数据库连接的DAO对象,我们将把查询的结果放到List中。
在<zscript>中定义的全局变量可以通过el表达式访问。你可以使用el表达式在ZUML页面的任意地方。El表达式的语法标示:${expr}
初始连接数据库:
使用forEach循环:
下一部就是读取数据库存储的字段显示到listbox,使用forEach循环。ForEach循环属性是为了用户批量控制组件。
如果你显示字段的集合,ZK Loader(zk 加载器)将创建一些相同的组件去显示这些字段,每个变量代表一个存储在集合中的对象的实例,我们可以使用el表达式去调用对象的getter方法找回他们的属性,如下图所示:
保存用户输入的数据到数据库中
首先,我们要定义一个“add()”方法在<zscript>中。
增加了“add()“方法后,我们将要完成以下三个任务:
1. 检索用户输入数据
2. 保存数据到数据库
3. Ajax局部刷新页面
检索用户输入数据
ZK允许你在java代码里面访问UI组件。你可以通过ID标识符访问一个组件。
在这个例子中,用户输入的数据需要三个输入控件接收,textbox(id ="name"), intbox(id ="priority"), 和datebox(id="date")。
我们可以通过访问控件的Value属性获取用户输入的值,如下图所示:
保存数据到数据库
一旦我们获取到数据,我们就可以把数据持久化到数据库中:
Ajax刷新页面
难以置信,ZK允许我们通过java代码实现Ajax技术刷新页面。既然这样,我们使用java代码插入一项到listbox中,ZK将自动刷新页面:
appendChiild()方法是插入子项的方法。
完整的代码如下所示:
ZK组件中的注册事件监听
来自页面90%以上的反馈触发了用户的动作。“add()”方法没有异常,这个方法仅当我们单击“add”按钮才会被调用。
确定按钮是否被单击,我们要定义个一个 OnClick的事件来监听按钮组件。用户如果单击“add”按钮的时候,将调用add()方法。
是不是很简单明了? 再次,我们看到了ZK提供了非常简单的解决方式:
其他的控制代码:
其余的控制代码在下面列出:
o delete(),从数据库删除一条记录,更新listbox显示
o update(),更新数据库的一条记录,更新listbox显示
o move() , 从listbox中移除数据
o cleargp(),置空groupbox里面的输入组件的内容
注册统一的监听事件:
最后一步我们将注册统一的组件监听事件去调用我们写的方法
o 在“delete”按钮上注册 onClick监听事件
o 在“edit”按钮上注册onClick监听事件
o 在 listbox组件上注册onSelect监听事件
总结:
这个指南包含了编写一个简单web应用的ZK基本技术。