Historique de la page

...

Il n'est pas rare dans les applications web de vouloir afficher des listes de valeurs. Parce que l'espace visible sur l'écran du client est limité, on souhaite souvent afficher les résultats sur plusieurs pages ; c'est ce qu'on appelle la pagination. La première difficulté de la pagination est donc de n'afficher qu'une partie des résultats d'un ensemble plus important, et de proposer une navigation visuelle entre les pages.La deuxième difficulté consiste, pour les accès aux bases de données, à ne récupérer que les valeurs de la base qui doivent être affichées ; cela est indispensable lorsque le nombre de résultat résultats est énorme, assez gros en tout cas pour saturer la mémoire des processus. Nous montrons donc dans un premier temps comment on peut paginer des données sans se soucier de leur récupération. La dernière partie montre comment écrire des paginateurs qui ne récupèrent de la base de données que les données à afficher.

...

Contrairement à ce que l'on peut trouver dans esup-commons V1 les tags <e: développés spécifiquement pour esup-commons ont été supprimé supprimés au profit de l'utilisation de librairies standard.
Seul le tag paginator a été conservé.

La pagination des données (e:paginator)

Image Modified

Exemple d'utilisation de la balise e:paginator.

<h:panelGroup>
  <e:paginator id="thingPaginator"
               paginator="#{thingsController.paginator}"
               itemsName="#{msgs['THINGS']}"
               onchange="javascript:{simulateLinkClick('thingsForm:submitPageSize');}" />
  <h:commandButton id="submitPageSize"
	           action="#{thingsController.paginator.forceReload}" />
</h:panelGroup>

...

• id : Permet de définir l'identifiant du paginator.
• paginator : Attribut obligatoire, une epression expression EL qui pointe le paginateur (objet implémentant l'interface Paginator).
• itemsName : Indique le nom des items affichés. Correspond à 'Choses' dans l'image ci-dessus.
• styleClass : Permet de définir la classe CSS. Par défaut, la classe CSS est positionnée par le bean tagsConfigurator.
• visibleBlocks : Le paginateur est composé de 3 blocs : itemsNumbers, navigation, itemsPerPage. Cette Cet attribut permet de définir quels blocks doivent être visiblevisibles. Il faut indiquer le nom des blocs séparés par un virgules une virgule sans espace (L'ordre d'écriture des blocs est important). Par défaut, les 3 blocs sont visibles.
• onchange : Le blocks block itemsPerPage contient une liste déroulante permettant de définir la taille des pages. Cette attribut surcharge l'attribut onChange de cette liste déroulante. Dans l'exemple ci-dessus, à chaque changement de la taille de page, on simule un clique clic du bouton submitPageSize qui recharge le paginateur.

La balise e:paginator ne gère pas l'affichage des données. Elle s'occupe de la gestion des pages (voir la page 04 Pagination pour l'le chapitre utilisation d'un paginateur dans une page JSF).

...

Un autre attribut department est utilisé pour mémoriser le service duquel pour lequel le paginateur doit récupérer les choses. Cet attribut est positionné par le setter correspondant :

...

Le paginateur ainsi écrit peut être utilise utilisé par un contrôleur.

public class EntryPaginator extends ListPaginator<Entry> {


private static final long serialVersionUID = 1L;

/**
 * The domain service.
 */
private DomainService domainService;

/**
 * Constructor.
 */
public EntryPaginator(){
 	super();
}

/**
 * Constructor.
 */
public EntryPaginator(final DomainService domainService){
 	super();
 	this.domainService = domainService;
}

/**
 * @see org.esupportail.commons.web.beans.ListPaginator#getData()
 */
@Override
protected List<Entry> getData(){
   return getDomainService().getEntries();
}

/**
 * @return the domainService
 */
public DomainService getDomainService(){
 	return domainService;
}

/**
 * @param domainService the domainService to set
 */
public void setDomainService(final DomainService domainService){
 	this.domainService = domainService;
}

}

...

Utilisation d'un paginateur

...

La méthode reset() est appelée automatiquement par la méthode afterPropertiesSet() de la classe AbstractDomainAwareController. Dans cette méthode, on initialise le paginateur et on charge ses première premières données (avec un service vide, la liste des choses récupérées sera vide) :

...

Nous montrons dans cette partie comment présenter un paginateur, pour obtenir un affichage de ce genre : Image Modified
On commence par englober le tout d'un formulaire, nécessaire pour faire fonctionner les boutons de navigation :

...

On commence ensuite une table pour parcourir les entrées du paginateur (on suppose ici que le paginateur est un attribut paginator d'un contrôleur controller) :

<h:dataTable
    rendered="#{not empty controller.paginator.visibleItems}"
             id="data"
             rowIndexVar="variable"
        value="#     value="#{controller.paginator.visibleItems}"
             var="thing"
             border="0"
    style="width:100%"
             cellspacing="0"
    cellpadding="0">

L'attribut rendered fait que cette table ne sera affichée que lorsque le paginateur a des éléments visibles. A chaque tour de boucle, la variable thing parcourt la liste controller.getPaginator().getVisibleItems(). On ajoute ensuite à la table une entête, sous forme d'un facet <f:facet name="header">. C'est ce facet qui contiendra :

...

Ces 3 points sont gérés par la balise e:paginator ( cf. utilisation du tagLib e:paginator ) 

On parcourt ensuite des colonnes dans lesquelles on affiche ce que l'on veut, par exemple :

<t:column>
   <h:text value="#{thing.value}" />
</t:column>

<%@include file="_include.jsp"%>
<%@include file="_navigation.jsp"%>

 <h:form id="formTest1">
	   <h:messages />
	   <h:inputText value="#{test1Controller.myInput}" />
	   <h:commandButton value="#{msgs['MESSAGE.ENTRY.SAVE']}" action="#{test1Controller.addEntry}" />
	   <h:commandButton value="SetTest2Value" action="goToTest2">
		      <t:updateActionListener value="#{test1Controller.myInput}"
			                      property="#{test2Controller.value}" />
	   </h:commandButton>

	   <h:dataTable rendered="#{not empty test1Controller.paginator.visibleItems}"
		      id          id="data"
		        rowIndexVar="variable"
		                value="#{test1Controller.paginator.visibleItems}"
		                var="entry" border="0"
		
      style=          border="0" style="width:100%"
		                cellspacing="0"
		    cellpadding="0">
		      <f:facet name="header">
			<h:panelGroup>
				         <h:panelGroup>
            <e:paginator id="entryPaginator"
					                         paginator="#{test1Controller.paginator}"
					                         itemsName="#{msgs['ENTRY']}"
					                         onchange="javascript:{simulateLinkClick('formTest1:submitPageSize');}" />
				}" />
            <e:commandButton id="submitPageSize"
					 action="#{test1Controller.paginator.forceReload}" />
			         </h:panelGroup>
		      </f:facet>
		      <t:column>
			         <e:text value="#{entry.value}"/>
		      </t:column>
		      <t:column>
			         <e:text value="#{entry.date}"/>
		      </t:column>
	   </h:dataTable>
 </h:form>

private EntryPaginator paginator;

/**
 * @see org.esupportail.formation.web.controllers.AbstractDomainAwareBean#reset()
 */
@Override
public void reset() {
	super.reset();
	paginator = new EntryPaginator(getDomainService());
}

...

public class EntryHPaginator extends AbstractHibernateQueryPaginator<Entry> {

/**
 *
 */
private static final long serialVersionUID = 1L;

/**
 * Constructor.
 */
public EntryHPaginator() {
	super();
}

/**
 * @see org.esupportail.commons.dao.AbstractHibernateQueryPaginator#getQueryString()
 */
@Override
protected String getQueryString() {
	return HqlUtils.from("Entry");
}

}

<bean id="entryHPaginator"
	class="org.esupportail.formation.web.beans.EntryHPaginator">
	<property name="daoService" ref="daoService"/>
</bean>

...