英雄列表范例：新增英雄

这篇我要介绍如何实作新增一个英雄到列表中，为了简化情境，这功能只需要输入英雄的名字。

首先要增加 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 中的值（英雄名字）加到清单中。因此要做两件事：

注册按钮 onClick 倾听器
将输入的英雄名字加到清单中

倾听按钮 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，设成空字串就等於清除。