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.
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.
2. Setup
To run a Wicket project, let’s add the following dependencies:
<dependency>
<groupId>org.apache.wicket</groupId>
<artifactId>wicket-core</artifactId>
<version>7.4.0</version>
</dependency>
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.
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 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 {
@Override
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 HelloWorld.java:
public class HelloWorld extends WebPage {
public HelloWorld() {
add(new Label("hello", "Hello World!"));
}
}
then HelloWorld.html:
<html>
<body>
<span wicket:id="hello"></span>
</body>
</html>
As a final step, add the filter definition inside the web.xml:
<filter>
<filter-name>wicket.examples</filter-name>
<filter-class>
org.apache.wicket.protocol.http.WicketFilter
</filter-class>
<init-param>
<param-name>applicationClassName</param-name>
<param-value>
com.baeldung.wicket.examples.HelloWorldApplication
</param-value>
</init-param>
</filter>
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.
Let’s access http://localhost:8080/HelloWorld/ in the browser. An empty page with the message Hello World! shall appear.
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>
<p>
Address: <span wicket:id="address">address</span>
</p>
On the Java side, let’s create the label:
Label addressLabel = new Label("address",
new PropertyModel<String>(this.address, "address"));
addressLabel.setOutputMarkupId(true);
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<>(
"cafes",
new PropertyModel<String>(this, "selectedCafe"),
cafeNames);
cafeDropdown.add(new AjaxFormComponentUpdatingBehavior("onchange") {
@Override
protected void onUpdate(AjaxRequestTarget target) {
String name = (String) cafeDropdown.getDefaultModel().getObject();
address.setAddress(cafeNamesAndAddresses.get(name).getAddress());
target.add(addressLabel);
}
});
The creation is similar to the label’s, the constructor accepts the wicket id, a model and a list of cafe names.
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.
