原文：
http://jerrysun.blog.51cto.com/745955/280525由于工作的變動，已經(jīng)很久沒有更新Blog了。來到新公司又馬不停蹄的開始了自己的工作，現(xiàn)在終于可以忙里偷閑了，呵呵。
雖然說新公司的業(yè)務(wù)和自己之前從事的是兩個領(lǐng)域，不過好在技術(shù)還是Java，而且在新公司的第一個項目還和之前的一樣，開發(fā)一個內(nèi)容管理系統(tǒng)，哈哈，這個可是我比較擅長的。在經(jīng)歷兩月的時間之后，終于滿足了需求的內(nèi)容，順利上線。不過又出了新問題，就是界面比較難看，這時領(lǐng)導(dǎo)提議說“要不你用ZK改造吧，公司之前的系統(tǒng)也是ZK做的”。這個提議倒是不錯，不過對于我來說又是一個挑戰(zhàn)。
google了一下，發(fā)現(xiàn)ZK在國內(nèi)使用的不是很多，資料也不是很全。只能是摸著河過石頭了。不會寫，還不會抄嗎，先下載ZK官網(wǎng)的Demo看看再說
下了Demo，搭建環(huán)境，運(yùn)行，發(fā)現(xiàn)ZK確實(shí)比較好用，非常類似于微軟的.Net，它提供了很多組件，使用這些組件可以很快的進(jìn)行開發(fā)。我認(rèn)為ZK最好的地方在于code-behind，這一點(diǎn)和.Net是非常類似的。這樣就不用再像寫JSP的時候那樣將一些具體的操作代碼寫到頁面中，使頁面代碼非常難閱讀；而它又比WebWork更加靈活，有些東西不需要再重新修改WebWork中的組件（由于敝人對于WebWork的使用不是很精通，請各位WebWork、Structs達(dá)人不要拍磚
）。
也許是我接觸的東西少吧（作為一個程序員，實(shí)在是慚愧?。?，總之ZK讓我覺得很容易上手，后面的應(yīng)用也說明了這一點(diǎn)。
書接上回，前面說了那么多，到底ZK有啥好處呢？這個就只可意會不可言傳了，呵呵。
舉個例子，假設(shè)有個列表需要顯示，在頁面中可以使用table或者是ul li來實(shí)現(xiàn)，table的代碼如下：
<table cellspacing=
"0" cellpadding=
"0" width=
"90%" border=
"0"class=
"table_cont">
??<tbody>
<%
????
//判斷列表是否為空 ????
if(activeList==
null || activeList.isEmpty() || activeList.size()<1)
????{
??????
//為空，顯示提示信息 ??????out.print(
"<tr><td colspan=\"4\" style=\"width:400px;\">目前 "+strProvinceName+
" 還沒有活動</td></tr>");
????}
????
else????{
??????
//不為空，顯示列表內(nèi)容 ??????out.println(
"<tr>\n<th style=\"width:40%;\">名稱</th><th style=\"width:30%;\">活動日期</th><th style=\"width:10%;\">狀態(tài)</th><th style=\"width:20%;\">操作</th>\n</tr>");
??????Iterator<Active> iter = activeList.iterator();
??????Active active =
null;
??????
while(iter.hasNext())
??????{
????????active = (Active)iter.next();
????????out.println(
"<tr>");
????????out.print(
"<td style=\"width:40%;\">"+active.getTitle()+
"</td>");
????????
if(active.getCreateDt()!=
null)
????????{
??????????out.print(
"<td style=\"width:30%;\">"+active.getCreateDt().toString().substring(0,10)+
"</td>");
????????}
????????
else????????{
??????????out.print(
"<td style=\"width:10%;\">?</td>");
????????}
????????
if(active.getStatus()==1)
????????{
??????????out.print(
"<td>上線</td>");
????????}
????????
elseif(active.getStatus()==2)
????????{
??????????out.print(
"<td>下線</td>");
????????}
????????out.print(
"<td style=\"width:20%;\"><a href=\"activeUpdate.jsp?province="+province+
"&activeId="+active.getId()+
"\">修改</a>??");
????????out.print(
"<a href=\"activeDel.jsp?province="+province+
"&activeId="+active.getId()+
"\">刪除</a></td>");
????????out.println(
"</tr>");
??????}
????}
%>
??</tbody>
</table>
效果圖如下：
可以看出其中有一些的判斷，然后還要擔(dān)心“<%”和“%>”是否匹配，“{”和“}”是否匹配等等情況。如果是ZK的話，這些不必要的擔(dān)心就可以省去了。
頁面（list.zul）代碼：
<?xmlversion="1.0"encoding="UTF-8"?>
<?pagetitle="列表"contentType="text/html;charset=UTF-8"?>
<zk>
<windowstyle="heigth:100%; border:0; text-align:center;"id="winList">
??<stylesrc="../styles/global.css"></style>
??<divstyle="padding-top:20px; vertical-align:bottom;">
????<labelvalue="列表"/><separator/>
??</div>
??<divstyle="padding:0px 0px 0px 0px;text-align:center;width:80%;">
????<labelid="lblTips"visible="false"style="color:#FF0000;"/>
????<listboxid="blacklistList"style="width:100%;">
??????<listheadstyle="text-align:center;">
????????<listheaderlabel="用戶號碼"style="width:15%;"/>
????????<listheaderlabel="用戶類別"style="width:15%;"/>
????????<listheaderlabel="說明"style="width:35%;"/>
????????<listheaderlabel="添加日期"style="width:15%;"/>
????????<listheaderlabel="操作"style="width:20%;"/>
??????</listhead>
????</listbox>
??</div>
??<zscriptlanguage="Java">
????<![CDATA[
???????????? import com.zk.list;
???????????? list ui = new list();
???????????? ui.setWinMain(winlList);
???????????? ui.showAllBlacklist();
????]]>
??</zscript>
</window>
</zk>
邏輯處理代碼（list.java）：
publicvoid showAllBlacklist()
{
??try
??{
????// 得到列表
????BlacklistIF blacklistIf = ServiceLocator.getBlacklistIF();
????List<Blacklist> blacklistList = blacklistIf.findAllBlacklist(-1);
????
????// 判斷列表是否為空
????if(blacklistList.size()>0 && !blacklistList.isEmpty())
????{
??????this.showList(blacklistList);
????}
??}
??catch(Exception ex)
??{
????ex.printStackTrace();
??}
}
privatevoid showList(List<Blacklist> blacklistList)
{
??// 得到列表組件，用于顯示群發(fā)安排列表
??Listbox listbox = (Listbox)winMain.getFellow("blacklistList");
????
??// 列表的行組件
??Listitem listitem = new Listitem();
????
??// 列表的列組件
??Listcell listcell = new Listcell();
????
??for(int i=0;i<blacklistList.size();i++)
??{
????// 用戶號碼
????listcell.setLabel(blacklistList.get(i).getMobile());
????listitem.appendChild(listcell);
????
????// 用戶類別
????listcell = new Listcell();
????switch(blacklistList.get(i).getType())
????{
??????case 1:
????????listcell.setLabel("黑名單");
????????break;
??????case 2:
????????listcell.setLabel("黃名單");
????????break;
??????case 3:
????????listcell.setLabel("綠名單");
????????break;
??????case 4:
????????listcell.setLabel("非彩信用戶");
????????break;
????}
????listitem.appendChild(listcell);
????
????// 說明
????listcell = new Listcell();
????if(blacklistList.get(i).getDescription().equals(""))
????{
??????listcell.setLabel("暫無");
????}
????else
????{
??????listcell.setLabel(blacklistList.get(i).getDescription());
????}
????listitem.appendChild(listcell);
????
????// 添加日期
????listcell = new Listcell();
????listcell.setLabel(blacklistList.get(i).getCreateDate().toString().substring(0,10));
????listitem.appendChild(listcell);
????
????// 顯示操作按鈕
????Hbox hbox = new Hbox();
????
????// 彩信產(chǎn)品的id，添加事件監(jiān)聽時要用final修飾的變量
????finalint id = Integer.parseInt(blacklistList.get(i).getId().toString().trim());
????// 添加一個查看按鈕
????Button button = new Button();
????button.setLabel("查看");
????// 為查看按鈕添加一個
????button.addEventListener(Events.ON_CLICK, new EventListener()
????{
??????publicvoid onEvent(Event arg0) throws Exception {
????????showBlacklistDetail(String.valueOf(id));
??????}
????});
????button.setVisible(false);
????hbox.appendChild(button);
????
????// 添加一個刪除按鈕
????button = new Button();
????button.setLabel("刪除");
????// 為刪除按鈕添加一個
????button.addEventListener(Events.ON_CLICK, new EventListener()
????{
??????publicvoid onEvent(Event arg0) throws Exception {
????????delBlacklist(String.valueOf(id));
??????}
????});
????hbox.appendChild(button);
????
????listcell = new Listcell();
????listcell.appendChild(hbox);
????listitem.appendChild(listcell);
????
????// 將當(dāng)前行在列表中顯示
????listbox.appendChild(listitem);
????
????listitem = new Listitem();
????listcell = new Listcell();
??}
}
效果圖如下：
可以看到，這樣就達(dá)到了邏輯處理和頁面顯示的代碼分離，使得頁面顯示的代碼更加清晰，而邏輯處理類的作用也更加明顯。
前面已經(jīng)看見效果了，咱們就來開始實(shí)際應(yīng)用它吧。首先要做的是搭建開發(fā)環(huán)境，訪問ZK的官方網(wǎng)站
http://www.zkoss.org/，在頁面的頂部導(dǎo)航，或者右側(cè)可以看到download，點(diǎn)擊download進(jìn)去，在頁面的Downloads列表中選擇第二項“ZK studio”，這時會進(jìn)入另一個頁面，此時我們只要在MyEclipse中的插件管理面板中將“Online Installation”下面的地址粘貼進(jìn)去，點(diǎn)擊OK就好了。接下來就是等待MyEclipse幫我們把ZK插件安裝好。
安裝好以后，會彈出一個對話框，要輸入用戶名和密碼，這個只要在ZK的網(wǎng)站上注冊一下就好了。我嘗試過不輸入用戶名、密碼，結(jié)果ZK不能正常使用了
開發(fā)環(huán)境有了，接下來就是來編寫我們的第一個ZK工程了。在MyEclipse中選擇file->new->project 然后選擇ZK Project，然后next，輸入工程名，finish就可以了。這時會詢問是否切換到ZK的編輯面板，這個就因人而異吧，自己喜歡就好。
在ZUL文件的代碼中，你會看到“New Content Here!” 這句話，把它替換成你自己想寫的內(nèi)容，保存，然后部署到Tomcat下，訪問這個ZUL文件，就能看到效果了。
效果圖如下：
代碼如下：
<?pagetitle="new page title"contentType="text/html;charset=UTF-8"?>
<zk>
<windowtitle="new page title"border="normal">
我的第一個ZK頁面，hoho
</window>
</zk>
嘿嘿，第一個ZK頁面出來嘍