Wicket: Full guide for NetBeans


This article presents how a complete wicket project is built from ground-up in NetBeans.

Go through steps 1-3 to setup a wicket project.

Go through step 4 to create a page.

Go through steps 5-7 to deploy, test and debug the page according to your development methodology.

1. Create a web project

File → New Project… → Java Web → Web Application → Next.

New Project dialog in NetBeans

New Project dialog in NetBeans

Give the project a name, e.g. WicketFun and click Next.

New Web Application dialog in NetBeans

New Web Application dialog in NetBeans

Accept the embedded GlassFish server by clicking Finish.

Server Settings of a project in NetBeans

Server Settings of a project in NetBeans

The project should appear in the Projects tab.

Handy Project tab of NetBeans

Handy Project tab of NetBeans

2. Concentrate all jars

Download wicket from wicket.apache.org → Releases → Wicket 1.4 → Select an appropriate mirror and get apache-wicket-1.4-m3.zip

Download simple logging facade from slf4j.org → Download → slf4j-1.5.2.zip

Create a folder and place inside the following:

  • apache-wicket-1.4-m3\lib\wicket-1.4-m3.jar
  • slf4j-1.5.2\slf4j-simple-1.5.2.jar
  • slf4j-1.5.2\slf4j-api-1.5.2.jar

Add these jars to the classpath by right clicking on the project → Properties → Libraries → Add JAR/Folder

Some extensions of great interest are the date-time functionality (wicket-datetime-1.4-m2.jar) and the interface to Spring (wicket-spring-1.4-m2.jar).

3. Make the WebApplication

Wicket’s starting point is a WebApplication.

Right click on project → New → Java Class… → Provide the name MyApplication, the package application and click Finish.

New Java Class dialog in NetBeans

New Java Class dialog in NetBeans

This class should extend WebApplication and implement getHomePage() method.

package application;

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

public class MyApplication extends WebApplication {

    @Override
    public Class getHomePage() {
        return null;
    }

}

For the time being just let it return null.

In the Projects tab navigate to WicketFun → Web Pages → WEB-INF → double-click on web.xml → XML and paste the following elements

<filter>
   <filter-name>WicketApplication</filter-name>
   <filter-class>org.apache.wicket.protocol.http.WicketFilter</filter-class>
   <init-param>
      <param-name>applicationClassName</param-name>
      <param-value>application.MyApplication</param-value>
   </init-param>
</filter>
<filter-mapping>
   <filter-name>WicketApplication</filter-name>
   <url-pattern>/*</url-pattern>
</filter-mapping>

Alternatively, you may go to Filters → Add Filter Element… button to declare it manually. Here’s how web.xml should look.

Viewing the source of web.xml in NetBeans

Viewing the source of web.xml in NetBeans

4. Make a page

Let’s call it Hello. We should create Hello.html and Hello.java! As simple as it gets.

Right click on project → New → Java Class… → Provide the name Hello, the package pages and click Finish.

This class should extend WebPage and provide a default no-arg constructor.

package pages;

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

public class Hello extends WebPage {

    public Hello() {
        // wicket action here
    }

}

Right click on project → New → HTML… → Provide the name Hello select Source Packages as the location and click Browse…

New HTML file dialog in NetBeans

New HTML file dialog in NetBeans

Select Source Packages → double-click on pages.

Specifying where to store the HTML file in NetBeans

Specifying where to store the HTML file in NetBeans

In this way the html file will be bundled in the same directory with the class. Just press Finish to complete.

Let’s make this page simply display a random number.

<html>
  <body>
      This is the current number: <span wicket:id="number"></span>
  </body>
</html>

Back to the class for some action.

package pages;

import java.util.Random;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;

public class Hello extends WebPage {

    public Hello() {
        Integer random = new Random().nextInt();
        add(new Label("number", random.toString()));
    }

}

5. Declare the home page

Every time you create a page you’d like to test it.

Just go to the getHomePage() of your WebApplication and make it return your page.

package application;

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

public class MyApplication extends WebApplication{

    @Override
    public Class getHomePage() {
        return Hello.class;
    }

}

In this way when the application context is called on the browser, e.g. http://localhost:8080/WicketFun, this page will be called.

6. Run the page

Right click on the project → Run

Hit the refresh button a few times to see various random numbers.

A simple Wicket page that displays a random number

A simple Wicket page that displays a random number

7. Debug the page

Wicket keeps the java code totally independent from the HTML markup. This design makes debugging easy.

Make a breakpoint by clicking on the left of the desired line.

Right click on the project → Debug

Placing a breakpoint in the Java editor of NetBeans

Placing a breakpoint in the Java editor of NetBeans

Review

Wicket is an enjoyable frameword that fits well in NetBeans.

  • Every web application IS-A WebApplication.
  • Every page IS-A WebPage.
  • Every html file has an associated java file.

3 Responses to Wicket: Full guide for NetBeans

  1. Vic says:

    I have done all in the article, but I can’t get the right website. It is 404 wrong. I am just try to learn the wicket. I have spent two days on eclipse to run the helloWorld and all fails.
    Would you give me some help??
    I really appreciate it.

  2. Vic says:

    I wonder that why not use the Wicket framework when create the project and how to do more in you way.

  3. dana says:

    @Vic – it should work for Netbeans, with the specifications, not in Eclipse!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: