Introduction to the Wicket Framework – Wicket框架简介

最后修改: 2016年 10月 10日


1. Overview


Wicket is a Java server-side web component-oriented framework that aims at simplifying building web interfaces by introducing patterns known from desktop UI development.

Wicket 是一个面向Java服务器端Web组件的框架,旨在通过引入桌面UI开发中已知的模式来简化Web界面的构建。

With Wicket it is possible to build a web application using only Java code and XHTML compliant HTML pages. No need for Javascript, nor XML configuration files.


It provides a layer over the request-response cycle, shielding from working at a low level and allowing developers to focus on the business logic.


In this article, we will introduce the basics by building the HelloWorld Wicket application, followed by a complete example using two built-in components that communicate with each other.

在这篇文章中,我们将通过构建HelloWorld Wicket应用程序来介绍基础知识,然后是一个使用两个相互通信的内置组件的完整例子。

2. Setup


To run a Wicket project, let’s add the following dependencies:



You may want to check out the latest version of Wicket in the Maven Central repository, which at the time of your reading may not coincide with the one used here.

你可能想看看Maven Central仓库中的Wicket最新版本,在你阅读时,该仓库可能与这里使用的版本不一致。

Now we are ready to build our first Wicket application.


3. HelloWorld Wicket


Let’s start by subclassing Wicket’s WebApplication class, which, at a minimum, requires overriding the Class<? extends Page> getHomePage() method.

我们先从Wicket的WebApplication类的子类开始,这至少需要覆盖Class<? extends Page> getHomePage()方法。

Wicket will use this class as application’s main entry point. Inside the method, simply return a class object of a class named HelloWorld:


public class HelloWorldApplication extends WebApplication {
    public Class<? extends Page> getHomePage() {
        return HelloWorld.class;

Wicket favors convention over configuration. Adding a new web page to the application requires creating two files: a Java file and an HTML file with the same name (but different extension) under the same directory. Additional configuration is only needed if you want to change the default behaviour.


In the source code’s package directory, first add the


public class HelloWorld extends WebPage {
    public HelloWorld() {
        add(new Label("hello", "Hello World!"));

then HelloWorld.html:


        <span wicket:id="hello"></span>

As a final step, add the filter definition inside the web.xml:



That’s it. We have just coded our first Wicket web application.


Run the project by building a war file, (mvn package from the command line) and deploy it on a servlet container such as Jetty or Tomcat.

通过建立一个war文件来运行该项目,(mvn package来自命令行)并将其部署在一个Servlet容器上,如Jetty或Tomcat。

Let’s access http://localhost:8080/HelloWorld/ in the browser. An empty page with the message Hello World! shall appear.

让我们在浏览器中访问http://localhost:8080/HelloWorld/。会出现一个空的页面,上面写着Hello World!将出现。

4. Wicket Components


Components in Wicket are triads consisting of a Java class, the HTML markup, and a model. Models are a facade that components use to access the data.


This structure provides a nice separation of concerns and by decoupling the component from data-centric operations, increases code reuse.


The example that follows demonstrates how to add Ajax behaviour to a component. It consists of a page with two elements: a dropdown menu and a label. When the dropdown selection changes, the label (and only the label) will be updated.


The body of the HTML file CafeSelector.html will be minimal, with only two elements, a dropdown menu, and a label:


<select wicket:id="cafes"></select>
    Address: <span wicket:id="address">address</span>

On the Java side, let’s create the label:


Label addressLabel = new Label("address", 
  new PropertyModel<String>(this.address, "address"));

The first argument in the Label constructor matching the wicket:id assigned in the HTML file. The second argument is the component’s model, a wrapper for the underlying data that is presented in the component.


The setOutputMarkupId method makes the component eligible for modification via Ajax. Let’s now create the dropdown list and add Ajax behavior to it:


DropDownChoice<String> cafeDropdown 
  = new DropDownChoice<>(
    new PropertyModel<String>(this, "selectedCafe"), 
cafeDropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
    protected void onUpdate(AjaxRequestTarget target) {
        String name = (String) cafeDropdown.getDefaultModel().getObject();

The creation is similar to the label’s, the constructor accepts the wicket id, a model and a list of cafe names.

创建过程与标签类似,构造函数接受wicket ID、模型和咖啡馆名称的列表。

Then AjaxFormComponentUpdatingBehavior is added with the onUpdate callback method that updates the label’s model once ajax request is issued. Finally, the label component is set as a target for refreshing.


Finally, the label component is set as a target for refreshing.


As you can see everything is Java, not a single line of Javascript was necessary. In order to change what the label displays we simply modified a POJO. The mechanism by which modifying a Java object translates to a change in the web page happens behind the curtains and is not relevant to the developer.


Wicket offers a big set of AJAX-enabled components out-of-the-box. The catalog of the components with live examples is available here.


5. Conclusion


In this introductory article, we’ve covered the basics of Wicket the component-based web framework in Java.


Wicket provides a layer of abstraction that aims to do away entirely with the plumbing code.


We’ve included two simple examples, which can be found on GitHub, to give you a taste of what development with this framework looks like.