iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

ZK 30天速成系列 第 7

英雄列表範例:載入資料

接下來我要用一個小應用來介紹基本的 CRUD 實作:復仇者英雄列表。它的功能如下:

  • 新增英雄到列表中
  • 顯示英雄列表
  • 刪除英雄
  • 修改英雄

設計畫面

顯示列表又要提供選擇功能的元件就是 ,因此我初步這樣設計:

<zk xmlns:h="native">
    <h:h3>復仇者英雄列表</h:h3>
		<listbox id="heroBox" rows="5" emptyMessage="無資料">
        ...
    </listbox>
</zk>    
  • rows 能限制顯示的最大項目數量,超過5 個就會自動產生垂直滾動條,讓 Listbox 維持在固定高度,這樣好處是能避免版面佈局因為資料量不同而上下跳動
  • emptyMessage 能設定當 listbox 沒有資料要顯示的訊息,避免只顯示一個空白區域讓使用者猜不出來那塊區域是什麼作用

宣告控制器類別

以 MVC pattern 開發,需要實作控制器來呼叫服務類別來載入資料,首先宣告一個:

public class HeroController extends SelectorComposer {
    @Wire
    private Listbox heroBox;

雖然可以自行實作 Composer 介面,但一開始還是繼承 ZK 內建的 SelectorComposer 比較省事,它提供如 CSS selector 語法的方式讓你綁定元件與註冊事件傾聽器。

因為我要控制 Listbox 元件,因此也宣告一個 Listbox 變數加上 @Wire。ZK 會自動將 zul 上生成的 Listbox 物件綁定到我的變數 heroBox,不需要自己 new 物件。

public class HeroController extends SelectorComposer {
    @Wire
    private Listbox heroBox;
  • 要注意變數名稱必須等同於你指定給 <listbox> 的 id,這樣 ZK 才匹配得上

載入資料

listbox 元件本身也是採 MVC pattern 設計,因此資料物件(org.zkoss.zul.ListModelList) 與元件(org.zkoss.zul.Listbox)是分開的,透過 setModel() 才將兩者聯繫在一起。元件就像一個繪製器,預設是空的、沒有資料,待我把資料(ListModelList)塞給它之後,就會把資料繪製到瀏覽器上。

public class HeroController extends SelectorComposer {
    @Wire
    private Listbox heroBox;

    private ListModelList<Hero> heroList = new ListModelList();

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        //在此初始化資料或元件
        heroList.addAll(HeroService.getInitHero());
        heroBox.setModel(heroList);
    }
  • heroList:用來儲存一群 Hero 物件
  • 覆寫 doAfterCompose() 這個生命週期方法是因為這個時機點,所有的元件與子元件都已經初始化完成,ZK 已經幫你把 heroBox 參照設好,你可以開始使用它。
  • HeroService 代表一個後端服務類別,getInitHero() 會回傳一個英雄清單。

上一篇
用 zul 快速製作雛形系統
下一篇
英雄列表範例:顯示列表
系列文
ZK 30天速成30

尚未有邦友留言

立即登入留言