待辦事項管理 (Part I)

第二個範例 (Part I)

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

---

在第二個範例中，我們希望能夠設計一個系統，該系統除了使用 ZK 之外， 也使用關聯式資料庫，這樣的組合大概是目前最常見的。這個範例主要參考 ZK 的文件 Step by Step Tutorial: A Rela-World Application with a Database，而且為了上課方便， 我們也使用了該文件所用的 HSQLDB。 這個範例的說明，我們把它分成三個部分，第一個部分主要著重於畫面的 設計，而第二個部分才說明資料庫的建立，第三個部分就在於 ZK 與 資料庫的互動，也就是 ZK 的事件處理機制。就像 ZK 的教學文件一樣，我們 使用同樣的例子：建立一個"待辦事項"的簡易管理系統，其畫面如下：

從畫面中，我們可以看得出來，整個版面是由之前介紹的 <window> 物件所形成的，該視窗的上半段條列出所有的待辦事項（畫面中的資料是 在本範例 Part II 中所建立的測試資料），而下半段則顯示對於待辦事項 的控制元件，包含日期選單以及增/改/刪的按鈕；使用者可以從這些控制 元件來新增、修改、以及刪除待辦事項。
就像之前說的，在 Part I，我們先說明這個視窗是如何形成的。第一個動作 就是修改前一個 Hello World 的範例，把視窗標題改成如下原始碼，並將 檔案名稱命名為 todo.zul 並放置於 d:\tomcat\webapps\xml 中：

<?xml version="1.0" encoding="Big5"?>
<window title="待辦事項列表" width="640px" border="normal">
</window>

練習題： 請試著為 <window> 增加屬性 mode="highlighted" 並觀察它 的變化；如果想要知道其他的效果，請參考 Developer's Guide 並選擇 4.2 節的 Layout and Windows。 再來，我們先增加視窗的上半部的待辦事項的清單，該清單由 <listbox> 所組成，而 <listbox> 的結構類似 <table>，其內可以包含 <listhead> 以及 <listitem>（類似 <tr>）。而 <listhead> 內包含 <listheader>，<listitem> 包含 <listcell>（類似 <tr> 包含 <td>）；他們之間的 關係結構圖如下：

  listbox
    +listhead
      -listheader
    +listitem
      -listcell

從我們的最終執行畫面，我們知道 <listhead> 和 <listitem> 會各自包含三對 <listheader> 和 <listcell> 標籤。由於 目前為止，<listcell> 內還沒有資料，所以原始碼如下：

<?xml version="1.0" encoding="Big5"?>
<window title="待辦事項列表" width="640px" border="normal" mode="highlighted">
  <listbox id="box" multiple="true" rows="4">
    <listhead>
      <listheader label="待辦事項" />
      <listheader label="重要性" width="50px" />
      <listheader label="日期" width="90px" />
    </listhead>
    <listitem>
      <listcell/>
      <listcell/>
      <listcell/>
    </listitem>
  </listbox>
</window>

<listbox> 中，我們多了幾個設定：第一個是 id，這是為了之後撰寫 程式會比較方便而定義的；第二個是 multiple="true"，這是代表使用者一次 可以選擇多個待辦事項；第三個是 rows="4"，這是代表 <listbox> 一次 顯示四筆資料。在以後的原始碼部分，對於之前已經出現過的，除非必要， 我們不再重複列示，以節省空間。執行上述原始碼，得到的畫面如下：

練習題： 請依據 ZK 的文件，將上述的範例改成如下的畫面：

最後，讓我們來完成視窗的下半部。在下半部的視窗包含了待辦事項的名稱 （文字欄位 textbox）、重要性（數字欄位 intbox）、日期欄位（日期選單 datebox）、以及新增、修改、和刪除的按鈕（button）。這些控制元件的 ZK 設定方式如下：（請接在 <listbox> 之後）

  待辦事項: <textbox id="name" cols="25" />
  重要性: <intbox id="priority" cols="1" />
  日期: <datebox id="date" cols="8" />
  <button label="新增" width="46px" height="24px"/>
  <button label="修改" width="46px" height="24px"/>
  <button label="刪除" width="46px" height="24px"/>

執行上述原始碼，得到的畫面如下：

到了這裡，介面的設計已經快要結束了。為了能夠突顯這些控制元件是屬於一個 群體，並且能為這個區塊定義出一個明顯的名稱，我們可以使用 <groupbox> 元件，而其功能基本上就是把一些關聯性高的元件整理在一起。<groupbox> 的使用方式如下：

<groupbox>
  <caption label="待辦事項管理"/>
  待辦事項: <textbox id="name" cols="25" />
  重要性: <intbox id="priority" cols="1" />
  日期: <datebox id="date" cols="8" />
  <button label="新增" width="46px" height="24px"/>
  <button label="修改" width="46px" height="24px"/>
  <button label="刪除" width="46px" height="24px"/>
</groupbox>

執行上述原始碼，得到的畫面如下：

到此 Part I 結束。

---

Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu