ZK框架学习总结

 ZK框架学习总结

目       录

ZK框架学习总结... 1

1       ZK框架简介... 3

2       安装部署开发环境... 3

2.1        工具及安装... 3

2.2        ZK环境的配置... 3

3       快速搭建页面... 3

4       帮助文档... 3

5       没有Javascript的事件响应... 3

5.1        组件的事件... 3

5.2        组件与控制器... 3

6       搭建一个完整的WEB应用... 3

6.1        整合持久层... 3

6.2        整合Spring. 3

1          ZK框架简介

ZK框架是一个用JAVA实现的简单但是功能强大的表现层框架。它包括了一个基于Ajax的事件驱动引擎、这也是它的最大特色。可以做到没有JavaScript，只通过ZUML(ZK User Interface Markup Language)这种标识语言即可做到界面创建和事件响应。

ZK的实现完全用java实现，开发过程中不会有任何的JavaScript代码，但是通过将zul文件（ZK的源文件，类似于jsp文件）通过ZK引擎编译后查看页面源代码，结果还是可以看到，ZK实现的本质还是通过JavaScript+CSS来处理异步请求的。

组件是ZK中最常见的元素。有点类似于JAVA Swing或者VB这样的基于组件的编程。结合ZK Studio，可以达到可视化和动态地查看页面效果。

特征：

1.     它是一个表现层工具。可以与hibernate，spring等结合构建一个完整的WEB应用。

2.     以服务端为中心的框架。它封装了Ajax的后台处理技术。服务端由两个重要部分实现：ZK加载器，ZK异步更新引擎。前者负责解析URL请求，生成HTML页面；后者负责监听和处理客户端的Ajax请求，同时更新ZK组件的属性，然后将Ajax响应发回给客户端。

3.     基于组件的GUI。页面的可视部分都是由组件构成。类似于HTML标签，但是比HTML标签更灵活。

不足之处：

1.       ZK与JAVA结合紧密。由于ZK的组件都是由JAVA实现，所以对组件的控制也仅限于用JAVA语言。无法与控制层解耦。

2.       学习资料和文档比较少。最全面的ZK应用其实还是官方的DEMO。连《ZK框架——Ajax开发实践》一书都是用的官方例子。所以对有些事件或者属性只有自己探索。

3.       ZK的测试比较薄弱。对页面无法用工具进行测试。只能用手动测试。调试也不方便。

2          安装部署开发环境

2.1      工具及安装

需要安装的工具有JDK、Tomcat（或者其他服务器）、My Eclipse（或者Eclipse）、 ZK开发包、ZK Studio。JDK、Tomcat、My Eclipse安装都不用介绍了，主要介绍ZK相关的部门。我的环境是JDK 1.6.0_16+Tomcat 6+My Eclipse 6.0。

准备工作：

l         下载ZK包和demo。http://www.zkoss.org/download/zk.dsp。在Windows下开发选择zk-bin-5.0.2.zip，Linux下选择zk-bin-5.0.2.tar.gz。下载好后还需要下载一个demo包。这个demo包里面包含了一些xml模板，创建ZK页面时可以根据模板快速生成。demo下载选择zk-demo-5.0.2.zip。

l         然后下载ZK Studio。ZK Studio是My Eclipse一个插件。提供了对ZK文件的时时查看和组件的可视化编辑以及一些通用页面原型。最好还是下载这个插件，方便开发。这个插件可在线安装或者直接下载。安装步骤可参考页面：http://www.zkoss.org/download/zkstudio.dsp。安装好后的界面如下：

 

图1 ZK Studio界面1

 

图2 ZK Studio界面2

2.2      ZK环境的配置

l         解压zk-bin-5.0.2.zip，创建用户自定义库：在My Eclipse里面选择windows->Preferences->JAVA->Build Path->User Libraries。添加3个用户库。名字随便取，可以分别叫：ZK Ajax Frame、ZK Ajax Framework Extendsion以及ZK Ajax Framework Forge Library。分别对应zk-bin-5.0.2目录结构中dist下的lib、lib/ext以及lib/zkforget中的jar包。配置好后的用户库如下图：

 

图3 自定义的用户库

l         添加xsd到用户xml catalog entry里。这是为了确保可以更好的地使用My Eclipse XML Editor的功能。打开window->preferences->My Eclipse->Files and Editors->XML->XML Catalog。添加zk-bin-5.0.2/dist/xsd/zul.xsd。

l         添加xml文件模板：将zkdemo\WebContent\WEB-INF下的lang-addon.xml、portlet.xml，zk.xml和web.xml四个文件复制到My Eclipse安装目录下的myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710 \templates\xml。文件夹名字可能因为My Eclipse版本不同而不同。只要以com.genuitec.eclipse.wazardsXXX这样开头的文件夹就行。然后将这四个文件分别改名为：LangAddon.vtl、Portlet.vtl、ZK.vtl、ZKWeb.vtl。打开四个文件，将<?xml version="1.0" encoding="UTF-8"?>这一行都改成<?xml version="1.0" encoding="$encoding"?>。继续在这个xml文件夹里面新建一个名为ZUL.vtl的文件。内容如下：

l        

<?xml version="1.0" encoding="$encoding"?>
<?page title="title" ?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul ">
</zk>

 

修改 My Eclipse安装目录下的myeclipse\eclipse\plugins\com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710 \ templates.xml。在<!-- XML templates -->后面添加如下代码：

<template
    context="com.genuitec.eclipse.wizards.xml"
    script="templates/xml/ZKWeb.vtl"
    name="XML template for a web.xml file with ZK capability"/> 
    <template
    context="com.genuitec.eclipse.wizards.xml"
    script="templates/xml/LangAddon.vtl"
    name="XML template for a lang-addon.xml file for ZK"/>
    <template
    context="com.genuitec.eclipse.wizards.xml"
    script="templates/xml/Portlet.vtl"
    name="XML template for a port-let.xml file for ZK"/> 
    <template
    context="com.genuitec.eclipse.wizards.xml"
    script="templates/xml/ZK.vtl"
    name="XML template for a zk.xml file"/>
    <template
    context="com.genuitec.eclipse.wizards.xml"
    script="templates/xml/ZUL.vtl"

    name="XML template for a *.zul file"/>

l         添加新的文件类型。打开window->preferences->general-content types，给Java Source File添加*.zs，给XML添加*.zul，给JSP添加*.dsp，给HTML添加*.zhtml。到此，ZK环境完全搭建完成。开发好的ZK应用可以直接打成war包进行部署。十分地简单。

3          快速搭建页面

有两种方式创建ZK Project。第一种方式是直接在ZK Welcome Page里面新建一个ZK工程： ，这样不用再添加ZK库。第二种方式是先创建一个Web Project，然后在Build Path里面添加刚才添加的三个User Libraries。然后在WebRoot里面添加zul文件即可。添加zul文件要选择新建XML Advanced Tempaltes文件。

打开zul文件可以选择Open with Zul Editor。这样便可以利用zk studio的可视化编程进行开发。

除了ZK自己提供的一些组件外，html的标签在ZK中完全可以继续用。但是为了避免ZK解释HTML标签，通常要使用<![CDATA[ 和 ]]>将HTML标签围入其中。换言之，他们并不是子组件。而是被存储在content属性内。

组件可以从 直接拖拉进代码区，然后可以在 中查看和设置组件支持的所有属性和事件。其特点就是高效地组建页面。如果不添加任何JAVA代码，那么创建一个页面的效率不亚于直接用Axure创建界面原型。图4是一个界面demo。无任何js和CSS代码。当然，ZK框架并不排斥使用CSS代码。利用style属性可以设置CSS样式，还可以通过<style src=" CSS文件"/>加载CSS文件。

 

图4 快速创建页面范例

4          帮助文档

最好的帮助文档其实是zkoss官网的一些文档。比如：开发手册（http://zh.zkoss.org/doc/devguide/index.html）。但是对于开发人员来说，官方的帮助文档其实还不够的。ZK总提供上百个组件和13个指令。每个组件都会有10到60个不同的属性和事件响应。所以，对于这些属性及用法没有一个好的类似java api文档那样的东西，实在是会不知所措。所以在zkoss官方还提供了zkoss组件的java api（http://www.zkoss.org/javadoc/latest/zk/），方便开发人员

5          没有Javascript的事件响应

5.1      组件的事件

每个组件都支持一些事件。如onClick、onOK,onClose等。以下是window组件所支持的事件：

 

图 5 window组件支持的事件

在ZK异步更新引擎的支持下，组件的属性可以被动态改变。首先获得组件对象，然后设置值。获得组件可以通过JAVA代码或者EL表达式。同一ID空间中的可以用getFellow（组件id），还有一种方法是利用org.zkoss.zk.ui.api包中的Path类可以很方便地获取组件。Path.getComponent(组件路径)。如获取以下页面的label组件的value值可以这样写：

<?page id=”page1”?>

<window id=”winA”>

<label id=”labelA” value=”Label A” />

</window>

<zscript><![CDATA[

alert(Path.getComponent(“/winA/labelA.value”));

]]></zscript>

跨页面的组件访问可以用//表示当前桌面。如要在page2中访问page1的id为winA的window组件，可以这样写Path.getComponent(“//page1/winA”)。

    当然，ZK也不排除使用javascript。如：

<script type="text/javascript"> 

function testAlert() { 

    alert("调用javascript成功！"); 

} 

</script> 

  <button label="SayHello"> 

    <attribute name="onClick">     

    <![CDATA[     

        Clients.evalJavaScript("testAlert();"); 

    ]]>     

    </attribute>     

</button> 

    事件还可以在JAVA代码中进行注册。注册后与直接写在zul页面中的效果是一样的。比如我们可以先定义一个事件类：

public class MyListener implements EventListener{

         @Override

         public void onEvent(Event event) throws Exception {

                   // TODO add some methods

                   ……

                   }}

然后可以在另外一个类中注册它。

public class ShowMessage extends Window {

public void onCreate() throws InterruptedException{ //does initialization

         getFellow("btnAddUser").addEventListener("onClick", new MyListener());

}}

这样我们就可以通过use="ibatis.ShowMessage"来调用MyListener里面定义的一些方法了。

5.2          组件与控制器

将组件和组件的控制代码最好进行分离。利用组件的use或者applay属性将JAVA代码和zul页面进行关联。如：<window id="main" width="100%" height="100%" apply="zktest.borderlayout.BorderLayoutComposer">或者<listbox id="testListID" width="800px" rows="5" use="zktest.jianer.ListTestBean">。

    我们知道，一个经典的MVC框架中，视图，控制器和模型都是必须要有的。在一个WEB工程中DAO层的引入比较容易，比如说hibernate或者说淘宝现在用的比较多的iBatis。而控制器从何而来。视图如何与控制器互相传递数据？这里就用到了zul页面和java代码的分离。分离出java代码后，java代码可以很容易与DAO层打交道，而获取视图层的数据也可以轻松通过getFllow获取到组件进行操作。这样MVC三层便实现了。另外，在Web工程中还可以配置Spring进行类管理。

6          搭建一个完整的WEB应用

6.1      整合持久层

要想程序与数据库打交道，有很多种方式。直接写JDBC当然是最笨的一种，现在淘宝的JAVA应用普遍采用iBatis作为持久层，没有采用hibernate是因为考虑到hibernate的效率问题，所以我也试着将iBatis配置进工程里面。

首先当然是有一个ZK的工程。参照前面第3章的内容。在My Eclipse里面新建好一个Web工程。然后在Build Path里面配置需要的包。这里我用到的是MySQL的JDBC包和iBatis的包。都加入到Build Path里面： 。然后进行iBatis的配置。

要使iBatis跑起来，至少需要3个配置文件。 。SqlMap.properties用来配置数据库连接的相关信息。如用户名，密码，连接字符串等。SqlMapConfig.xml用来指定数据源、SqlMap.properties的位置和用到的sqlMap。而这个User.xml就是一个sqlMap。用来配置sql语句、返回类型，传入参数和名字的。在sqlMap类里面就通过名字对sql语句进行调用。一切配置好后就可以开始正式编码了。

6.2      整合Spring

在MyEclipse里面添加Spring相当容易。直接在工程上点右键，选择My Eclipse->Add Spring Capabilities。这样就将Spring的包引入了进来，并且自动生成了Spring的配置文件：applicationContext.xml。在applicationContext.xml里面便可以进行bean的配置。更多Spring的用法可以参照相关的资料。在此便不多说。

通过配置iBatis和Spring后便可分层对一个Web应用进行开发了。JAVA代码处理业务逻辑，充当控制层。ZK负责界面展示。iBatis负责持久层。

昵称：狂飞

QQ:18670340

MSN:[e-mail]

注意事项：本文均为作者个人编写如果纰漏

请给予指出，转载请标明出处