60416.htm

仔细看吧

<link href="./dzs_cs.css" rel="stylesheet" type="text/css" />
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="24" align="center" valign="bottom" class="d_font3">NetBeans中实现FishEye的步骤</td>
      </tr>
      <tr>
        <td height="3" bgcolor="#E3E3E3"></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="d_font4"><P>【引自<A href="http://developers.sun.com.cn/blog/ada/entry/200711141">Ada Li</A>的博客】在NetBeans中实现鱼眼(FishEye)的具体步骤：</P>
<P>1、NetBeans菜单“文件”-“新建项目”。在出现的“新建项目”窗口中，“类别”选择“Web”，项目选择“Web应用程序”。点击“下一步”；</P>
<P>2、在“新建项目窗口中”，“项目名称”中输入“jMakiFishEye”项目。点击”下一步”；</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331140.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图1</TD></TR></TBODY></TABLE>
<P>3、在“框架”窗口中，选择“jMaki Ajax Framework”。点击“完成”。</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331141.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图2</TD></TR></TBODY></TABLE>
<P>4、NetBeans中出现jMakiFishEye项目的同时，也会出现在“组件面板”中出现jMaki的Widgets，包括Dojo，Flickr，Google，Yahoo等中的一些Widgets。如果没有出现“组件面板”，选择菜单“窗口”-&gt;“组件面板”。</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331142.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图3</TD></TR></TBODY></TABLE>
<P>5、在NetBeans中，用鼠标直接把“jMaki Dojo”下的Fish Eye List拖到jMakiFishEye项目中的index.jsp文件中。这个例子中放在&lt;div class="content"&gt;中。</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331143.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图4</TD></TR></TBODY></TABLE>
<P>#p#</P>
<P>6、拖拽的结果是在index.jsp中加入了一些代码，一行是导入了jMaki的taglib，一个是创建了FishEye widget实例。</P>
<P>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=2 width=400 align=center borderColorLight=black border=1>
<TBODY>
<TR>
<TD class=code bgColor=#e6e6e6><PRE>&lt;%@ taglib prefix="a" uri="<A href="http://java.sun.com/jmaki">http://java.sun.com/jmaki</A>" %&gt;<BR>......<BR>&lt;a:ajax name="dojo.fisheye" <BR>args="{items:[ <BR>{iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg',caption:'You are here!'},<BR>{iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg',caption:'test3'},<BR>{iconSrc:'https://ajax.dev.java.net/images/JayashriVisvanathan.jpg',caption:'test4'}<BR>]}"/&gt;</PRE></TD></TR></TBODY></TABLE></P>
<P>7、这个例子中缺省配置的几幅图像是参与开发jMaki的工程师头像，下面我要把这几幅图像替换为duke。在jMakiFishEye项目的web目录下创建images目录，拷贝几幅duke图像，修改index.jsp中FishEye的代码如下：</P>
<P>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=2 width=400 align=center borderColorLight=black border=1>
<TBODY>
<TR>
<TD class=code bgColor=#e6e6e6><PRE>&lt;a:ajax name="dojo.fisheye" <BR>args="{items:[ <BR>{iconSrc:'images/Bike.jpg',caption:'Bike',index:1},<BR>{iconSrc:'images/Snooze.jpg',caption:'Snooze',index:2},<BR>{iconSrc:'images/Surfing.jpg',caption:'Surfing',index:3},<BR>{iconSrc:'images/Thinking.jpg',caption:'Thinking',index:4},<BR>{iconSrc:'images/Toolbelt.jpg',caption:'Toolbelt',index:5}<BR>]}"/&gt;</PRE></TD></TR></TBODY></TABLE></P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331144.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图5</TD></TR></TBODY></TABLE>
<P>8、运行结果如下：</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331145.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图6</TD></TR></TBODY></TABLE>
<P>9、这个FishEye的效果是水平方向的，如果想改成垂直方向，打开jMakiFishEye下的index.jsp，鼠标右键点击FishEyeWidget代码段，可以看到“jMaki”菜单，是用来对jMaki中Widget做外观配置的窗口。出现的“dojo.fisheye Customizer”窗口中，修改“orientation”中的值为”Vertical”。</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331146.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图7</TD></TR></TBODY></TABLE>
<P>10、再运行jMakiFishEye的结果如下：</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331147.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图2</TD></TR></TBODY></TABLE>
<P>JMaki中FishEye的实现也包括两部分：客户端和服务器端。</P>
<P>客户端内容在jMakiFishEye项目的Web/Resource/dojo/fisheye，包括四个文件：</P>
<P>◆images/dojo-fisheye.jpg: 缺省图像背景<BR>◆component.htm:　模板<BR>◆component.js：这个JavaScritp 文件定义了Fisheye的操作<BR>◆widget.json: 这个文件提供了访问Fisheye的接口</P>
<P>服务器端是两个jar文件，主要是实现了前面介绍的jMaki Server Runtime和XmlHttpProxy。</P>
<P>◆ajax-wrapper-comp.jar: <BR>◆rss.jar:</P>
<P>下图列出了fisheye Widget有关的文件。</P>
<TABLE class=ln cellSpacing=0 borderColorDark=#ffffff align=center bgColor=#ddddd borderColorLight=#999999 border=1>
<TBODY>
<TR>
<TD bgColor=#ffffff><IMG src="/files/uploadimg/20071116/1331148.gif"></TD></TR>
<TR>
<TD class=it align=middle bgColor=#dddddd>图9</TD></TR></TBODY></TABLE>
<P><FONT size=4>【相关文章】</FONT></P>
<UL type=disc>
<LI><A href="http://developer.51cto.com/art/200708/52812.htm" target=_blank><U><FONT color=blue>使用NetBeans进行游戏移植的解决方案</FONT></U></A></LI></UL>
<UL type=disc>
<LI><A href="http://developer.51cto.com/art/200611/35452.htm" target=_blank><U><FONT color=blue>更改Netbeans中选项卡的名称</FONT></U></A></LI></UL>
<UL type=disc>
<LI><A href="http://developer.51cto.com/art/200611/34720.htm" target=_blank><U><FONT color=blue>用NetBeans平台开发J2ME游戏实例讲解</FONT></U></A></LI></UL><DIV align=right>【责任编辑：<A class=ln href='mailto:[e-mail]'>火凤凰</A> TEL：[phone]】</DIV></td>
      </tr>
      <tr>
        <td class="d_font4">&nbsp;</td>
      </tr>
    </table>