Develop A Simple Web Application With Apache Wicket And .

developerWorks ibm.com/developerWorksSet up EclipseNow that the archetype is created, you can set it up so you can work with it fromEclipse. 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 addthe Maven repository to your Eclipse workspace (here I'm assuming it's inC:\projects), like this: mvn -Declipse.workspace /projectseclipse:add-maven-repo.2.Now tell Maven to get all of the Databinder dependencies, source, and soon by first changing the ToDo directory that was created previously whenyou created the project, and either typing or pasting the followingcommand: mvn -Declipse.downloadSources trueeclipse:eclipse. This may take a while, depending on your Internetconnection, because Maven downloads all the files and dependenciesyou 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 projectbefore importing into EclipseDevelop a simple Web application with Apache Wicket and Apache GeronimoPage 8 of 27 Copyright IBM Corporation 1994, 2008. All rights reserved.

ibm.com/developerWorksdeveloperWorks 3.When the download is complete, start Eclipse, and choose File Import.4.Select Existing Projects into Workspace, then select the ToDoDevelop 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/developerWorksdirectory. 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 youcan get started developing the Wicket application.Final stepsYou 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, andplace a copy of the derbyclient.jar (which can be found ent\10.2.2.0) in thedirectory.2.Edit the hibernate.properties file found inToDo\src\main\java\developerworks so that it looks like Listing 3. This isnecessary for Hibernate to interact with Derby.Listing 3. Edit the hibernate.properties filehibernate.dialect tion.driver class tion.url jdbc:derby://localhost:1527/ToDo;create truehibernate.connection.username adminhibernate.connection.password admin3.Go to ToDo\target and open pom.xml with the text editor option inEclipse. Make sure you have the code from Listing 4 added to yourpom.xml file, and make sure your pom.xml file looks like Listing 5.Listing 4. Dependency dependency groupId org.apache.derby /groupId artifactId derby /artifactId version 10.2.2.0 /version /dependency Listing 5. Updated pom.xml project xmlns "http://maven.apache.org/POM/4.0.0"xmlns:xsi emaLocation che.org/maven-v4 0 0.xsd" modelVersion 4.0.0 /modelVersion groupId developerworks /groupId artifactId ToDo /artifactId build plugins plugin groupId org.apache.maven.plugins /groupId artifactId maven-compiler-plugin /artifactId configuration Develop a simple Web application with Apache Wicket and Apache GeronimoPage 10 of 27 Copyright IBM Corporation 1994, 2008. All rights reserved.

ibm.com/developerWorksdeveloperWorks source 1.5 /source target 1.5 /target /configuration /plugin plugin groupId org.mortbay.jetty /groupId artifactId maven-jetty-plugin /artifactId configuration scanIntervalSeconds 10 /scanIntervalSeconds systemProperties systemProperty name org.apache.commons.logging.Log /name value org.apache.commons.logging.impl.SimpleLog /value /systemProperty /systemProperties /configuration /plugin plugin artifactId maven-release-plugin /artifactId configuration tagBase svn://localhost/todo/ /tagBase /configuration /plugin /plugins resources resource directory src/main/java /directory includes include ** /include /includes excludes exclude **/*.java /exclude /excludes /resource /resources /build packaging war /packaging version 1.0-SNAPSHOT /version name Databinder Application /name dependencies dependency groupId net.databinder /groupId artifactId databinder /artifactId version 1.0 /version /dependency dependency groupId org.apache.derby /groupId artifactId derby /artifactId version 10.2.2.0 /version /dependency /dependencies !-- uncomment to download prerelease versions of Databinder repositories repository id databinder-snapshots /id name Databinder snapshot repository /name url http://databinder.net/snapshot /url /repository /repositories -- /project Now that your development environment is set up and ready, take a quick look athow 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/developerWorksSection 3. Build the Wicket applicationAt the heart of Wicket is the idea of separation of concerns between Java code andHTML code, and between coders and designers. Wicket does this by associatingJava 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 applicationserver, database server, and Web server.The ToDo layoutFor 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 theapplication in HTML. So for your application, assume that a designer has alreadyprovided you with the HTML, CSS, and other resources for a static site, which youuse later. The designer might create something that looks like Figure 4.Figure 4. Prototype design for your Wicket siteKeep in mind that the application needs to let the user add or delete a simple taskthat has a name or description. The tasks should then be displayed in two columnsunder the ToDo list text.Now your job is to create the ToDo list application with these simple requirements inmind. To do that, you first need to create a Wicket application.Develop a simple Web application with Apache Wicket and Apache GeronimoPage 12 of 27 Copyright IBM Corporation 1994, 2008. All rights reserved.

ibm.com/developerWorksdeveloperWorks The Wicket applicationAs an application developer, your job is to create the Java components that let theapplication post new tasks, delete tasks, or whatever else you decide the applicationneeds.Wicket applications usually start with implementation of the Web Applicationclass. In this application, however, you first extend DataApplication, which is aDatabinder extension for Wicket that functions the same way as the WebApplication class, but lets you leverage Hibernate to map your Task objects tothe database.In this initial class, you create an Application object that lets you describe theorganization and configuration of the application. It also lets you define the Javaclass, which defines the page functionality for the HTML template. Wicket Webpages are all Java classes that map to an HTML template, with the same name asthe Java class, which you'll see in a later section.Wicket Application classes are named using a simple convention likeYourApplicationNameApplication.java.1.Go to Eclipse, and navigate to the ToDo\src\main\java\developerworksdirectory, where you'll see that Maven has already created example JavaWicket classes for you.2.You can either delete them or rename the MyApplication.java classto ToDoApplication.java.3.Type or paste the code in Listing 6 into Eclipse, and save it.Listing 6. ToDoApplication.javapackage developerworks;import net.databinder.DataApplication;import org.hibernate.cfg.AnnotationConfiguration;public class ToDoApplication extends DataApplication {/*** @return Page to display when no specific page isrequested* ListAndAdd class is the Java class, which needs to mapto an HTML* template named ListAndAdd.html*/@Overridepublic Class getHomePage() {return ListAndAdd.class;}/*** Add annotated classes to config, leaving the call tosuper-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(AnnotationConfigurationconfig) tedClass(Task.class);}Note the reference to ListAndAdd.class and Task.class.ListAndAdd.class is going to be the home page, and, as stated earlier, WicketWeb 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 thatthis is the application's home page. All initial requests to the application call the Javaobject 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 databaseprotected void configureHibernate(AnnotationConfigurationconfig) tedClass(Task.class);}Task, in this case, is an object that represents one of the to-do items that you wantto persist in Derby. With that in mind, you can create a Task class.The Task classLooking at Figure 4, note that you have a simple form for your to-do list that definesa task as a name and a description. To model this as an object to be persisted byHibernate into Derby, you create a simple JavaBeans component or POJO thatcontains attributes relating to a task name and a task description.This class also needs to provide accessor and mutator (in other words, getterand setter) methods for the two major attributes id and date. To do this, create aclass called Task in the same directory as ToDoApplication.java, and eithertype or paste the code in Listing 8 into the directory.Listing 8. Task.javapackage developerworks;import java.io.Serializable;import istence.TemporalType;Develop a simple Web application with Apache Wicket and Apache GeronimoPage 14 of 27 Copyright IBM Corporation 1994, 2008. All rights reserved.

ibm.com/developerWorksdeveloperWorks /*** Task type with name and description properties,automatically persisted.*/@Entitypublic 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 isone of the great things about Wicket. Because all your models are POJOs, they'reeasily testable and portable. Now that you have the Task class to store tasks, nextyou can create a Wicket Web page for viewing, adding, and deleting tasks.Create a Wicket Web pageReferring back to Figure 4, the Web page that's going to be created needs to allowyou to show, add, and delete tasks. To do this in Wicket, usually a developer createsa 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 extendingthe DataPage class, which functions much like Wicket's WebPage class, but letsyou 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.javaListing X: ListAndAdd.javapackage 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 Model;/*** Single page for adding and deleting bookmarks.*/public class ListAndAdd extends DataPage {/** Used in DataPage as the page title, and below withinthe page. */protected String getName() {return "To Do List";}/** Adds components to page.public ListAndAdd() {super();*/// adds the page name as component for on-page displayadd(new Label("pageTitleHeader", new Model() {public Object getObject(Component component) {return getName();}}));// custom styles for this pageadd(new StyleLink("taskStylesheet",ListAndAdd.class));// form to hold delete image buttonForm deleteForm new Form("deleteForm");add(deleteForm);// data to listIModel listModel new HibernateListModel("from Taskorder by name");// turn list into two vertically ordered columnsfinal IModel sublistModel newSublistProjectionModel.Transposed(1, listModel);// view of listdeleteForm.add(new ListView("taskRow", sublistModel) {protected void populateItem(ListItem parentItem){parentItem.add(new PropertyListView("task",parentItem.getModel()) {protected void populateItem(finalListItem item) {item.setRenderBodyOnly(true);// span tag here would beinvaliditem.add(new wResourceReference(this.getClass(), "delete 24.png")) {/** Delete from persistentstorage, commit transaction. */Develop a simple Web application with Apache Wicket and Apache GeronimoPage 16 of 27 Copyright IBM Corporation 1994, 2008. All rights reserved.

ibm.com/developerWorksdeveloperWorks protected void onSubmit() tach();}});// date the item was added, withformat stringitem.add(new DateLabel("created","MMM d 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 ina HibernateModel// inside aBoundCompoundPropertyModeladd(new RequiredTextField("name").setLabel(new Model("Name"))); // Labelsused in error messagesadd(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 topersistent storage, commits txnclearPersistentObject();// 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 elementsof the Web page — all of which are going to need a wicket:id in the HTML to tiethem back to the class. For example, Listing 10 shows how to add a page titledynamically to the Web page.Listing 10. Adding a page title dynamically to the Web page// adds the page name as component for on-page displayadd(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/developerWorksListing 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 dosomething like h1 wicket:id "pageTitleHeader" Some Title /h1 ,which tells Wicket when it renders to HTML to actually present this instead: h1wicket:id "pageTitleHeader" To Do List /h1 .The same pattern applies for other HTML elements, such as images or even formbuttons. You do something more complex in Listing 11.Listing 11. Create a custom model of a ListModel from a Hibernate queryIModel listModel new HibernateListModel("from Taskorder by name");// turn list into two vertically ordered columnsfinal IModel sublistModel newSublistProjectionModel.Transposed(2, listModel);In Listing 11, you use IModel to create a custom model of a ListModel from theHibernate query from Task order by name. This is passed toSublistProjectionModel 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 deletebutton, which is represented as an image; and the date in a single task row, shownin Listing 12.Listing 12. The date in a task rownew ListView("taskRow", sublistModel) {protected void populateItem(ListItem parentItem){parentItem.add(new PropertyListView("task",parentItem.getModel()) {protected void populateItem(finalListItem item) {item.setRenderBodyOnly(true);// span tag here would beinvaliditem.add(new w ResourceReference(this.getClass(), "delete 24.png")) {/** Delete from persistentstorage, commit transaction. */protected void onSubmit() tach();}}ListView holds list items — in this case the sublistModel — which can then berepresented in HTML, as shown in Listing 13.Listing 13. Representing the sublistModel in HTMLDevelop a simple Web application with Apache Wicket and Apache GeronimoPage 18 of 27 Copyright IBM Corporation 1994, 2008. All rights reserved.

ibm.com/developerWorksdeveloperWorks tbody tr wicket:id "taskRow" td span wicket:id "taskname" span wicket:id "name" Task 1 /span /span /td .Listing 13 creates a sim

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