存貨管理系統 - MySQL (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，而且為了上課方便， 我們使用了非常受歡迎的資料庫管理系統 MySQL。 這個範例的說明，我們把它分成三個部分，第一個部分主要著重於畫面的 設計，而第二個部分才說明資料庫的建立，第三個部分就在於 ZK 與 資料庫的互動，也就是 ZK 的事件處理機制。我們的目的在於 建立一個簡易的存貨管理系統，其畫面如下：

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

<?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="料號" width="50px" />
      <listheader label="品名" />
      <listheader label="價格" width="60px" />
      <listheader label="數量" width="60px" />
    </listhead>
    <listitem>
      <listcell/>
      <listcell/>
      <listcell/>
    </listitem>
  </listbox>
</window>

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

另外，在"料號"、"價格"、以及"數量"的欄位中，我們分別指定了這些欄位的 寬度分別為 50px, 60px, 以及 60px；由於"品名"欄位並未設定寬度，又由於 整個視窗的寬度為 640px，因此"品名"欄位的寬度是 470px（640-50-60-60）。
最後，讓我們來完成視窗的下半部。在下半部的視窗包含了存貨的料號 （整數欄位 intbox）、名稱（文字欄位 textbox）、價格（浮點數欄位 decimalbox）、 數量（整數欄位 intbox）、以及新增、修改、和刪除的按鈕（button）。 這些控制元件的 ZK 設定方式如下：（請接在 <listbox> 之後）

    料號: <intbox id="num" cols="5" />
    品名: <textbox id="name" cols="25" />
    價格: <decimalbox id="price" cols="8" />
    數量: <intbox id="qty" 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="存貨管理"/>
    料號: <intbox id="num" cols="5" />
    品名: <textbox id="name" cols="25" />
    價格: <decimalbox id="price" cols="8" />
    數量: <intbox id="qty" cols="8" />
    <div>
    <button label="新增" width="46px" height="24px"/>
    <button label="修改" width="46px" height="24px"/>
    <button label="刪除" width="46px" height="24px"/>
    </div>
  </groupbox>

請留意在原始碼中，我們在三個按鈕的前後加上了 <div> 標籤，其效果 是將四個輸入欄位和三個按鈕分開；也就是說，如果沒有 <div> 標籤， 三個按鈕會接在四個輸入欄位之後。執行上述原始碼，得到的畫面如下：

到此 Part I 結束。

---

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