ZK框架學習總結
目 錄
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"?>
|
修改 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
注意事項：本文均爲作者個人編寫如果紕漏
請給予指出，轉載請標明出處
