利用zk写分布式程序
您可以认为ZK类似于没有JavaScript的Ajax。 它由基于Ajax的,事件驱动的引擎,丰富的XHTML和XUL组件集以及称为ZUML的标记语言组成,该标记语言用于创建功能丰富的用户界面。 可以通过直接集成到您的应用程序中的Java代码编写业务逻辑,并根据事件或组件来触发业务逻辑。 ZK最强大的功能是其丰富的控件库集,用于用户界面开发。 听起来很有趣?
首先,让我更详细地描述前面的术语:
- XHTML:可扩展的超文本标记语言,即XHTML,是HTML和XML的组合。 XHTML通过XML的可扩展性增加了HTML的功能和灵活性。 清单1提供了一个XHTML代码示例。
清单1. XHTML示例代码
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Hello ZK</title> </head> <body> <h1>Introducing XHTML</h1> </body> </html>
- XUL:XML用户界面语言或XUL(发音为“ Zool”)是Mozilla开发的一种标记语言,是一种用于描述图形用户界面的XML应用程序。 XUL能够创建元素,例如输入控件,工具栏,菜单,树,键盘快捷键等。 清单2显示了XUL代码的示例。
清单2. XUL代码示例
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="My App" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <caption label="Hello World"/> </window>
- ZUML:ZK用户界面标记语言或ZUML用于定义丰富的用户界面。 因为它基于XML,所以每个元素都描述了组件,而属性则描述了组件值。 清单3给出了一个ZUML代码示例。
清单3. ZUML代码示例
<window title="Hello ZUML" border="normal"> Hello World! </window>
获得ZK
获得和安装ZK非常容易。 库的文档和设置文件夹结构的文档在ZK文档站点上定义得非常好。 (请参阅相关信息中的链接。)因此,获得ZK,包括运行Hello World应用程序,应该很简单。
为什么选择ZK?
ZK是直接的Ajax实现,或者换句话说,是以服务器为中心的模型。 这与其他框架不同,其他框架使您暴露于进行Ajax调用的痛苦细节。 另外,Ajax调用需要JavaScript的广泛使用和知识,以便在浏览器(客户端)上操作文档对象模型(DOM)并在客户端/服务器通信期间同步数据。 ZK使您免受这些复杂性的困扰,并使您专注于业务逻辑。 ZK的其他好处包括:
- 丰富的用户界面
- Web服务访问
- 组件数据绑定
- 简单但功能强大的标记语言ZUML
- 高度可维护和可扩展,因为没有客户端代码
- 高可用性
- 提高开发人员生产力
ZK行动中
要了解ZK的工作原理,我们来看一个真实的示例。 此示例是一个管理客户应用程序,用户可以通过该应用程序执行各种操作,例如添加新客户,编辑客户数据以及软删除数据库中客户条目。 但是,在深入研究代码之前,我将解释使用ZK生成的一些用户界面屏幕。 看完屏幕之后,我将描述ZK的体系结构,ZK是生成此令人印象深刻的UI的基础引擎。 最后,我将描述代码级别的详细信息以及用于此应用程序的配置参数。
图1显示了“管理客户”应用程序的初始屏幕。
图1.管理客户索引页面
![“管理客户”应用程序显示数据的电子表格视图,包括ID,名称,有效日期以及是否删除帐户。](https://i-blog.csdnimg.cn/blog_migrate/e396e53e2b4a69f4685942072268cace.png)
图1显示了在应用程序中注册的客户列表。 该列表显示为网格,其中包含ID,客户名称,有效日期和已删除标志的列。 通过单击列名附近的按钮,可以对网格中的数据进行排序(升序或降序)。 ID(整数),名称(字符串)和有效日期(日期)列已启用排序。 在本文的后面,我将解释如何使用Comparator
对象来自定义排序。 屏幕底部显示了该应用程序的分页功能。 该页面可以一次显示5条记录,还可以移动到下一页或直接移动到特定页面。
图2.顶部菜单栏
图2显示了“管理客户”应用程序的顶部栏。 这是使用ZK的菜单栏小部件实现的。 它包括一个注册新客户并退出应用程序的选项。
现在,您已经看了示例应用程序的几个用户流程,让我们跳入ZK的体系结构细节。
ZK内部
ZK应用程序的行为类似于台式机应用程序,因为用户活动会通过客户端引擎自动在服务器上触发事件。 反过来,在服务器上运行的组件将更新视图以匹配客户端的视图。 客户端(浏览器)仅充当视图,而应用程序在服务器上运行,并且可以完全访问数据库,Web服务等资源。 因此,安全隐患最小。
ZK框架中包含三个主要组件。 如图3所示,这些组件是ZK客户端引擎,ZK加载程序和ZK更新引擎。
- ZK客户端引擎:这是ZK的客户端,它将请求发送到服务器以获取相应的ZK响应。 这些响应又被引擎用来在浏览器中更新DOM。
- ZK Loader:此组件根据客户端请求的URL生成HTML页面。
- ZK更新引擎:这也称为异步更新(AU)引擎。 该组件负责接收Ajax请求并更新ZK组件中的相应属性,以便客户端引擎可以在浏览器上更新视图。
图3. ZK架构
![ZK的建筑图,显示浏览器和服务器。客户端和服务器通过请求/响应相互对话](https://i-blog.csdnimg.cn/blog_migrate/f1c13c89c7de297f5382b6f8ebb71842.png)
图3中描述的流程机制如下:
- ZK Loader根据客户端请求的URL提供HTML,包括CSS,JavaScript等。 这包括ZK客户端引擎,该引擎负责监视客户端事件并向服务器发送和接收ZK请求和ZK响应。
- 客户端引擎根据用户的操作(如
onChange
,onClick
等)触发事件。 - 这些事件调用ZK更新引擎,该引擎将更新ZK组件的属性并响应客户端引擎。
- 收到此响应后,客户端引擎将在浏览器中更新DOM树,以便用户可以看到此更新的视图。
使用ZK管理客户
接下来,我将继续描述创建示例应用程序来管理客户的详细信息。 我使用Eclipse IDE演示了应用程序的创建,但是您选择的任何IDE都可以使用。
基本思想是创建一个动态Web应用程序项目,并将其指向应用程序服务器运行时,在本例中为Apache Tomcat运行时。
设置新项目和运行时之后,复制文件夹结构,如图4所示。
图4.目录结构
管理客户应用程序的目录结构遵循图4中描述的相同模式目录结构。
请注意,此应用程序文件的核心包含在WebContent文件夹中。 在WebContent文件夹中,我具有以下子目录:
- META-INF –包含用于连接到MySQL数据库的数据库凭据信息。
- WEB-INF –这包括库文件夹,其中包含运行应用程序所需的ZK JAR文件。 它还包括描述数据源的web.xml文件。
- 此外,所有关联的zul和HTML文件都包含在WebContent文件夹中。 这些文件用作应用程序的视图部分,为Web应用程序提供动态和静态内容。
样本文件zkManageCustomer.zip(请参阅下载 )包含该应用程序的压缩版本。 它还包括Eclipse所需的元数据文件,以便可以将其直接无缝导入到该IDE中。
Eclipse中的Java 2平台企业版(J2EE)透视图具有服务器选项卡,右键单击该选项卡将向用户显示创建新服务器的选项。 该服务器可用于从Eclipse IDE管理应用程序服务器。
配置新服务器后,需要在服务器上配置新创建的资源。 此服务器配置将部署在开发过程中创建的资源。
Tomcat和MySQL的配置
该示例程序配置为可与Tomcat和MySQL一起使用。 但是,让它在另一个Java应用程序服务器(包括WebSphere)中运行应该没有问题。 由于该示例使用JDBC,因此它应可与任何受支持SQL数据库一起使用,例如DB2 Express-C,只需对连接代码进行少量更改即可。
要将Tomcat连接到MySQL数据库,您需要定义一个资源引用。 此元素指定资源管理器连接工厂引用的名称。 在这种情况下,它将是由javax.sql.DataSource
类型的jdbc / mysql指定的数据库连接。
清单4. web.xml中的资源管理器连接工厂
. . .
<resource-ref>
<description>DB Connection</description>
<res-ref-name>jdbc/mysql</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
</resource-ref>
. . .
您还需要在WebContent / META-INF文件夹下的context.xml文件中定义连接资源。 该文件包含驱动程序名称,jndi名称,用户名,密码,数据类型和URL之类的属性。
清单5. context.xml中的上下文定义
. . .
<Context>
<Resource driverClassName="com.mysql.jdbc.Driver"
maxActive="4" maxIdle="2" maxWait="5000" auth="Container"
name="jdbc/mysql" password="" type="javax.sql.DataSource"
url="jdbc:mysql://localhost:3306/customer" username="root"/>
</Context>
. . .
客户数据库只有一个表,可以通过运行清单6中所示的脚本来创建该表。
清单6.创建数据库的脚本
use customer;
CREATE TABLE `customer` (
`ID` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(255) DEFAULT NULL,
`date` date DEFAULT NULL,
`deleted` tinyint(1) DEFAULT '0',
PRIMARY KEY (`ID`)
);
调整应用程序以与DB2一起使用
要将Tomcat连接到DB2-Express C或另一个DB2变体数据库,其配置与针对MySQL所述的配置非常相似。 以下示例显示了web.xml中资源管理器连接工厂的配置: 。 。
清单7. web.xml中的资源管理器连接工厂
. . .
DB Connection
jdbc/db2db
javax.sql.DataSource
Container
. . .
对于上下文定义,典型示例如下:。 。 。
清单8.上下文定义
. . .
maxActive="4" maxIdle="2" maxWait="5000" auth="Container"
name="jdbc/db2db" password="" type="javax.sql.DataSource"
url="jdbc:db2://localhost:(port)/customer" username="db2admin"/>
. . .
申请摘要
本文前面已对应用程序进行了简要说明。 客户管理应用程序提供以下功能:
- 仪表板页面支持用户操作,包括所有客户的视图
- 添加新客户
- 编辑现有客户
- 启用删除客户(软删除)
图5显示了该应用程序的仪表板页面。 默认视图显示数据库中的客户列表。
图5.仪表板屏幕
仪表板屏幕显示所有注册客户的列表。 除了客户列表以外,用户还可以根据ID或Name对数据进行排序。
index.zul文件具有各种属性,例如borderlayout
, menubar
, menu
和menupopup
,所有这些属性定义了应用程序的外观。
清单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" onClick="win.detach()" />
</menupopup>
</menu>
</menubar>
如清单9所示,我定义了一个带有菜单标签的menubar
,用于注册新客户。 单击此菜单( onClick
)时,我使用另一个名为addCustomer
zul通过Executions
对象实例化Window
对象。 我还设置了使对话框modal
, closable
的属性。 此外,我还包括一个退出菜单,用于关闭应用程序。 menubar
以及定义的属性为该应用程序提供了丰富的客户端外观。
清单10显示了如何使用listbox
元素填充表,其中我根据填充的表元素定义了一个模型。
清单10.定义表的示例列表框元素
<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"
进行迭代。 然后, listbox
listcell
标签在listbox
显示客户对象的每个属性。
另外,为了启用编辑功能,我将showEdit
方法附加到onClick
事件。
“注册客户”对话框被实现为网格,其中包含“客户名称”和“日期”的必填值。
清单11.客户对话框网格代码
<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还使您能够定义自定义约束。
单击“保存”按钮时,我将一个名为submit()
的Java方法附加到此事件。 此submit()
方法接收用户提供的名称和日期值,并将其设置在新创建的客户对象中。 然后将此对象传递给服务以添加到数据库。 清单12显示了此代码。
清单12. Save按钮的Java代码
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.注册客户
图7显示了一个用于编辑客户名称或日期的屏幕,以及一个软删除选项。
图7.编辑/删除屏幕
编辑机制与设置注册客户代码的方式非常相似。 您将名称,日期和已删除标志的新值传递给更新服务,以更新数据库中的记录。 如果要设置其他帮助,可以使用清单11中的代码创建一个弹出元素。
清单13.弹出元素的代码
<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>
ZK开发工具
ZK的巨大优势在于其工具。 一个示例是ZK-Studio(一个Eclipse插件),它被用作集成开发环境。 它包括ZUL编辑器,ZUL Visual编辑器,ZK样式设计器和DB Form构建器之类的功能。 图8显示了用于创建此示例项目的ZUL Visual编辑器。
图8. ZUL Visual Editor
摘要
本文介绍了ZK的功能,ZK是用Java代码编写的开源Ajax框架。 本文使用了一个简单的真实示例,该示例在Apache Tomcat上运行并连接到MySQL数据库。 ZK框架具有丰富的组件集,标记语言,强大的开发工具和出色的文档,同时还具有开源功能和事件驱动的Ajax框架。 因此,ZK成为开发低成本,富Internet应用程序的流行选择。
翻译自: https://www.ibm.com/developerworks/opensource/library/wa-aj-open/index.html
利用zk写分布式程序