【引自Ada Li的博客】在NetBeans中实现鱼眼(FishEye)的具体步骤：

1、NetBeans菜单“文件”-“新建项目”。在出现的“新建项目”窗口中，“类别”选择“Web”，项目选择“Web应用程序”。点击“下一步”；

2、在“新建项目窗口中”，“项目名称”中输入“jMakiFishEye”项目。点击”下一步”；

图1

3、在“框架”窗口中，选择“jMaki Ajax Framework”。点击“完成”。

图2

4、NetBeans中出现jMakiFishEye项目的同时，也会出现在“组件面板”中出现jMaki的Widgets，包括Dojo，Flickr，Google，Yahoo等中的一些Widgets。如果没有出现“组件面板”，选择菜单“窗口”->“组件面板”。

图3

5、在NetBeans中，用鼠标直接把“jMaki Dojo”下的Fish Eye List拖到jMakiFishEye项目中的index.jsp文件中。这个例子中放在<div class="content">中。

图4

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

查看本文来源