Wicket WebFramework - Basic Tutorial

calling cards | international calling cards | phone card

SCJA SCJP 1.4 SCJP 5.0 SCJP 6.0 SCWCD SCWCD 5.0 SCBCD SCBCD 5.0 SCDJWS SCEA SCEA 5.0 IBM XML SCMAD IBM WebSphere 287

Java 5.0 Java 6.0 (Mustang) Java 7.0 (Dolphin) JSP Servlets EJB EJB 3.0 Design Patterns

Struts Spring JSF JBoss Seam Stripes Tapestry Wicket AJAX Hibernate Top Link iBatis

Eclipse NetBeans Ant Log4j Maven HiveMind

Java J2EE JSP Servlets EJB JDBC RMI JMS JNI Java Server Faces(JSF) Design Patterns Exception FAQs Spring FAQs Hibernate FAQs

Search JavaBeat

JAVABEAT

home

articles

tips

QnA

Books

forums

ARTICLE TOPICS

All Articles

Java 5.0

Java 6.0

EJB 3.0

JCA

Struts

JSF

Spring

Groovy

JBoss Seam

Hibernate

Eclipse

JavaFx

Google Guice

J2ME

GWT

WebServices

AJAX

My first application

The Wicket application we are going to develop is the ubiquitous 'Hello, World!' application. Simply put, we will create a web page using Wicket technology for printing the 'Hello, World!' string on a web page.
In the second release, some interactivity will be added to show how to do simple form related component development.

The goal is to generate the following markup:

<html>
<body>
Hello, world!
</body>
</html>

The HTML

Even though the requested result is so simple, there are many ways to achieve it. In this example we will use a rendering component called 'Label' to create the text 'Hello, World!'. So basically we have two things to consider:

the html page
the label component

The markup for the HTML page is the same as earlier:

<html>
<body>
Hello, world!
</body>
</html>

It is of course possible to add header information, apply style sheets, put javascript in there, etc. For the sake of the example, this is omitted.

Using this html-code is cheating, since we don't generate the required string, but have hard coded it in the html page.
In order to have Wicket render the text through a component, we need to tell Wicket which piece of the web page is a component. In this case we can replace the text with a label component definition.

<html>
  <body>
    <span wicket:id="message">Message goes here!</span>
  </body>
</html>

We have used the span element to markup the component and the wicket:id attribute to identify the component.

What we have accomplished until now is not enough to show the message in a web page. We have only told Wicket where to render the label component in the web page. In the next section we will show how to tell Wicket to render the message.

The Java code

In Wicket creating a web page consists of two tasks: creating the markup in which the components are defined and other information is shown, and creating Java classes to couple the web page to the required functionality. In the case of this example, we need to tell Wicket it needs to render the Label component. We also need to tell the label component to render the text 'Hello, World!'. In this section we will perform these steps one at a time.

First we need to create a web page. Wicket has a WebPage class suited for this task. All webpages need to be subclasses of WebPage. Another requirement is that the actual html file and the class name are equal: Index.html and Index, IndexPage.html and IndexPage or HelloWorld.html and HelloWorld. They also need to be in the same place on the classpath. The best way to develop is to put them in the same directory. This might seem strange in the beginning, especially when you are accustomed to separate html files and java files. However, since all pages are actually just components, it makes perfect sense in terms of reusability.

import wicket.markup.html.WebPage;
import wicket.markup.html.basic.Label;

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

When you add components, you need to give them an id in the form of a string. In the above example, our component's id is 'message'. The id should be unique within it's own scope. In other words, no siblings are allowed with the same id.

When the markup is rendered, the id's of tags are matched against the component ids. Thus

<span wicket:id="message">Message goes here</span>

will look for a component with the id 'message' in the current scope.

Besides having an id, components also have a model. What the model is actually used for depends on the component. In this case, the model's contents (the string "Hello World!"), are used for the replacement of the body of the span tag. Models must implement wicket.model.IModel. There are a lot of components that have convenience constructors that construct a proper model for you. With labels, you can just provide a string, which is then wrapped into a simple model for the label to use.

Generally, you use models for the 'flexible' part of components, while it is best practice to keep your components immutable.

One more thing we need to get our example running is an Application object. You only need one for an application, and it can serve as a place to do the configuration for the application.

Our application could look like this:

package mypackage;

import wicket.protocol.http.WebApplication;

public class HelloWorldApplication extends WebApplication
{
    public HelloWorldApplication()
    {
        getPages().setHomePage(HelloWorld.class);
    }
}

NOTE: Beginning with release 1.2 the homepage is set by overriding getHomePage(). Therefore the above becomes:

package mypackage;

import wicket.protocol.http.WebApplication;

public class HelloWorldApplication extends WebApplication
{
    public Class getHomePage()
    {
        return HelloWorld.class;
    }
}

Sidenote: To see changes to template files immediatelly, overload the init() method of the WebApplication class by specifying that you are in development mode - remember to comment out in production:

// the second parameter is the path to your template files
  // prefixed by wicket with the web root directory (e.g. /webapp)
  // (Default wicket configuration assumed)
  public void init()
  {
    configure("development", "/");
    // Pre 1.2 getSettings().configure("development", "/");
  }

The preferred version 1.2 way is to include the following snippet in your web.xml or
to use a system property -Dwicket.configuration

<context-param>
  <param-name>configuration</param-name>
  <param-value>development</param-value>
</context-param>

web.xml configuration

To load our application and have it available, we need to add the following lines to web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC
   "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

<context-param>
  <param-name>configuration</param-name>
  <param-value>development</param-value>
</context-param>

<servlet>
  <servlet-name>HelloWorldApplication</servlet-name>
    <servlet-class>wicket.protocol.http.WicketServlet</servlet-class>
    <init-param>
      <param-name>applicationClassName</param-name>
      <param-value>mypackage.HelloWorldApplication</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
  <servlet-name>HelloWorldApplication</servlet-name>
  <url-pattern>/helloworld/*</url-pattern>
</servlet-mapping>

</web-app>