[J2EE] 閒聊 zk 導論 1

看板java作者TonyQ (沉默是金。)時間15年前 (2010/10/05 00:10)推噓7(7推 0噓 2→)

留言9則, 9人參與討論串1/1

最近因為在學習 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

10/05 00:13, , 1^F

10/05 00:13, 1^F

推

wannawanna

10/05 00:31, , 2^F

10/05 00:31, 2^F

※ 編輯: TonyQ 來自: 220.133.44.37 (10/05 10:07)

→

qrtt1

10/05 12:47, , 3^F