使用ZK框架的富Internet应用程序

《使用ZK框架的富Internet应用程序》由会员分享，可在线阅读，更多相关《使用ZK框架的富Internet应用程序（14页珍藏版）》请在金锄头文库上搜索。

1、简介：ZK是一个用Java?代码编写的开源 Asynchronous JavaScript +XML （Ajax框架，使用该框架，您无需编写 JavaScript 代码就可以编写一个 支持Web 2.0的富Internet应用程序.Dojo等典型的Ajax框架拥有一些JavaScript库，用于公开某些API以进行 “Ajax化” 调用.另一方面，ZK 使用一个基于XML的元定义meta-definition ）来定义用户界面.当客户机请 求这个页面时，XML将转化为HTML代码.本文将向您介绍ZK,通过一个真实 的示例来展示其使用方法，这个示例运行在Apache Tomcat上并连接到MyS

2、QL数据库.发布日期： 2018年4月06日 级别：中级 其他语言版本：英文平均分 共5个评分） 回简介您可以将ZK看做是没有JavaScript 的Ajax.它包含一个基于Ajax的、事 件驱动的引擎，一组丰富的 XHTML和XUL元素，一种名为ZUML的标记语 言，这种语言用于创建特性丰富的用户界面.业务逻辑可以通过Java代码直接 编写并集成到您的应用程序中，并基于事件或组件触发.ZK最强大的特性是其丰富的、用于用户界面开发的控件库.有意思吧？ b5E2RGbCAP首先，我将更详细地描述前面的术语： XHTML 可扩展超文本标记语言 Extensible Hypertext Markup

3、 Language）,是HTML和XML的结合体，结合了 HTML的威力和灵活性 与XML的可扩展性.清单1提供了一个XHTML代码示例.清单1. XHTML弋码示例 plEanqFDPwHello ZKIntroducing XHTML XUL XML用户界面语言 XML User Interface Language ）,简称 XUL 发音同“Zool”），是一种由Mozilla 研发的标记语言，一个用于描 述图形用户界面的XML应用程序.XUL能够创建多种元素，比如输入控件、工具栏、菜单、树状图、键盘快捷键等.清单2展示了一个XUL代 码示例.清单2. XUL 代码示例DXDiTa9E3

4、d ZUML ZK 用户界面标记语言 ZK User Interface Markup Language ), 用于定义富用户界面.由于它基于XML.,因此每个元素都描述组件，而属 性描述组件值.清单3展示了一个ZUML代码示例.清单3. ZUML代码 示例 RTCrpUDGiTHello World!获取ZK获取和安装ZK非常简单.ZK文档网站上包含大量关于库和如何建立文件夹结 构的文档 参见参考资料获取链接）.因此，获取ZK包括运行hello world 应用程序）应该非常简单.5PCzVD7HxA 为何要使用ZK?ZK是一个直接Ajax实现一或者换句话说，一个以服务器为中心的模型.ZK

5、与其他框架不同，其他框架包含大量令人眼花缭乱的Ajax调用细节.另外，Ajax调用需要大量使用JavaScript 和相关知识，以便在浏览器 小户机）上 操作Document Object Model （DOM 并在客户机/服务器通信过程中同步数 据.ZK消除了这些复杂性，使您能够专注于业务逻辑.ZK的其他好处包括： jLBHrnAILg 丰富的用户界面. Web服务访问. 组件数据绑定. 简单但强大的标记语言ZUML. 由于没有客户机代码，因此具有高度的可维护和可扩展性 高度易用性. 提高开发人员生产力.ZK应用为理解ZK的工作方式，我们来看一个真实示例.这个示例是一个客户管理应用 程序，用

6、户可以通过它进行各种操作，比如添加新客户，编辑客户数据，以及 数据库中的客户条目的软删除soft deletion ）.但是，在深入代码之前，我将 描述几个通过ZK生成的用户界面屏幕.检查过这些屏幕之后，我将描述 ZK的 架构，它是生成这个出色UI的底层引擎.最后，我将介绍这个应用程序使用的 详细代码和配置参数.XHAQX74J0X图1展示了这个客户管理应用程序的初始屏幕.图 1. Manage customer index 页面M3E3g 3骐MW51Enrage EuUem-re -图1展示了在这个应用程序中注册的客户列表.这个列表显示为一个网格，包 含4歹I：ID,客户姓名、激活日期和删

7、除标记.可以通过单击列名旁边的按钮 对网格中的数据排序 升序或降序）.ID整数型）、Name字符串）和Active 口滉6日期型）列都支持排序.在本文后面部分，我将解释如何通过使用一个 Comparator对象来定制排序.这个应用程序还支持分页，如屏幕底部所示.这个 页面支持一次显示5条记录，并具有移动到下一页或直接移动到特定页面的能 力.LDAYtRyKfE 图2.顶部菜单栏总 d Manage CustomersManage CustomersManage Customers Acbve DateJan 8, 2007 12JJan 15, 1997 12Mar 17 2009 1：Reg

8、ister Ne?. CustamerExit3 RELIANT INDUSTRIES图2展示了这个客户管理应用程序的顶端菜单栏，它使用 ZK的菜单栏小部件实现，包含 Register New Customer 和 Exit 两个选项.zzz6ZB2Ltk现在您已经检查了这个示例应用程序的几个用户流，我们现在讨论ZK的架构细节.ZK内部结构ZK应用程序的行为与桌面应用程序类似，因为用户活动通过Client Engine自动触发服务器上的事件.反过来，服务器上的组件更新视图以匹配客户机上的 视图.客户机 Engine ,这个 组件负责接收Ajax请求并更新ZK组件中的对应属性，以便 Client

9、 Engine能够更新浏览器中的视图.SixE2yXPq5ServerBrowserRequestResponseZK loaderZK updateengine图3. ZK架构图3中描述的流的机制如下: ZK Loader根据客户机请求的 URL提供HTML包括CSS JavaScript 等.这包括ZK Client Engine ,它负责监控客户端事件，将 ZK Requests发送到服务器并从服务器接收 ZK Responses. 6ewMyirQFL Client Engine 根据onChange、onClick 等用户动作触发事件. 这些事件调用ZK Update Engine，

10、该引擎更新ZK组件的属性并响应 Client Engine. kavU42VRUs 接收到这个响应之后，Client Engine更新浏览器中的DOM树，以使用户能够看到这个更新后的视图.y6V3ALoS89使用ZK管理客尸接下来，我将继续介绍创建一个示例应用程序来管理客户的细节.我使用Eclipse IDE 来展示应用程序的创建，但您可以选择使用任何IDE. M2ub6vSTnP基本的思路是创建一个动态Web应用程序工程并将其指向应用服务器运行时，这在本例中为 Apache Tomcat运行时.oYujCfmucw建立新工程和运行时后，复制图 4中显示的目录结构.zkMangeCustome

11、rE：匚.百arc-：3 com.test.base+ J_ Custarrier.Java-出 com.test.services+ J_ CustortierService Java4 3“ Apache Tomcat v5.5 Apache Tomcat y5.5 + 三 JRE 5/stem Library idb t? _ lr；4 也 Web App LibrariesEL build-：WebContent 二金 META-INF .context, xml .MANIFEST.MF-；1 WEB-INF+匚少Eib_x web h xml zk.xmlSEESaddCuiton

12、ner.zul editCustonner.zul inde.zul timeoyt.sul十止于水5图4.目录结构这个客户管理应用程序的目录结构遵循图4中描述的目录结构的模式.注意，这个应用程序的核心文件包含在 WebContent文件夹中，该文件夹包含 以下子文件夹： META-INF 包含用于连接到MySQL数据库的数据库凭证信息. WEB-INF 包含一个库文件夹，其中包含运行应用程序所需的ZKJAR文件；它还包含描述数据源的 web.xml文件.eUts8ZQVRd另外，所有关联zul文件和HTML文件都包含在 WebContent文件夹中. 这些文件充当应用程序的视图部分，向这个 Web应用程序提供动态和静 态内容.sQsAEJkW5T示例文件zkManageCustomer.zip透视图拥有一个server选项卡，右键单击该选项卡将显示一个创建新服务器选项.这个服务器可用于从Ec