ZK简明教程.doc

ZK简明教程原文见 /doc/tutorial.dspZK入门这是一个针对ZK新用户的简明教程。我们将引导您使用数据库来开发一个简单的Web应用程序，并且一步步地解释。尽管此教程的对象为ZK的新用户，但是仍要求读者具备一些Java的编程经验。不过，这就是您使用ZK开发基于Ajax Web应用程序的需要知道的一切。在此教程中，我们假定您已经安装了JDK (1.4以上)，及Servlet容器(例如，Tomcat)。首个ZK应用程序(To-do List)假设我们需要这样一个应用程序，它可以存储未来我们要做的事情，以避免我们总是将其忘记。因此，我们需要使用数据库来创建一个简单的应用程序。如果没有安装数据库服务，则使用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/todo/todo.zul(端口号取决于您对Tomcat的配置)，那么将会看到下面的情景。所有的情景某件事情的关键信息，点击Add按钮可以将新数据插入到数据库。选中表中任一行来在相应的域中显示事件信息，以方便用户修改，点击Updata按钮后即可修改事件信息。选中表中任一行，然后点击Delete按钮即可删除选中事件。安装开发目录我们的首要任务是安装开发目录，包括将ZK的必须库文件引入到开发目录，并配置相关文件。开发目录的结构在tomcat的Web应用程序目录下($TOMCAT_HOME/webapps )创建一个开发目录。开发目录的 结构如下：+ProjectName+META-INF+WEB-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： 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 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)，域对象(domain 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 id,String name,int priority,Date date)this.id = id; = 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: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 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 List ”。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 +listheadlistheader+listitemlistcell输入组件除了在listbox中显示这些事件，我们也需要输入关于事件的信息。包括事件名称(文本值)，事件优先 级(数值)，及事件日期(日期值)。因此，我们在闭合的window组件内声明一个textbox, 一个 intbox及一个datebox，如下，Item:Priority:Date: 结果如下所示，布局组件为了在视觉表现(visual presentation)将输入组件和上面的listbox分开，我们声明一个groupbox 组件来将输入组件分为一组，且在输入组件周围加上边框。Item: Priority: Date: 除了groupbox 组件，我们可以声明一个caption 组件来在groupbox的顶端显示一个“Event” 标签，且caption 组件就像HTML的图例(legend)元素一样工作，结果如下：到现在为止，用户界面页面部分已经完成，下一步为连接页面与数据库。(续)连接数据库由laifu 于 周日 十一月 04, 2007 10:36 amUI与数据库间的集成依照需求，我们需要显示事件，添加，编辑及删除一个事件。在下面的章节，我们将实现页面与数据库的集成。使用Java代码实现与ZK组件的互动ZK最具特色的特性之一便是可以使用Java代码与在页面定义的ZK组件实现交互。ZK提供了三种 选择。你可以将这些Java代码直接嵌入到页面，或写入一个单独的文件。另外，ZK允许使用编译过 的Java class文件与页面交互。为了更好的解释，在此教程中我们将精力集中在第一种选择上。将Java代码嵌入到页面首先，我们从数据库加载事件，并且通过声明一个闭合的标签，将Java代码嵌入到此页 面。zscript 元素为定义脚本代码的一个特殊元素，当每次ZUML页面提交时元素都会被赋值 (evaluate)。典型的应用为初始化，声明全局变量及方法。因此，我们声明eventDAO的一个实例用 于访问数据库， 并将查询结果存储在List中。EL表达式可以访问到定义在zscript元素中的全局变量。就像JSP，你可以在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属性被用于控制需创建 多少组件。如果你为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: 将用户输入数据存储进数据库首先，让我们在闭合的标签内声明一个add()方法。.void add()在add()方法中，我们完成以下三个任务，1.获取用户的输入数据2.将数据存入数据库3.利用Ajax刷新视图页面获取用户的输入数据Zk允许在Java代码中访文UI组件。您可以通过在id属性中指定的标识来访问组件。在此 例中，用户的输入数据被存储在三个输入组件中，textbox(id =name), intbox(id =priority), and datebox(id=date)。因此，我们可以访问这些组件的value 属性 来取得用户的输入数据，如下， name.value; /event namepriority.value; /event prioritydate.value; /event date将数据存入数据库一旦我们获取了用户的输入数据，那么将数据存入数据库是很简单的事情，如下，Event newEvt = new Event(UUID.randomUUID().toString(),name.value,Value(),date.value);evtdao.insert(newEvt);/synchronized data object with database allEvents = evtdao.findAll(); 利用Ajax刷新视图页面不管您是否相信，ZK允许您使用Java代码利用Ajax简单的刷新视图页面。在这个例子中， 我们仅仅是在Java代码中将新的一个listitem插入到listbox ，刷新的工作将由ZK自动 处理，如下，/insert a new Event into the listbox Listitem li = new Listitem(); li.setValue(newEvt); li.appendChild(new Listcell(name.value); li.appendChild(new Listcell(priority.value); li.appendChild(new Listcell(new SimpleDateFormat(yyyy-MM-dd).format(date.value);box.appendChild(li);. appendChild() ，将一个子组件插入到其自身。完整代码如下，import events.Event; import events.EventDAO; import java.util.ArrayList; import java.text.SimpleDateFormat; import java.util.UUID;/fetch all events from database EventDAO evtdao = new EventDAO(); List allEvents = evtdao.findAll();void add() /insert into database Event newEvt = new Event(UUID.randomUUID().toString(),name.value,Value(),date.value);evtdao.insert(newEvt);/synchronized data object with database allEvents = evtdao.findAll();/insert a new Event into the listbox Listitem li = new Listitem(); li.setValue(newEvt); li.appendChild(new Listcell(name.value); li.appendChild(new Listcell(priority.value); li.appendChild(new Listcell(new SimpleDateFormat(yyyy-MM-dd).format(date.value);box.appendChild(li); Item: Priority: Date: 在ZK组件中注册事件监听器几乎90%来自页面的反应都是由用户的活动触发的。add()方法也不例外，仅当用户点击”add”按钮 时它才会被调用。决定按钮是否被用户点击的方法是在button 组件的声明内声明一个onClick事件 监听器，并在此监听器内指定add()方法。如果按钮被用户点击，ZK会调用add()方法。很直观，对不对？ZK为您提供了最简单的方式。其它的控制代码余下的控制代码列表如下，. delete(),从数据库删除一个事件，更新数据模型listbox 。. update(), 更新来自数据库的一个事件，更新数据模型listbox 。. move(), 将数据从listbox移到group box 中的输入组件。. cleargp(), 清理group box 中输入组件的数据。import events.Event; import events.EventDAO; import java.util.ArrayList; import java.text.SimpleDateFormat; import java.util.UUID; /fetch all events from database EventDAO evtdao = new EventDAO(); List allEvents = evtdao.findAll();void add() /insert into database Event newEvt = new Event(UUID.randomUUID().toString(),name.value,Value(),date.value);evtdao.insert(newEvt);/synchronized data with database allEvents = evtdao.findAll();/insert a listEvent into the listbox Listitem li = new Listitem(); li.setValue(newEvt); li.appendChild(new Listcell(name.value); li.appendChild(new Listcell(priority.value.toString(); li.appendChild(new Listcell(new SimpleDateFormat(yyyy-MM-dd).format(date.value);box.appendChild(li);void update()/update databaseEvent editEvt = (Event)box.selectedItem.value;editEvt.setName(name.value);editEvt.setPriority(priority.value);editEvt.setDate(date.va