跳到主要內容

ZK - open source Ajax Framework介紹

ZK介紹
數年前因IThome的報導就有注意到ZK,以framework作為產品的台灣公司,真的是非常少見,而ZK的表現也是令人激賞。
除了ZK 這個主軸的framework以外,其相關的產品也很全面,介紹部份如下:
  • ZK studio
    一個eclipse plugin,用來加速ZK開發的工具。內含一些簡化開發過程的工具如:
    ZUL Visual Editor, 可以預覽zul所設計的UI在瀏覽器上顯示的樣子,方便設計UI。
    Properties, 點選某個zul中的UI元件,即會顯示該元件的所有可設定的properties。
    ZUL Palette, 元件調色盤,可以將UI元件用拖拉的方式放至zul文件中。
  • ZK JSP tag
    將zk的元件整合至jsp中,若不想完全改寫既有jsp頁面,可以採用此一選擇,可以立即獲得Ajax的特性。
  • ZK Spreadsheet
    類似Google docs中試算表的元件
  • ZK calendar
    類似Google calendar的元件

ZK線上展示,直接以畫面示範所有元件的用法與外觀,你可以手動修改原始碼並立即觀看修改後的結果,很棒的一個作法。

優點
  • 快速擁有Ajax效果
    對JavaEE工程師來說,在不換平台的情況下(Flex, Silverlight)要做出RIA,擁有的選擇不多,直接透過Javascript使用AJAX或採用Ajax相關的library(Jquery,DWR)需要一段時間學習,RichFaces也可能是個選擇,但JSF似乎不是很多人採用,對於JavaEE工程師來說,可以透過學習成本不高的ZK來快速打造RIA。
  • 支援MVC架構
    zul配合ZK composer(Controller),可以使zul頁面純粹擔任View的角色,完全不需寫程式碼在頁面上,作到清楚的MVC切分。
    composer更可對頁面UI進行動態新增、刪減或修改屬性之變化,皆透過zK ajax engine來完成。
  • 可純粹以Java開發
    雖然ZK 5已讓懂javascript的人作前後端整合開發,甚至支援其他的script語言,但是幾乎所有既有元件功能都仍然可以透過Java控制。
  • Component-based, Event-Driven
    UI畫面以UI元件為基礎配置,也可以某個程度的客製化元件。zul頁面上的各種UI動作都可觸發成event並傳到後端的composer(Controller)來處理,架構清楚簡單。
  • 可整合主流application framework
    因ZK可作嚴格的MVC劃分,因此在整合Spring, Hibernate等主流的中、後層framework上沒有什麼問題,未來即使將ZK抽換掉也只需要重寫前端畫面與controller部份,後端以其他framework做好的部份仍可以重複使用。ZK甚至做了一些用來整合Spring的部份,不過這在CE版中沒有提供。
  • 學習資源豐富
    Java World的AJAX討論區。
    官網的文件完整, 並由ZK採用者根據不同主題撰寫的Small Talk, 以及互動頻繁的討論區,以上都是採用framework時要評估的指標之一。

授權
要注意授權,最自由的就是ZK 5 CE以LGPL釋出,其他版本大多以GPL釋出。
CE版幾乎可以符合大部分的需要,當然在元件部份會比PE, EE版少。
ZK5不同版本間的元件差異比較表


留言

這個網誌中的熱門文章

iframe DOM 被移動造成重新載入

如果用 javascript 去搬動 iframe DOM 的位置, 瀏覽器會將其內容重新載入,這是現有 HTML 規格 > When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time". 範例: http://jsfiddle.net/pZ23B/ 測試結果: * Safari 3.1 / Win: reload * Opera 9.5 / Win: reload * IE10: reload * IE7 / IE8: not reload (部份摘自 https://bugzilla.mozilla.org/show_bug.cgi?id=254144 ) 參考: * https://bugzilla.mozilla.org/show_bug.cgi?id=254144

JavaScript 關掉瀏覽器頁面

如果你直接呼叫 window.close() 來關掉目前的頁面的話,你應該會在 console 看到以下訊息: Scripts may close only the windows that were opened by it. ( 我在 Chrome, Firefox, IE 11 都試過) 主因就是你並沒有用 JavaScript 開啟這個頁面,所以也不能用 JavaScript 關掉它。這是 HTML window.close() 的規格 規定,各家瀏覽器應該都遵循。 隨著瀏覽器安全性增加,以下方法已經不適用了,可參考 這個討論 。 有個變通的辦法就是: window.open(location, '_self').close();

Web Dynpro 前後端資料流動機制 (Dataflow)

在Web Dynpro中提供3種資料流機制[1],只要適當地設定,可以不用寫程式就將畫面、中間層控制器(controller)到後端模型物件的資料自動化地、牢靠地綁在一起,使得不管前後端某一方有資料變動,變動部份都會自動地流動來保持一致性,使得前後端都能存取到同一份資料。 context 關鍵元件是 context,每個controller都有一份屬於自己的context,它扮演MVC架構中的M (model),web dynpro的實做方式比較像是該controller的「資料空間」,它由node(資料節點)與attribute(資料屬性)組成,controller可以透過wdContext這個預先產生好的 shortcut variable(捷徑變數)去取得context的資料內容。 context中必須要建立node才可以儲存資料,一個node代表一個collection(集合物件)裡面仍可以含有node, attribute,node裡面的一份資料實體就是一個element,一個node可以有一個或多個element(這部份可以透過cardinality property設定),其結構就是該node所包含的結構。 data binding 此種機制可以將UI元件的資料跟context中的某個node或attribute綁定在一起,context中的改變會自動 更新到UI元件上,UI元件的改變也會自動寫入到綁定的context node(or attribute)中。通常UI元件所綁定的node(attribute)是由component controller對應過來的。 context mapping 每一個controller都有屬於自己的context(資料空間)如果要達到彼此共享資料,則要透過context mapping機制,一旦mapping設定好,則會在另一個context產生一個同樣的結構的node,兩邊的controller會存取到的是同一分資料,任何一邊的資料更動都會散佈到設定好mapping的node。 不過在web dynpro裡,只允許將custom controller or component controller的node對應到view controller去,不允許從view controller對應回來,主因是嚴格遵守MVC...