NetBeans中实现FishEye的步骤(1)

6、拖拽的结果是在index.jsp中加入了一些代码，一行是导入了jMaki的taglib，一个是创建了FishEye widget实例。

<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>
......
<a:ajax name="dojo.fisheye" 
args="{items:[ 
{iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',caption:'You are here!'},
{iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg',caption:'test3'},
{iconSrc:'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',caption:'test4'}
]}"/>

7、这个例子中缺省配置的几幅图像是参与开发jMaki的工程师头像，下面我要把这几幅图像替换为duke。在jMakiFishEye项目的web目录下创建images目录，拷贝几幅duke图像，修改index.jsp中FishEye的代码如下：

<a:ajax name="dojo.fisheye" 
args="{items:[ 
{iconSrc:'images/Bike.jpg',caption:'Bike',index:1},
{iconSrc:'images/Snooze.jpg',caption:'Snooze',index:2},
{iconSrc:'images/Surfing.jpg',caption:'Surfing',index:3},
{iconSrc:'images/Thinking.jpg',caption:'Thinking',index:4},
{iconSrc:'images/Toolbelt.jpg',caption:'Toolbelt',index:5}
]}"/>

图5

8、运行结果如下：

图6

9、这个FishEye的效果是水平方向的，如果想改成垂直方向，打开jMakiFishEye下的index.jsp，鼠标右键点击FishEyeWidget代码段，可以看到“jMaki”菜单，是用来对jMaki中Widget做外观配置的窗口。出现的“dojo.fisheye Customizer”窗口中，修改“orientation”中的值为”Vertical”。

图7

10、再运行jMakiFishEye的结果如下：

图2

JMaki中FishEye的实现也包括两部分：客户端和服务器端。

客户端内容在jMakiFishEye项目的Web/Resource/dojo/fisheye，包括四个文件：

◆images/dojo-fisheye.jpg: 缺省图像背景
◆component.htm:　模板
◆component.js：这个JavaScritp 文件定义了Fisheye的操作
◆widget.json: 这个文件提供了访问Fisheye的接口

服务器端是两个jar文件，主要是实现了前面介绍的jMaki Server Runtime和XmlHttpProxy。

◆ajax-wrapper-comp.jar:
◆rss.jar:

下图列出了fisheye Widget有关的文件。

图9

查看本文来源