ZK简明教程

seixion 贡献于2010-10-16

作者 -  创建于2008-03-19 06:31:00   修改者-  修改于2008-03-19 06:33:00字数14138

文档摘要:这是一个针对ZK新用户的简明教程。我们将引导您使用数据库来开发一个简单的Web应用程序,并且一步步地解释。尽管此教程的对象为ZK的新用户,但是仍要求读者具备一些Java的编程经验。不过,这就是您使用ZK开发基于AjaxWeb应用程序的需要知道的一切。在此教程中,我们假定您已经安装了JDK(1.4以上),及Servlet容器(例如,Tomcat)。
关键词:

ZK简明教程 原文见 http://www.zkoss.org/doc/tutorial.dsp ZK入门 这是一个针对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 +lib web.xml zk.xml +src web pages WEB-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 destroyed ZK Session Cleaner org.zkoss.zk.ui.http.HttpSessionListener ZK loader for ZUML pages zkLoader org.zkoss.zk.ui.http.DHtmlLayoutServlet update-uri /zkau 1 zkLoader *.zul zkLoader *.zhtml The asynchronous update engine for ZK auEngine org.zkoss.zk.au.http.DHtmlUpdateServlet auEngine /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; 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: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 +listhead listheader +listitem listcell 输入组件 除了在listbox中显示这些事件,我们也需要输入关于事件的信息。包括事件名称(文本值),事件优先 级(数值),及事件日期(日期值)。因此,我们在闭合的window组件内声明一个textbox, 一个 intbox及一个datebox,如下, Item: Priority: Date:

下载文档到电脑,查找使用更方便

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 20 金币 [ 分享文档获得金币 ] 4 人已下载

下载文档