待辦事項管理 (Part III)

第二個範例 (Part III)

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 的畫面，並且安裝完資料庫之後，剩下的就是如何讓 ZK 與資料庫 來互動；基本上，這就是開始使用 ZK 的事件處理機制。在之前的 Ajax 的範例， 我們使用 Javascript 來完成這個部分，可是由於 ZK 可以與多種語言結合，而且 其預設的語言是 Java，所以我們也以 Java 來完成這項工作。 ZK 和 Java 連結使用的方式有以下三種：

1. 直接將 Java 程式碼寫在 zul 檔案內，而這些程式碼只需要放在 <zscript> 標籤內即可，它就可以像 JSP 一樣，在載入 zul 時就可以 執行。
2. 把 Java 的原始碼放置於另一個檔案內，然後讓 zul 檔把它引入。
3. zul 檔可以使用已經編譯好的 Java 類別檔（即 .class 檔）。

在本範例中，我們使用了第一種和第三種方式。第三種的使用方式就像 在 Part II 中說明的 Event 和 EventDAO 類別；至於第一種的使用方式 就是 Part III 的重點。在載入 todo.zul 網頁的時候，我們希望能夠 先到資料庫中把已經存在的待辦事項載入，並放到待辦事項清單內。為了 達成這個目標，我們首先把資料載入，載入的方式如下所示，也就是利用 EventDAO 把所有的待辦事項載到一個 List 物件，而 <zscript> 需要放在 <window> 內。

<zscript>
  import java.util.*;

  // 抓取所有待辦事項
  EventDAO evtdao = new EventDAO();
  List allEvents = evtdao.findAll();
</zscript>

有了資料，我們需要一個機制把資料放到 <listitem> 內。為了能夠 簡易的做到這一點，ZK 提供了一個非常強的功能，也就是 <listitem> 的 forEach 屬性，其原始碼如下：

    <listitem forEach="${allEvents}" value="${each}">
      <listcell label="${each.name}"/>
      <listcell label="${each.priority}"/>
      <listcell label="${each.date}"/>
    </listitem>

forEach 的用法需要特別仔細的說一下：forEach 的參數值是一個集合物件， 例如 List，在本範例中就是 allEvents；請注意，如果程式碼中 List 物件 的名稱改成 xxx，那麼 forEach 的屬性值也必須改成 xxx。如果直接把 forEach 定義成 forEach="allEvents"，ZK 處理器無法判斷屬性值可以直接 使用，還是一個變數的名稱，因此 ZK 採用跟 JSP 一樣的 EL-expression， 如果看到 ${allEvent}，則 ZK 會從變數 allEvents 中取得其值， 並指定給 forEach。在 forEach 的每一個迴圈中，forEach 會從 List 物件 （也就是 allEvents）一次取得一個物件，而在本範例中，該物件的資料型態 為 Event，而且該物件的名稱被定義為 each；因此，在每一個 <listcell> 中，我們就可以 each 的資料成員名稱 來取得 Event 物件中的資料成員。以上述程式碼為例，${each.name} 會取得 Event 物件的 name 成員；同樣的道理，${each.priority} 和 ${each.date} 分別取得該物件的 priority 和 date 資料成員。 最後，原始碼的綠色部分在這個部分是可以不必定義的，該定義是指定 each 物件（也就是 Event 物件）當作是 Listitem 物件的 value 屬性值。value 屬性在之後的修改以及刪除的時候才會用到。
執行該段程式碼後，執行的畫面如下：

我想這個時候，把整個完整的 zul 碼列示出來應該有幫助，這裡也先當一個 檢查點，以便確定從安裝到現在，一切都正常的運行：

<?xml version="1.0" encoding="Big5"?>
<window title="待辦事項列表" width="640px" border="normal" mode="highlighted">
<zscript>
  import java.util.*;

  // 抓取所有待辦事項
  EventDAO evtdao = new EventDAO();
  List allEvents = evtdao.findAll();
</zscript>

  <listbox id="box" multiple="true" rows="4">
    <listhead>
      <listheader label="待辦事項" />
      <listheader label="重要性" width="50px" />
      <listheader label="日期" width="90px" />
    </listhead>
    <listitem forEach="${allEvents}" value="${each}">
      <listcell label="${each.name}"/>
      <listcell label="${each.priority}"/>
      <listcell label="${each.date}"/>
    </listitem>
  </listbox>
  <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>
</window>

---

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