ZK學習研究（二）

　　書接上回，前面說了那麼多，到底ZK有啥好處呢？這個就隻可意會不可言傳了，呵呵。

　　舉個例子，假設有個清單需要顯示，在頁面中可以使用table或者是ul li來實作，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 

      //不為空，顯示清單内容 

      out.println("<tr>\n<th style=\"width:40%;\">名稱</th><th style=\"width:30%;\">活動日期</th><th style=\"width:10%;\">狀态</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>"); 

        else if(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>

　　效果圖如下：

　　可以看出其中有一些的判斷，然後還要擔心“<%”和“%>”是否比對，“{”和“}”是否比對等等情況。如果是ZK的話，這些不必要的擔心就可以省去了。

　　頁面（list.zul）代碼：

<?xml version="1.0" encoding="UTF-8"?> 

<?page title="清單" contentType="text/html;charset=UTF-8"?> 

<zk> 

<window style="heigth:100%; border:0; text-align:center;" id="winList"> 

  <style src="../styles/global.css" ></style> 

  <div style="padding-top:20px; vertical-align:bottom;"> 

    <label value="清單" /><separator /> 

  </div> 

  <div style="padding:0px 0px 0px 0px;text-align:center;width:80%;"> 

    <label id="lblTips" visible="false" style="color:#FF0000;" /> 

    <listbox id="blacklistList" style="width:100%;"> 

      <listhead style="text-align:center;"> 

        <listheader label="使用者号碼" style="width:15%;"/> 

        <listheader label="使用者類别" style="width:15%;" /> 

        <listheader label="說明" style="width:35%;" /> 

        <listheader label="添加日期" style="width:15%;" /> 

        <listheader label="操作" style="width:20%;" /> 

      </listhead> 

    </listbox> 

  <zscript language="Java"> 

    <![CDATA[ 

             import com.zk.list; 

             list ui = new list(); 

             ui.setWinMain(winlList); 

             ui.showAllBlacklist(); 

    ]]> 

  </zscript> 

</window> 

</zk>

　　邏輯處理代碼（list.java）：

public void 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(); 

} 

private void showList(List<Blacklist> blacklistList) 

  // 得到清單元件，用于顯示群發安排清單 

  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("黃名單"); 

      case 3: 

        listcell.setLabel("綠名單"); 

      case 4: 

        listcell.setLabel("非彩信使用者"); 

    // 說明 

    if(blacklistList.get(i).getDescription().equals("")) 

      listcell.setLabel("暫無"); 

      listcell.setLabel(blacklistList.get(i).getDescription()); 

    // 添加日期 

    listcell.setLabel(blacklistList.get(i).getCreateDate().toString().substring(0,10)); 

    // 顯示操作按鈕 

    Hbox hbox = new Hbox(); 

    // 彩信産品的id，添加事件監聽時要用final修飾的變量 

    final int id = Integer.parseInt(blacklistList.get(i).getId().toString().trim()); 

    // 添加一個檢視按鈕 

    Button button = new Button(); 

    button.setLabel("檢視"); 

    // 為檢視按鈕添加一個 

    button.addEventListener(Events.ON_CLICK, new EventListener() 

      public void onEvent(Event arg0) throws Exception { 

        showBlacklistDetail(String.valueOf(id)); 

    }); 

    button.setVisible(false); 

    hbox.appendChild(button); 

    // 添加一個删除按鈕 

    button = new Button(); 

    button.setLabel("删除"); 

    // 為删除按鈕添加一個 

        delBlacklist(String.valueOf(id)); 

    listcell.appendChild(hbox); 

    // 将目前行在清單中顯示 

    listbox.appendChild(listitem); 

    listitem = new Listitem(); 

}

　　可以看到，這樣就達到了邏輯處理和頁面顯示的代碼分離，使得頁面顯示的代碼更加清晰，而邏輯處理類的作用也更加明顯。

本文轉自 sw840227 51CTO部落格，原文連結：http://blog.51cto.com/jerrysun/315141，如需轉載請自行聯系原作者