利用zk写分布式程序_使用ZK的富Internet应用程序

最新推荐文章于 2021-12-02 09:38:25 发布

cuxiong8996

最新推荐文章于 2021-12-02 09:38:25 发布

阅读量213

点赞数

文章标签：数据库 mysql java js web ViewUI

原文链接：https://www.ibm.com/developerworks/opensource/library/wa-aj-open/index.html

版权

利用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，名称，有效日期以及是否删除帐户。

图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架构

图3中描述的流程机制如下：

ZK Loader根据客户端请求的URL提供HTML，包括CSS，JavaScript等。这包括ZK客户端引擎，该引擎负责监视客户端事件并向服务器发送和接收ZK请求和ZK响应。
客户端引擎根据用户的操作（如onChange ， onClick等）触发事件。
这些事件调用ZK更新引擎，该引擎将更新ZK组件的属性并响应客户端引擎。
收到此响应后，客户端引擎将在浏览器中更新DOM树，以便用户可以看到此更新的视图。

使用ZK管理客户

接下来，我将继续描述创建示例应用程序来管理客户的详细信息。我使用Eclipse IDE演示了应用程序的创建，但是您选择的任何IDE都可以使用。

基本思想是创建一个动态Web应用程序项目，并将其指向应用程序服务器运行时，在本例中为Apache Tomcat运行时。

设置新项目和运行时之后，复制文件夹结构，如图4所示。

图4.目录结构

zkManageCustomers，src Customer.java和CustomerService.java的程序包视图，然后在WebContent addCustomer.zul，editCustomer.zul，index.zul和timeout.zul下。

管理客户应用程序的目录结构遵循图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