→ TonyQ:題外話，Jing這軟體非常好用。一樣大推。:D 11/15 18:25
推 Apohades:有神快拜! 11/15 20:42
前言，zk是個有趣又簡單的開源 java web application framework ，
（走LGPL/商業授權）
它提供豐富的元件供使用者使用，可以用比以往簡單很多的方式撰寫網頁應用程式。:)
----主題開始----
請洽javaworld （被打）
http://www.javaworld.com.tw/jute/post/view?bid=49&id=288983&sty=1&tpg=1&age=0
沒有啦 我開玩笑的...XD
只是因為寫了幾個範例所以丟過來分享一下。（閒聊zk？還在孵...！）
今天我們要做的效果是有點像是填地址時，
都會有下拉式選單選縣市、鄉鎮市一樣，你必須針對所選擇的縣市去連動鄉鎮市，
這就是所謂的連動式選單(cascade select) 。
在過去這種方案要嘛就是弄一個很大的js array 整個塞進去，
（我記得全台鄉鎮市好像弄起來還不算多，幾百個，累了點而已。）
要嘛就是用所謂的 ajax 技巧即時從server side 拿東西回來填。
這裡我們要介紹的會比較接近後者這種作法！
在這個case我們單純的用選擇不同部門底下的小員工來進行說明。
（ex.部門A 有使用者1,2 部門B 有使用者 3,4）
1.首先setup一個zk 需要的jar檔跟寫好需要的 servlet-mapping 。
（......我會針對這個再寫一篇文章的（懺悔 orz））
2.我們要先準備好要顯示的資料層，不然就沒東西顯示了。（XD）
所以這裡會有兩個 POJO 一個 Dao ，就只做資料庫的查詢的物件的對應。
因為討論的需要所以我是用 JDBC 寫 ，但比起JDBC個人更推薦hibernate或ibatis，
可簡化一些繁瑣的物件映射工作。
POJO簡介
Department.java ，公司部門。 有 id 跟名稱
Employee.java ，員工資料。 有 id 跟姓名
其中 Department 是一對多 Emploee 的關係。（一個部門有多個員工）
再加上一個負責從資料庫查出 Department 跟 Employee 的 Dao。
貼程式碼在bbs上是會遭天譴的（謎之音：是你懶得重新排版吧），
所以我們還是放在gist上看吧。（遮耳）
https://gist.github.com/700236
3.接著現在我們有一個 DepartmentDao 含有一個
public List<Department> getDepartments() 方法
會回傳所有的Departments資料。
我們接著只要寫簡單的 zul code 就可以達到我們要得效果了。
(不知道什麼是zul code 的請在版上 /閒聊zk （挺），
zul 相對於 zk ，勉強可以解釋為 jsp 相對於 tomcat 的角色。）
我們這裡用了一個比較高階的技巧 (annotation databinding )，
這東西還蠻強大的，有機會再好好說明，先看看它現在怎麼work。
--------------------------------
<?page title="testCascadeCombobox.zul" contentType="text/html;charset=UTF-8"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?>
<zk>
<zscript>
<!-- 相對於 DWR 的 DWR.XML，zk 這裡還是走java的玩法。
new 出一個 DAO 來進行查詢跟取得資料。 -->
import test.combobox.*;
DepartmentDao depDao = new DepartmentDao();
List deps = depDao.getDepartments();
</zscript>
<!-- 這裡是有趣的地方。我們用@{selected} 來代表被選中的物件，
當這個物件被修改之後，所有有引用到這個物件實體（instance）的地方，
都會跟著更新。
所謂的model代表的是一組的資料，在這裡就是 List<Dapartment>。
-->
<combobox id="combo1" model="@{deps}" selectedItem="@{selected}">
<!-- 這裡的 self 有迴圈的作用，它會iterate deps 這個list中全部的元素-->
<!-- dep代表每個個別的元素，它會用每個元素作成combobox的選項-->
<comboitem self="@{each=dep}" label="@{dep.name}" value="@{dep.id}"/>
</combobox>
<!-- 這裡是被連動的combobox ，在第一個combobox被選擇產生 selected 之後，
他底下的員工(selected.getEmployees())，將會作為第二個combobox 顯示資料。
所以會達成我們想要的連動效果。
-->
<combobox model="@{selected.employees}" selectedItem="@{selectedEmp}" >
<comboitem self="@{each=emp}" label="@{emp.name}" value="@{emp.id}"/>
</combobox>
<!-- 這裡是個 bonus ，示範在zk中 data binding 是很容易使用的。 -->
Current Dep:<label value="@{selected.name}" />
</zk>
這裡有執行結果的影片。：）
http://0rz.tw/mTFHL
--
網頁上拉近距離的幫手 實現 GMail豐富應用的功臣
數也數不清的友善使用者體驗 這就是ｊａｖａｓｃｒｉｐｔ
歡迎同好到 AJAX 板一同討論。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.133.44.37
※ 編輯: TonyQ 來自: 220.133.44.37 (11/15 18:23)