Skip to main content

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

Posted by arungupta on August 5, 2009 at 6:14 AM PDT



href="http://blogs.sun.com/arungupta/entry/totd_86_getting_started_with">TOTD
#86 explained how to get started with deploying a href="http://wicket.apache.org/">Apache Wicket
application on GlassFish.
This Tip style="font-weight: bold;">Of style="font-weight: bold;">The style="font-weight: bold;">Day (TOTD) will show
how to add pagination to your Wicket application.



The blog entry "JPA/Hibernate and Wicket Repeating Views with Netbeans"
href="http://jeff-schwartz.blogspot.com/2009/03/netbeans-apache-wicket-applications.html">Part
1 and href="http://jeff-schwartz.blogspot.com/2009/04/apache-wicket-jpahibernate-and-wicket.html">2
explain in detail how to create a CRUD application using NetBeans, JPA,
Hibernate and Wicket. This blog uses the data created in href="http://blogs.sun.com/arungupta/entry/totd_38_creating_a_mysql">TOTD
#38 for the database table.

  1. 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:



    alt=""
    src="http://blogs.sun.com/arungupta/resource/wicket-paginate-states-output.png">



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


    style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
    cellpadding="2" cellspacing="2">
    <html>

        <head>

           
    <title>Wicket Quickstart Archetype
    Homepage</title>

        </head>

        <body>

           
    <strong>Wicket Quickstart Archetype
    Homepage</strong>

           
    <br/><br/>

           
    <span wicket:id="message">message will be
    here</span>

           
    <table>

               
    <tr>

                   
    <th>ID</th>

                   
    <th>Abbreviation</th>

                   
    <th>Name</th>

               
    </tr>

               
    <tr wicket:id="rows">

                   
    <td><span
    wicket:id="id">ID</span></td>

                   
    <td><span
    wicket:id="abbrev">Abbreviation</span></td>

                   
    <td><span
    wicket:id="name">Name</span></td>

               
    </tr>

           
    </table>



        </body>

    </html>



    The backing POJO looks like:


    style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
    cellpadding="2" cellspacing="2">
    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:


    style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
    cellpadding="2" cellspacing="2">
    <?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>
  2. Lets add pagination to this simple sample.
    1. In the POJO, change DataView constructor so that it looks
      like:


      style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
      cellpadding="2" cellspacing="2">
             
      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:


      style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
      cellpadding="2" cellspacing="2">
      dataView.setItemsPerPage(5);


    2. In the HTML page, add the following right after
      "<table/>":


      style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
      cellpadding="2" cellspacing="2">
      <span
      wicket:id="pager">message will be
      here</span><br>



      as the last line. This is the placeholder for pagination controls.

    3. In the POJO, add the following:


      style="text-align: left; background-color: rgb(204, 204, 255); width: 100%;"
      cellpadding="2" cellspacing="2">
             
      PagingNavigator pager = new PagingNavigator("pager", dataView);

             
      add(pager);



      right after "add(dateView);".



      The output now looks like:



      alt=""
      src="http://blogs.sun.com/arungupta/resource/wicket-paginate-states-output-page1.png">



      and clicking on ">" shows:



      alt=""
      src="http://blogs.sun.com/arungupta/resource/wicket-paginate-states-output-page2.png">



      And finally clicking on ">>" shows



      alt=""
      src="http://blogs.sun.com/arungupta/resource/wicket-paginate-states-output-page-last.png">



      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 href="http://blogs.sun.com/arungupta/tags/totd">here.




Technorati: wicket
glassfish
pagination

Related Topics >>