Wicket Hello World

Updated

Apache Wicket is a component based Java web framework for web application development. Creating sites with Wicket is easy and fast since the default components included in the framework cater most needs. For example, page updates with Ajax are easy to achieve since the framework handles it for you, you don’t need to write any Javascript.

But before we get to the more advanced stuff, let’s start with a simple hello world project. This tutorial shows how to setup Wicket and how to create a simple page. I’m using Wicket 6.3.0 in this tutorial, which is the most recent version at the time of writing.

First you need to create a project and add the Wicket jars. I’m using Eclipse and my project layout is shown in the attached picture. The minimum Wicket installation requires four jars: wicket-core, wicket-request, wicket-util and slf4-api for logging. Put them to the WEB-INF/lib directory (or equivalent).

Every Wicket project needs an application class. Application class is where Wicket is set up and it sets the starting point for the whole project. HelloWorldApplication class is shown below:

package net.korri.tutorial.wicket.helloworld;
 
import org.apache.wicket.Page;
import org.apache.wicket.protocol.http.WebApplication;
 
public class HelloWorldApplication extends WebApplication {
 
  @Override
  public Class<? extends Page> getHomePage() {
    return HomePage.class;
  }
}

HelloWorldApplication extends WebApplication and implemets the required method, getHomePage. As the name implies, getHomePage returns the home page class of this project. Home page is the start page of the project and it is shown when a request is made to the root. In this case the home page class is named as HomePage and the code and the markup are shown below:

package net.korri.tutorial.wicket.helloworld;
 
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
 
@SuppressWarnings("serial")
public class HomePage extends WebPage {
 
  public HomePage() {
    add(new Label("header", "Hello world!"));
  }
}

The markup:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Wicket Hello World</title>
  </head>
  <body>
    <h1 wicket:id="header">This text gets overwritten</h1>
  </body>
</html>

In Wicket all markup containers (pages, panels etc) are split into two parts, the code and the markup. The files must have matching names and they have to reside in the same package.

Code wise the HomePage class is very simple. The constructor does only one thing, it adds a Label to the page. A Label class is used to output text to a page. Label takes two parameters, a Wicket id and the text to output. Every component in Wicket must have a non-null id and the same id must be found in the markup. In this case the id “header” links the Label instance to the h1 tag.

When Wicket processes the page, the second parameter given to the Label is written to the h1 tag in the markup. The h1 tag already contains some text but Wicket overwrites it with the parameter string.

That’s the basics of Wicket. You add components in Java code and link them to html tags with ids.

One thing still missing from our project is setting up the web.xml file. Below is the web.xml listing:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  id="WebApp_ID" version="2.5">
 
  <display-name>wicket-helloworld</display-name>

  <filter>
    <filter-name>HelloWorldApplication</filter-name>
    <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
    <init-param>
      <param-name>applicationClassName</param-name>
      <param-value>net.korri.tutorial.wicket.helloworld.HelloWorldApplication</param-value>
    </init-param>
  </filter>
 
  <filter-mapping>
    <filter-name>HelloWorldApplication</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
 
</web-app>

The listing is pretty basic stuff. Wicket requires only one filter and a corresponding filter-mapping tag in web.xml. The applicationClassName parameter for the WicketFilter class sets the application class to use. In our case we use the HelloWorldApplication which sets HomePage class as the home page.

Now when you save the files and run the code on a web application server, like Tomcat, you should see a page with big Hello World! text on it. And that’s all there is to setting up Wicket.

Source code for the whole example project is available here .