最近因為在學習 zk ，所謂學而不思則惘，一直想來寫點介紹文， 順便找點同好聊聊，開個討論串來討論討論這個主軸帶點討論風氣。 對於 zk 我目前因為接觸不深，還是比較難用比較完整的角度來陳述， 因為 zk 本質上是一個在各個細節都非常注重的東西， 每個小細節幾乎都可以開一個主題， 有些東西我也是才疏學淺，還有待大家一起討論研究。 畢竟這是一個試圖在 web 世界中，做出一個 ajax solution 的framework。 ----------------------------------------------------- 所以我打算先以完全沒接觸過的使用者的觀點，寫一寫我接觸時眼中的zk。 這篇的主軸一半的背景知識會是web(html+javascript+css)， 另一半則是 J2EE (Java/servlet/container(tomcat)) 等。 zk 最早給我的印象是他是個在國外比較紅的 framework ， 另外就是它是個 ajax framework 。 ----------------------------------------------------- 對，我們的話題就從 ajax framework 開始。 ----------------------------------------------------- 我的 ajax 領域經驗雖然還不算深， 但也曾經接觸過一些 ajax 應用專案，參與過其中的流程開發， 曾有過一些經驗，我很難想像，ajax 怎麼可能能夠做得成模組化？ 畢竟幾乎每個 request 都是需要自己去設計規格， 去掌握每個 param 的傳遞，回來自己動手做每件後續的處理， 回傳到頁面時自己掌握前端的頁面呈現。 就算我們用 struts 來管理破碎頁面的呈現， 或者是像ruby 語言的 RoR 這種提供豐富環境支援的環境， 要做到 ajax 的模組化跟架構化，一直都是一個很困難的事情。 而我們搞 F2E (Front-to-End 網頁前端技術）的人， 整天和 javascript/css 打交道， 最麻煩的就是隨時要在 server /client 兩個不同領域繞來繞去。 我一向要煩惱 db 要怎麼撈資料，他會噴什麼資料給我， 另一邊要煩惱行為畫面應該要怎麼做，才能符合案主需求。 而且很多時候其實我會用到很多重複的零組件， 其中最經典的莫過於就是表單驗證了，我很早就為此寫過一隻小lib。 #15v04i62(ajax) 或者是一些諸如日期選單、tabbox 等等。 看看每天在 web_design/ajax 討論 plug-in 的類型跟用途的人， 跟一堆討論要怎麼透過javascript 操作資料的人， 就不難發現其實很多東西是一再被提到、被用到， 一再的在我們的開發工作中出現的東西。 ----------------------------------------------------- zk 本質上就是一個 base on J2EE 的架構， 如果你 deploy 過 struts 或者一些 J2EE web framework， 它就跟他們一樣，有一些 jar檔。（你可以在zk官方網站上下載） http://www.zkoss.org 你可以 build 一個 zk web application ， 透過建立一個 webapp ，放到 tomcat底下的webapps資料夾， 設定好 context ，把 zk 的 jar 丟到 WEB-INF/lib 。 把 server 開起來， ok ，你現在就有一個 zk 的環境了。 就像是正常的 J2EE project 一樣，更簡單的方式是拿一個包好的 war 檔， 丟到 web apps 資料夾，讓 tomcat 自己佈署。 我要表達的是，只要你寫過其他 J2EE project ， 那 zk 在架設跟佈署上是差不多的。 如果你沒寫過 J2EE 的 project ，那應該也沒關係， 網路上有很多參考資料，而且官方也有文件，雖然說都是英文的。XD ----------------------------------------------------- 在我們「概念上」的佈署完一個 project 之後， zk 在實務開發時，主要會透過撰寫 "zul" 檔來進行開發。 這個 zul 檔類比到一般的 J2EE application ， 就可說等於是 JSP 的角色，他會負責外觀的呈現跟一些事件的處理。 他是一個 xml 檔，就跟一般的 html 一樣是採用一堆 <xxx> 的 tag 格式， 基本上進入 zk 的第一個門檻大多會出現在 zul 的學習上， 因為你能用的 tag 主要是由 zk 定義給你的。 （當然zk 非常貼心的，基本的 div / label 等等，該有的都有。） 一個簡單的範例可以幫助我們快速進入狀況 <zk> <label value="hello world" /> </zk> ----------------------------------------------------- 這樣會轉譯成這樣的 html ： <span id="z_rrk_01" class="z-label">hello world</span> ----------------------------------------------------- 夠簡單的 hello world 吧。XD 基本上因為一開始學 zul ，我在很多的 component 中一直迷惑， 我到底要用哪些，所以在這裡我打算先點出幾個常用的經典 component 。 資料呈現方面 ----------------------------------------------------- <label value="文字" /> 簡單的 span 就是個文字呈現 ----------------------------------------------------- <div> div 這老傢伙不用解釋了吧 - -;; 就跟一般的網頁div是一樣的。 <label value="文字" /> <label value="文字" /> </div> ----------------------------------------------------- <grid> 強化版的表格 詳細範例可看下列連結 http://www.zkoss.org/zksandbox/userguide/#g2 中間有個「view source」，打開來可以看到原始碼， 也可以修改原始碼，再按下下面的 try-it 即時體驗。 ----------------------------------------------------- 表單方面也有一些常用元件 http://www.zkoss.org/zksandbox/userguide/#f2 你能想到的 textbox / password / datebox (內建有日期選單的input) , 還有限定輸入資料型態的 intbox longbox 等。 當然也有下拉選單 combobox 、 radio、button等 其實遠不只這些啦，zk component 沒仔細數過，應該有幾十個上百個吧， 這只是如果說要我介紹你前十個，我會先講這些。 事實上還有一些很 powerful 的排版功能， 像是 tabbox ， hbox/vbox 系列等。 ----------------------------------------------------- 本來是想一路寫到為什麼可以簡化 ajax problem ， 不過沒想到寫到這就快十二點了，所以先暫時收尾在這邊， 剩下的暫時先說下集待續。 在這裡我們目前已經介紹到 zk 透過自定義的 component 跟格式， 來進行 ui 的呈現，眼尖的夥伴們應該也已經發現， 前面範例中有一些像是 datebox 這類的元件是結合 javascript 的操作的。 也就是說，所謂的 component 其實就是預先定義好的 html+css+ js邏輯， 所以在大多數假設中的狀況下，你大多可以找到一個zk提供的功能， 來作到你想要的操作，而不一定需要自己另外寫程式來處理。 而 zk 的元件都走 css 風格，除非必須配合 javascript 設定的屬性， 否則一律都是走 css 風格，你也可以採用定義自己的css的方式蓋掉他。 或者是寫一個自己的 component ， 甚至是 zk 也有提供讓你在 zul 中寫原本的html tag 的貼心設計。 寫 zul 要像是寫原本的 html 也是完全做的到的。 ----------------------------------------------------- 在常用元件的部份，zk提供一些有趣的組件，但由於篇幅跟時間的關係， 對於 component 的介紹或許拉到之後比較後面討論到深入的實做時再講。 下一篇要提到為什麼能夠因此簡化 ajax 、頁面呈現的操作， 跟一些常見的網頁事件的處理該如何進行，我覺得這些都是非常有趣的部份。 -- 這裡有 zk 自己的官方 demo http://www.zkoss.org/demo/ 我個人會推薦底下這兩個，zk calender 跟zk grid 的有趣應用。:) http://zcal.zkoss.org/ http://www.zkoss.org/zkdemo/grid/master_detail -- I am a person, and I am always thinking . Thinking in love , Thinking in life , Thinking in why , Thinking in worth. I can't believe any of what , I am just thinking then thinking , but worst of all , most of mine is thinking not actioning... --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 111.82.21.118 ※ 編輯: TonyQ 來自: 111.82.21.118 (10/05 00:12) ※ 編輯: TonyQ 來自: 220.133.44.37 (10/05 10:07)