ZK框架學習總結

ZK Studio界面2

</div>

2.2    ZK環境的配置

• 解壓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包。配置好后的用戶庫如下圖：

• 添加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。

• 添加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的文件。內容如下：

<?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 –>后面添加如下代碼：

<templatecontext=”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”/>

• 添加新的文件類型。打開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屬性內。

組件可以從zk palet直接拖拉進代碼區，然后可以在中查看和設置組件支持的所有屬性和事件。其特點就是高效地組建頁面。如果不添加任何JAVA代碼，那么創建一個頁面的效率不亞于直接用Axure創建界面原型。圖4是一個界面demo。無任何js和CSS代碼。當然，ZK框架并不排斥使用CSS代碼。利用style屬性可以設置CSS樣式，還可以通過<style src=” CSS文件”/>加載CSS文件。

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組件所支持的事件：

在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{@Overridepublic 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 width=”100%” height=”100%” apply=”zktest.borderlayout.BorderLayoutComposer”>或者<listbox 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負責持久層。

7、附錄

• ZK開發手冊：http://zh.zkoss.org/doc/devguide/index.html （這個寫得相當好）
• ZK JAVA API：http://www.zkoss.org/javadoc/latest/zk/
• ZK技術分享：http://gaojiewyh.javaeye.com/category/67379 (not only zk)