待辦事項管理 (Part IV)：新增

第二個範例 (Part IV)：新增

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

請勿轉貼

看其他教材

---

新增待辦資料

顯示完所有的待辦事項後，需要完成的就剩下視窗下半部的新增、修改、以及 刪除。一般來說，這三個步驟習慣上會先實作新增；新增的資料顯示後，我們 緊接著實作修改；等到修改後的資料也正確了，最後就實作刪除，把剛剛新增的 資料除去。 在使用者按下"新增"按鈕之後，這會觸發一個事件，因此我們需要定義一個 該事件的處理方法，在本範例中稱之為 add()。add() 方法需要完成的事情包含 從輸入欄位取得資料，然後把資料新增到資料庫，最後重新更新畫面。首先， 我們先註冊事件，必須更改新增的按鈕標籤如下：

<button label="新增" width="46px" height="24px" onClick="add()"/>

其中，綠色的部分就是告訴 ZK：如果使用者點選了"新增"按鈕，請執行 add() 方法。跟其他 Java 程式相同，請在 <zscript> 標籤內加入 add() 方法如下：

  void add() {
  }

在 add() 方法中的第一件事情就是從輸入欄位取得資料。請參考 Part I 中的 三個輸入欄位，其三個欄位的 id 分別是 name、priority、和 date；ZK 提供了一個 非常方便的方式（非常類似 Javascript）來取得這些欄位的值，那就是在這些 名稱的後面直接加上 .value；取得了輸入欄位的值之後，我們就可以初始化 一個 Event 物件如下：

    Event newEvt = new Event(UUID.randomUUID().toString(),
                             name.value,priority.value.intValue(),date.value);

由於 Event 物件的第一個資料成員是 id，也就是代表唯一的值，在程式中，我們 利用 java.util.UUID 類別來產生一個 UUID 物件；又由於 id 在資料庫的資料型態 為字串，所以第一個參數的定義方式為 UUID.randomUUID().toString()。 另外，由於 priority 在資料庫的資料型態是整數，所以 priority.value 需要利用 intValue() 方法轉成整數（請注意，intValue() 是 ZK　提供的）。 有了 Event 物件 newEvt 之後，我們就可以利用 EventDAO 物件 evtdao 將 newEvt 加到資料庫：

    evtdao.insert(newEvt);

為了讓 allEvents 能隨時擁有最正確的資料，所以我們重新載入資料：

    allEvents = evtdao.findAll();

到這個步驟，新增加的代辦事項已經加到資料庫，剩下的工作就是畫面的更新。 畫面的更新分成兩個部分：一個是將新增的資料顯示在清單中；另一個就是 把輸入欄位裡面的資料清除掉。新增資料到清單的工作非常類似 DOM 的新增 節點，其程式碼如下：

01      Listitem li = new Listitem(); 
02      li.setValue(newEvt);  // 在之後的 update, delete 會用到
03      li.appendChild(new Listcell(name.value)); 
04      li.appendChild(new Listcell(priority.value.toString())); 
05      li.appendChild(new Listcell(new SimpleDateFormat("yyyy-MM-dd").format(date.value))); 
06      box.appendChild(li);

在第 01 行中，我們新增了一個 Listitem 的物件；Listitem 物件代表 <listbox> 標籤中的一個 <lisitem> 標籤。在第 03 到 05 行，我們需要為 Listitem 物件新增三個子節點，而每一個節點都是一個 Listcell 物件；也就是說， new Listcell(name.value) 會產生 <listcell>name.value</listcell> 標籤，而 name.value 代表 name 欄位內的值。最後，我們在第 06 行把 Listitem 物件(內含三個 Listcell 子節點）加到 box（box 是 <listbox> 的 id 值）下，並成為它的子節點。新增完了之後，ZK 會自動 refresh 畫面。 在上述程式碼中，如果目的只有呈現新的資料，那麼第 02 行的程式碼是不需要的。 第 02 行的目的在於為 Listitem 物件的 value 屬性（還記得之前介紹的 forEach 嗎？）加上一個 newEvt 的屬性值，這個 屬性值對目前的工作是沒有必要的，而它加入的目的在於讓之後的 update 和 delete 用的。
最後，就是把欄位資料清空，清空的方式非常簡單，直接把欄位值設定為 null 即可；例如，把 name 欄位的資料清空的方式就是 name.value = null;； 其他兩個欄位也比照辦理即可。執行整個程式碼，並新增資料後的畫面如下：

add() 的完整程式碼如下：

  void add() {
    // 從輸入欄位取得資料
    Event newEvt = new Event(UUID.randomUUID().toString(),
                             name.value,priority.value.intValue(),date.value);
    // 將資料新增至資料庫
    evtdao.insert(newEvt);

    // 確保 allEvents 物件有最新的資料
    allEvents = evtdao.findAll();

    // 將新增資料形成一個 Listitem 物件（或者節點） 
    Listitem li = new Listitem(); 
    li.setValue(newEvt);  // 在之後的 update, delete 會用到
    li.appendChild(new Listcell(name.value)); 
    li.appendChild(new Listcell(priority.value.toString())); 
    li.appendChild(new Listcell(new SimpleDateFormat("yyyy-MM-dd").format(date.value))); 

    // 將 Listitem 物件變成 box 的子節點
    // box 是 listbox 的 id 值
    box.appendChild(li);

    // 清除輸入欄位
    name.value = null;
    priority.value = null;
    date.value = null;
  }

---

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