Wicket, JPA, GlassFish and Java Derby or MySQL

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. 

• Download the sample code
  
  

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.

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

   </tr>
</table>
<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() {
                    @Override
                    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) {

            @Override
            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
        add(dataView);
        // create the PagingNavigator component corresponding to the "pager" attribute in ListPage.html
        PagingNavigator pager = new PagingNavigator("pager", dataView);
        add(pager);

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).