iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

ZK 30天速成系列 第 9

英雄列表範例:新增英雄

這篇我要介紹如何實作新增一個英雄到列表中,為了簡化情境,這功能只需要輸入英雄的名字。
https://ithelp.ithome.com.tw/upload/images/20210925/20050621lQ6InEbCO0.jpg

首先要增加 UI 元件:<textbox><button>

<h:h3>復仇者英雄列表</h:h3>
<div style="margin: 5px 0">
    <textbox id="newNameBox" hflex="1" style="margin-right:10px"/>
    <button id="add" iconSclass="z-icon-plus"/>
</div>
  • 你可以在 style直接寫 css 語法來覆寫或調整元件的外觀。
  • hflex 是代表 horizontal flexibility,用來控制怎麼分配同一層元件(或說兄弟元件)的寬度,以上面的例子就是 <textbox><button>。它的值並不代表長度單位,而是一個比例,因為 <button>並沒指定 hflex 的值,因此 <textbox> 會佔滿除了 <button> 寬度以外的剩下的空間。(底層以 CSS flexbox 實作)。
  • ZK 內包 Font Awesome 4.7 圖示,要填在 iconSclass 屬性中,前綴要把 fa- 改成 z-icon,例如要使用 fa-plus,必須寫 z-icon-plus。所有繼承 LabelImageElement 的元件都支援這個屬性。

實作新增英雄

我需要實現的是:當按鈕點擊,要把textbox 中的值(英雄名字)加到清單中。因此要做兩件事:

  1. 註冊按鈕 onClick 傾聽器
  2. 將輸入的英雄名字加到清單中

傾聽按鈕 onClick 事件

因為我的控制器繼承 SelectorComposer,我可以用 @Listen加上元件選擇器語法(類似 CSS selector)來指定傾聽事件的元件,語法規則如下:

@Listen([事件名稱] = [元件 selector])

public class HeroController extends SelectorComposer {
...
    @Wire
    private Textbox newNameBox;

		@Listen("onClick = #add")
		public void add(){
		    heroList.add(HeroService.create(newNameBox.getValue()));
		    newNameBox.setValue("");
		}
  • 為了要取得使用者輸入要用@Wire 取得頁面上 textbox 的參照,因此要宣告變數 newNameBox,其名稱要等同該元件 ID
  • 井字號是「元件 ID 選擇器」,@Listen 那行的意義就是:傾聽 ID是 add的元件所發出的 onClick 事件。對照前一節的 zul,你會發現我同樣指定 button 的 ID 為 add。因此當有使用者點了該按鈕,ZK 就會呼叫這個控制器的 add()
  • 取得使用者輸入的方式很簡單,就是呼叫該textbox 的 getter,如 newNameBox.getValue()
  • HeroService.create() 代表呼叫後端服務類別,會回傳一個新的英雄物件擁有你傳入的名字。
  • heroList.add():把新的英雄加入清單中,因為 ListModelList 扮演 Model 負責儲存資料,當你呼叫任何更改內容的method,如 add(),內部會發出事件通知 Listbox,然後 Listbox 會繪製出新的英雄到瀏覽器上。當然,繪製的方式就是依照先前所定義的範本。
  • setValue(""):為了避免新增之後,前一個英雄的名字還在 textbox,我要清除它,方便可以立即輸入下一個名字。設定輸入元件點值就靠 setter,設成空字串就等於清除。

以上這段新增在zul 中的元件跟程式碼搭配就完成了「新增英雄」的功能。


上一篇
英雄列表範例:顯示列表
下一篇
英雄列表範例:刪除英雄
系列文
ZK 30天速成30

尚未有邦友留言

立即登入留言