关联到一个控制器

在服务器的控制器(ZK composer)载入资料後，要让它跟 zul 上写的元件关联，才能实际控制 zul上的元件，於是我在最上层的元件 <div>上的 apply 写上完整 class 名称：

<div width="20%" apply="quickstart.hero.HeroController" style="margin: 0 auto">
    <h:h3>复仇者英雄列表</h:h3>
    <listbox id="heroBox" rows="5" emptyMessage="无资料">
		...
		</listbox>

当我想控制 <div> 跟其下子元件时，我就必须将控制器关联到该元件。

控制器的生命周期是由 ZK 决定，因此你无需写程序去产生该物件。当一个浏览器访问这个 zul 时，ZK 就会新建一个控制器物件，并呼叫对应的生命周期方法，如 doAfterCompose()，也会剖析 zul 档将对应的元件生成，并绑定到我所指定的控制器上去。

资料模型驱动绘制 (Model-driven Rendering)

要用 Listbox 显示资料前先了解 ZK 针对资料元件（例如Listbox, Grid, Tree）及一些支援 model 属性的元件（如 Tabbox, Selectbox, Searchbox等)的设计架构都是采用「资料模型驱动绘制」。元件(Listbox)、zul、资料模型(ListModel)，3者之间形成 MVC pattern。

以 Listbox 为例，开发者把资料模型 (ListModelList) 塞给元件 (Listbox)，元件根据模板或绘制器 (<template>, ListItemRender) 生成其对应的子元件 (Listitem)。开发者需透过操控资料模型(ListModel）的内容来控制子元件而不是直接生成/消灭子元件。

• UI 元件 (Controller)
  • 从资料模型取得资料
  • 在资料模型上注册一个资料变动倾听器，当资料变动时，处理相关的变化
  • 处理从浏览器端来的事件，如使用者选择某个项目
• 资料模型 (Model)
  • 储存应用程序资料物件 (the data could be Car, Person)
  • 当物件数量变动时通知元件，例如 add(), remove(), clear() 被呼叫时
  • ZK 提供数个内建的资料模型实作，请善加利用，请参考 ListModel, TreeModel, GroupsModel
• 绘制器 (View)
  • 根据范本绘制对应子元件。若启动 Render-on-Demand，则会根据浏览器卷动位置绘制必要的子元件，移除不需要的元件，节省记忆体，增进效能。
  • 如果没指定范本，则会用内建绘制器绘制

定义绘制范本

setModel() 只是将资料塞给 Listbox，预设 Listbox 会呼叫 toString() 把每个 Hero 绘制出来，但这通常不是我们想要的。因此我要定义一个范本来决定怎麽绘制每一个 Hero 物件，语法如下：

<listbox id="heroBox" rows="5" emptyMessage="无资料" >
    <listhead>
        <listheader width="50px"/>
        <listheader />
    </listhead>
    <template name="model">
        <listitem>
            <listcell label="${forEachStatus.index}"/>
            <listcell label="${each.name}"/>
        </listitem>
    </template>
</listbox>

• <listheader> 控制栏位宽度
• <template> 用来定义范本，name 的值必须是 model，代表是给 model 用的范本。
• ${each} 是 ZK 预设定义的隐含变数，代表 model 中的每个物件，在我们的例子中是 Hero，用 dot notation 来存取 Java bean 物件上的属性如 ${each.name}
• ${forEachStatus.index} 也是隐含变数，用来存取model索引值，从0 开始