Introduction

Most of us are familiar with the MVC type UI frameworks such as Struts and Spring MVC. They use a similar Model, View and Controller type architecture and each one has either XML or annotation type configuration. Apache Wicket uses a component based approach to web development and uses convention over configuration. After initial framework setup, the minimum two files a developer needs to create to create a web page are a Java class and an HTML file and that’s it, no scriptlets or JSP tags necessary. The convention is that the Java class and the HTML file need to have the same name and be in the same package. So the HTML file takes the place of a JSP, the Java class takes the place of Controller, and we’ll look briefly at Wicket’s Model concept in a bit.

Because Wicket is a component based framework, reusable components can be created that can be used on many different pages. For example, wicket has an HTML data table component which has sortable headers, paging and can be styled with CSS by simply creating an instance of it on a page, configuring it, and attaching a style sheet. At my current client, we use several of these data tables on a single page and we created our own component by wrapping it to simplify the API.

As another example a project exists called wiquery which wraps JQuery UI into Wicket components. So if I needed a JQuery UI date picker, all I would need to do is instantiate the component on the page and put an id in the HTML page. All the JavaScript is wrapped into that component so there is no need to write any (more on that in another post).

Framework Setup

Let’s take a quick look at the framework setup. Wicket provides a maven archetype to get started so there’s no need to start from scratch. We can start by going to the Wicket Quickstart Page and following the instructions. At the time of this writing, I used version 1.5-RC3. This archetype provides the web.xml, WebApplication class (configuration), and a simple web page. Here’s how we do that:

mvn archetype:generate -DarchetypeGroupId=org.apache.wicket 
-DarchetypeArtifactId=wicket-archetype-quickstart -DarchetypeVersion=1.5-RC3 
-DgroupId=org.acme.wicket.example -DartifactId=wicket-example 
-DinteractiveMode=false

Now, let’s take a look at the framework pieces that the above command gives us:

web.xml

Here all that is needed is the filter that directs the requests to Wicket:

<filter>
    <filter-name>wicket.wicket-example</filter-name>
    <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
    <init-param>
        <param-name>applicationClassName</param-name>
        <param-value>org.acme.wicket.example.WicketApplication</param-value>
    </init-param>
</filter>

<filter-mapping>
    <filter-name>wicket.wicket-example</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

WebApplication

The web application is the central configuration class. This is where the home page is set (the page that is loaded when a user goes to the base url) and other things (which we won’t get into in this post) like Spring integration, exception handling, security setup, and other configuration.

package org.acme.wicket.example;

import org.apache.wicket.protocol.http.WebApplication;

/**
 * Application object for your web application. 
 * If you want to run this application without deploying, 
 * run the Start class.
 *
 * @see org.acme.wicket.example.Start#main(String[])
 */
public class WicketApplication extends WebApplication {
	/**
	 * @see org.apache.wicket.Application#getHomePage()
	 */
	@Override
	public Class getHomePage() {
		return HelloWorldPage.class;
	}

	/**
	 * @see org.apache.wicket.Application#init()
	 */
	@Override
	public void init() {
		super.init();

		// add your configuration here
	}
}

The archetype also provides a simple home page class and HTML file (which I’m not going to post here).

A Simple Example

Let’s create a simple “Hello World” WebPage again the only two things we’ll need is a Java class and an HTML file, here’s the Java class:

package org.acme.wicket.example;

import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.link.Link;

public class HelloWorldPage extends WebPage {

	private static final long serialVersionUID = 1L;

	public HelloWorldPage() {
		add(new Label("helloWorld", "Hello World!!!"));

		add(new Link("nextPage") {
			private static final long serialVersionUID = 1L;

			@Override
			public void onClick() {
				setResponsePage(HomePage.class);
			}
		});
	}

}

Here’s the HTML file:

<html xmlns:wicket="http://wicket.apache.org">
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<div wicket:id="helloWorld">helloWorld goes here</div>
		<a wicket:id="nextPage">Go to the next page...</div>
	</body>
</html>

So what happened is the wicket:id was attached to an HTML tag and the content of that tag got replaced with “Hello World!!!”. This works with any HTML tag, we could have used a span, table td, even the body tag. A Label in wicket is the most basic component you can use to display some value, but there are many other components that work this way and will replace a div or span with an HTML table or Ajax Tree view (Wicket AJAX is another post). Most built in components will take what’s called a Model which allows a lot of flexibility in how to display data on the page. I’ll go into more detail about it in another post. A link was also created to link to another web page, but links can be used in other ways also.

In addition to pages, Wicket has the concept of a Panel which is a section of a web page. A panel can be placed anywhere on a page inside any tag (as mentioned above). A page can have many panels on it and a panel could have panels on it, so there is a lot of flexibly in how pages are created. At my current client we have a single page website with panels for the header, left navigation and content and we only replace the content panel when we create new screens (like a mini-portal).

Conclusion

I hope you are inspired to try out this framework. I’ve really enjoyed working with it at my client and it’s made web development fun. It’s hard to show the true value of this framework with such a simple example, but it really shows as a project goes along. Creating a new custom component is a lot cleaner than copying bits of XML and JSP around and it really shines as a more and more reusable components are created. Just the fact that you can use wiquery to create multiple JQuery UI components on a single page without writing a line of JavaScript has a lot of value.

Thank you for reading and look for more posts on Apache Wicket in the near future.