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

利用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架构
ZK的建筑图,显示浏览器和服务器。客户端和服务器通过请求/响应相互对话

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

  • ZK Loader根据客户端请求的URL提供HTML,包括CSS,JavaScript等。 这包括ZK客户端引擎,该引擎负责监视客户端事件并向服务器发送和接收ZK请求和ZK响应。
  • 客户端引擎根据用户的操作(如onChangeonClick等)触发事件。
  • 这些事件调用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文件具有各种属性,例如borderlayoutmenubarmenumenupopup ,所有这些属性定义了应用程序的外观。

清单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对象。 我还设置了使对话框modalclosable的属性。 此外,我还包括一个退出菜单,用于关闭应用程序。 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>

可以使用listboxmold属性激活分页功能。 另外,可以通过在listheader的sort属性上启用auto来定义基于列标题的排序。 myList对象是Customer对象的列表,这些对象由诸如idnamedate和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
ZUL视觉编辑器的屏幕快照,显示了典型的文本编辑器

摘要

本文介绍了ZK的功能,ZK是用Java代码编写的开源Ajax框架。 本文使用了一个简单的真实示例,该示例在Apache Tomcat上运行并连接到MySQL数据库。 ZK框架具有丰富的组件集,标记语言,强大的开发工具和出色的文档,同时还具有开源功能和事件驱动的Ajax框架。 因此,ZK成为开发低成本,富Internet应用程序的流行选择。


翻译自: https://www.ibm.com/developerworks/opensource/library/wa-aj-open/index.html

利用zk写分布式程序

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值