Develop a simple Web application with and Combine Wicket, Geronimo, and to form an open source Web development platform

Skill Level: Intermediate

Robi Sen ([email protected]) Vice President Department 13 LLC

10 Jul 2007

Apache Wicket is an innovative Java™ Web application framework that was introduced a couple of years ago. It helps simplify Web application development by clearly separating the roles of developers and designers. It lets you remove logical code from the view layer, eliminating the need for JavaServer Pages (JSP), providing a simple (POJO)-centric mode of development, and removing much of the need for XML and other configuration file formats. In this tutorial, learn how to set up your system to develop a simple Web application with Wicket, using Apache Geronimo as your application server and Apache Derby as the embedded database.

Section 1. Before you start

This tutorial is designed for developers who have found Java frameworks, such as Struts, lacking in needed functionality. If you're interested in developing Web applications in a more object-oriented manner, where the view is clearly separated from logic and there's minimal configuration and mapping, then Wicket is for you!

This tutorial walks you through the basics of how Wicket works, while using Apache Geronimo to set up a Java Platform, Enterprise Edition (Java EE) server, Web server, and embedded database in just minutes. Combining Wicket with Geronimo lets you develop data-driven, scalable Web applications using software that's all open source.

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 1 of 27 developerWorks® ibm.com/developerWorks

About this tutorial

Developing Java Web applications can be awkward and frustrating. For years developers have tried to solve problems with Java application development by creating frameworks that solve specific problems. But few have been able to simplify Web development, separate roles, clearly separate the view from the model and remove special markup, and define a totally POJO-centric model of development — until now. Enter Apache Wicket.

Wicket, an innovative Java Web application framework introduced a couple of years ago, simplifies Web application development by clearly separating roles of developers and designers, in part by removing logical code from the view layer. This simple and pure approach to Model-View-Controller (MVC) development, coupled with its simple development workflow that lacks XML configuration files, make Wicket a powerful and enjoyable development framework. It solves a number of development challenges, allowing you to focus more on functionality and less on the application configuration.

In this tutorial, you zero in on how to set up and configure a project to use the Wicket framework with Databinder, which allows Wicket and to work nicely together. You combine these applications with the Apache Derby embedded database to create a simple Web application in record time. From there, you learn how to deploy your application on Geronimo.

System requirements

You need the following tools to follow along with this tutorial:

• Apache Geronimo 2.0-M2 with Tomcat 6 — Geronimo is the Java EE application server that you deploy to. • An operating system — This application was developed using Microsoft® Windows® XP, but everything involved has been widely used on Linux® and OS X. So you should be able to follow the tutorial using platforms other than Windows. • Java JDK 1.5 or later — Java 1.5_11 was used to develop all the code in this tutorial, but 1.5 and later JDKs should work. • Embedded database — This tutorial uses Apache Derby, the lightweight, 100% Java-based database. Because Geronimo already has Derby built in, you don't need to download anything. • — In this tutorial, you use Eclipse 3.2 as the IDE. It's not required, but it greatly simplifies your development process. • 2 — You use Maven 2 in this project to automatically gather required files and build projects.

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 2 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

• Databinder — A lightweight utility written by Nathan Hamblen, Databinder is a tool that lets Wicket and Hibernate work together extremely well, greatly simplifying development of data-driven Wicket applications.

Section 2. Setting the stage

Few Java Web application developers would argue that developing Java Web applications is a straightforward, simple-to-manage, and delightful process. Often Java Web application frameworks, while solving many problems, end up being brittle and difficult to change after their initial development. Furthermore, many frameworks — while espousing separation of concerns and decoupling of logic from presentation — often mix logic and presentation, thus forcing developers to manage overly complex XML files used in configuration and mapping.

Wicket solves all of these problems in a novel and elegant way by using only plain HTML on the view layer and POJOs for everything else. Wicket in part solves this problem by extending HTML in a compliant way by introducing the Wicket namespace (wicket:id), which allows Wicket to map specific dynamic functionality to areas of your Web site and associate them with specific models represented by a Java class and subclasses.

For most people, the easiest way to learn is by doing, so let's set up an environment and start building your Wicket application. To get started, you need to download Maven 2, which you use to streamline the setup and creation of your Wicket project. You also need to download and set up Geronimo, and finally, if you're not already using it, Eclipse. Download links are available in the System requirements section.

Install Java 1.5

Before you do anything, make sure you have Java JDK 1.5 installed on your system and the environment variables PATH pointing to your JDK bin directory. You must also have the Java environment variable JAVA_HOME pointing to your Java install directory.

Set up Geronimo

For this tutorial, you use Apache Geronimo not only as your Java application server, but also as your database server. Geronimo is a fully compliant Java 2 Platform, Enterprise Edition (J2EE)-certified server that includes an implementation of a servlet container, an Enterprise JavaBeans (EJB) container, a Java Message Service (JMS) provider, a J2EE Connector architecture (JCA) container, and the lightweight Derby database, all licensed under the .

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 3 of 27 developerWorks® ibm.com/developerWorks

Setting up Geronimo is simple. To install it:

1. Download it, and unpack it to a directory. For this example, you use C:\geronimo, but you can unpack it anywhere you want.

2. After it's unpacked, there are two ways you can start Geronimo: • Go to the bin directory where you placed Geronimo, which in this case is C:\geronimo\bin, and type java -jar server.jar. • Simply call the startup.bat in the bin directory, or double-click it. The Geronimo server should now start up.

3. After it's started, you can test that everything is working correctly by going to http://localhost:8080/, where you should see something like Figure 1. Figure 1. Successful startup of the Geronimo server

Note: The Geronimo server will want to use port 8080 for the server, and

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 4 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

if you know that port is already being used, you'll need to edit the config. file, which you can find in C:\geronimo\var\config. For more information about installing Geronimo, refer to the Apache Geronimo wiki (see Resources for a link).

Now that you have Geronimo working, it's time to use Maven to set up your environment for working with Wicket.

Install and test Maven 2

For this tutorial to help you set up and configure your projects, you're going to use Maven 2 (see System requirements for a link). Maven is a software-management tool that provides a wealth of functionality, from helping manage dependencies to providing project reporting. You need to be connected to the Internet while using Maven.

1. Get the Maven binary (see System requirements for a link), and install the 2.0.7 binary according to the instructions.

2. To test it, open a command prompt, and type mvn -version. You should see something like Maven version: 2.0.7.

Now you need to download all the prerequisite JAR files for your project and set up the initial Wicket project. Almost everything you need for this tutorial is automatically downloaded by Maven, except for two JAR files. One is the Sun Java Transaction API (JTA), which, for licensing reasons, can't be held there.

3. For this file, you need to go to the Sun JTA page, select Class Files 1.0.1B, and download it.

4. After it's downloaded, navigate to that download directory, and either type or paste the code shown in Listing 1 into a command shell prompt. Listing 1. Adding Sun JTA to your local Maven repository

mvn install:install-file -DgroupId=javax.transaction -DartifactId=jta -Dversion=1.0.1B -Dpackaging=jar -Dfile=jta-1_0_1B-classes.zip

This should add the JTA to your local Maven repository. Now you need to set up and create a Databinder project. Databinder is the toolkit that makes working with Hibernate and Derby from Wicket much easier (see System requirements for a link).

5. To create the Databinder project, type or paste the commands in the command prompt (see Listing 2) in a directory in which you want to create

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 5 of 27 developerWorks® ibm.com/developerWorks

the new project. For this tutorial, I assume you'll use c:\projects, but you can do this anywhere in your file system. Listing 2. Create the Databinder project

mvn archetype:create -DarchetypeGroupId=net.databinder -DarchetypeArtifactId=data-app -DarchetypeVersion=1.0 -DgroupId=developerworks -DartifactId=ToDo

Note: The DartificatId is essentially what you want your project to be called, and the DgroupId is usually something unique, such as your company, organization, or domain name.

You should see something like Figure 2 when your project is created.

Figure 2. Databinder archetype being created by Maven 2

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 6 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

Now that your resources and project have been set up, you can move on to the next section where you configure your project to easily import it into Eclipse.

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 7 of 27 developerWorks® ibm.com/developerWorks

Set up Eclipse

Now that the archetype is created, you can set it up so you can work with it from Eclipse. Here I assume you're using Eclipse 3.2, but 3.1 should work fine.

1. To prepare this project to be imported into Eclipse, you need to first add the Maven repository to your Eclipse workspace (here I'm assuming it's in C:\projects), like this: mvn -Declipse.workspace=/projects eclipse:add-maven-repo.

2. Now tell Maven to get all of the Databinder dependencies, source, and so on by first changing the ToDo directory that was created previously when you created the project, and either typing or pasting the following command: mvn -Declipse.downloadSources=true eclipse:eclipse. This may take a while, depending on your Internet connection, because Maven downloads all the files and dependencies you need to a local repository so that you can build your application later. You should see something like Figure 3. Figure 3. Maven downloading and configuring the ToDo project before importing into Eclipse

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 8 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

3. When the download is complete, start Eclipse, and choose File > Import.

4. Select Existing Projects into Workspace, then select the ToDo

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 9 of 27 developerWorks® ibm.com/developerWorks

directory. This should add the ToDo project to your Eclipse IDE.

In the next section, you make a few more changes to your configuration so that you can get started developing the Wicket application.

Final steps

You have only a few more steps to complete before you can start development:

1. Add a directory called lib under ToDo\src\main\webapp\WEB-INF, and place a copy of the derbyclient.jar (which can be found in C:\geronimo\repository\org\apache\derby\derbyclient\10.2.2.0) in the directory.

2. Edit the hibernate.properties file found in ToDo\src\main\java\developerworks so that it looks like Listing 3. This is necessary for Hibernate to interact with Derby. Listing 3. Edit the hibernate.properties file

hibernate.dialect=org.hibernate.dialect.DerbyDialect hibernate.connection.driver_class=org.apache.derby.jdbc.ClientDriver hibernate.connection.url=jdbc:derby://localhost:1527/ToDo;create=true hibernate.connection.username=admin hibernate.connection.password=admin

3. Go to ToDo\target and open pom.xml with the text editor option in Eclipse. Make sure you have the code from Listing 4 added to your pom.xml file, and make sure your pom.xml file looks like Listing 5. Listing 4. Dependency

org.apache.derby derby 10.2.2.0

Listing 5. Updated pom.xml

4.0.0 developerworks ToDo org.apache.maven.plugins maven-compiler-plugin

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 10 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

1.5 1.5 org.mortbay. maven-jetty-plugin 10 org.apache.commons.logging.Log org.apache.commons.logging.impl. SimpleLog maven-release-plugin svn://localhost/todo/ src/main/java ** **/*.java war 1.0-SNAPSHOT Databinder Application net.databinder databinder 1.0 org.apache.derby derby 10.2.2.0

Now that your development environment is set up and ready, take a quick look at how Wicket works, then you can build a simple data-driven Web application.

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 11 of 27 developerWorks® ibm.com/developerWorks

Section 3. Build the Wicket application

At the heart of Wicket is the idea of separation of concerns between Java code and HTML code, and between coders and designers. Wicket does this by associating Java and HTML in parallel via a Wicket HTML namespace extension, or a Wicket ID. In this section, you build a simple application that uses Wicket as your framework; Hibernate and Databinder to abstract persistence; and Geronimo as your application server, database server, and Web server.

The ToDo layout

For your Wicket example, you're going to create a simple to-do list application. Generally, with small Web applications, a designer creates the overall design of the application in HTML. So for your application, assume that a designer has already provided you with the HTML, CSS, and other resources for a static site, which you use later. The designer might create something that looks like Figure 4.

Figure 4. Prototype design for your Wicket site

Keep in mind that the application needs to let the user add or delete a simple task that has a name or description. The tasks should then be displayed in two columns under the ToDo list text.

Now your job is to create the ToDo list application with these simple requirements in mind. To do that, you first need to create a Wicket application.

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 12 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

The Wicket application

As an application developer, your job is to create the Java components that let the application post new tasks, delete tasks, or whatever else you decide the application needs.

Wicket applications usually start with implementation of the Web Application class. In this application, however, you first extend DataApplication, which is a Databinder extension for Wicket that functions the same way as the Web Application class, but lets you leverage Hibernate to map your Task objects to the database.

In this initial class, you create an Application object that lets you describe the organization and configuration of the application. It also lets you define the Java class, which defines the page functionality for the HTML template. Wicket Web pages are all Java classes that map to an HTML template, with the same name as the Java class, which you'll see in a later section.

Wicket Application classes are named using a simple convention like YourApplicationNameApplication.java.

1. Go to Eclipse, and navigate to the ToDo\src\main\java\developerworks directory, where you'll see that Maven has already created example Java Wicket classes for you.

2. You can either delete them or rename the MyApplication.java class to ToDoApplication.java.

3. Type or paste the code in Listing 6 into Eclipse, and save it. Listing 6. ToDoApplication.java

package developerworks; import net.databinder.DataApplication; import org.hibernate.cfg.AnnotationConfiguration; public class ToDoApplication extends DataApplication { /** * @return Page to display when no specific page is requested * ListAndAdd class is the Java class, which needs to map to an HTML * template named ListAndAdd.html */ @Override public Class getHomePage() { return ListAndAdd.class; } /** * Add annotated classes to config, leaving the call to super-implementation * in most cases. * @param config Hibernate configuration */

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 13 of 27 developerWorks® ibm.com/developerWorks

/** Set default configuration and mapping for Tasks. */ protected void configureHibernate(AnnotationConfiguration config) { super.configureHibernate(config); config.addAnnotatedClass(Task.class); }

Note the reference to ListAndAdd.class and Task.class. ListAndAdd.class is going to be the home page, and, as stated earlier, Wicket Web pages are all Java classes that map to an HTML template with the same name. In this Application class, you're telling Wicket via the getHomePage method that this is the application's home page. All initial requests to the application call the Java object ListAndAdd and render HTML based on ListAndAdd.html.

Listing 7 configures Hibernate to map the Task object to the database.

Listing 7. Configuring Hibernate to map the Task object to the database

protected void configureHibernate(AnnotationConfiguration config) { super.configureHibernate(config); config.addAnnotatedClass(Task.class); }

Task, in this case, is an object that represents one of the to-do items that you want to persist in Derby. With that in mind, you can create a Task class.

The Task class

Looking at Figure 4, note that you have a simple form for your to-do list that defines a task as a name and a description. To model this as an object to be persisted by Hibernate into Derby, you create a simple JavaBeans component or POJO that contains attributes relating to a task name and a task description.

This class also needs to provide accessor and mutator (in other words, getter and setter) methods for the two major attributes id and date. To do this, create a class called Task in the same directory as ToDoApplication.java, and either type or paste the code in Listing 8 into the directory.

Listing 8. Task.java

package developerworks; import java.io.Serializable; import java.util.Date; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Temporal; import javax.persistence.TemporalType;

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 14 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

/** * Task type with name and description properties, automatically persisted. */@Entity public class Task implements Serializable { private Integer id; private String name; private String description; private Date created = new Date();

@Id @GeneratedValue(strategy = GenerationType.AUTO) public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public String getName() { return name; } public void setName(String name) { this.name = name; } @Temporal(TemporalType.TIMESTAMP) public Date getCreated() { return created; } protected void setCreated(Date created) { this.created = created; } }

As you can probably see, this is just a POJO with nothing special about it, which is one of the great things about Wicket. Because all your models are POJOs, they're easily testable and portable. Now that you have the Task class to store tasks, next you can create a Wicket Web page for viewing, adding, and deleting tasks.

Create a Wicket Web page

Referring back to Figure 4, the Web page that's going to be created needs to allow you to show, add, and delete tasks. To do this in Wicket, usually a developer creates a dynamic Web page by extending the Wicket WebPage class. In this case, however, you use some of Databinder's magic to create a DataPage by extending the DataPage class, which functions much like Wicket's WebPage class, but lets you easily work with Hibernate and Wicket via Databinder.

Start by creating a new class called ListAndAdd.java, as shown in Listing 9.

Listing 9. ListAndAdd.java

Listing X: ListAndAdd.java package developerworks; import java.net.URL;

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 15 of 27 developerWorks® ibm.com/developerWorks

import net.databinder.DataRequestCycle; import net.databinder.components.DataForm; import net.databinder.components.DataPage; import net.databinder.components.DateLabel; import net.databinder.components.StyleLink; import net.databinder.components.WebLink; import net.databinder.models.HibernateListModel; import net.databinder.models.SublistProjectionModel; import wicket.Component; import wicket.ResourceReference; import wicket.markup.html.basic.Label; import wicket.markup.html.form.Form; import wicket.markup.html.form.ImageButton; import wicket.markup.html.form.RequiredTextField; import wicket.markup.html.list.ListItem; import wicket.markup.html.list.ListView; import wicket.markup.html.list.PropertyListView; import wicket.model.IModel; import wicket.model.Model; /** * Single page for adding and deleting bookmarks. */ public class ListAndAdd extends DataPage { /** Used in DataPage as the page title, and below within the page. */ protected String getName() { return "To Do List"; } /** Adds components to page. */ public ListAndAdd() { super(); // adds the page name as component for on-page display add(new Label("pageTitleHeader", new Model() { public Object getObject(Component component) { return getName(); } })); // custom styles for this page add(new StyleLink("taskStylesheet", ListAndAdd.class)); // form to hold delete image button Form deleteForm = new Form("deleteForm"); add(deleteForm); // data to list IModel listModel = new HibernateListModel("from Task order by name"); // turn list into two vertically ordered columns final IModel sublistModel = new SublistProjectionModel.Transposed(1, listModel); // view of list deleteForm.add(new ListView("taskRow", sublistModel) { protected void populateItem(ListItem parentItem) { parentItem.add(new PropertyListView("task", parentItem.getModel()) { protected void populateItem(final ListItem item) { item.setRenderBodyOnly(true); // span tag here would be invalid item.add(new Label("name")) ; item.add(new ImageButton("delete", new ResourceReference(this.getClass(), "delete_24.png")) { /** Delete from persistent storage, commit transaction. */

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 16 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

protected void onSubmit() { DataRequestCycle.getHibernateSession().delete(item.getModelObject()); DataRequestCycle.getHibernateSession().getTransaction().commit(); sublistModel.detach(); } }); // date the item was added, with format string item.add(new DateLabel("created", "MMM k:mm z")); } }); } } ); add(new EntryForm("entryForm")); } /** * Form for entering new task objects. */ public class EntryForm extends DataForm { /** Add entry components. */ public EntryForm(String id) { super(id, Task.class); // embeds new Task in a HibernateModel // inside a BoundCompoundPropertyModel add(new RequiredTextField("name") .setLabel(new Model("Name"))); // Labels used in error messages

add(new RequiredTextField("description") // required, type validation .setLabel(new Model("Description"))); } /** * Disassociates from its model after submission, because this form is * for creating new objects only. */ protected void onSubmit() { super.onSubmit(); // saves to persistent storage, commits txn clearPersistentObject(); // clears from form } } }

Let's look at the code a little more carefully and break down what's going on (although I hope it's fairly intuitive). First, in your constructor you lay out the elements of the Web page — all of which are going to need a wicket:id in the HTML to tie them back to the class. For example, Listing 10 shows how to add a page title dynamically to the Web page.

Listing 10. Adding a page title dynamically to the Web page

// adds the page name as component for on-page display add(new Label("pageTitleHeader", new Model() { public Object getObject(Component component) { return getName(); } }));

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 17 of 27 developerWorks® ibm.com/developerWorks

Listing 10 calls the method getName, which returns the string that's your page title. Later, to reference the page title and get it to render in your HTML template, you do something like

Some Title

, which tells Wicket when it renders to HTML to actually present this instead:

To Do List

.

The same pattern applies for other HTML elements, such as images or even form buttons. You do something more complex in Listing 11.

Listing 11. Create a custom model of a ListModel from a Hibernate query

IModel listModel = new HibernateListModel("from Task order by name"); // turn list into two vertically ordered columns final IModel sublistModel = new SublistProjectionModel.Transposed(2, listModel);

In Listing 11, you use IModel to create a custom model of a ListModel from the Hibernate query from Task order by name. This is passed to SublistProjectionModel to create a sublist with a single column.

This list is then added to the page view and a label for the Task name; a delete button, which is represented as an image; and the date in a single task row, shown in Listing 12.

Listing 12. The date in a task row

new ListView("taskRow", sublistModel) { protected void populateItem(ListItem parentItem) { parentItem.add(new PropertyListView("task", parentItem.getModel()) { protected void populateItem(final ListItem item) { item.setRenderBodyOnly(true); // span tag here would be invalid item.add(new Label("name")) ; item.add(new ImageButton("delete", new ResourceReference(this.getClass(), "delete_24.png")) { /** Delete from persistent storage, commit transaction. */ protected void onSubmit() { DataRequestCycle.getHibernateSession().delete(item.getModelObject()); DataRequestCycle.getHibernateSession().getTransaction().commit(); sublistModel.detach(); } }

ListView holds list items — in this case the sublistModel — which can then be represented in HTML, as shown in Listing 13.

Listing 13. Representing the sublistModel in HTML

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 18 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

Task 1 ...

Listing 13 creates a simple HTML representation of ListView. Finally, one more item to point out is the use of a nested class, or an inner class, to create a DataForm, like this: public class EntryForm extends DataForm.

Databinder's DataForm class persists your tasks by saving the task model to the database for you. Wicket encourages the use of plain Java object-oriented (OO) techniques to increase code readability, encapsulation, and the logical group of classes that's used in one place, just like a normal Java application (as opposed to something like a JSP page).

Now that you have an introduction to the Wicket approach to modeling a Web Page in the Java language, you need to look at how your HTML will look after adding Wicket extensions.

The template

Because Wicket templates are written in plain HTML, it's often simple for a designer to mark up what parts of an HTML template need to have Wicket extensions. Most likely, this process is an iterative one that occurs between the designer and the developer. However, it's important to note that because there's no special application logic or Java markup in the HTML template, the templating work can be done in any HTML editor, allowing designers to focus on what they do best — design.

For this tutorial, assume that your designer has provided you with a CSS (shown in Listing 14), a simple graphic for a delete button, and an HTML template — ListAndAdd.html — which shares the same name as ListAndAdd.java (see Listing 15).

Listing 14. ListAndAdd.css

li img { vertical-align: middle; border: none; margin-left: .5em; } .date { font-style: italic; } td { text-align: right; } td.taskname { padding-left: 1.5em; }

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 19 of 27 developerWorks® ibm.com/developerWorks

h { color:#0066FF } h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; color:#0066FF } h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; color:#0066FF} .title { color: #808080; background: #fff; color:#0066FF}

Listing 15 shows the contents of the ListAndAdd.html template.

Listing 15. ListAndAdd.html template

Todo List

Page Title

Your List of Tasks

Task 1 Jun 20 9:03 EDT

The HTML in Listing 15 matches each area where some action or dynamic data

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 20 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

needs to be displayed with a Wicket ID that matches a component in ListAndAdd.java. Now your HTML, images, CSS, and any other assets need to be saved. By default, Wicket wants Web assets to be placed in the same directory as your Java classes. So save the ListAndAdd.html file into your directory with your Java classes, as well as the ListAndAdd.css and the delete_24.png.

Note: While many Web applications are made up of only a few HTML templates or views, some people find Wicket's default behavior of placing Web assets alongside the Java code difficult for larger sites. Wicket allows you to control where your Web resources and HTML files are loaded, which you can read more about in several of the Wicket Web sites linked to from Resources.

Finally, all that's left to do is package your application as a WAR file and deploy it to Geronimo so you can try out the ToDo application.

Deploy the application to Geronimo

Now that you have everything needed for your Web application ready, you need to deploy it to an application server. The Geronimo server you set up earlier in the tutorial makes deploying the Web application simple.

1. Create a WAR file, which you can do by opening another command shell and navigating to c:\projects\ToDo and either typing or pasting the Maven command mvn package. This builds a WAR file for you.

2. To deploy the Web application, make sure Geronimo is started, drag the WAR file from C:\projects\ToDo\target to C:\geronimo\deploy, then go to your Geronimo server by pointing your browser to http://localhost:8080/ and selecting Console.

3. Log in using the default user name system and the default password manager.

4. Check on the applications that have been deployed under Applications > Web App WARs. You should see something like Figure 5. Figure 5. Apache Geronimo installed Web applications

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 21 of 27 developerWorks® ibm.com/developerWorks

From here you can stop, start, restart, or uninstall any of your applications that you have installed. You can also see the URL for the application. You can either click it or go to http://localhost:8080/ToDo-1.0-SNAPSHOT to see the Web application.

You should now see the ToDo List application shown in Figure 4. Try entering a few items to make sure the application works.

Now that you've finished your first simple Wicket Web application, you should continue to play with Wicket to better learn how the framework operates. Try letting the user edit and view a task, or reorder a task by date. Make sure to check out Nathan Hamblen's Databinder site (see Resources for a link) for more Databinder examples. Experiment and make sure to look at the accompanying resources for more useful links for Wicket and Geronimo development.

Section 4. Summary

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 22 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

As you can see, working with Wicket combined with Databinder greatly simplifies Java development for Web applications. In this tutorial, you looked at how Wicket works, but it takes some time to master. Wicket is for developers who want a more pure object-oriented WAR file to build Web applications. Make sure to check out the Wicket home page (see Resources) and the tutorials there to get a better understanding of how Wicket works.

You also saw how Geronimo provides a unified Java EE application server, a Web server, and an embedded database, which simplifies setting up and deploying a Java Web application. Wicket combined with Geronimo lets you develop rich, scalable, and 100% open source Web applications in record time, without the complexity, cost, or sometimes frustrating management incurred in more traditional frameworks and application servers.

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 23 of 27 developerWorks® ibm.com/developerWorks

Downloads

Description Name Size Download method Tutorial ToDo.zip 459KB HTTP

Information about download methods

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 24 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

Resources

Learn • Deployment plans are the Geronimo version of the J2EE deployment descriptors. Access Geronimo deployment plans from Apache.org. • Read "Create, deploy, and debug Apache Geronimo applications" (developerWorks, May 2005) to learn how to use the Eclipse plug-in to develop and deploy Web applications to the Apache Geronimo server. • Read Control where HTML files are loaded from from the Apache Wicket documentation. • Check out the Wicket home page and the tutorials there to get a better understanding of how Wicket works. • Visit Wicket Examples for a selection of examples that best demonstrate its core functionality. • Read a solid article, "Introduction to Apache Maven 2" (developerWorks, December 2006). • Read the developerWorks tutorial series J2EE Web services in Geronimo to learn about incorporating Web services into a J2EE-based application deployed on the Apache Geronimo application server. • Read Aaron Mulder's online book, Apache Geronimo Development and Deployment , about installing and configuring the Apache Geronimo application server. • See the Geronimo Wiki for additional Geronimo documentation, including installation information. • Read about plug-ins and other cutting-edge features in Geronimo 1.1 in the article "The Geronimo renegade: The Apache Geronimo of the future" (developerWorks, June 2006). • Get detailed information about deploying your application to Geronimo in the article "Deploy J2EE applications on Apache Geronimo" (developerWorks, January 2006). • Check out upcoming conferences, trade shows, webcasts, and other events around the world that are of interest to IBM® open source developers. • Read what Nathan Hamblen has to say about Databinder, a lightweight utility he wrote that lets Wicket and Hibernate work together extremely well, greatly simplifying development of data-driven Wicket applications. • Check out the developerWorks Apache Geronimo project area for articles, tutorials, and other resources to help you get started developing with Geronimo today. • Find helpful resources for beginners and experienced users at the Get started now with Apache Geronimo section of developerWorks.

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 25 of 27 developerWorks® ibm.com/developerWorks

• Check out the IBM Support for Apache Geronimo offering, which lets you develop Geronimo applications backed by world-class IBM support. • Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products. • Stay current with developerWorks technical events and webcasts. • Browse all the Apache articles and free Apache tutorials available in the developerWorks Open source zone. • Browse for books on these and other technical topics at the Safari bookstore. Get products and technologies • Get Apache Wicket (Wicket is not in an incubation period with Apache). • Get Databinder, a Java programming toolkit for data-driven Web applications based on Wicket. • Download Qwicket, a quick-start application for the Wicket framework. • Get the Wicket Bench, an Eclipse plug-in for Wicket. • Download Maven 2.0.7. • Download the latest version of Apache Geronimo. • Download your free copy of IBM WebSphere® Application Server Community Edition -- a lightweight J2EE application server built on Apache Geronimo open source technology that is designed to help you accelerate your development and deployment efforts. • Innovate your next open source development project with IBM trial software, available for download or on DVD. Discuss • Participate in the discussion forum for this content. • Stay up to date on Geronimo developments at the Apache Geronimo blog. • Get involved in the developerWorks community by participating in developerWorks blogs.

About the author

Robi Sen Robi Sen is the vice president of services for Department 13, LLC, an IT consultancy, where he spends most of his time helping customers, ranging from Fortune 500 companies to startups, define and manage their technology challenges. He has written widely on different technologies and often lectures and presents at various conventions.

Develop a simple Web application with Apache Wicket and Apache Geronimo Page 26 of 27 © Copyright IBM Corporation 1994, 2008. All rights reserved. ibm.com/developerWorks developerWorks®

Trademarks

IBM, the IBM logo, and WebSphere are registered trademarks of IBM in the United States, other countries or both. Java and all Java-based trademarks are trademarks of , Inc., in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both.

Develop a simple Web application with Apache Wicket and Apache Geronimo © Copyright IBM Corporation 1994, 2008. All rights reserved. Page 27 of 27