【翻译】Wicket启示录——理论与实践(二) 博客分类： 专家文章翻译 wicketCSSCC#C++
第二部分 实践
Application(应用程序)
与以往大多数web应用程序框架不同，Wicket不使用XML来进行配置，只需要在web.xml做少许必须的配置。所有的配置都在Application的子类中进行。（Jetty的Fans自然对这种编程式的配置欣喜若狂）。Application class配置了你程序的方方面面，包括应用程序的主页(home page)以及错误处理(error handling).
简要的了解了Wicket核心概念后，我们可以开始创建Wicket应用程序了。
你的第一个Wicket
按照惯例，介绍一个新的框架或语言时，都会提供一个“Hello World”程序。我准备打破这种惯例，直切主题——一个简单的通讯录程序。我们的例子只有几个页面，但通过这几个页面也足够让你理解Wicket了。
当你在创建web应用程序的web这一环节时，通常会从最简单的markup文件入手，然后由Service来实现功能．这也正是我们今天要讲的开发方式，先来看一些需要用到的页面：
对于这个应用程序，我们实现了三个页面。第一个页面显示的是我们数据库里的联系人列表，并且也作为本程序的主页，此外它还提供了“查看”和“编辑”功能。每个页面都是不同的，但是还有很多方面是可以彼此共享的，稍后我会利用这一点来创建我们的Wicket应用程序。
l 每个页面都可以共享相同的CSS样式和头文件。我们就是利用markup的承继来实现的。
l 每页都有一个查找模块，并且该模块完美的封装成一个可复用的Panel组件。我们本可以简单的将查找组件放在base页面上，(原因就是上面说到的markup承继的子页面将共享父组件)，但这样做显然违背了我要表达的目的。
现在我们有了一些页面以及实现其功能的想法，现在我们就来看看Wicket的Quickstart中的应用程序实例。(该实例用到了Maven，连接地址为：http://wicket.apache.org/quickstart.html)
(通过下图)应用程序框架模板已经为我们搭好了，我们只要从WicketAppliation类开始。
我给WicketApplication类加了三个方法（注意：不包括getHomePage与init方法）。前两个是为持久化操作提供了相应的ContactDao。第三个方法复写了Application的get()方法达到类型转换的目的，在这里我们要返回的是WicketApplication类。在这个例子中，WicketApplication使用了Service Locator模式（参见http://java.sun.com/blueprints/patterns/ServiceLocator.html）。当然有很多方法可以得到你的DAO和Seriver层，比如说使用Spring Annotation或Guice。最后，我将HomePage类的home page指向了一个不存在的ListContacts类。
public class WicketApplication extends WebApplication {
public Class getHomePage() {
return ListContacts.class;
}
private ApplicationContext getContext() {
return WebApplicationContextUtils
.getRequiredWebApplicationContext(getServletContext());
}
public ContactDao getContactDao() {
return (ContactDao) getContext().getBean("jdbcContactDao");
}
public static WicketApplication get() {
return (WicketApplication) WebApplication.get();
}
}
接下来我们需要建立一个base类来为作该应用程序页面的父类，该类利用了上文提到的markup继承。下面是相应代码，markup稍后给出：
public class BasePage extends WebPage {
public BasePage() {
add(new StyleSheetReference("stylesheet",
BasePage.class, "styles.css"));
}
}
我们的BasePage继承了WebPage类，它可以用来设置页面的markup类型，并且默认值为“text/html”。如果我们要返回的是XML而不是HTML的话，在子类中将getMarkupType()方法复写如下：
public String getMarkupType() {
return "text/xml";
}
通常来说，你在getMarkupType()里的markup类型设置，决定了相应扩展名的文件被加载进来。在我们的例子中，BasePage会去查找BasePage.html。默认情况下，这些markup文件（也就是*.html,*.xml,*.xslt等文件）与组件放在相同的文件下（这一点与我们常用的Webwork,Struts,Spring MVC不同），但是如果需要的话，也是很容易去重新配置的。
BasePage的构造函数引用了一个StyleSheetReference类，并该类插入了相应的CSS样式与页面上的<link wicket:id="stylesheet"/>对应起来。为什么不直接将CSS样式文件放在web根目录下，而“多此一举”的使用StyleSheetReference呢？假设一下你的应用程序想做到“本地化”，需要为用户显现不同的图片或样式，这个时候可能你就得有两套样式：styles_en.css和styles_fr.css。而StyleSheetReference会自动的帮你加载“本地化”文件。同样，Wicket在对待资源文件（比如说properties和image文件）如出一辙，非常方便。
BasePage.html相当简单：
<html>
<head>
<title>Introduction to Apache Wicket - Example Application</title>
<link wicket:id="stylesheet"/>
</head>
<body>
<h1>
My Contacts
</h1>
<form id="search-form">
<table>
<tr>
<td>Search</td>
<td><input type="text" name="search"/></td>
<td><input type="submit" value="Go" class="button"></td>
<td><a href="#">Add New Contact</a></td>
</tr>
</table>
</form>
<wicket:child/>
</body>
</html>
在上面的这个HTML 文件里，可能有两样东西引起了你的注意。首先在<link>元素里，多了一个wicket:id=”stylesheet”的属性。它来自于BasePage类所引用的StyleSheetReference。记住，Java代码的组件ID必须与页面上的ID一一对应。
其次，你还发现多了<wicket:child/>这么个东西。它的意思是当解释器看到<wicket:child/>标签时，会将继承该页面的子类显示出来。当运行到ViewContact页面时，你就会看到效果了。我们下一个目标就是建立一个可复用的查找表单模块，并将其放在BasePage中。
提到组件，Wicket有两类最基本的组件：带有markup的和不带markup的。刚才看到的Page就属于带markup文件的容器。现在我要谈的是Panel，它与Page不同，Panel如果不包含在一个Page里面的话，是无法独立存在的。尽管如此，Panels与Pages还是有很多共性的：都有自己的markup文件，都可以利用markup的继承特性。现在我们就来创建一个带有表单form的panel.
首先，我们建立好自己的Panel类：
public class SearchPanel extends Panel {
public SearchPanel(String id) {
super(id);
add(new SearchForm("searchForm"));
}
private class SearchForm extends Form {
private String searchString;
public SearchForm(String id) {
super(id);
add(new TextField("searchString",
new PropertyModel(this, "searchString")));
add(new BookmarkablePageLink("addContact",
EditContact.class));
}
public void onSubmit() {
PageParameters params = new PageParameters();
params.add("searchString", getSearchString());
setResponsePage(ListContacts.class, params);
}
public String getSearchString() {
return searchString;
}
public void setSearchString(String searchString) {
this.searchString = searchString;
}
}
}
这是到目前为止最长的代码段了，我们慢慢看。首先，是构造函数：
public SearchPanel(String id) {
super(id);
add(new SearchForm("searchForm"));
}
我们的SeachPanel继承自Panel，因此必须调用父类的构造函数来传递当前的组件ID。切记Panels无法独自使用，我们必须将其加入到一个Pages中去，因此我们需要在使用它的Page中markup一下SeachPanel (后面的代码将会看到)。
在调完super(id)函数后，SearchPanel将我们实现的一个SearchForm(在这里，我们的SearchForm是私有内部类)加入到里面。请看下面代码：
private class SearchForm extends Form {
private String searchString;
public SearchForm(String id) {
super(id);
add(new TextField("searchString",
new PropertyModel(this, "searchString")));
add(new BookmarkablePageLink("addContact",
EditContact.class));
setMarkupId("search-form");
}
public void onSubmit() {
PageParameters params = new PageParameters();
params.add("q", getSearchString());
setResponsePage(ListContacts.class, params);
}
public String getSearchString() {
return searchString;
}
public void setSearchString(String searchString) {
this.searchString = searchString;
}
}
SearchForm继承自Wicket的Form组件。Form组件可以包含其它组件，比如说TextFields, TextAreas 或 DropDownChoices等。尽管如此，Form并不局限于上述几种组件，你也可以像将Panel加到Page那样，也将一个Panel加到Form里去。
在上面的Form对象中，我加了一个组件ID为”searchString”的TextField组件，应该组件使用了PropertyModel来更新form的searchString属性．
add(new TextField("searchString", new PropertyModel(this, "searchString")))
当form提交后，TextField会自动将用户输入的值更新在form的searchString属性上．PropertyModel并不局限于更新form对象的属性，还可以更新Pojo或其它模型的属性．稍后的例子中，我们将会关于PropertyModel的更多细节．
除添加完TextField后，我还将一个跳转到EditContact类的link(超链接)也加到panel上．该link是一个BookmarkablePageLinks类，它是无状态的，这就意味着它并不需要去知道用户先前的请求是什么，来自于何方．
当所有的组件都在form上添加完后，还得告诉form当点提交按钮后要做什么操作．Wicket的form有一个默认的提交监听器，也就是说当你只有一个提交按钮的话，还是很管用的．
public void onSubmit() {
PageParameters params = new PageParameters();
params.add("q", getSearchString());
setResponsePage(ListContacts.class, params);
}
当form上所有的组件都验证通过并且模型对象更新完后，onSubmit() 方法的监听器就会被调用了．在上面的实现代码里，form提交后，searchString属性被装在PageParameters类里，PageParameters负责将存在里面的值封装成URL的query参数．最后，再调用setResponsePage(Class, PageParameters)方法，在这里我们把ListContacts作为请求后的响应Action.
SearchPanel建好后，我们看看与之相应的markup文件：
<wicket:panel>
<form wicket:id="searchForm">
<table>
<tr>
<td>Search</td>
<td>
<input wicket:id="searchString" type="text" name="search"/>
</td>
<td><input type="submit" value="Go" class="button"></td>
<td><a wicket:id="addContact" href="#">Add New Contact</a></td>
</tr>
</table>
</form>
</wicket:panel>
panel markup文件非常简洁并且与SearchPanel的结构是一致的．在它上面的form组件又有TextField和BookmarkablePageLink组件，而对于submit组件，我们不需要专门使用Wicket的submit，因为这里只有一个submit组件，我们使用了上文提到的默认监听器和onSubmit()方法．
接下来，我们需要更新一下BasePage类，将我们设计好的SearchPanel加入进去．（注意：Panel是不能单独使用的．）
public BasePage() { add(new StyleSheetReference("stylesheet",BasePage.class, "styles.css")); add(new SearchPanel("searchPanel"));
}
同样，BasePage的markup文件也需要更新一下：
<html>
<head>
<title>Introduction to Apache Wicket - Example Application</title>
<link wicket:id="stylesheet"/>
</head>
<body>
<h1>
My Contacts
</h1>
<span wicket:id="searchPanel"></span>
<wicket:child/>
</body>
</html>
除使用StyleSheetReference类外，我们还可以使用Wicket的HeaderContributor类或<wicket:link>元素．下面，我们来创建ListContacts页面，当然先从其Java类开始：
public class ListContacts extends BasePage {
public ListContacts(PageParameters params) {
final String searchString = params.getString("searchString");
IModel contactsModel = new LoadableDetachableModel() {
protected Object load() {
ContactDao dao = WicketApplication.get().getContactDao();
return dao.find(searchString);
}
};
ListView contacts = new ListView("contacts", contactsModel) {
protected void populateItem(ListItem item) {
Link view = new Link("view", item.getModel()) {
public void onClick() {
Contact c = (Contact) getModelObject();
setResponsePage(new ViewContact(c.getId()));
}
};
view.add(new Label("firstName",
new PropertyModel(item.getModel(), "firstName")));
view.add(new Label("lastName",
new PropertyModel(item.getModel(), "lastName")));
item.add(view);
item.add(new SmartLinkLabel("email",
new PropertyModel(item.getModel(), "email")));
item.add(new Link("edit", item.getModel()) {
public void onClick() {
Contact c = (Contact) getModelObject();
setResponsePage(new EditContact(c.getId()));
}
});
item.add(new Link("delete", item.getModel()) {
public void onClick() {
Contact c = (Contact) getModelObject();
WicketApplication.get().getContactDao().delete(c.getId());
setResponsePage(ListContacts.class);
}
});
}
};
add(contacts);
}
}
ListContacts实质就是一个ListView，它的markup文件包括了ListView组件的ID，它的作用就是将模型数据在markup文件上进行迭代输出．请看下面代码：
<div wicket:id="contacts" class="contact">
<table>
<tr>
<td>
<a wicket:id="view" href="#">
<span wicket:id="firstName"></span>
<span wicket:id="lastName"></span>
</a>
</td>
<td wicket:id="email"></td>
<td class="manage-contact-links">
<a wicket:id="edit" href="#">Edit</a>
<a wicket:id="delete" href="#">Delete</a>
</td>
</tr>
</table>
</div>
ListView的populateItem(ListItem)方法会作用到每一个被迭代的对象上，这样的话才能最终在页面相应的wicket:id中显示出来．当前迭代的对象在整个ListItem的getModel()和getModelObject()方法都是可见的，因此，我们可以很*的生成相应的label和link(SmartLinkLabel组件作为Wicket的扩展已经可以使用了)．现在我们更近一步的看看link是如何被添加到ListItem中去的：
Link view = new Link("view", item.getModel()) {
public void onClick() {
Contact c = (Contact) getModelObject();
setResponsePage(new ViewContact(c.getId()));
}
};
view.add(new Label("firstName",
new PropertyModel(item.getModel(), "firstName")));
view.add(new Label("lastName",
new PropertyModel(item.getModel(), "lastName")));
item.add(new Link("edit", item.getModel()) {
public void onClick() {
Contact c = (Contact) getModelObject();
setResponsePage(new EditContact(c.getId()));
}
});
item.add(new Link("delete", item.getModel()) {
public void onClick() {
Contact c = (Contact) getModelObject();
WicketApplication.get().getContactDao().delete(c.getId());
setResponsePage(ListContacts.class);
}
});
所有的link都可以得到ListItem所持有的模型，并且如果有必要的话，可以随时访问contact模型对象的属性．每个link都有相应的onClick()方法，用户在web页面点击时就会被调用到．比如说“view”和“edit”的link，先得到Contact模型对象的id属性，然后跳转到各自的相应页面――ViewContact和EditContact中去．这样的话“delete”link作用也类似，只不过当用户点击“delete”后，会直接返回ListContacts页面而已．
最后一部分火速跟进..................