喵。猫咪又来把自己blog上的文章转到这里来了。欢迎大家访问猫咪的blog。地址是：http://blog.sina.com.cn/u/1400658603
猫咪这几天上网搜索了一下。发现wicket已经有了eclipse插件了，叫wicket bench。不过我试用了一下。发现如果直接使用wicket bench建立工程，无法自动部署（也许是有办法，但是我没找到）。而且好像还有些毛病，总是提示找不到wicket的包文件。有可能是我设置哪里不对吧。不过用来建立webpage还是相当好用的。wicket bench没办法直接下载，把http://www.laughingpanda.org/svn/wicket-bench/trunk/wicket-bench-site加入eclipse的升级站点后运行就可以了。
还有，因为wicket不需要jsp来显示网页，所以ide本身只要能支持自动部署和html编辑就可以了。猫咪现在推荐使用eclipse＋wtp＋wicket bench来编写。和myeclipse相比，不需要缴纳任何费用，而且全中文（wtp也有自己的中文包。而myeclipse使用时，即使eclipse中文包安装了，也只能用英文界面，不然就有可能出错）。如果需要编写hibernate和spring，可以再添加hibernate和spring专用插件。
好了，这次我们来个稍微复杂一点的，做一个自定义导航条。这次猫咪改用eclipse＋wtp＋wicket bench来写。
制作导航条这个自定义组件，需要继承wicket.markup.html.border.border这个类。而且还要做一个模版页面。
我们首先来看一下模版页面的设计。下面就是一个自定义导航条的模版：
<html>
<body>
<wicket:border>
first <wicket:body/> last
</wicket:border>
</body>
</html>
其中<wicket:border></wiecket:border>之间的就是导航条的具体内容。格式你可以随便组合。<wicket:body/>标签，表示具体每个使用导航条的页面要显示的文字部分。比如具体页面如下：
<html>
<body>
<span wicket:id = "myborder">
middle
</span>
</body>
</html>
那么显示出来就是：
<html>
<body>
first middle last
</body>
</html>
“first”和“last”是模版中的文字，“middle”是具体网页中的文字。显示的是二者的组合。
好了，现在我们开始编写这个导航条。打开eclipse，新建一个动态web工程。建立工程后，首先是建立控制器，navomaticapplication.class。代码如下：
package wicket.examples.navomatic;
import wicket.protocol.http.webapplication;
public class navomaticapplication extends webapplication{
public class gethomepage(){
return page1.class;
}
}
然后调整web.xml文件，把这个类加进去。内容如下：
<?xml version="1.0" encoding="utf-8"?>
<web-app>
<servlet>
<servlet-name>navomaticapplication</servlet-name>
<servlet-class>wicket.protocol.http.wicketservlet</servlet-class>
<init-param>
<param-name>applicationclassname</param-name>
<param-value>wicket.examples.navomatic.navomaticapplication</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>navomaticapplication</servlet-name>
<url-pattern>/app/*</url-pattern>
</servlet-mapping>
</web-app>
现在我们开始编写导航条控件。制作自定义控件和asp.net差不多,包括一个处理类和一个网页模版。首先建立导航条类navomaticborder.class。这个类需要继承wicket.markup.html.border.border类。在类的构造函数中，添加两个boxborder控件。这两个控件如何放置，则是模版文件的工作。类具体代码如下：
package wicket.examples.navomatic;
import wicket.markup.html.border.border;
import wicket.markup.html.border.boxborder;
public class navomaticborder extends border{
public navomaticborder(string arg0){
super(arg0);
add(new boxborder("navigationborder"));
add(new boxborder("bodyborder"));
}
}
然后设计网页模版。模版名称必须和类的名称相同。navomaticborder.html代码如下：
<html>
<body>
<wicket:border>
<table>
<tr>
<td>
<span wicket:id = "navigationborder">
<b>navigation links</b>
<p>
<wicket:link>
<a href = "page1.html">page1</a><br/>
<a href = "page2.html">page2</a><br/>
<a href = "page3.html">page3</a>
</wicket:link>
</p>
</span>
</td>
<td>
<span wicket:id = "bodyborder">
<wicket:body/>
</span>
</td>
</tr>
</table>
</wicket:border>
</body>
</html>
我们可以看到，两个boxborder类都负责做什么。navigationborder负责显示page1到page3的三个连接；bodyborder则负责显示每个页中定义的导航条内容。所有的格式控制都是使用的标准html标签。你可以很容易的修改布局和使用css样式表美化页面。
刚才我们在navomaticapplication类中设定page1为首页。下面我们就开始编写page1.class和page1.html。在eclipse中选择“新建”，然后在“wicket”类别中选择“wicket webpage”，输入类名为“page1.class”。你会看到，同时系统为你创建了一个“page1.html”网页。代码很简单，我就不详细说明了。大家自己看一下应该就明白了。
page1.class代码：
package wicket.examples.navomatic;
import wicket.markup.html.webpage;
public class page1 extends webpage{
public page1(){
add(new navomaticborder("navomaticborder"));
}
}
page1.html代码：
<html>
<body>
<span wicket:id = "navomaticborder">
you are viewing page1
</span>
</body>
</html>
page2和page3与page1基本上一样，只有html部分稍有不同。
page2.class代码：
package wicket.examples.navomatic;
import wicket.markup.html.webpage;
public class page2 extends webpage {
public page2(){
add(new navomaticborder("navomaticborder"));
}
}
page2.html代码：
<html>
<body>
<span wicket:id = "navomaticborder">
you are viewing page2
</span>
</body>
</html>
page3.class代码：
package wicket.examples.navomatic;
import wicket.markup.html.webpage;
public class page3 extends webpage {
public page3(){
add(new navomaticborder("navomaticborder"));
}
}
page3.html代码：
<html>
<body>
<span wicket:id = "navomaticborder">
you are viewing page3
</span>
</body>
</html>
好了。现在可以发布了。使用wtp的发布功能，把这个工程放到tomcat上运行。结果如下面的图片所示：
page1:
page2:
page3:
猫咪的文笔很差。不知道大家能不能看懂猫咪写的内容。猫咪会尽可能写得简单明了一点。其实wicket还是很容易理解的，如果你多少有点swing的编程经验的话，理解得更快。如果不能马上明白，那最好先照着说明，把代码敲出来，多运行几次，肯定会有所收获。大家如果还有哪些地方不明白，欢迎给猫咪留言。因为猫咪水平有限，所以写的文章肯定有不少错误，也希望大家多多指正。
闽公网安备 35060202000074号