TOTD #89: How to add pagination to an Apache Wicket application

Posted by arungupta on August 5, 2009 at 9:14 AM EDT

TOTD #86 explained how to get started with deploying a Apache Wicket application on GlassFish. This Tip Of The Day (TOTD) will show how to add pagination to your Wicket application.

The blog entry "JPA/Hibernate and Wicket Repeating Views with Netbeans" Part 1 and 2 explain in detail how to create a CRUD application using NetBeans, JPA, Hibernate and Wicket. This blog uses the data created in TOTD #38 for the database table.

After creating the JPA Controller, adding the IDataProvider and DataView implementations and hooking together, the application is available at "http://localhost:8080/helloworld" and looks like:

As noticed in the output, all the states are listed in one page. The HTML markup looks like:

<html>
 <head>
 <title>Wicket Quickstart Archetype Homepage</title>
 </head>
 <body>
 Wicket Quickstart Archetype Homepage
 
 message will be here
 <table>
 <tr>
 <th>ID</th>
 <th>Abbreviation</th>
 <th>Name</th>
 </tr>
 <tr wicket:id="rows">
 <td>ID</td>
 <td>Abbreviation</td>
 <td>Name</td>
 </tr>
 </table>

 </body>
</html>

The backing POJO looks like:

package org.glassfish.samples;

import java.util.Iterator;
import org.apache.wicket.PageParameters;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.repeater.Item;
import org.apache.wicket.markup.repeater.data.DataView;
import org.apache.wicket.markup.repeater.data.IDataProvider;
import org.apache.wicket.model.CompoundPropertyModel;
import org.apache.wicket.model.IModel;
import org.apache.wicket.model.LoadableDetachableModel;
import org.glassfish.samples.controller.StatesJpaController;
import org.glassfish.samples.model.States;

/**
* Homepage
*/
public class HomePage extends WebPage {

    private static final long serialVersionUID = 1L;

    // TODO Add any page properties or variables here

    /**
    * Constructor that is invoked when page is invoked without a session.
    *
    * @param parameters
    *            Page parameters
    */
    public HomePage(final PageParameters parameters) {

        // Add the simplest type of label
        add(new Label("message", "If you see this message wicket is properly configured and running"));

        // TODO Add your page's components here

                // create a Data Provider
        IDataProvider statesProvider = new IDataProvider() {
            public Iterator iterator(int first, int count) {
                StatesJpaController sc = new StatesJpaController();
                return sc.findStatesEntities(count, first).iterator();
            }

            public int size() {
                StatesJpaController sc = new StatesJpaController();
                return sc.getStatesCount();
            }

            public IModel model(final Object object) {
                return new LoadableDetachableModel() {
                    @Override
                    protected States load() {
                        return (States)object;
                    }
                };
            }

            public void detach() {
            }
        };

        // TODO Add your page's components here

        DataView dataView = new DataView("rows", statesProvider) {

            @Override
            protected void populateItem(Item item) {
                States state = (States)item.getModelObject();
                item.setModel(new CompoundPropertyModel(state));
                item.add(new Label("id"));
                item.add(new Label("abbrev"));
                item.add(new Label("name"));
            }
        };

        add(dataView);
    }
}

and "persistence.xml" looks like:

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
<persistence-unit name="helloworld" transaction-type="RESOURCE_LOCAL">
 <provider>org.hibernate.ejb.HibernatePersistence</provider>
 <class>org.glassfish.samples.model.States</class>
 <properties>
 <property name="hibernate.connection.username" value="app"/>
 <property name="hibernate.connection.driver_class" value="org.apache.derby.jdbc.ClientDriver"/>
 <property name="hibernate.connection.password" value="app"/>
 <property name="hibernate.connection.url" value="jdbc:derby://localhost:1527/sample"/>
 </properties>
</persistence-unit>
</persistence>

Lets add pagination to this simple sample.

In the POJO, change DataView constructor so that it looks like:

DataView dataView = new DataView("rows", statesProvider, 5)

where "5" is the number of entries displayed per page. Alternatively you can also set the number of items per page by invoking:

dataView.setItemsPerPage(5);
In the HTML page, add the following right after "<table/>":

message will be here 

as the last line. This is the placeholder for pagination controls.
In the POJO, add the following:

PagingNavigator pager = new PagingNavigator("pager", dataView);
add(pager);

right after "add(dateView);".

The output now looks like:

and clicking on ">" shows:

And finally clicking on ">>" shows

The information is now nicely split amongst multiple pages.

So just adding a pagination controls placeholder in the HTML and a corresponding configuration in DataView (in the backing POJO) did the trick for us.

Please leave suggestions on other TOTD (Tip Of The Day) that you'd like to see. A complete archive of all the tips is available here.

Technorati: wicket glassfish pagination

Main Menu

Arun Gupta

TOTD #89: How to add pagination to an Apache Wicket application

Get Involved

Get Informed