1、ZK教程ZK简明教程原文见 http:/www.zkoss.org/doc/tutorial.dspZK入门这是一个针对ZK新用户的简明教程。我们将引导您使用数据库来开发一个简单的Web应用程序,并且一步步地解释。尽管此教程的对象为ZK的新用户,但是仍要求读者具备一些Java的编程经验。不过,这就是您使用ZK开发基于Ajax Web应用程序的需要知道的一切。在此教程中,我们假定您已经安装了JDK (1.4以上),及Servlet容器(例如,Tomcat)。首个ZK应用程序(To-do List)假设我们需要这样一个应用程序,它可以存储未来我们要做的事情,以避免我们总是将其忘记。因此,我们需要使
2、用数据库来创建一个简单的应用程序。如果没有安装数据库服务,则使用Java数据库(HSQL DB)比较合适。体验一下这个程序 在线演示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
3、/todo/todo.zul(端口号取决于您对Tomcat的配置),那么将会看到下面的情景。所有的情景某件事情的关键信息,点击Add按钮可以将新数据插入到数据库。选中表中任一行来在相应的域中显示事件信息,以方便用户修改,点击Updata按钮后即可修改事件信息。选中表中任一行,然后点击Delete按钮即可删除选中事件。安装开发目录我们的首要任务是安装开发目录,包括将ZK的必须库文件引入到开发目录,并配置相关文件。开发目录的结构在tomcat的Web应用程序目录下($TOMCAT_HOME/webapps )创建一个开发目录。开发目录的 结构如下:+ProjectName+META-INF+WEB
4、-INF+classes+libweb.xmlzk.xml+srcweb pagesWEB-INF/web.xml 定义了必须的servlet,及运行ZK应用程序所需要的监听器(listener)WEB-INF/zk.xml为ZK的配置描述文件(可选)WEB-INF/classes 包括了所有的Java class 文件WEB-INF/lib 包括了ZK的必须库文件此应用程序必须的jar文件如下:ZK.bsh.jar: BeanShell Java 代码解释器. commons-el.jar: Apache的EL表达式解释器. zcommon.jar : ZK的通用库. zhtml.jar:
5、XHTML 相关组件. zk.jar : ZK核心代码. zkplus.jar :与Acegi Security, Spring, Hibernate,和data binding集成的代码. zul.jar :XUL相关组件. zweb.jar:web相关功能代码HSQLDB . hsqldb.jar :hsqldb 数据库src/ 下为源文件web页面可以直接放在主目录下,或者其下的目录web.xml的配置第二步是在web.xml中为ZK定义必须的servlet ,及listener。Used to clean up when a session is destroyedZK Session
6、 Cleanerorg.zkoss.zk.ui.http.HttpSessionListenerZK loader for ZUML pageszkLoaderorg.zkoss.zk.ui.http.DHtmlLayoutServletupdate-uri/zkau1zkLoader*.zulzkLoader*.zhtmlThe asynchronous update engine for ZKauEngine org.zkoss.zk.au.http.DHtmlUpdateServletauEngine/zkau/*持久层在接下来的章节,将会介绍数据库模式(schema),域对象(doma
7、in object),及DAO。数据库模式根据此应用程序的要求,我们需要下列属性,包括事件 id,事件 name,事件 priority,事件 date,数据库模式如下:字段类型id varchar(50) name varchar(50) priority int date date 域对象根据上面的表格,我们可以创建相应的域对象。 public class Event private String id;private String name;private int priority;private Date date;public Event()public Event(String i
8、d,String name,int priority,Date date)this.id = id;this.name = name;this.priority = priority;this.date = date;/getter and setter methods are ommited, please refer to the source code.DAO对象根据此Web应用程序的需求,DAO对象需要如下方法,包括findAll(),delete(),insert(),和 update()。public class EventDAO private String url = jdbc
9、:hsqldb:file:/hsqldb/event;private String user = sa;private String pwd = ;public EventDAO() try Class.forName(org.hsqldb.jdbcDriver); catch (ClassNotFoundException e) e.printStackTrace();/The implementation is ommited, please refer to the source code.public List findAll() public boolean delete(Event
10、 evt) public boolean insert(Event evt) public boolean update(Event evt)用户界面页面您的首个ZK组件第一步是创建一个后缀名称为zul的文件,例如todo.zul,并将此文件放置在您的应用程序的主目录, 例如$TOMCAT_HOME/webapps/ProjectName/ 。就像使用HTML那样声明一个ZK组件,并按如 下方式声明一个window组件,然后,启动Tomcat,打开浏览器来访问此页面,例如:http:/localhost:8080/todo/todo.zul。结 果如下所示,window标题为 “To do L
11、ist ”。ZK的一切都是组件,因此,你可以根据你的喜好改变window的title, width, 和 border。这非常 简单且直观。试试改变这些属性,并观察结果。ZK组件的层次关系接下来,我们使用更多的ZK组件来丰富您的页面。由于我们需要在一个表格中显示数据,我们可以 声明一个listbox组件,此组件被设计为在闭合的window组件内显示数据,如下,在此例子中,listbox组件成为window的一个子组件。是的,在ZK组件件存在层次关系,因此, 如果您在上下文声明了一个错误的组件,将会遇到UI异常,例如将window组件声明为listbox的 子组件。嵌套组件在listbox的声明
12、中,我们使用id属性来指定listbox的标识(“box”),这样可以使用“box”来关联 这个listbox。此外,listbox为一个嵌套组件,且它支持两种子组件,listhead(亦作表格的列),和 listitem(亦作表格的行)。但是,这尚未结束,由于我们在表格中定义三列,所以让我们来在闭合的listhead标签内声明三 listheader组件,包括Item”, “Priority”和“Date”,如下:结果如下:由于在表格中有三列,且表格中的每行需要三个字段。在闭合的listitem组件内声明三个listcell组 件。Listbox 组件的嵌套结构如下:+listbox +li
13、stheadlistheader+listitemlistcell输入组件除了在listbox中显示这些事件,我们也需要输入关于事件的信息。包括事件名称(文本值),事件优先 级(数值),及事件日期(日期值)。因此,我们在闭合的window组件内声明一个textbox, 一个 intbox及一个datebox,如下,Item:Priority:Date: 结果如下所示,布局组件为了在视觉表现(visual presentation)将输入组件和上面的listbox分开,我们声明一个groupbox 组件来将输入组件分为一组,且在输入组件周围加上边框。Item: Priority: Date: 除
14、了groupbox 组件,我们可以声明一个caption 组件来在groupbox的顶端显示一个“Event” 标签,且caption 组件就像HTML的图例(legend)元素一样工作,结果如下:到现在为止,用户界面页面部分已经完成,下一步为连接页面与数据库。(续)连接数据库由laifu 于 周日 十一月 04, 2007 10:36 amUI与数据库间的集成依照需求,我们需要显示事件,添加,编辑及删除一个事件。在下面的章节,我们将实现页面与数据库的集成。使用Java代码实现与ZK组件的互动ZK最具特色的特性之一便是可以使用Java代码与在页面定义的ZK组件实现交互。ZK提供了三种 选择。你
15、可以将这些Java代码直接嵌入到页面,或写入一个单独的文件。另外,ZK允许使用编译过 的Java class文件与页面交互。为了更好的解释,在此教程中我们将精力集中在第一种选择上。将Java代码嵌入到页面首先,我们从数据库加载事件,并且通过声明一个闭合的标签,将Java代码嵌入到此页 面。zscript 元素为定义脚本代码的一个特殊元素,当每次ZUML页面提交时元素都会被赋值 (evaluate)。典型的应用为初始化,声明全局变量及方法。因此,我们声明eventDAO的一个实例用 于访问数据库, 并将查询结果存储在List中。EL表达式可以访问到定义在zscript元素中的全局变量。就像JSP
16、,你可以在ZUML页面的任何地 方使用EL表达式,语法为$expr 。数据库访问的初始化如下,import events.Event;import events.EventDAO; import java.util.ArrayList; /fetch all events from database EventDAO evtdao = new EventDAO(); List allEvents = evtdao.findAll(); Item: Priority: Date: 使用forEach 循环下一步为将存储在allEvents 变量中的数据提交到listbox组件。forEach属性
17、被用于控制需创建 多少组件。如果你为forEach指定了一个对象集合。ZK加载器(ZK Loader)将会依照指定的集合创建相应数量 的组件。each变量用于呈现对象集合中的一个对象实例。我们可以使用EL表达式来调用对象的 getter方法来获取其属性,如下,import events.Event;import events.EventDAO; import java.util.ArrayList; /fetch all events from database EventDAO evtdao = new EventDAO(); List allEvents = evtdao.findAll();Item: Priority: Date: button label=Delete width=
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1