使用 ZK 框架的富 Internet 应用程序（4）应用程序小结
|
- UID
- 1066743
|
使用 ZK 框架的富 Internet 应用程序（4）应用程序小结
应用程序小结本文前面简要介绍了这个客户管理应用程序，它提供以下功能：
- 支持用户操作的仪表板页面，包含一个所有客户的视图。
- 添加新客户。
- 编辑现有客户。
- 支持客户删除（软删除）。
图 5 展示了应用程序的仪表板页面，默认视图显示数据库中的客户列表。
图 5. 仪表板屏幕 仪表板屏幕显示了一个所有已注册客户的列表。在这个客户列表上，用户能够根据 ID 或 Name 进行排序。
index.zul 拥有各种属性，比如 borderlayout、menubar、menu 和 menupopup，这些属性定义应用程序的观感。
清单 9. index.zul 文件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <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" onClick="win.detach()" />
</menupopup>
</menu>
</menubar>
|
如清单 9 所示，我定义了一个 menubar，菜单标签用于注册新客户。单击这个菜单（onclick）时，通过另一个名为 addCustomer 的 zul，我使用 Executions 对象实例化一个 Window 对象。我还设置这个属性来创建对话框 modal、closable 等。另外，我还包含了一个关闭应用程序的退出菜单。这个 menubar，以及这些已定义的属性，给这个应用程序提供了一种富客户端观感。
清单 10 展示了如何使用一个 listbox 元素来填充这个表格，在 listbox 中，我定义了一个模型，将根据这个模型填充表格元素。
清单 10. 定义表格的样例 listbox 元素1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <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}" onClick="showEdit(self.getLabel())">
<listcell label="@{myList.id}" />
<listcell label="@{myList.name}" />
<listcell label="@{myList.date}" />
<listcell label="@{myList.deleted}"/>
</listitem>
</listbox>
|
分页功能可以使用 listbox 的 mold 属性激活。另外，基于列标题的排序功能可以通过在 listheader 的 sort 属性上启用 auto 来定义。myList 对象是一个 Customer 对象列表，包括以下一些属性：id、 name、date 以及 Customer 的 deleted flag。服务返回这个列表，然后 ZK 通过 "each =myList" 迭代这个列表。然后，listcell 标签在 listbox 中显示这个 Customer 对象的每个属性。
此外，为了启用编辑功能，我将一个 showEdit 方法附加到 onClick 事件。
Register customer 对话框实现为一个网格，该网格有两个必填值：Customer name 和 Date。
清单 11. Customer 对话框网格代码1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <grid fixedLayout="true" width="450px">
<rows>
<row>
<label value="Customer Name" />
<textbox id="customerName" constraint="no empty" />
</row>
<row>
<label value="Date" />
<datebox id="date" constraint="no empty"/>
</row>
<row>
<button label="Save" onClick="submit()" />
<button label="Cancel" onClick="addCustomerWin.detach()" />
</row>
</rows>
</grid>
|
对这个对话框的必填约束通过使用 "no empty" 指定为约束属性。ZK 还支持定义自定义约束。
当 Save 按钮被单击时，我将一个 Java 方法 submit() 附加到这个事件。这个 submit() 方法接收用户提供的姓名和日期值，并在一个新创建的 Customer 对象中设置这些值。然后，这个对象被传递到服务以添加到数据库。清单 12 显示了这段代码。
清单 12. Save 按钮的 Java 代码1
2
3
4
5
6
7
8
9
10
11
| void submit() throws Exception {
Customer cust = new Customer();
cust.setName(customerName.getValue());
java.util.Date utilDate = date.getValue();
java.sql.Date sqlDate = new java.sql.Date(utilDate.getTime());
cust.setDate(sqlDate);
com.test.services.CustomerService custSvc = new com.test.services.CustomerService();
custSvc.addCustomer(cust);
Executions.getCurrent().sendRedirect("index.zul");
addCustomerWin.detach();
}
|
图 6. Register customer 图 7 显示了一个用于编辑客户姓名或日期的屏幕，以及一个 soft delete 选项。
图 7. Edit/Delete 屏幕 编辑机制与设置 Register customer 代码的方式非常相似。您将名称、日期和删除标记的新值传递到更新服务以更新数据库中的记录。如果您想提供其他帮助，您可以使用清单 13 中的代码来创建一个弹出元素。
清单 13. 弹出元素的代码1
2
3
4
5
6
7
8
9
10
11
| <row>
<label value="Delete?"/>
<hbox>
<checkbox id="deleted" name="deleted" checked="${cust.deleted}"/>
<label value="whats this?" style="font:9;cursor:help;valign:center"
popup="help"/>
</hbox>
<popup id="help" width="400px">
<html>Checking this box will enable soft delete of the record.</html>
</popup>
</row>
|
|
|
|
|
|
|
