接下来我要用一个小应用来介绍基本的 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() 会回传一个英雄清单。