ZK 学习教程.docx
《ZK 学习教程.docx》由会员分享，可在线阅读，更多相关《ZK 学习教程.docx（118页珍藏版）》请在冰点文库上搜索。
ZK学习教程
ZK学习总结
（1）
2011-09-20
目录
1了解ZK1
1.1理解ZK1
1.2ZK特点1
2ZK环境搭建3
2.1安装环境前，需要下载的东西：
3
2.2安装过程3
2.3第一个用Eclipse创建的ZK项目：
HelloWorld7
2.4例子中的配置分析12
3组件基础属性及事件15
3.1ID属性15
3.2IF和unless属性16
3.3use和apply属性16
3.4forEach属性20
3.5事件处理20
4组件属性及重要函数28
4.1标签组件28
4.2按钮组件30
4.3日历组件31
4.4图像组件32
4.5窗口34
4.6布局组件39
4.7标签页44
4.8网格48
4.9菜单56
4.10列表框59
4.11树形组件64
5应用示例71
5.1功能简介71
5.2建立项目环境71
5.3登陆功能72
5.4权限判断73
5.5页面布局实现74
5.6权限管理实现75
5.7信息中心模块77
5.8示例配置代码79
1了解ZK
1.1理解ZK
ZK官方网站及<>中有关于ZK的定义：
“ZK是一个事件驱动（event-driven）的，基于组件（component-based）的，用以丰富网络程序中用户界面的框架。
ZK包括一个基于AJAX事件驱动的引擎（engine），一套丰富的XUL和XHTML，以及一种被称为ZUML（ZKUserInterfaceMarkupLanguage，ZK用户界面标记语言）的标记语言”。
通过这么一段时间的接触，体验到ZK是C/S构架在WEB应用中的实现。
写过C/S程序的同学应该能够理解C/S构架特点，如C++,.NET等语言的应用程序构架，以上语言在编写C/S构架程序的时候都是基于各个组件的应用，如窗口、按钮、列表等，用面向对象的语言来说，C/S程序是由各个可视化的对象组成的。
最简单的程序需要有以下几个步骤，第一，编写前台数据输入页面，然后编写后台处理数据的代码，最后编写数据处理的结果的页面。
以上的3个步骤在B/S框架中通常是独立分开的，而目前ZK框架则将三者能够绑定在一起，在一个ZK得页面中完成。
像桌面程序一样，每个显示页面关联一个后台程序，页面中元素值及属性在后台程序中均能够随时得到，后台程序也能够控制页面元素。
ZK是基于组件的，每个组件都有对应的HTML页面显示，又会对应一个JAVA对象。
于是用户可以通过后台程序中对组件JAVA对象的处理来更新页面的HTML显示，而页面中元素的从属关系则体现在Java中的List类，每个组件都能够获得属于其中的元素列表（List）。
1.2ZK特点
通过这么一小段时间的ZK学习与应用，总结一点我认为特点与体会。
1.组件多样，能够轻松完成普通web程序很难完成的树、图表、页面局部动态变换、标签页、分页网格等功能，是实现富客户端应用的良好工具。
2.开发模式简单，只需要掌握各个组件应用变可以轻松完成应用开发。
但利用ZK开发还有些缺点的地方
1.学习资料较少，只有官方网站中的例子，且例子均是局部功能，没有完整的WEB项目参考。
这样就不能了解类包及页面如何分配等相关知识，如目前比较缺少在ZK中通用的对数据库进行增删改查的例子，打开2个window间数据传递等功能。
2.感觉网格不是很好用，网格中的一行可以显示一条数据，但如何通过一行直接获得绑定的数据？
还是事件处理部分，事件处理是一个组件的特定函数，即一个类的函数，而函数中处理数据经常需要其他组件的数据，如何获得其他组件数据?
唯一的方法似乎是事件监听类为组件的内部类。
3.版本问题，目前ZK最新式5.0,其中官网中的DEMO均是此版本的，而其他的DEMO及Eclipse的插件均是3.6版本的ZK，导致从例子中学习的一些程序代码在其他环境中运行出错。
4.编译源码问题，由于功能需要，需要对项目源代码进行重新编译，但ZK的编译需要在Linux或模拟Linux环境下运行，不是很方便，目前还没掌握。
2ZK环境搭建
2.1安装环境前，需要下载的东西：
作为一个基于java的webframework，再使用ZK之前，需要成功安装JDK和tomcat5.5或者更高的版本，所以要提前下载的东西为：
下载JDK（JavaSE）安装包；
下载Tomcat安装包；
下载EclipseIDE软件开发工具安装包，我们项目组目前Eclipse环境为3.4；
下载ZKLibrary；
下载ZKStudio
对于ZKLibrary可以再http:
//www.zkoss.org/download/zk.dsp下载，ZKStudio插件可以在http:
//www.zkoss.org/product/zkstudio.dsp下载。
2.2安装过程
2.2.1安装Java运行环境
Java运行环境（Jre）是运行ZK的基础，也是运行servelet容器必需的。
Jre可以登录SUN的官方网站（http:
//）中下载到本地机器。
安装之后需要配置环境变量。
2.2.2安装Servlet容器
ApacheTomcat是当前广为流行的Servlet容器之一，安装简单，使用方便，可以使用官方网站提供的两种安装方法。
第一种使用Installer包安装，第二种是快速安装方法，是Tomcat提供的一个.ZIP文件。
第二种具体操作过程是：
首先，可已访问官方网站下载.zip文件；其次，将文件解压到本地机器；然后装tomcat，装完后启动tomcat测试是否可以正常运行，以便查看环境变量测试的是否正确（默认端口是8080）。
在地址栏直接键入http:
/localhost:
8080/或者输入http:
//127.0.0.1：
8080。
2.2.3安装Eclipse
可以到www.eclipse.org下载eclipse,可以选择:
Downloadnow下载完成后,只需要将下载的压缩文件eclipse-SDK-3.4-in32.zip解压到指定位置,例如D:
\Eclipse即可完成安装。
记下来就可以。
安装后，会弹出一个画面选择工作空间，自己指定一个就可以。
2.2.4安装插件
通过自己在Eclipse下安装ZK插件的学习体会，总结了在Eclipse下安装插件主要有三种方式，我认为第三种方式比较好（推荐），具体的安装过程如下：
第一种方法：
主要借助于Eclipse的向导来安装插件。
通过Help/SoftwareUpdates/FindandInstall，在弹出的菜单中选择“Searchfornewfeaturestoinstall”，点“Next”，在下一菜单中选择“NewLocalSite”或“NewArchivedSite”，找到你下载的插件所在目录，选中安装即可。
第二种方法：
在Eclipse的主目录（%ECLIPSE_HOME%）下有一个plugins目录和features目录。
将插件解压缩后，在解压缩后的文件夹里一般可以看到plugins文件夹，有的插件解压缩后还可以看到一个features文件夹。
一般将plugins文件夹下的内容直接拷贝到%ECLIPSE_HOME%\plugins目录下，如果解压缩后的插件目录下还有features文件夹，则把该文件夹下的内容也拷贝到%ECLIPSE_HOME%\features下。
重新启动Eclipse之后就可以使用刚刚安装的插件了。
第三种方式：
就是在Eclipse主目录下创建一个links目录，然后将你自己的插件放在你想放的任何地方，这个时候你放插件的目录就是插件目录（%PLUGIN_HOME%），然后在你的%ECLIPSE_HOME%\links\目录下创建一个link文件，比如要安装一个Lomboz插件，可以在links目录下创建一个Lomboz.eclipse.link文件，link文件的名称随便取。
这个Lomboz.eclipse.link文件指向的存放Lomboz插件的目录（%PLUGIN_HOME%）。
假如你的Lomboz插件的zip/rar文件解压缩后放在C:
\eclipse_plugins\Lomboz.eclipse下（如果是插件是jar文件则可以不用解压缩），则Lomboz.eclipse.link文件的内容就应该是：
path=C:
\\eclipse_plugins\\Lomboz.eclipse。
注意：
path所指的文件路径一定要增加一个“\”转义符来分开。
其余插件的安装也是如此，比如安装Eclipse多国语言包，通过安装Eclipse多国语言包,Eclipse可以自动实现开发环境的本地化,即自动根据操作系统的语言环境选择语言包进行本地化,先到http:
//download.eclipse.org/eclipse/downloads/下载Eclipse3.2版本的多国语言包,其名称为Languagepack。
按照前面的第三种方式安装即可。
2.2.5配置ZK环境（ZK库）
1.打开Eclipse（前提条件是已经安装好了ZKstudio插件），如果没有安装，请先按照前面的介绍安装插件；
2.点击菜单Window->Preferences（FrommenugotoWindows>Preferences）；
3.在打开的这个窗口上选择ZK->ZKPackages（OnthePreferencesWindow,selectZK>ZKPackages）；
4.点击AddDiretory选择到你下载的ZKLibrary包，不用解压,直接是ZIP文件，如下图：
5.会跳出一个窗口来，点击OK
6.给这个包命名，一般就用默认的，点击OK；
7.再选择上那个ZKLibrary就行了，如果你不选择，会自动选择最后你引入的版本的。
到此，ZK的环境就配置完了。
2.3第一个用Eclipse创建的ZK项目：
HelloWorld
2.3.1创建项目过程
1.启动Eclipse，我倾向于在JavaEE下创建项目
2.如果没有建立Server的话，需要先打开Window-》showview->other…->servers右击选择New->Server，然后选择tomcat即可；
3.选择File->New->DynamicWebProject,输入项目名称，例如我给项目其名字为MyZK；
4.点Next，再点Finish就完成了一个ZK项目的创建；
5.右击项目名称，选择properties----》JavaBuidPath给项目导入ZK的Jar包，将%ZK_HOME%\dist\lib目录下的所有jar文件（如果需要更多ZK附加功能，加入ext与zkforge目录下的jar文件）到WebContent\WEB-INF\lib目录下。
6.创建一个新的ZUL文件（CreatinganewZULfile）：
helloworld；
7.创建完.zul文件后，写入ZK代码；
8.启动Tomcat服务器，选择MyZK，运行；
9.在浏览器里输入：
http:
//localhost:
8080/MyZK/first.zul，就可以看到下面的内容。
2.4例子中的配置分析
2.4.1项目目录结构
在Eclipse下搭建的ZK环境上开发的程序，比如对于上面的例子项目MyZK，其目录结构如下所示：
下面对于上面的目录中的文件，我通过查找资料，进行了总结，对于Zk的配置文件大体的意思是：
WEB-INF/web.xml定义了必须的servlet，及运行ZK应用程序所需要的监听器；
WEB-INF/zk.xml为ZK的配置描述文件；
WEB-INF/lib包括了ZK的必须库文件；
该应用程序所需的重要jar包文件说明：
.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：
XML相关组件
.zweb.jar：
web相关功能代码
2.4.2关于web.xml的配置
在web.xml中为ZK定义必须的servlet，及listener，我把在该项目MyZK下的web.xml文件中的代码拷贝如下：
MyZK
Usedtocleanupwhenasessionisdestroyed
ZKSessioncleaner
org.zkoss.zk.ui.http.HttpSessionListener
TheZKloaderforZUMLpages
zkLoader
org.zkoss.zk.ui.http.DHtmlLayoutServlet
update-uri
/zkau
1
TheasynchronousupdateengineforZK
auEngine
org.zkoss.zk.au.http.DHtmlUpdateServlet
LoginServlet
LoginServlet
servlet.LoginServlet
zkLoader
*.zul
zkLoader
*.zhtml
auEngine
/zkau/*
LoginServlet
/userlogin
index.html
index.htm
index.jsp
default.html
default.htm
default.jsp
index.zul
2.4.3关于zk.xml的配置
.xml文件是对ZK配置的描述性文件，我把在该项目MyZK下的zk.xml文件中的代码拷贝如下：
xmlversion="1.0"encoding="UTF-8"?
>
--
CreatedbyZKStudio
-->
ajax
/timeout.zul
--AnemptyURLcancausethebrowsertoreloadthesameURL-->
3组件基础属性及事件
3.1ID属性
为了读取Java代码或EL表达式中的组件，我们可以使用id属性来标识它。
在下面的例子中，我们为label设置了一个标识，这样当一个按钮被按下时，我们就可以操纵label的值了。
如下面两个例子可以让你领会id的作用
pagetitle="testuseid"contentType="text/html;charset=UTF-8"?
>
"border="normal">
DoyoulikeZK?
当按下“Yes”按钮的时候，可以看到如下效果。
id属性在EL表达式中的应用，如下代码：
这段代码实现的是将文本框中的值赋给标签，“source”就代表着文本框，我们只需对其进行操作就相当于对文本框操作了。
3.2IF和unless属性
if和unless属性被用于控制是否创建一个组件，在下面的例子中，两个label只有在请求中含有一个为vote的属性时才被创建：
param.vote}"/>
如果两个属性都被指定，将不会创建组件除非它们的值都被赋值为true。
3.3use和apply属性
在页面中嵌入代码不当会增加维护的难度，有两种途径可以从视图中分离出代码。
一种途径是你可以监听所关心的事件，然后调用合适的方法进行处理。
例如，可以调用
onCreate,onOK,onCancel事件来完成初始化（initialize），处理（process）和取消（cancel）等工作。
pagetitle="newpagetitle"contentType="text/html;charset=UTF-8"?
>
onOK="MyManager.process（main）"onCancel="MyManager.cancel（main）">
另外，必须有一个名称为MyManager的Java类，内容像下面一样：
importorg.zkoss.zul.Messagebox;
importorg.zkoss.zul.Window;
publicclassMyManager{
publicstaticvoidinit（Windowmain）{
main.setTitle（"关注我的请求！
"）;
}
publicstaticvoidsave（Windowmain）throwsInterruptedException{
main.setTitle（"save......"）;
Messagebox.show（"您的信息已经保存！
"）;
}
publicstaticvoidcancel（Windowmain）throwsInterruptedException{
main.setTitle（"cancel......"）;
Messagebox.show（"你取消的请求已经完成！
"）;
}
}
按下“save”按钮的时候，程序运行的效果如下：
但是，上面的方法需要你在ZUML页面内嵌入一些代码。
在用户界面（UI）内嵌入代码的优点是可以很容易的动态改变行为（特别是在原型阶段），但是这仍然会展现一些维护代码且性能会有一些降低。
于是引出了use和apply属性的使用。
3.3.1use属性
若不想在ZUML页面内使用Java代码，你可以继承一个组件的实现来处理事件，如下。
importorg.zkoss.zul.Messagebox;
importorg.zkoss.zul.Window;
publicclassMyWindowextendsWindow{
publicvoidonCreate（）{
this.setTitle（"关注我的变化！
"）;
}
publicvoidonSave（）{
this.setTitle（"save......"）;
}
public
升级会员 