科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航



ZDNet>软件频道>中间件-zhiding>NetBeans中实现FishEye的步骤(1)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

本文以图文的形式讲述NetBeans中实现FishEye的具体步骤,供大家参考!

来源:Sun中国技术社区 2007年11月18日

关键字:步骤 FishEye 实现 NetBeans

【引自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

查看本文来源

推广二维码
邮件订阅

如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

重磅专题