使用 ZK 框架的富 Internet 应用程序（2）ZK 应用

look_w

ZK 应用为理解 ZK 的工作方式，我们来看一个真实示例。这个示例是一个客户管理应用程序，用户可以通过它进行各种操作，比如添加新客户，编辑客户数据，以及数据库中的客户条目的软删除（soft deletion）。但是，在深入代码之前，我将描述几个通过 ZK 生成的用户界面屏幕。检查过这些屏幕之后，我将描述 ZK 的架构，它是生成这个出色 UI 的底层引擎。最后，我将介绍这个应用程序使用的详细代码和配置参数。
图 1 展示了这个客户管理应用程序的初始屏幕。
图 1. Manage customer index                页面图 1 展示了在这个应用程序中注册的客户列表。这个列表显示为一个网格，包含 4 列：ID，客户姓名、激活日期和删除标记。可以通过单击列名旁边的按钮对网格中的数据排序（升序或降序）。ID（整数型）、Name（字符串）和 Active Date（日期型）列都支持排序。在本文后面部分，我将解释如何通过使用一个 Comparator 对象来定制排序。这个应用程序还支持分页，如屏幕底部所示。这个页面支持一次显示 5 条记录，并具有移动到下一页或直接移动到特定页面的能力。
图 2. 顶部菜单栏图 2 展示了这个客户管理应用程序的顶端菜单栏，它使用 ZK 的菜单栏小部件实现，包含 Register New Customer 和 Exit 两个选项。
现在您已经检查了这个示例应用程序的几个用户流，我们现在讨论 ZK 的架构细节。
ZK 内部结构ZK 应用程序的行为与桌面应用程序类似，因为用户活动通过 Client Engine 自动触发服务器上的事件。反过来，服务器上的组件更新视图以匹配客户机上的视图。客户机（浏览器）只充当一个视图，而应用程序在服务器上运行，并且能够完全访问数据库、Web 服务等资源。因此，安全不是问题。
ZK 框架中有 3 个主要组件：ZK Client Engine、ZK Loader 和 ZK Update                Engine。

• ZK Client Engine：这是 ZK 的客户端，发送请求到服务器以获取相应的 ZK 响应，这个引擎使用这些响应来更新浏览器中的 DOM。
• ZK Loader：这个组件基于客户机请求的 URL 生成一个 HTML 页面。
• ZK Update                    Engine：也称为 Asynchronous Update (AU) Engine，这个组件负责接收 Ajax 请求并更新 ZK 组件中的对应属性，以便                    Client Engine 能够更新浏览器中的视图。

图 3. ZK 架构图 3 中描述的流的机制如下：

• ZK Loader 根据客户机请求的 URL 提供 HTML，包括 CSS、                    JavaScript 等。这包括 ZK Client Engine，它负责监控客户端事件，将 ZK Requests 发送到服务器并从服务器接收 ZK                    Responses。
• Client Engine 根据 onChange、onClick 等用户动作触发事件。
• 这些事件调用 ZK Update Engine，该引擎更新 ZK 组件的属性并响应 Client Engine。
• 接收到这个响应之后，Client Engine 更新浏览器中的 DOM 树，以便用户能够看到这个更新后的视图。