Working with REAL Java Objects

Tutorial - Apache Wicket: The Fun Web Framework - Part 2

      

How to get started

Without further ado, how do you jump right in and try Wicket out? If you have Maven installed, it could not be any easier. Simply jump over to http://wicket.apache.org/start/quickstart.html, fill in your desired package group and artifact ID's and run the provided command. A working quick-start application will be generated for you. Running mvn eclipse:eclipse (or the equivalent for your IDE) will set up the project dependencies. If you are using Eclipse go to the file menu, select Import, then Import an existing project and select the directory where your quickstart was generated. Find the Start.java file, open it, and run it. Navigate to http://localhost:8080 and you will see your “hello world” application in action. By running the Start class in your IDE's debug mode (Eclipse: Debug as | Java application) instead of the normal run mode, you will be able to set breakpoints and debug your application to see how it works. For more complex quick-start applications featuring Spring, Guice, JPA, et cetera, see jWeekend's excellent LegUp resources.

Hello World

The “hello world” part is already done for you by the archetype. So, let's create a simple example of a link that increments a counter on the page. To get started (assuming you have the simple quickstart above running), find the HomePage.java and HomePage.html files and open them in your editor. Note that unless otherwise mentioned, all examples in this article will be based on the latest stable release, 1.4.18 (at the time of writing)

Let's look at the HTML first. The first thing that you probably notice is that it is just regular HTML. This is by design. Markup should not contain logic – that's Wicket's philosophy. To tie a piece of markup to corresponding Java code that controls it you simply add the wicket:id attribute to it. We had two things in this markup that were dynamic. The most obvious was the link. The second is a span that renders the value of the counter on each page render. We use a span tag simply because we need a markup placeholder for the value to be inserted, and a span tag will not disrupt the structure of our other markup.

HomePage.html

 

<html xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd" >
    <head>  
        <title>Wicket Quickstart Archetype Homepage</title>
    </head>
    <body>
        <strong>Wicket Quickstart Archetype Homepage</strong>
        <br/><br/>
        Click <a href="#" wicket:id="increment">this link</a> to increment 
        the following counter:<br />
        Counter: <span wicket:id="counter">123</span>
    </body>
</html>

 

Now, let's look at the associated Java code. The first thing you should note is the name and placement of the files. By default, for any Wicket component (pages, as we are using here, are also components, so the same rule applies), Wicket will look in the same package directory on the classpath for a file with the same name, with the extension .html (if you are rendering XML, this would still apply, but with a .xml extension). This behavior can be re-configured, but for this article we will not get into that. There are online resources that can assist you with that if needed.

When you examine the actual code, you will see several parts. The first thing you see is the counterModel. You notice that it implements IModel. Models are extremely important in Wicket. They're also generally one of the least understood concepts when programmers first adopt Wicket. We'll discuss them more later. For now, suffice to say that they are a wrapper for retrieving or setting a piece of data, and this AbstractReadOnlyModel, as its name implies, is simply a wrapper for retrieving data. We implement the getObject method to retrieve the current value of counter on every invocation. This model is then passed to a Component. In this case the component is a Label. A label simply takes whatever tag it is associated to in the markup and replaces the body of that tag with the value retrieved from the model it is given. In this case, our span tag will replace “123” (its static body in the markup) with the value of our counter, which on the first page render will be zero.

The next thing you see is the link. It gives you just a glimpse of the power of Wicket. We're using an anonymous inner class here to implement the link. If you had multiple places in your application that needed to increment an integer, you could replace this with a concrete class simply by extracting the anonymous inner class into a real top-level class.

Now, look at how simple it is to implement an action of any sort on a link. You simply override the onClick method and put your business logic in there. Obviously incrementing a counter is a simple example, but you could just as easily call a service- layer method that deleted or edited something in your domain, sent an email, or made a web service call. Wicket does the hard part for you. You implement the logic and you don't have to worry about how to get a URL that will indicate to run that small bit of logic. You don't have to worry about where to store the current state of the counter. All you have to do is write your code that performs the work that your application is designed to do. That's why I love Wicket!

 HomePage.java

 

public class HomePage extends WebPage {
    private static final long serialVersionUID = 1L;

    private int counter = 0;
    
    public HomePage() {
        IModel<Integer> counterModel = new AbstractReadOnlyModel<Integer>() {
            private static final long serialVersionUID = 1L;

            @Override
            public Integer getObject() {
                return counter;
            }
        };

        Label label = new Label("counter", counterModel);
        add(label);
        
        Link<Void> link = new Link<Void>("increment") {
            private static final long serialVersionUID = 1L;

            @Override
            public void onClick() {
                counter++;
            }
        };
        add(link);
    }
}

 

        

Pages

Jeremy Thomerson
Jeremy Thomerson

What do you think?

JAX Magazine - 2014 - 06 Exclucively for iPad users JAX Magazine on Android

Comments

Latest opinions