2012年9月26日 星期三

待辦事項管理 (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







沒有留言:

張貼留言