BlogJava-jasmine214--love-随笔分类-网管--拓扑图

iTopoview Java网络拓扑图组件 ---官网

幻海蓝梦 — Wed, 14 Jul 2010 23:06:00 GMT

原文：http://www.zhtelecom.com/itopoview.htm
iTopoview Java网络拓扑图组件

系统介绍
iTopoview是专门面向网络拓扑图领域的界面组件，采用Java技术开发，为软件开发人员准备。使用者无需了解任何图形技术，无需借助其他脚本，通过简单的Java数据定义和操纵，即可创建出专业高效的网络拓扑图；并且提供了菜单、鼠标、用户业务数据、用户业务处理、告警等操作，让网络拓扑图的工作变得愉悦高效。iTopoview附带了一个完整网络拓扑图界面源代码，供用户学习参考，可用于Java GUI、Web Applet或Ajax + iTopoview等环境中。

在线体验

Java Web Start方式演示(需Java插件) 浏览器在线方式演示

iTopoview界面样例
采用iTopoview API开发的界面

幻海蓝梦 2010-07-15 07:06 发表评论

用wz_jsgraphics.js（javascript图形库）进行画矢量图,兼容多浏览器

幻海蓝梦 — Wed, 14 Jul 2010 03:22:00 GMT

原文： http://squll.blogbus.com/logs/3932957.html
序：在 www.sitepoint.com 上看了 Simon 的一篇 BLOG ，引导我去了一个很棒的 Web 开发站点 http://www.walterzorn.com/ ，并在那里获得了一个仅用 DHTML 和 Javscript 技术开发的一个高性能的矢量图形库 wz_jsgraphics.js （感谢 Walter Zorn 开发了这个图形库），使用它就可以在你的网页上画出漂亮的矢量图形了。进入这个图形库的介绍页面 http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm ，映入眼帘的是折线、多边形、圆等常见的一些几何图形，起初我以为不过是一些图片罢了，当我看到这行小字 These are not image files. Shapes & text have been dynamically drawn with wz_jsgraphics.js 后，并细细阅读了关于它的说明后，才意识到除了VML 和 SVG可以在网页上绘制显示矢量图形，仅用DHTML 和 Javascript 同样可以做到这一切！是不是觉得很吃惊呢？(双击一下这个文档，看看放大后的矢量图形吧)，ok!废话少说，下面我将详细介绍一下这个图形库。

★ 总览 (overview)

该图形库使用了 DHTML 和 Javascript 技术，它可以画线，圆，椭圆，折线，多边形，矩形。对于一个不太了解 Javascript 的人来说使用这个图形库也是非常容易的，另外，使用这个图形库画出的图形是完全被优化到像素级的！

★ 浏览器的兼容性

Linux 系统 :
Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror 3.0.3 ( 非常慢 ), Netscape 4, Opera 5 and 6.

Windows 系统 :
Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.

说明：如果在网页全部加载完成后，使用这个矢量图形库进行绘制，在 Opera 版本 7 以前的浏览器中不会执行， Netscape 版本 4 也不会执行。相反，当 HTML 页面正在被解析时，使用这个图形库进行绘制是全部浏览器均能做到的。

★ 怎样使用这个矢量图形库？

1 ．包含这个库

插入下面的代码到你的 html 文件的开头部分（在和之间）：

2 ．使用层（ div 或 layer ）作为画布（ canvases ）
如果是当页面正被载入时，直接在 html 页面中绘制，那么这个步骤不是必须的。

如果在页面加载完成后绘制，应该设置几个具有绝对坐标的层，作为你的画布，每一个层应该有一个唯一的 id:

...

3 ．下载并保存这个图形库

到这个地址 http://www.walterzorn.com/scripts/wz_jsgraphics.zip 下载，将解压后的 wz_jagraphics.js 与你的 html 文件放至相同的目录中，如果你的 wz_jagraphics.js 与 html 文件处于不同的目录下，记得在 src=”wz_jsgraphics.js” 中指示 wz_jagraphics.js 的相对路径。

★ 怎样使用这个矢量图形库中的绘制函数？

1 ． 创建一个 jsGraphics 对象

a) 在页面完全载入后绘制：

（这种方式不会在 Netscape 版本 4 和 Opera 版本小于 7 的浏览器中执行）

还记得前面用 div 元素创建的画布吗？看下面的示例，需要为 div 创建相应的 jsGraphics 对象，这些代码必须插入到相关的 div 元素结束标志后面，但必须在的前面， div 元素的 id 作为 new jsGraphics(); 的构造参数，像下面这样：

如果有多个 div 元素，每一个 div 都需要有它自已的 jsGraphics 对象：

b ）在页面载入的时候绘制
（在 Netscape 4 和 Opera 5/6 可以执行）

只需要将构造参数设为空：

你可以选择 jg,jg2 或 jg_doc 其它的变量名，只要不违反 Javascript 的命名规则就可以。

2. 图形绘制函数

为确保所有浏览器能正确执行，这里选择页面载入时进行绘制，即上文的 b 方式

一旦产生这些图形对象（在这个示例中 jg, jg2 或 jg_doc ），就可以使用它来调用绘制图形的方法。由图形对象所绘制的图形将会在相关的 div 元素上显示（采用上文 a 方式构造图形对象）：

开始画时应首先选择画笔颜色，否则，画笔的颜色取默认值－黑色。坐标值作为绘制图形方法的参数，如果采用上文的 a 方式构造图形对象，那么坐标值是相对于 div 元素的左上角的。每一个画布（图形对象），它的 paint 方法必须被显示的调用以产生 html 格式的图形，否则，在你的屏幕上什么都不会发生。

函数名（方法）	示例代码（用 jg 图形对象）
setColor( "#HexColor" ); 指定画笔颜色，一旦设置后，这个颜色会一直保留，直到下一次再重新指定画笔颜色，这个颜色值可以类似于 html 中的 #rrggbb 颜色表示，用名称表示颜色也可以，例如：“ maroon ”	jg.setColor("#ff0000"); or with identical result jg.setColor("red");
setStroke( Number ); 指定画笔采用的线厚度，这个厚度一旦被设置，会一直保留，直到下一次重新指定一，默认厚度是 1px. 要设置点划线型，需要传 Stroke.DOTTED 参数，点划线型同样适用于矩形，多边型，折线和椭圆。	jg.setStroke(3); or jg.setStroke(Stroke.DOTTED);
drawLine( X1, Y1, X2, Y2 ); 画线。从第一个坐标点到第二个坐标点，线的厚度由 setStroke 设置。	jg.drawLine(20,50,453,40);
drawPolyline( Xpoints, Ypoints ); 一条折线是一系列线段的集合， Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明： var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5);	var Xpoints = new Array(10,85,93,60); var YPoints = new Array(50,10,105,87); jg.drawPolyline(Xpoints,Ypoints);
drawRect( X, Y, width, height ); 一个矩形的外边线。参照左上角的坐标点，并指定矩形的宽度和高度。	jg.drawRect(20,50,70,140);
fillRect( X, Y, width, height ); 填充矩形，参照左上角的坐标点，并指定矩形的宽度和高度。	jg.fillRect(20,50,453,40);
drawPolygon( Xpoints, Ypoints ); 多边形。 Xpoints 和 Ypoints 是每个点的 x 坐标和 y 坐标的数组集合，必须像下面这样声明： var Xpoints = new Array(x1,x2,x3,x4,x5); var YPoints = new Array(y1,y2,y3,y4,y5); 如果始点和终点末被指定，多边线将会自动闭合。	var Xpoints = new Array(10,85,93,60); var Ypoints = new Array(50,10,105,87); jg.drawPolygon(Xpoints, Ypoints); Instead of Xpoints and Ypoints you may use another name provided it follows the rules for variable names.
fillPolygon( Xpoints, Ypoints ); 填充矩形。参数作用见 drawPolygon()	jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));
drawEllipse( X, Y, width, height ); 画椭圆边线。参照椭圆的外接矩形， x 和 y 是这个外接矩形的左上角坐标	jg.drawEllipse(20,50,70,140); or jg.drawOval(20,50,70,140);
fillEllipse( X, Y, width, height ); 填充椭圆。参数见 drawEllipse()	jg.fillEllipse(20,50,71,141); or jg.fillOval(20,50,71,141);
drawString( "Text", X, Y ); 写文本至由 x 和 y 坐标指定的位置。不同于 Java ，坐标值是第一行文本的左上角坐标值。如果文本中包含有 HTML 标记将被转义，举个例子： "Some Text more Text" 会被转义为两行 setFont( "font-family", "size+unit", Style ); 在 drawString() 之前调用。指定字体，大小，样式，字体和大小可以是与 HTML 中指示的一样，至于样式，可以使用的有： Font.PLAIN 默认样式，非粗体和斜体 Font.BOLD 粗体 Font.ITALIC 斜体它们可以结合使用	jg.setFont("arial","15px",Font.BOLD); jg.drawString("Some Text",20,50);
drawImage( "src", X, Y, width, height ); 在指定的位置画图像， ”src” 参数指定图像所在路径， width 和 height 参数允许调整图像宽高。	jg.drawImage("friendlyDog.jpg", 20,50,100,150);
paint(); 必须显示调用，才能真正在 html 页面上画图形，不推荐每隔一段（每画一个图形）就调用一次。像下面这样的调用应该避免 : jg.drawEllipse(0, 0, 100, 100); jg.paint(); jg.drawLine(200, 10, 400, 40); jg.paint(); ... 像下面这样的调用性能会很高 : jg.drawEllipse(0, 0, 100, 100); jg.drawLine(200, 10, 400, 40); /... 还有其它画的方法 ... / jg.paint(); // 最后调用 paint()	jg.paint();
clear(); 与图形对象关联的 div 画布中的图形被清除（在 div 中不是由这个图形对象创建的内容是不会被改变的）	jg.clear();
setPrintable( true ); 默认情况下，打印这些图形是不太可行的，因为浏览器的默认打印设置中会关闭打印背景，调用 setPrintable() ，并设置参数为 true ，将重置图形为可打印的（至少在 Mozilla/Netscape 6+ and IE 中）

幻海蓝梦 2010-07-14 11:22 发表评论

ZK + Spring + Hibernate最简单的例子

幻海蓝梦 — Sun, 11 Jul 2010 08:25:00 GMT

原文：http://chanson.javaeye.com/blog/164786
1、Spring+Hibernate配置起来很简单，具体就不细说了，网上多的是。

2、ZK显示页面
【query.zul】














《说明》：
A、
这个别忘记了，刚学的时候就是因为它报了不少错误。
B、use="chanson.common.web.ui.ListTestBean"
这个类就是衔接前后台的关键类。
C、${*.*}这个是标准的EL写法。

3、ListTestBean——最关键的衔接类
public class ListTestBean extends Listbox {

    public void onCreate() {
    ITestLogic testLogic = (ITestLogic) SpringFactory
.getBeanFactory().getBean("testLogic");
    List testList = testLogic.find("from Test");
        Iterator it = testList.iterator();
        while(it.hasNext()) {
            Test test = (Test) it.next();
            Long id = test.getId();
            String name = test.getName();
            Integer sex = test.getSex();
            Date birthday =test.getBirthday();
            Double money = test.getMoney();

            Listitem listitem = new Listitem();
            listitem.setValue(id);
            listitem.setParent(this);

            Listcell nameCell = new Listcell(name);
            Listcell sexCell = new Listcell(sex.toString());
            Listcell birthdayCell = new Listcell(birthday.toString());
            Listcell moneyCell = new Listcell(money.toString());
            nameCell.setParent(listitem);
            sexCell.setParent(listitem);
            birthdayCell.setParent(listitem);
            moneyCell.setParent(listitem);
        }
     }
}
《说明》：
A、例子是一个简单的查询，所以看起来也比较简单。
B、该类的作用有点像似servlet，只是省略了页面跳转
C、setter/getter真是麻烦，得找找更简洁的方法

【附录】
1）、数据库设计——test表
CREATE TABLE `test` (
`id` decimal(22,0) NOT NULL default '0',
`name` varchar(100) default NULL,
`sex` int(1) default NULL,
`birthday` datetime default NULL,
`money` decimal(15,4) default NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2）、其他应该没什么了吧？
3）、页面效果图

幻海蓝梦 2010-07-11 16:25 发表评论

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

幻海蓝梦 — Sun, 11 Jul 2010 08:01:00 GMT

原文：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的代码如下：

"0" cellpadding="0" width="90%" border="0"class="table_cont">

<%
 //判断列表是否为空
 if(activeList==null || activeList.isEmpty() || activeList.size()<1)
 {
 //为空，显示提示信息
 out.print("");
 }
 else
 {
 //不为空，显示列表内容
 out.println("\n\n");
 Iterator iter = activeList.iterator();
 Active active = null;
 while(iter.hasNext())
 {
 active = (Active)iter.next();
 out.println("");
 out.print("");
 if(active.getCreateDt()!=null)
 {
 out.print("");
 }
 else
 {
 out.print("");
 }
 if(active.getStatus()==1)
 {
 out.print("");
 }
 elseif(active.getStatus()==2)
 {
 out.print("");
 }
 out.print("");
 out.println("");
 }
 }
%>

名称	活动日期	状态	操作
目前 "+strProvinceName+" 还没有活动
"+active.getTitle()+"	"+active.getCreateDt().toString().substring(0,10)+"		上线	下线	+province+"&activeId="+active.getId()+"\">修改 "); out.print("+province+"&activeId="+active.getId()+"\">删除

　　效果图如下：

可以看出其中有一些的判断，然后还要担心“<%”和“%>”是否匹配，“{”和“}”是否匹配等等情况。如果是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">
 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 blacklistList = blacklistIf.findAllBlacklist(-1);

    // 判断列表是否为空
    if(blacklistList.size()>0 && !blacklistList.isEmpty())
    {
      this.showList(blacklistList);
    }
  }
  catch(Exception ex)
  {
    ex.printStackTrace();
  }
}

privatevoid showList(List blacklistList)
{
  // 得到列表组件，用于显示群发安排列表
  Listbox listbox = (Listbox)winMain.getFellow("blacklistList");

  // 列表的行组件
  Listitem listitem = new Listitem();

  // 列表的列组件
  Listcell listcell = new Listcell();

  for(int i=0;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页面出来喽

幻海蓝梦 2010-07-11 16:01 发表评论

ZK--如何使用JSP

幻海蓝梦 — Sun, 11 Jul 2010 07:55:00 GMT

原文：http://hi.baidu.com/zk_ajax/blog/item/883b0f36030da1dca3cc2bb3.html
Zk 使用的是 zul ，据说是 xul 的扩展，反正对于我这种用惯 JSP 的人实在不习惯，于是便尝试并搜索着如何将 zk 整合到 JSP 中，还真找到了，不过 JSP 文件就必须严格遵守 XML 格式了，例如 就得写成
或

了，刚开始狂报错，基本上都是标签未关闭，实在不惯啊。哈，进正题了。

还记得那个 zkajax 工程吗，打开它，然后打开 web.xml 文件 ( 如果不知道这个文件的位置，我就该哭了 ) ，如果出现的是图形，就点下面 Source 即可出现代码。

在标签的前面添加如下的 filter(Ctrl+Shift+F5 可以对齐文本 )

zkFilter

org.zkoss.zk.ui.http.DHtmlLayoutFilter

extension

html

zkFilter

*.jsp

REQUEST

INCLUDE

FORWARD

ERROR

在 WebContent 目录下新建一个 test_jsp 文件，内容如下

<%@ page language="java" pageEncoding="UTF-8"%>

测试 zk jsp

测试 zk jsp" border="normal" width="100px">

测试 zk jsp

在这文件上点右键 ->Rin As->Run on server, ，即可看到运行结果，大概是下图的样子：

是不是字体很小？我觉得太小了，于是我修改 css 文件中的字体，我把大部分该成了 10pt ( 原来为 x-small 或 xx-small ) ，此文件为与 zul.jar\web\zul\css\normie.css.dsp ，然后再运行就是下图的样子了：

感觉到变化了吧。

幻海蓝梦 2010-07-11 15:55 发表评论

ZK DEMO--在本地部署环境

幻海蓝梦 — Sun, 11 Jul 2010 07:53:00 GMT

原文：http://hi.baidu.com/zk_ajax/blog/item/05c0f61133ce3d7fcb80c476.html
班主任让人帮忙做一个教师管理系统，我看着是一个机会，就跟一位同学去了。算是接下了一个项目。另我吃惊的是可以有一小笔收入，心中暗喜。

接下来不好过了，后台技术足够了 , 缺一个做界面的，要是 dorado 不付费早用它了。接下来费了好大劲终于找到了一个开源的东西 ---zk ，一个作界面的不二之选。

扯远了，接下来是正题。

可以在 http://www.zkoss.org/ 上下到有关 zk 需要的东西，我用的版本是 zk-2.3.0.zip 。

下面介绍如何在 eclipse 部署 zk 环境

(1) 打开 eclipse, File->New->Project->Web->Dynamic Web Project ，即新建一个动态网站，工程名为 zkajax 。我个人倾向于在 Java Psrspective 环境下工作。

(2) 将 zk-2.3.0\demo\src\zkdemo\WebContent 下的文件放在工程中的对应位置

(3) 将 zk-2.3.0\zk-2.3.0\dist\lib 下的所有 jar 引入路径 ( 放在 WEB-INF/lib 下 )

(4) 将 zk-2.3.0\demo\src\zkdemo\src 下的 java 文件放在工程的三 src 下

(5) 最后是下图的样子

(6) 运行，在工程 zkajax 上点右键 ->Run As->Run on Server ，选中 tomcat ，点 Finish 即可，网页出来后点 Zk Demo ，效果图如下：

幻海蓝梦 2010-07-11 15:53 发表评论

10种加速Ajax开发的主流框架

幻海蓝梦 — Thu, 08 Jul 2010 01:19:00 GMT

原文：http://www.slfans.com/?action-viewnews-itemid-17119　
1. APS.NET的官方解决方案
　　ASP.NET AJAX
　　网址：ajax.asp.net

　　ASP.NET AJAX是微软.NET平台上的解决方案，提供涵盖伺服器端与用户端所需的AJAX技术与JavaScript整合机制。

　　透过与下载与安装ASP.NET AJAX到Visual Studio 2005当中，即可利用预设的控制项，开发出一些视觉特效与非同步传输的应用。

　　另外，ASP.NET AJAX也提供控制项的Toolkit，包含开发人员想自行开发AJAX应用时所需的基底类别与专案范本。

　　ASP.NET AJAX除了处理浏览器的相容性问题，也让用户端的JavaScript在开发时加入物件导向特性，例如型别系统、资料型别、命名空间、事件等，使得程式码更容易除错、维护与重复使用。

　　虽然ASP.NET AJAX提供伺服器与用户端的解决方案，透过Visual Studio2005加持，也让开发、除错的难度降低，不过和其他AJAX框架相比，许多AJAX效果和功能都还在测试阶段（在CTP版本中供用户测试），可以应用的功能有限。

　　2.支援「上一页」与加入「我的最爱」功能
　　Dojo
　　网址：dojotoolkit.org

　　一些轻巧的Ajax框架，用意在解决JavaScript遇到的易用性或特效问题，相较之下，Dojo更像是个面面俱到的JavaScript 工具套餐，号称可以降低网页或网页应用程式前端开发速度。

　　Dojo支援拖拉、淡出、淡入、移动、透明、操作SVG图档等动态效果，它的Widget也让使用者可以轻易使用选单，分页标签（tab）、树状结构、日历、文字编辑器等效果，当然也支援非同步处理的Ajax功能。

　　另外，Ajax由于以动态的方式操作文件物件，导致使用者习于使用上一页、下一页的功能无法使用，也无法利用像是「我的最爱」的功能，将使用者所需的页面留下正确的书签，但这些需求Dojo都已有解法。

　　比起其他轻巧型的Ajax框架，要摸熟Dojo显然要下较多的功夫才能掌握，目前文件较少也是个问题。不过由于它的功能更为完整，因此开发人员需要自行加工的地方就相对较少。

　　3.可由JavaScript呼叫Java语法
　　DWR(Direct Web Remoting)
　　网址：www.getahead.ltd.uk/dwr

　　DWR是设计给Java语言的Ajax框架，让开发人员可以利用JavaScript程式呼叫Java语法。

　　DWR的运作可分为两个部分，一方面用在浏览器上，处理连接伺服器端Java程式，另一部分则是用来展示回传资料。透过DWR呼叫Java的函式，它会处理连接处理的细节，而当资料被处理完成后，DWR就会执行回呼函式，以进行后续呈现的处理。

　　在安装DWR时必须编辑Web应用程式的部署描述档案，而且也要编辑DWR特定档案。 DWR配置档案指定了可以远端建立和呼叫的类别。档案中包含伺服器程式码的JAR档案，另外还有JavaScript档案，提供一些辅助函式，处理互动呈现的效果。

　　DWR最大的好处就在于让Java开发人员可以利用熟悉的语法来处理页面与资料，并且能配合Struts、Tapestry来使用。不过从用户端呼叫远端伺服器的Java程式，仍存在一些安全上的疑虑，在使用时必须注意。

　　4.以易用性、简化语法为目标
　　jQuery
　　网址：jquery.com

　　jQuery是最近大受瞩目的Ajax框架，它以Prototype为本，简化并提升JavaScript语法的功能。

　　jQuery有点像是将Prototype所做的事再推向极端，让使用者改变原有撰写JavaScript的方法。它最为人称道的地方，就在于强大的存取页面元素功能，无论是文件的节点、CSS的选取子或Xpath表达式，都能利用「$（）」函式快速存取，并赋予它更多的功能。

　　此外，它的chainable方法能将一串处理函式结合在一起，让程式码更为简洁。另外jQuery也提供一些动态效果，不过和其他框架相比，这部分就显得阳春许多。

　　jQuery的优劣其实都在同一件事情上，一方面它简化JavaScript的语法，让撰写程式更为简便，就好用的目的而言，的确是相当成功。然而这却让JavaScript的程式码会发展成另一种样子，对于初学者而言，一开始学习时，必须要花点时间去适应。

　　5.依功能需求，下载模组化工具
　　MooTools
　　网址：mootools.net

　　前身是以轻巧著称的Moo.fx，与Prototype有着相似的概念和语法，但在物件导向上做得更为彻底，而且在动画效果和互动行为上，提供更多的功能与应用，能让使用者更快的写出物件导向概念的JavaScript语法。

　　MooTools的下载档依模组分为核心、类别、原生语法、网页元素、浏览器视窗、动画效果、拖曳、远端传输与外挂程式，除了核心程式是必要下载之外，其他可依使用者需求，下载所需的JavaScript档案，借此减少档案的体积。

　　虽然MooTools将JavaScirpt物件导向化的结果做得更彻底，有利于程式的扩展与维护，不过也挑战原先熟悉JavaScript物件观的人，需要较多的时间适应。

　　不过无论是网站本身呈现、程式语法展示，甚至是模组下载介面，MooTools都展现相当精致的动态效果，参与网站的示范，很快就能实作。

　　6.大大扩充JavaScript基本功能
　　Prototype
　　网址：prototype.conio.net

　　Prototype不像其他框架，有许多炫人耳目的动态效果，而是专注在改良JavaScript本身的功能，让JavaScript更容易使用，也更具物件导向风格。

　　Prototype在简化JavaScript方法上，提供许多方便的语法，最著名的如「$（）」函式，只要将DOM节点的ID传入这个函式，就能取得这个节点物件，简化了DOM的操作方法。而这个方式也几乎成为其他开发框架延用的功能。其他如「$F（）」函数能直接处理Web表单元件的值，「$A（）」函数能将列举的字串转换成阵列等，都是Prototype经典功能。

　　在非同步处理上，它也提供了Ajax.Request、Ajax.Updater等类别，让开发人员在处理非同步运作时可以利用它提供的方法，让沟通行为更为容易、正确。

　　虽然Prototype没有太多花俏的功能，不过它简化JavaScript的特性，仍让许多Web开发人员衷情于它。

　　7.平顺、丰富的动画效果
　　Rico
　　网址：openrico.org

　　Rico是基于Prototype之上的Ajax框架，在西班牙文中，「rico」即为「rich」的意思，这也说明Rico的目标是提供开发人员利用JavaScript达到丰富的网页元件与应用。

　　Rico提供非同步的Ajax应用，可让非同步回应绕送到一个或多个回呼以操作DOM或JavaScript物件。在动画效果方面，支援如拖曳功能、缩放、过场、进度指标和黄褪技术等，可立即套用丰富的效果。

　　由于Rico志在让JavaScript也能表现出Flash般的动画效果，因此像是网页元件的颜色、形状或下拉效果的变化都相当平滑，也能让 DIV方块做出圆角的效果，让视觉表现更具Web 2.0风格。

　　Rico的LiveGrid功能同样是为人所称道之处。它能让表单资料产生更多元的表现方式，突破表格的检视行为。例如它可以让使用者在触动卷动轴时，动态下载资料，利用这种方式，可以分段下载，就无需采用分页检视的手法。

　　8. RoR与CakePHP的指定框架
　　Script.aculo.us
　　网址：Script.aculo.us

　　Script.aculo.us是建立在Prototype之上的Ajax框架，是解决视觉效果与互动行为的轻巧框架，Ruby on Rails及PHP上的开发框架CakePHP等，都是使用Script.aculo.us作为Ajax的解决方案。

　　在视觉效果上，Script.aculo.us利用改变透明度、大小、位置以及结合以上三种元素，产生更多种变化，例如淡进、淡出、闪动、提示等数十种视觉效果，可让页面效果更具变化，引导使用者与介面程式互动等。

　　在互动介面方面，提供了拖曳元件、就地编辑元件（In-Place Editor）、水平、垂直拉动卷轴、自动完成、元件排序、购物车等，这些预先打包成套的功能，解决了浏览器相容性的问题，也让使用者很容易可以直接导入在现有的专案功能中，节省自行开发的时间。

　　此外，Script.aculo.us包含单元测试（Unit Test）框架，可以利用本身的test物件，用来验证程式执行的状态，并且支援模拟滑鼠与键盘的功能。

　　9.有Yahoo!网站服务背书的框架
　　Yahoo! User Interface
　　网址：developer.yahoo.com/yui/

　　Yahoo! User Interface（YUI）是Yahoo!所提供的Ajax框架，提供便捷的开发方式与许多JavaScript函式库，使用者可以利用它来开发互动式的介面与Ajax效果。 YUI可分为三大部分，包含工具、CSS和控制元件等函式库，工具部分是核心物件，负责一些较底层的处理功能，CSS则提供像版面规画、字体工具。而控制元件则有自动完成、月历、树状结构这些工具。

　　由于YUI实际应用在Yahoo!的网站中，因此实作的可靠性相当不错，在YUI网站上也提供不少范例与文件，能协助使用者快速上手。虽然 YUI是由Yahoo!所推出，不过它遵循JavaScript的语法规则，并将样式、内容与行为分离，开发人员如果要扩充功能，也相当容易。

　　一般Ajax框架都需要置放在网站的伺服器端，随着页面一起下载，YUI除了采取这种方式之外，也提供使用连结的方式，使用者只要在应用的页面中将路径指向YUI主机即可。

　　10.适合Java开发环境的企业级解决方案
　　ZK
　　网址：www.zkoss.org

　　ZK是基于Ajax、XUL（XML User Interface Language）、Java网页应用程式的开发框架，让网页的操作行为可以像是桌面应用程式一般。

　　不同于用户端的Ajax解决方案，ZK由伺服器端出发，利用ZK处理Ajax互动的引擎，处理用户端的页面行为，也因此大为降低利用 JavaScript作为动态开发语法时，常遇到的浏览器相容问题。

　　ZK提供超过70个XUL组件及80个XHTML组件，因此一些网页或应用程式常见的功能，ZK都提供现成的工具可让使用者立即应用，只需利用 ZK以XML为基础的使用介面设计语言，即可产生这些组件。应用的人则可在后端利用Java语言进行来处理程式逻辑与资料传递。

　　由于ZK利用Java语言开发，属于以伺服器为中心的解决方案，因此必须安装支援Java的应用程式伺服器（如Tomcat）才能执行。

幻海蓝梦 2010-07-08 09:19 发表评论

ZK框架学习总结

幻海蓝梦 — Wed, 07 Jul 2010 12:32:00 GMT

原文：http://qa.taobao.com/?p=7145&cpage=1

1、ZK框架简介

ZK框架是一个用JAVA实现的简单但是功能强大的表现层框架。它包括了一个基于Ajax的事件驱动引擎、这也是它的最大特色。可以做到没有JavaScript，只通过ZUML(ZK User Interface Markup Language)这种标识语言即可做到界面创建和事件响应。

ZK的实现完全用java实现，开发过程中不会有任何的JavaScript代码，但是通过将zul文件（ZK的源文件，类似于jsp文件）通过ZK引擎编译后查看页面源代码，结果还是可以看到，ZK实现的本质还是通过 JavaScript+CSS来处理异步请求的。

组件是ZK中最常见的元素。有点类似于JAVA Swing或者VB这样的基于组件的编程。结合ZK Studio，可以达到可视化和动态地查看页面效果。

特征：

它是一个表现层工具。可以与hibernate,iBatis，spring等凡是与JAVA有关的结合构建一个完整的WEB应用。
以服务端为中心的框架。它封装了Ajax的后台处理技术。服务端由两个重要部分实现：ZK加载器，ZK异步更新引擎。前者负责解析URL请求，生成HTML页面；后者负责监听和处理客户端的Ajax请求，同时更新ZK组件的属性，然后将Ajax响应发回给客户端。
基于组件的GUI。页面的可视部分都是由组件构成。类似于HTML标签，但是比HTML标签更灵活。

不足之处：

ZK与JAVA结合紧密。由于ZK的组件都是由JAVA实现，所以对组件的控制也仅限于用JAVA语言。无法与控制层解耦。
学习资料和文档比较少。最全面的ZK应用其实还是官方的DEMO。连《ZK框架——Ajax开发实践》一书都是用的官方例子。所以对有些事件或者属性只有自己探索。
ZK的测试比较薄弱。对页面无法用工具进行测试。只能用手动测试。调试也不方便。出错了的话错误信息不明确，无法很快定位问题。

2、安装部署开发环境

2.1 工具及安装

需要安装的工具有JDK、Tomcat（或者其他服务器）、My Eclipse（或者Eclipse）、 ZK开发包、ZK Studio。JDK、Tomcat、My Eclipse安装都不用介绍了，主要介绍ZK相关的部门。我的环境是JDK 1.6.0_16+Tomcat 6+My Eclipse 6.0。

准备工作：

l 下载ZK包和demo。http://www.zkoss.org/download/zk.dsp。在Windows下开发选择zk-bin-5.0.2.zip，Linux 下选择zk-bin-5.0.2.tar.gz。下载好后还需要下载一个demo包。这个demo包里面包含了一些xml模板，创建ZK页面时可以根据模板快速生成。demo下载选择zk-demo-5.0.2.zip。

然后下载ZK Studio。ZK Studio是My Eclipse一个插件。提供了对ZK文件的时时查看和组件的可视化编辑以及一些通用页面原型。最好还是下载这个插件，方便开发。这个插件可在线安装或者直接下载。安装步骤可参考页面：
ZK Studio界面1

ZK Studio界面2

2.2 ZK环境的配置

解压zk-bin-5.0.2.zip，创建用户自定义库：在My Eclipse里面选择windows->Preferences->JAVA->Build Path->User Libraries。添加3个用户库。名字随便取，可以分别叫：ZK Ajax Frame、ZK Ajax Framework Extendsion以及ZK Ajax Framework Forge Library。分别对应zk-bin-5.0.2目录结构中dist下的lib、lib/ext以及lib/zkforget中的jar包。配置好后的用户库如下图：

: 自定义的用户库

添加xsd到用户xml catalog entry里。这是为了确保可以更好的地使用My Eclipse XML Editor的功能。打开window->preferences->My Eclipse->Files and Editors->XML->XML Catalog。添加zk-bin-5.0.2/dist/xsd/zul.xsd。

添加xml文件模板：将zkdemo\WebContent\WEB-INF下的lang-addon.xml、 portlet.xml，zk.xml和web.xml四个文件复制到My Eclipse安装目录下的myeclipse\eclipse\plugins \com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710\templates\xml。文件夹名字可能因为My Eclipse版本不同而不同。只要以com.genuitec.eclipse.wazardsXXX这样开头的文件夹就行。然后将这四个文件分别改名为：LangAddon.vtl、Portlet.vtl、ZK.vtl、ZKWeb.vtl。打开四个文件，将这一行都改成。继续在这个xml文件夹里面新建一个名为ZUL.vtl的文件。内容如下：

xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”

xsi:schemaLocation=”http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul “>

修改 My Eclipse安装目录下的myeclipse\eclipse\plugins \com.genuitec.eclipse.wizards_6.0.1.zmyeclipse601200710 \ templates.xml。在后面添加如下代码：

name=”XML template for a web.xml file with ZK capability”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/LangAddon.vtl”

name=”XML template for a lang-addon.xml file for ZK”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/Portlet.vtl”

name=”XML template for a port-let.xml file for ZK”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/ZK.vtl”

name=”XML template for a zk.xml file”/>

context=”com.genuitec.eclipse.wizards.xml”

script=”templates/xml/ZUL.vtl”

name=”XML template for a *.zul file”/>

添加新的文件类型。打开window->preferences->general-content types，给Java Source File添加*.zs，给XML添加*.zul，给JSP添加*.dsp，给HTML添加*.zhtml。到此，ZK环境完全搭建完成。开发好的ZK应用可以直接打成war包进行部署。十分地简单。

3、快速搭建页面

有两种方式创建ZK Project。第一种方式是直接在ZK Welcome Page里面新建一个ZK工程，这样不用再添加ZK库。第二种方式是先创建一个Web Project，然后在Build Path里面添加刚才添加的三个User Libraries。然后在WebRoot里面添加zul文件即可。添加zul文件要选择新建XML Advanced Tempaltes文件。

打开zul文件可以选择Open with Zul Editor。这样便可以利用zk studio的可视化编程进行开发。

除了ZK自己提供的一些组件外，html的标签在ZK中完全可以继续用。但是为了避免ZK解释HTML标签，通常要使用将HTML标签围入其中。换言之，他们并不是子组件。而是被存储在content属性内。

组件可以从zk palet直接拖拉进代码区，然后可以在中查看和设置组件支持的所有属性和事件。其特点就是高效地组建页面。如果不添加任何JAVA代码，那么创建一个页面的效率不亚于直接用Axure创建界面原型。图4是一个界面demo。无任何js和CSS代码。当然，ZK框架并不排斥使用CSS代码。利用style属性可以设置CSS样式，还可以通过

BlogJava-jasmine214--love-随笔分类-网管--拓扑图

iTopoview Java网络拓扑图组件 ---官网

用wz_jsgraphics.js（javascript图形库）进行画矢量图,兼容多浏览器

ZK + Spring + Hibernate最简单的例子

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

ZK--如何使用JSP

ZK DEMO--在本地部署环境

10种加速Ajax开发的主流框架

ZK框架学习总结

原文：http://qa.taobao.com/?p=7145&cpage=1

1、ZK框架简介

2、安装部署开发环境

2.1 工具及安装

ZK Studio界面2 2.2 ZK环境的配置

3、 快速搭建页面

ZK Studio界面2

2.2 ZK环境的配置

3、快速搭建页面