ZK Live Demo 範例 - 簡介

ZK 官網有提供相關詳細又完整的 Live Demo 範例,

而且既稱 Live Demo, 就表示可以隨時更改程式, 馬上觀看其變化結果,

Live Demo 介紹, 如下 :

1) 鏈結 ZK Live Demo 網址: http://www.zkoss.org/demo/, 隨便點選 Demo 圖示, 如: ZK Explorer 圖示 :


2) 上半部是 Demo 大分類, 左半部是 Demo 小分類, 右半邊是 Demo 內容 :


3) 切換到 View Source 頁籤, 可以看到該 Demo 的 ZUL 程式碼 :


4) 既稱 Live Demo, 就可以在 View Source 中更改程式碼, 然後按 "Try me" 鈕查看更改結果 :


更改後的結果, 如下 :


5) 切換到 Pure Java 頁籤, 可以看到該 Demo 的 Java 程式碼 :


6) 也可以看看其他 Demo 範例與其對應的 Source Code, 加強自己對其他功能的了解喔 :

昭佑.天翔

ZK Event 觸發與 Java 控管 ZK 物件

前提: 先建立一個 ZK 專案, 參考這篇文章.

1) 在 ZK 專案的 Java Resources: src 位置上按右鍵, 選擇 "New > Class" 來新增一個 Java 檔案 :


輸入 Package Name 與 Java Class Name, 勾選 Constructors from superclass, 其餘可不用變更 :


Java 產生的最初程式碼, 如下 :


2) 修改 Java 程式碼 (繼承 ZK 物件, onClick 事件), 如下 :


3) 修改 ZUL 程式碼 (use 哪個 Java Class, 增加 button 標籤), 如下 :
(forward 用來指定 ZK Event 指向哪個 Java Event)


4) ZUL 執行結果 :


按一下 Change Title, 則可看到 Window Title 已改變 :


5) 若要讓 Java 控管 ZK 標籤, 則 ZK 標籤必須設有唯一的 id 名稱 :


6) 若要讓 Java 控管 ZK 標籤, 還需要
6-1) Java class implements AfterCompose
6-2) 新增與 ZK 相同型態的物件, 且物件名稱與 id 相同, 如: Button b1
6-3) 在 afterCompose() 函數中, 寫入 Components.wireVariables(this,this); 程式碼, 由這段程式將物件與 ZK 標籤關連在一起


7) ZUL 執行結果 :


按一下 Change Title, 則可看到 Window Title 與 Button 文字, 都已改變 :

昭佑.天翔

Java 繼承 ZK 物件

前提: 先建立一個 ZK 專案, 參考這篇文章.

1) 在 ZK 專案的 Java Resources: src 位置上按右鍵, 選擇 "New > Class" 來新增一個 Java 檔案 :


輸入 Package Name 與 Java Class Name, 勾選 Constructors from superclass, 其餘可不用變更 :


Java 產生的最初程式碼, 如下 :


2) 繼承 ZK 物件, 如: Window :


3) 在 ZUL 檔案中, 標籤可以使用 use, 讓標籤使用不同物件, 如上步驟的 Java Class :


4) ZUL 執行結果, 可以看到 Console 部分, 有顯示在 Java Class 的自訂系統訊息 :

昭佑.天翔

在 Eclipse 建立 ZK 專案

前提: 建立 ZK 程式前, 必須先建構 ZK 開發環境, 參考這篇文章.

建立步驟, 如下 :

1) 按 New, 選擇 Project 來產生新專案 :


選擇 "Web > Dynamic Web Project" :


輸入 Project Name 與哪個 Web Server, 然後按 Finish 鈕即可 :


結果, 呈現如下 :


2) 在 Project 按右鍵, 選擇 "New > Other" :


選擇 "ZK > ZUL", 用來產生一個 ZK 網頁 :


選擇 ZUL 網頁的放置位置 (必須在 WebContent 目錄中), 與輸入檔名 :


結果, 呈現如下 :


3) 在 ZUL 檔案按右鍵, 選擇 "Run As > Run on Server", 來執行 ZUL 網頁 :


選擇要運行的 Web Server, 然後按 Finish 即可執行 :


ZUL 網頁執行結果, 呈現如下, 但這結果, 不是 ZUL 正確的執行結果 :


4) ZUL 網頁要正確執行, 還需在 WEB-INF / lib 目錄中, import ZK 相關 Library :


選擇來源目錄((<ZK_Home>/dist/lib)), 來源檔案, 以及確認目的目錄, 按 Finish 即進行 import :


載入結果, 如下 :


5) 將以下內容複製到 web.xml 檔案內 :
(參考 http://www.zkoss.org/doc/installzk.dsp) :


6) 再執行一次 ZUL 網頁, 這次就呈現正確的執行結果 :

昭佑.天翔

建構 ZK 開發環境

從無到有, 建構 ZK 的開發環境,

請參考下面步驟 :

1) 到 http://java.sun.com/products/archive/, 下載與安裝 JDK (ZK 使用到 Java 套件) :


2) 到 http://tomcat.apache.org/, 下載與解壓縮 Tomcat (當作 Web Server) :


3) 到 http://www.eclipse.org/downloads/, 下載與解壓縮 Eclipse (開發工具) :


4) 到 http://www.zkoss.org/download/zk.dsp, 下載與解壓縮 ZK 套件 (ZK 本身的 Java 套件) :


5) 第一次開啟 Eclipse, 設定 Workspace 目錄 (Eclipse 專案的放置路徑) :


6) Eclipse 中, 加入 Tomcat 執行環境 :
點選 Menu: Window > Preferences, 移到 Server > Runtime Environments, 按 "Add" 鈕 :


選擇 Tomcat 版本 :


這樣即設定完成 :


7) Eclipse 中, 建立 ZK User Library (方便專案快速載入 ZK 套件) :
點選 Menu: Window > Preferences, 移到 Java > Build Path > User Libraries, 按 "New" 鈕 :


輸入 User Library Name :


按 "Add JARs" 加入相關 ZK Jar 檔案 (檔案位於步驟 3 的 <ZK_Home> / dist / lib 與 <ZK_Home> / dist / lib /ext 兩個目錄) :


8) Eclipse 建構 ZK Studio 開發環境 :
點選 Menu: Help > Install New Software :


Work with 網址輸入 "http://studioupdate.zkoss.org/studio/update", 按 "Add" 鈕, 輸入 ZK, 然後勾選要安裝的項目, 再按 "Next" 鈕進行安裝 :


安裝完成, 按 "Restart Now" 重新啟動 Eclipse 即可 :


這樣子, ZK 開發環境就架設完成.

昭佑.天翔