jasmine214--love

只有当你的内心总是充满快乐、美好的愿望和宁静时,你才能拥有强壮的体魄和明朗、快乐或者宁静的面容。
posts - 731, comments - 60, trackbacks - 0, articles - 0

ZK--学习研究1/2/3

Posted on 2010-07-11 16:01 幻海蓝梦 阅读(1027) 评论(0)  编辑  收藏 所属分类: Ajax Java-eclipse,svn网管--拓扑图
原文:http://jerrysun.blog.51cto.com/745955/280525
由于工作的变动,已经很久没有更新Blog了。来到新公司又马不停蹄的开始了自己的工作,现在终于可以忙里偷闲了,呵呵。
  虽然说新公司的业务和自己之前从事的是两个领域,不过好在技术还是Java,而且在新公司的第一个项目还和之前的一样,开发一个内容管理系统,哈哈,这个可是我比较擅长的。在经历两月的时间之后,终于满足了需求的内容,顺利上线。不过又出了新问题,就是界面比较难看,这时领导提议说“要不你用ZK改造吧,公司之前的系统也是ZK做的”。这个提议倒是不错,不过对于我来说又是一个挑战。
  google了一下,发现ZK在国内使用的不是很多,资料也不是很全。只能是摸着河过石头了。不会写,还不会抄吗,先下载ZK官网的Demo看看再说
  下了Demo,搭建环境,运行,发现ZK确实比较好用,非常类似于微软的.Net,它提供了很多组件,使用这些组件可以很快的进行开发。我认为ZK最好的地方在于code-behind,这一点和.Net是非常类似的。这样就不用再像写JSP的时候那样将一些具体的操作代码写到页面中,使页面代码非常难阅读;而它又比WebWork更加灵活,有些东西不需要再重新修改WebWork中的组件(由于敝人对于WebWork的使用不是很精通,请各位WebWork、Structs达人不要拍砖)。
  也许是我接触的东西少吧(作为一个程序员,实在是惭愧啊),总之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>");
        }
        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>
  效果图如下:
  可以看出其中有一些的判断,然后还要担心“<%”和“%>”是否匹配,“{”和“}”是否匹配等等情况。如果是ZK的话,这些不必要的担心就可以省去了。
  页面(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)
{
  // 得到列表组件,用于显示群发安排列表
  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();
    
    // 彩信产品的id,添加事件监听时要用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);
    
    // 将当前行在列表中显示
    listbox.appendChild(listitem);
    
    listitem = new Listitem();
    listcell = new Listcell();
  }
}
  效果图如下:
  可以看到,这样就达到了逻辑处理和页面显示的代码分离,使得页面显示的代码更加清晰,而逻辑处理类的作用也更加明显。
前面已经看见效果了,咱们就来开始实际应用它吧。首先要做的是搭建开发环境,访问ZK的官方网站http://www.zkoss.org/,在页面的顶部导航,或者右侧可以看到download,点击download进去,在页面的Downloads列表中选择第二项“ZK studio”,这时会进入另一个页面,此时我们只要在MyEclipse中的插件管理面板中将“Online Installation”下面的地址粘贴进去,点击OK就好了。接下来就是等待MyEclipse帮我们把ZK插件安装好。
  安装好以后,会弹出一个对话框,要输入用户名和密码,这个只要在ZK的网站上注册一下就好了。我尝试过不输入用户名、密码,结果ZK不能正常使用了
  开发环境有了,接下来就是来编写我们的第一个ZK工程了。在MyEclipse中选择file->new->project 然后选择ZK Project,然后next,输入工程名,finish就可以了。这时会询问是否切换到ZK的编辑面板,这个就因人而异吧,自己喜欢就好。
  在ZUL文件的代码中,你会看到“New Content Here!” 这句话,把它替换成你自己想写的内容,保存,然后部署到Tomcat下,访问这个ZUL文件,就能看到效果了。
  效果图如下:
  代码如下:
<?pagetitle="new page title"contentType="text/html;charset=UTF-8"?>
<zk>
<windowtitle="new page title"border="normal">
我的第一个ZK页面,hoho
</window>
</zk>
  
  嘿嘿,第一个ZK页面出来喽

只有注册用户登录后才能发表评论。


网站导航: