SQL Zone is brought to you in partnership with:

As a Java Architect at Sun Microsystems, Carol McDonald has spoken at various conferences including JavaOne, Java University, Sun Tech Days, Sun Network, Sun Code Camps, JDJEdge, and JUGs including Machester, Boston, Maine, Cologne, FAA, Richmond, Memphis, D.C... Carol blogs about the latest technologies that she is speaking about at http://weblogs.java.net/blog/caroljmcdonald/. Before returning to Sun in 2007, Carol worked 2 1/2 yrs as an Architect on massive OLTP Spring/hibernate application to manage > 10 mill loans for the consumer credit division of a leading automoblile manufacturer and a leading bank. Before joining Sun the first time in 1999 Carol worked on Pharmaceutical Intranet applications for Roche in Switzerland, a Telecom Network Management Application for Digital (now HP) in France, a X.400 Email Server for IBM in Germany, and as a student intern for the National Security Agency. Carol holds a M.S. in Computer Science from the University of Tennessee, a B.S. in Geology from Vanderbilt University, and is a Sun Certified Java Architect and Java Language Programmer. Carol is also Fluent in French and German. Carol has posted 11 posts at DZone. View Full User Profile

Wicket, JPA, GlassFish and Java Derby or MySQL

  • submit to reddit

This Pet Catalog app explains a web application that uses Wicket, JPA, GlassFish and MySQL. I took this example JSF 2.0, JPA, GlassFish and MySQL  and modified it to use Wicket instead of JSF. 

Explanation of the usage of Wicket, Java Persistence APIs, Glassfish and MySQL in a sample Store Catalog Application

The image below shows the Catalog Listing page, which allows a user to page through a list of items in a store.

The Wicket Framework

The Wicket Web Framework provides a component-oriented programmatic manipulation of HTML markup. The Diagram below shows how the Wicket Framework fits into the MVC design pattern.

A Wicket component controller receives user input. The component uses the user input to interact with the model, to handle page navigation and events. The Model provide components with an interface to domain data. The Component view renders the User Interface HTML elements. The controller and view parts are combined into the Component  in Wicket.

Wicket Triad of HTML Templates, Components, and Model

The Wicket component, the model, and HTML template work together. The HTML template defines the static parts of the pages, components fill in the dynamic parts, and models are used by components to get the domain data for the dynamic parts.  Wicket matches wicket:id tags with components, Models are a reference to the data for the Java components.

Wicket  HTML Templates

Wicket templates are written in plain HTML, consumable by standard HTML editors. Wicket uses HTML namespace standards to extend HTML with placeholders,  where Wicket components are hooked in, so that there is no custom syntax at all. Wicket matches wicket: id attributes and attaches Java components to the tags in which these attributes are defined.

Wicket Web pages are all Java classes that map to an HTML template, with the same name as the Java class.

The ListPage.html file holds the markup for the ListPage.java.  Wicket matches the Java page instance and the HTML template file with the same name in the same Java package.

<th> Name </th>
<th> Photo</th>
<th> Price </th>
<tr wicket:id="rows" >
<a wicket:id="details" href="#">
<span wicket:id="name">name</span>
<td> <img wicket:id="photo"/></td>
<td><span wicket:id="price"></span></td>

<span wicket:id="pager">navigation controls here</span>

 Pages are special top-level components that hold the root for component trees. Below is the component tree for the ListPage above:

Wicket Components

Wicket matches the wicket:id="rows" attribute in the ListPage.html with the corresponing Java component in ListPage.java,  which is a DataViewComponent which has a DataProvider model as shown in the diagram below.

The corresponding ListPage.java code is shown below:


public class ListPage extends WebPage {

// create the Model DataProvider
IDataProvider itemDataProvider = new IDataProvider<Item>() {

public Iterator iterator(int first, int count) {
return itemController.findItemEntities(count, first).iterator();
public int size() {
return itemController.getItemCount();
public IModel model(final Item object) {
return new LoadableDetachableModel() {
protected Item load() {
return (Item) object;
public void detach() {

// create the DataView component corresponding to the wicketid "rows" attribute in ListPage.html
DataView dataView = new DataView<Item>("rows", itemDataProvider, ROWS_PER_PAGE) {

protected void populateItem(org.apache.wicket.markup.repeater.Item<Item> repItem) {
Item item = (Item) repItem.getModelObject();
repItem.setModel(new CompoundPropertyModel<Item>(item));
repItem.add(ItemDetails.link("details", item));
repItem.add(new Image("photo", new ResourceReference(this.getClass(), item.getImagethumburl())));
repItem.add(new Label("price"));

// add the DataView component to the page
// create the PagingNavigator component corresponding to the "pager" attribute in ListPage.html
PagingNavigator pager = new PagingNavigator("pager", dataView);

DataView is a component which makes it simple to populate a Wicket RepeatingView from a database by utilizing IDataProvider to act as an interface between the database and the dataview.  A Wicket RepeatingView renders the components added to it from data from a collection of objects.

The  DataView instantiation passes to the constructor  the wicket id "rows" , the itemDataProvider, and the number of rows for paging, and anonymously overrides the populateItem() method, which will be called for each Item object provided by itemDataProvider.  The  populateItem method adds the child components ( Link, Image, Label)  with the Item  Model to the Dataview.

The itemDataProvider IDataProvider provides the Pet Catalog  Item data to the DataView.  The IDataProvider iterator(int first, int count) method gets an iterator for the subset of total data.  The itemDataProvider iterator method calls the  itemController.findItemEntities , which uses JPA to query the database and return a list of Item entities.  The itemDataProvider model method  is a Callback used by the consumer of this data provider to wrap objects retrieved from iterator(int, int) with a model (usually a detachable one).

Published at DZone with permission of its author, Carol Mcdonald.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Praveena Manvi replied on Thu, 2009/12/03 - 12:29pm

Nice one. How wicket compares to JSF from developer perspective?

Slava Ustovitskiy replied on Thu, 2009/12/03 - 6:28pm in response to: Praveena Manvi

It's much better then JSF. Working with the Wicket is a pleasure :)

Igor Vaynberg replied on Thu, 2009/12/03 - 7:07pm

This code is broken:

13.                return new LoadableDetachableModel() {
14.                    @Override
15.                    protected Item load() {
16.                        return (Item) object;
17.                    }
18.                };
19.            }


You are neither loading nor detaching anything. There is a good section on models here:


As well as one that can be more applicable  here:






Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.