电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 ZK 框架的富 Internet 应用程序（2）ZK 应用 [打印本页]

作者: look_w 时间: 2018-9-3 12:23 标题: 使用 ZK 框架的富 Internet 应用程序（2）ZK 应用

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 树，以便用户能够看到这个更新后的视图。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)