使用 ZK 框架的富 Internet 应用程序：一个开源 Ajax 框架

清单 9. index.zul 文件

　　
<menubar　id="menubar"　width="800px">　
　<menu　label="Manage　Customers">　
　　<menupopup>　
　　　<menuitem　label="Register　New　Customer">　
　　　<attribute　name="onClick"><![CDATA[　
　　　　Window　win　=　(Window)　Executions.createComponents("addCustomer.zul",　null,　null);　
　　　　win.doModal();　
　　　　win.setTitle("Enter　Customer　Data");　
　　　　win.setClosable(true);　
　　　　win.setMaximizable(true);　
　　　　]]></attribute>　
　　　</menuitem>　
　　<menuseparator　/>　
　　<menuitem　label="Exit"　　/>　
　</menupopup>　
</menu>　
</menubar>　　　　　　　　

如清单 9 所示，我定义了一个 menubar，菜单标签用于注册新客户。单击这个菜单（onclick）时，通过另一个名为 addCustomer 的 zul，我使用 Executions 对象实例化一个 Window 对象。我还设置这个属性来创建对话框 modal、closable 等。另外，我还包含了一个关闭应用程序的退出菜单。这个 menubar，以及这些已定义的属性，给这个应用程序提供了一种富客户端观感。

清单 10 展示了如何使用一个 listbox 元素来填充这个表格，在 listbox 中，我定义了一个模型，将根据这个模型填充表格元素。

清单 10. 定义表格的样例 listbox 元素

　<listbox　id="customerList"　model="@{myList}"　mold="paging"　pageSize="5"　
　multiple="true"　width="800px"　rows="${custCount}">　
　　<listhead　sizable="true">　
　　　<listheader　label="Id"　sort="auto(id)"/>　
　　　<listheader　label="Name"　sort="auto(name)"/>　
　　　<listheader　label="Active　Date"　sort="auto(date)"/>　
　　　<listheader　label="Deleted?"　/>　
　　</listhead>　
　　　<listitem　self="@{each=myList}"　>　
　　　　<listcell　label="@{myList.id}"　/>　
　　　　<listcell　label="@{myList.name}"　/>　
　　　　<listcell　label="@{myList.date}"　/>　
　　　　<listcell　label="@{myList.deleted}"/>　
　　　</listitem>　
　</listbox>