ZK教程.docx
《ZK教程.docx》由会员分享，可在线阅读，更多相关《ZK教程.docx（18页珍藏版）》请在冰豆网上搜索。
ZK教程
ZK简明教程
原文见http:
//www.zkoss.org/doc/tutorial.dsp
ZK入门
这是一个针对ZK新用户的简明教程。
我们将引导您使用数据库来开发一个简单的Web应用程序，并且一步步地解释。
尽管此教程的对象为ZK的新用户，但是仍要求读者具备一些Java的编程经验。
不过，这就是您使用ZK开发基于AjaxWeb应用程序的需要知道的一切。
在此教程中，我们假定您已经安装了JDK（1.4以上），及Servlet容器（例如，Tomcat）。
首个ZK应用程序（To-doList）
假设我们需要这样一个应用程序，它可以存储未来我们要做的事情，以避免我们总是将其忘记。
因此，我们需要使用数据库来创建一个简单的应用程序。
如果没有安装数据库服务，则使用Java数据库（HSQLDB）比较合适。
体验一下这个程序在线演示
1.下载todo.zip，解压此包括一个war文件及一个文件夹的zip文件。
2.将此应用程序部署到Tomcat，即将todo.zip文件复制到$TOMCAT_HOME/webapps/目录，Tomcat将会处理余下的工作，包括解压及部署。
3.将hsqldb文件夹（数据库文件）复制到开发目录的根目录（例如,C;\）（译者注：
即看你的Tomcat安装在哪个盘，若在D盘，则复制到D:
\）。
4.启动Tomcat。
5.打开浏览器，输入http:
//localhost:
8080/todo/todo.zul（端口号取决于您对Tomcat的配置），那么将会看到下面的情景。
所有的情景
某件事情的关键信息，点击Add按钮可以将新数据插入到数据库。
选中表中任一行来在相应的域中显示事件信息，以方便用户修改，点击Updata按钮后即可修改事件信息。
选中表中任一行，然后点击Delete按钮即可删除选中事件。
安装开发目录
我们的首要任务是安装开发目录，包括将ZK的必须库文件引入到开发目录，并配置相关文件。
开发目录的结构
在tomcat的Web应用程序目录下（$TOMCAT_HOME/webapps）创建一个开发目录。
开发目录的结构如下：
+ProjectName
+META-INF
+WEB-INF
+classes
+lib
web.xml
zk.xml
+src
webpages
WEB-INF/web.xml定义了必须的servlet，及运行ZK应用程序所需要的监听器（listener）
WEB-INF/zk.xml为ZK的配置描述文件（可选）
WEB-INF/classes包括了所有的Javaclass文件
WEB-INF/lib包括了ZK的必须库文件
此应用程序必须的jar文件如下：
ZK
.bsh.jar：
BeanShellJava代码解释器
.commons-el.jar：
Apache的EL表达式解释器
.zcommon.jar：
ZK的通用库
.zhtml.jar：
XHTML相关组件
.zk.jar：
ZK核心代码
.zkplus.jar：
与AcegiSecurity,Spring,Hibernate,和databinding集成的代码
.zul.jar：
XUL相关组件
.zweb.jar：
web相关功能代码
HSQLDB
.hsqldb.jar：
hsqldb数据库
src/下为源文件
web页面可以直接放在主目录下，或者其下的目录
web.xml的配置
第二步是在web.xml中为ZK定义必须的servlet，及listener。
--ZK-->
Usedtocleanupwhenasessionisdestroyed
ZKSessionCleaner
org.zkoss.zk.ui.http.HttpSessionListener
ZKloaderforZUMLpages
zkLoader
org.zkoss.zk.ui.http.DHtmlLayoutServlet
update-uri
/zkau
1
zkLoader
*.zul
zkLoader
*.zhtml
TheasynchronousupdateengineforZK
auEngine
org.zkoss.zk.au.http.DHtmlUpdateServlet
auEngine
/zkau/*
持久层
在接下来的章节，将会介绍数据库模式（schema），域对象（domainobject），及DAO。
数据库模式
根据此应用程序的要求，我们需要下列属性，包括事件id，事件name，事件priority，事件date，数据库模式如下：
字段
类型
idvarchar（50）
namevarchar（50）
priorityint
datedate
域对象
根据上面的表格，我们可以创建相应的域对象。
publicclassEvent{
privateStringid;
privateStringname;
privateintpriority;
privateDatedate;
publicEvent（）{}
publicEvent（Stringid,Stringname,intpriority,Datedate）{
this.id=id;
this.name=name;
this.priority=priority;
this.date=date;
}
//getterandsettermethodsareommited,pleaserefertothesourcecode.
}
DAO对象
根据此Web应用程序的需求，DAO对象需要如下方法，包括findAll（）,delete（）,insert（）,和update（）。
publicclassEventDAO{
privateStringurl="jdbc:
hsqldb:
file:
/hsqldb/event";
privateStringuser="sa";
privateStringpwd="";
publicEventDAO（）{
try{
Class.forName（"org.hsqldb.jdbcDriver"）;
}catch（ClassNotFoundExceptione）{
e.printStackTrace（）;
}
}
//Theimplementationisommited,pleaserefertothesourcecode.
publicListfindAll（）{}
publicbooleandelete（Eventevt）{}
publicbooleaninsert（Eventevt）{}
publicbooleanupdate（Eventevt）{}
}
用户界面页面
您的首个ZK组件
第一步是创建一个后缀名称为zul的文件，例如todo.zul，并将此文件放置在您的应用程序的主目录，例如$TOMCAT_HOME/webapps/ProjectName/。
就像使用HTML那样声明一个ZK组件，并按如下方式声明一个window组件，
然后，启动Tomcat，打开浏览器来访问此页面，例如：
http:
//localhost:
8080/todo/todo.zul。
结果如下所示，window标题为“TodoList”。
ZK的一切都是组件，因此，你可以根据你的喜好改变window的title,width,和border。
这非常简单且直观。
试试改变这些属性，并观察结果。
ZK组件的层次关系
接下来，我们使用更多的ZK组件来丰富您的页面。
由于我们需要在一个表格中显示数据，我们可以声明一个listbox组件，此组件被设计为在闭合的window组件内显示数据，如下，
在此例子中，listbox组件成为window的一个子组件。
是的，在ZK组件件存在层次关系，因此，如果您在上下文声明了一个错误的组件，将会遇到UI异常，例如将window组件声明为listbox的子组件。
嵌套组件
在listbox的声明中，我们使用id属性来指定listbox的标识（“box”），这样可以使用“box”来关联这个listbox。
此外,listbox为一个嵌套组件，且它支持两种子组件，listhead（亦作表格的列），和listitem（亦作表格的行）。
但是，这尚未结束，由于我们在表格中定义三列，所以让我们来在闭合的listhead标签内声明三listheader组件，包括Item”,“Priority”和“Date”，如下：
结果如下：
由于在表格中有三列，且表格中的每行需要三个字段。
在闭合的listitem组件内声明三个listcell组件。
Listbox组件的嵌套结构如下：
+listbox
+listhead
listheader
+listitem
listcell
输入组件
除了在listbox中显示这些事件，我们也需要输入关于事件的信息。
包括事件名称（文本值），事件优先级（数值），及事件日期（日期值）。
因此，我们在闭合的window组件内声明一个textbox,一个intbox及一个datebox，如下，
Item:
Priority:
Date:
结果如下所示，
布局组件
为了在视觉表现（visualpresentation）将输入组件和上面的listbox分开，我们声明一个groupbox
组件来将输入组件分为一组，且在输入组件周围加上边框。
Item:
Priority:
Date:
除了groupbox组件，我们可以声明一个caption组件来在groupbox的顶端显示一个“Event”标签，且caption组件就像HTML的图例（legend）元素一样工作，结果如下：
到现在为止，用户界面页面部分已经完成，下一步为连接页面与数据库。
（续）连接数据库
由 laifu于周日十一月04,200710:
36am
UI与数据库间的集成
依照需求，我们需要显示事件，添加，编辑及删除一个事件。
在下面的章节，我们将实现页面与数据库的集成。
使用Java代码实现与ZK组件的互动
ZK最具特色的特性之一便是可以使用Java代码与在页面定义的ZK组件实现交互。
ZK提供了三种选择。
你可以将这些Java代码直接嵌入到页面，或写入一个单独的文件。
另外，ZK允许使用编译过的Javaclass文件与页面交互。
为了更好的解释，在此教程中我们将精力集中在第一种选择上。
将Java代码嵌入到页面
首先，我们从数据库加载事件，并且通过声明一个闭合的标签，将Java代码嵌入到此页面。
zscript元素为定义脚本代码的一个特殊元素，当每次ZUML页面提交时元素都会被赋值（evaluate）。
典型的应用为初始化，声明全局变量及方法。
因此，我们声明eventDAO的一个实例用于访问数据库，并将查询结果存储在List中。
EL表达式可以访问到定义在zscript元素中的全局变量。
就像JSP，你可以在ZUML页面的任何地方使用EL表达式，语法为${expr}。
数据库访问的初始化如下，
importevents.Event;
importevents.EventDAO;
importjava.util.ArrayList;
//fetchalleventsfromdatabase
EventDAOevtdao=newEventDAO（）;
ListallEvents=evtdao.findAll（）;
Item:
Priority:
Date:
使用forEach循环
下一步为将存储在allEvents变量中的数据提交到listbox组件。
forEach属性被用于控制需创建多少组件。
如果你为forEach指定了一个对象集合。
ZK加载器（ZKLoader）将会依照指定的集合创建相应数量的组件。
each变量用于呈现对象集合中的一个对象实例。
我们可以使用EL表达式来调用对象的getter方法来获取其属性，如下，
importevents.Event;
importevents.EventDAO;
importjava.util.ArrayList;
//fetchalleventsfromdatabase
EventDAOevtdao=newEventDAO（）;
ListallEvents=evtdao.findAll（）;
Item:
Priority:
Date:
升级会员 