代码改变世界

Wicket框架基础（一）

2009-04-22 09:32  乱世文章  阅读(1306)  评论(0)  编辑  收藏  举报

Wicket框架基础（一）

pizza Application Sample


Wicket是什么

Wicket是一个崭新的web框架，完全不同于struts、jsf或tapestry。目前它已经成为apache最有潜力的一个项目。

Wicket相关的IDE

Wicket有简单、学习曲线低、零配置等优点。我们完全可以不使用IDE来搭建一个wicket工程，但仍然推荐大家使用IDE+wicket插件来开发以提高生产率。

为什么选择NetBeans6.5

Wicket目前支持的IDE插件有：

目前Wicket Bench 在Eclipse中仍然存在一些问题。IntelliJ IdeA据说相当不错,但我没用过。所以只好选择NetBeans及其迄今为止最稳定的版本6.5。

本文档需要的环境

  • NetBeans IDE 6.5
  • Java Standard Development Kit (JDK™) 5.0 版或 6.0 版
  • NetBeans IDE 的 Wicket Support 插件

 

一、在netbeans6.5中建立wickt应用程序

IDE的作用是提供友好界面以及减少工作量。在netbeans6.5中建立wickt项目的步骤如下：

1、      建立一个“web应用程序”。在选择服务器（如tomcat6.0）和javaEE版本（如5.0规范）之后，选择框架“wicket1.4”。

 

其中wicket1.4配置中各项配置的含义等同于web.xml中的filter和filter-mapping中的相应配置。以上图为例：

Wicket URL Pattern指明了当我们访问web应用的/wicket/*上下文时将由Wicket Servlet Name这个filter来处理请求。这个filter是wicket框架中的一个重要的类WicketFilter。这个类主要作用是初始化context上下文（这个工作是自动的，程序员不需要管），加载init-param参数Wicket Application Class（即applicationClassName）指明的类（如Application,这个类名你可以任意改）， 并调用该类的getHomePage方法。该方法仅仅是返回一个class对象，该class对象的类名由Wicket Home page参数指定（如：HomePage，如你想修改这个名字，需要修改这个方法）。

不用改变wicket1.4配置，点击“完成”。

2、      展开项目窗格中“源包”,可以看到生成了如下文件：

 

所有文件都位于一个com.myapp.wicket包下（包名可以在上图Main Package中设置）。其中Application.java的getHomePage()方法是应用的主入口（类似于应用程序中的Main函数），它其中只有一句：

 return HomePage.class

也就是HomePage.java这个源文件。

这里只有一个空的构造函数，这样的话页面上只会显示静态的HomePage.html文件中定义的内容：
  <link wicket:id='stylesheet'/>
  </head>
  <body>
    <span wicket:id='mainNavigation'/>
  </body>

光这样看，显然这个页面没有什么实际的内容去输出。然而需要注意这几个红色的地方，wicket:id这样的属性和标准的id属性相比，显然有些特殊的地方。实际上这只是两个占位符，当wicket项目重新生成后，wicket会用真正的有实际意义的html代码去根据一定规则填充它：

在wicket中，每个页面会包含一个静态的html和一个同名的java文件，如HomePage.html和HomePage.java、HeadPanel.html和HeadPanel.java。

在静态的html中，除了一些静态的html标签外，实际上还会有一些动态的内容。这些动态的内容表面上看是一些传统的html标签，如上面HomePage.html中的<link>标签<span>标签，这些标签的共同特征是：都有一个wicket:id属性。这些动态的内容在wicket程序中并不会形成真正的输出，而仅仅是一种占位符，而占位符的行为和输出，统统由跟html文件同名的java文件来控制。比如，HomePage.html中的动态内容（占位符）是由HomePage.java中的java代码控制的。如果我们要改变这些占位符的输出和行为，只能通过修改HomePage.java中的java代码来改变。

这种机制带来的好处是：在web应用开发过程中，工作一般会由美工人员和jsp程序员分担，美工负责静态内容，jsp程序员负责动态内容；把html代码和java代码分开后，二者的分工更明晰。美工负责修改html文件，而java程序员只需要负责java文件就好。

以上面的HomePage.html为例，有两个动态的内容（或占位符）：

（1）占位符stylesheet

（2）占位符mainNavigation

然而在HomePage.java中，并没有任何代码控制这两个占位符（实际上除了一个空的构造函数外，HomePage.java中没有其他的代码）

但是，当我们运行这个程序（直接点工具栏上的运行按钮或按下F6键），发现实际上页面上是有输出内容的：

 

其实，这部分内容的输出虽然在HomePage.java中没有任何代码在输出，但别忘了，HomePage这个类继承自ＢasePage类，还可以在BasePage.java中进行输出：

add(new HeaderPanel("mainNavigation", Strings.afterLast(packageName, '.')));

add(new StyleSheetReference("stylesheet", BasePage.class, "style.css"));

这里，BasePage的构造函数中new了两个东西：一个HeaderPanel，一个StyleSheetReference。

前者是一个自定义的复用组件（可以打开HeaderPanel.java和HeaderPanel.html查看这个组件的输出内容），后者则为BasePage的子类添加了一个外部样式表引用。这样作为继承自BasePage的HomePage.java，虽然没有定义任何动态输出的内容，但仍然能够显示出一个HeaderPanel组件在页面上（因为extends 了BasePage）。而BasePage由于只有java文件没有html文件，所以只是用于继承而不能用于呈现。

3、      尽管到此为止，我们没有写任何一个代码就完成了一个能运行的wicket应用，然而我们仍然可以通过前面的的介绍的原理，很容易地进行自己的定制。比如，我们想让页面上的“Wicket Example”改变为：Hello World，而把”Start of wicket”中的”wicket”改成“我的第一个Wicket程序”。

首先，Wicket Example这段文字定义在HeaderPanel.html中，并且它是静态的内容（因为它没有Wicket:id属性）：

<h1>Wicket Example</h1>

对于静态的内容，直接修改html文件就可以了。即把上面的html标签修改为：

<h1>Hello World</h1>

其次，”Start of wicket”中的”wicket”在HeaderPanel.html中定义为动态内容（因为它使用了Wicket:id属性）：

<span wicket:id="exampleTitle">Example Title Goes Here</span>

对于动态的内容，应该修改java文件，即修改HeaderPanel.java中的构造函数：

add(new Label("exampleTitle", exampleTitle));

改为

add(new Label("exampleTitle", “我的第一个Wicket程序”));

 

二、开发wicket重用组件

Wicket最大的好处之一就是支持“可重用组件”，而且wicket重用组建的开发可以说是相当的简单（跟Tapestry相比），几乎跟写一个普通的wicket页面没有什么区别。它也由一个 Java 端与一个 HTML 端构成。

在项目的“源包/com.myapp.wicket”上右击（注意，一定要在“源包”上右击，否则会出现“无启用的文件系统”错误），选择“新建àWicket Panel”，弹出如下窗口：

 

 

在文件名中填入组件名称：FooterPanel，则下面会提示wicket插件将以该名字自动生成如下两个文件：
FooterPanel.java

FooterPanel.html

 

点击“完成”。

首先我们来修改FooterPanel组件的html文件（当然我们也可以让专门的网页设计人员来做，这样组件的样式会更加美观），打开FooterPanel.html，把注释“<!-- TODO -->”部分修改为：

<span wicket:id="message">显示内容</span>

 

然后，打开FooterPanel.java，在构造函数最后面加上内容：

add(new Label("message", "可重用组件")); 

这样，我们就在页面id为message的地方插入一个label（当然，如果你愿意也可以插入一个image或者其他的什么 ）。

 

这样，我们的第一个简单的可重用wicket组件就完成了，接下来要在页面上来使用它。

 

打开HomePage.html，在body中添加一个占位符，id为FooterPanel：

 

同时，需要修改HomePage.java，在代码中为占位符FooterPanel真正的插入一个FooterPanel可重用组件：

 

F6，运行主项目，可以看到页面上呈现了我们的可重用组件：

 

如果想改变组件的样式，可修改组件的html文件：

在<span>两端添加<h2>。重新部署，刷新页面，修改后的效果就可以看到。

 

 

<完>

 

 

 

*参考文档《Wicket Web 框架简介》