Wicket Hello World Example

A simple hello world example in Wicket, show the basic structure of Wicket web application.

Tools and technologies used in this article

Apache Wicket 1.4.17
Eclipse 3.6
Maven 3.0.3
JDK 1.6.0.13

1. Directory Structure

See the final directory structure of this Wicket hello world web application. In Wicket, you need to put all files “.html” and “.java” in a same package directory.

See figure below :

Follow below steps to create the entire directory structure.

2. Maven Quick Start

Create a simple web application via Maven.

mvn archetype:generate -DgroupId=com.mkyong.core -DartifactId=WicketExamples

 -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false

Now, it will create all the standard web folder structure.

3. Wicket Dependency

Add Wicket dependency in your Maven pom.xml file.

File : `pom.xml`

<project xmlns="http://maven.apache.org/POM/4.0.0"

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0

	http://maven.apache.org/maven-v4_0_0.xsd">

	<modelVersion>4.0.0</modelVersion>

	<groupId>com.mkyong.core</groupId>

	<artifactId>WicketExamples</artifactId>

	<packaging>war</packaging>

	<version>1.0-SNAPSHOT</version>

	<name>WicketExamples</name>

	<url>http://maven.apache.org</url>

	<dependencies>

		<dependency>

			<groupId>org.apache.wicket</groupId>

			<artifactId>wicket</artifactId>

			<version>1.4.17</version>

		</dependency>

		<!-- slf4j-log4j -->

		<dependency>

			<groupId>org.slf4j</groupId>

			<artifactId>slf4j-log4j12</artifactId>

			<version>1.5.6</version>

		</dependency>

	</dependencies>

	<build>

		<finalName>WicketExamples</finalName>

                <resources>

			<resource>

				<directory>src/main/resources</directory>

			</resource>

			<resource>

				<filtering>false</filtering>

				<directory>src/main/java</directory>

				<includes>

					<include>*</include>

				</includes>

				<excludes>

					<exclude>**/*.java</exclude>

				</excludes>

			</resource>

		</resources>

		<plugins>

			<plugin>

				<inherited>true</inherited>

				<groupId>org.apache.maven.plugins</groupId>

				<artifactId>maven-compiler-plugin</artifactId>

				<configuration>

					<source>1.6</source>

					<target>1.6</target>

					<optimise>true</optimise>

					<debug>true</debug>

				</configuration>

			</plugin>

		</plugins>

	</build>

</project>

Wicket need SLF4J !

You have to include the slf4j logging implementation, otherwise Wicket will be failed to start.

Wicket need resource filter

Remember to add the resource filter, Wicket puts all files in same package folder, if you didn’t define the resource filter to include everything “<include>*</include>” , “html”, “properties” or other resources files may failed to copy to the correct target folder.

4. Wicket Applications

In Wicket, most stuffs are work by convention, you don’t need to configure it. In this case, WebApplication returns a “Hello.class” as the default page, when Wicket see this “Hello.class“, it know the mark up “html” page should be “Hello.html“, and it should be able to find at the same package directory. This is why Wicket need you to put both “html” and “java” class together.

File : MyApplication.java – The main application entrance.

package com.mkyong;

import org.apache.wicket.Page;

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

import com.mkyong.hello.Hello;

public class MyApplication extends WebApplication {

	@Override

	public Class<? extends Page> getHomePage() {

		return Hello.class; //return default page

	}

}

File : Hello.java

package com.mkyong.hello;

import org.apache.wicket.PageParameters;

import org.apache.wicket.markup.html.basic.Label;

import org.apache.wicket.markup.html.WebPage;

public class Hello extends WebPage {

	private static final long serialVersionUID = 1L;

    public Hello(final PageParameters parameters) {

        add(new Label("message", "Hello World, Wicket"));

    }

}

File : Hello.html

<html>

    <head>

    </head>

    <body>

	  <h1>

        <span wicket:id="message">message will be replace later</span>

	  </h1>

    </body>

</html>

5. Wicket Filters

To make Wicket works, you need to register Wicket filters in your web.xml file.

File : web.xml

<?xml version="1.0" encoding="ISO-8859-1"?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"

	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee

	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"

	version="2.4">

	<display-name>Wicket Web Application</display-name>

	<filter>

		<filter-name>wicket.wicketTest</filter-name>

		<filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>

		<init-param>

			<param-name>applicationClassName</param-name>

			<param-value>com.mkyong.MyApplication</param-value>

		</init-param>

	</filter>

	<filter-mapping>

		<filter-name>wicket.wicketTest</filter-name>

		<url-pattern>/*</url-pattern>

	</filter-mapping>

</web-app>

6. Build it

All files are ready, build it with Maven.

mvn eclipse:eclipse -Dwtpversion=2.0

Import it into Eclipse and start the project.

7. Test It

Visit http://localhost:8080/WicketExamples/ , see figure :

Done.