手把手指南 - 第一部分

构建一个基于数据库应用：ZK新手的指南

我们将手把手的向你演示如何创建一个简单的基于数据库的WEB应用，尽管这个指南是给zk的新手用户的，但是要求新手有java语言开发的经验，
这是为了更好的使用zk开发ajax-web项目。

在这个指南中，我们假设你用户已经装好了JDK（1.4版本，或者1.4以上版本）, 并且已经配置好了Web容器 (ex.Tomcat)。

这个指南分为两个部分：

第一部分：用户接口
第二部分：用户接口连接数据库

第一个应用：安装zk

假设这是克服我们健忘，我们需要一个应用程序能存储我们的事件，以备将来去做，类似可以使用一个web应用项目与用户数据库进行交互。
在开始讲解指南之前，我么将使用下HSQL DB 数据库，这个数据库免去了我们安装数据库服务器的要求。

试着运行例子

1.下载todo.zip 文件并且解压里面的war包文件和一个文件夹。
2.部署war包到Tomcat下$TOMCAT_HOME/webapps/ 目录下 Tomcat会自动解压war包。
3.复制hsqldb文件夹（数据库文件）到磁盘的根目录下面（例如 c:\）。
4.启动tomacat。
5.打开你的浏览器，访问http://localhost:8080/todo/todo.zul(端口号是在tomcat配置文件里面配置的)你将看到下面的这个截图：

功能描述：

o 上图所示按钮所对应的事件，当按下“Add“按钮的时候，增加一条记录到数据库。
o 选择表格中任意一行将显示该行记录的所有字段信息，可以点击“Update”按钮去更新字段信息。
o 选择表格中任意一行，点击“Delete”按钮去删除选择的记录。

用户界面：

你的第一个ZK组件

第一步是创建一个扩展名为.ZUL文件,我们把它命名为todo.zul，然后把todo.zul 放到web的根目录下面，例如：$TOMCAT_HOME/webapps/ProjectName/ 。
你可以向定义HTMl 组件一样在定义ZK组件在todo.zul文件中向下图所示，定义一个窗口组件：


<window title="To do list" width="640px" border="normal">
</window>

这个时候打开你的Tomcat ，用浏览器浏览地址为：http://localhost:8080/todo/todo.zul ，这个时候将会出现一个窗体，窗体名称为To do List。

ZK中所有的东西都是组件，你可以改变组件的属性值。例如你可以改变title，width，border 等属性值在窗体组件中。这个是非常简单明了，现在你就可以试试改变这些属性，看一下效果。

ZK组件的等级关系

接下来，我们就要使用更多的ZK组件来丰富我们的页面。现在我们需要一个显示数据的表格，我们可以定义一个listbox（列表）组件，这个组件可以显示和修改我们的数据。 Listbox组件需要有结束标示，如下图所示


<window title="To do list" width="640px" border="normal">
 <listbox id="box" multiple="true" rows="4">
  </listbox>
</window>

在这个例子当中，listbox（列表）组件成为了window（窗体）组件的一个子组件。
确实，这种情况在ZK组件中我们称之为等级（包含）关系。在实际的开发页面的时候，如果你错误的定义，组件将会出现页面异常。
比如说，你把window（窗体）组件作为listbox的一个子组件，就会出现页面异常。

嵌套组件：

定义一个listbox，我们用Id（id=“box”）描述控件的唯一性。所以我们可以用“box”来引用定义的listbox组件。 Listbox是个嵌套组件，他可以包括两种子组件：listhead（列表头），listitem（列表项），如下图所定义：


<window title="To do list" width="640px" border="normal">
 <listbox id="box" multiple="true" rows="4">
  <listhead>
   </listhead>
   <listitem>
   </listitem>
 </listbox>
</window>

我们还没有完成。我们在第一三个表头组件来表示三列：“Item”，“Priority”，“Date”，
注意组件的结束符。


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
      <listheader label="Priority" width="50px" />
      <listheader label="Date" width="90px" />
  </listhead>
  <listitem>
  </listitem>
 </listbox>
</window>

好了，看看界面效果吧：

现在，我们在表格中定义了三列，表格中的每一行需要三个字段来填充。定义三个listcell(单元格)组件包含在listitem（列表项）中，如下图所示：


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
      <listcell/>
      <listcell/>
  </listitem>
 </listbox>
</window>

列表组件的嵌套结构如下图所示：


+listbox 
  +listhead
    listheader
  +listitem
    listcell

输入组件：

为了显示列表三个字段，我们需要输入信息，包括Item字段 ( 文本内容 )，prority字段（数值型） date 字段（日期型）。
要完成以上的工作，我们需要定一个 textbox（文本框），一个inputbox（输入框）和一个databox（日期选择框）三个组件，如下图所示：


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
   <listcell/>
   <listcell/>
  </listitem>
 </listbox>
  Item:<textbox id="name" cols="50" />
    Priority:<intbox id="priority" cols="1" />
    Date:<datebox id="date" cols="8"/>
    <button label="Add" width="36px" height="24px"/>
    <button label="Update" width="46px" height="24px"/>
    <button label="Delete" width="46px" height="24px"/> 
</window>

看一下现在的页面效果：

布局组件：

我了区分三个输入框在列表框显示位置，我们可以定义个groupbox（分组框）组件给输入组件分组，同时groupbox的边框会环绕在输入组件四周：


<window title="To do list" width="640px" border="normal">
<listbox id="box" multiple="true"  rows="4">
  <listhead>
   <listheader label="Item" />
   <listheader label="Priority" width="50px" />
   <listheader label="Opened" width="90px" />
  </listhead>
  <listitem>
   <listcell/>
   <listcell/>
   <listcell/>
  </listitem>
 </listbox>
    <groupbox>
              <caption label="Event" />
       Item: <textbox id="name" cols="50" />
       Priority: <intbox id="priority" cols="1" />
       Date: <datebox id="date" cols="8">
       <button label="Add" width="36px" height="24px"/>
       <button label="Update" width="46px" height="24px"/>
       <button label="Delete" width="46px" height="24px"/>
    </groupbox>
</window>

为了分组组件，我们可以定义个标题。这个标题标签处于groupbox组件的顶端，这个标题很向HTML的 legend标签，页面效果如下所示：

我们已经完成了用户界面的部分，下面我们将连接数据库第二部分