Après avoir installé RichFaces, je me suis lancé dans la rédaction d'une page d'exemple, histoire d'apprendre le fonctionnement de cette librairie qui semble bien intéressante.

Le but de cette page d'exemple est de mettre en place une DataTable, avec fonctionnalités de tri et de filtres. Toutes ces fonctionnalités utiliseront de l'Ajax, et il ne sera donc pas nécéssaire de recharger la page afin de voir les changements.

Les contacts contenus dans notre DataTable devront être triés par nom de famille par défaut. Il sera également possible pour l'utilisateur de changer l'ordre de tri (croissant, décroissant), ainsi que la propriété servant à effectuer ce tri (prénom, nom, ou adresse mail).

Enfin, pour le filtre, nous aurons un champ de texte qui limitera la liste aux contacts :

• Dont le nom commence par la requête
• Dont le prénom commence par la requête
• Dont l'adresse mail contient la requête

Mise en place d'une Rich DataTable

Afin de commencer notre page d'exemple, nous allons créer une classe Contact, qui aura pour vocation de contenir les données. Cette classe est un JavaBean, et possède donc les caractérisques suivantes :

• Les propriétés doivent être privées
• Chaque propriété doit avoir des accésseurs (getters et setters) publics
• La classe doit avoir un constructeur par défaut
• La classe doit implémenter Serializable

Nous allons donc créer notre classe Contact avec les propriétés firstName, lastName et mailAddress : public class Contact implements java.io.Serializable { private String firstName; private String lastName; private String mailAddress; public Contact() { } public Contact(String firstName, String lastName, String mailAddress) { this.firstName = firstName; this.lastName = lastName; this.mailAddress = mailAddress; } // Getters and setters }

La seconde étape sera de créer un managed bean JSF, qui nous renvera une liste de contacts d'exemple : public class DataTableManager { // Returns sample data public DataModel getSampleModel() { List<Contact> contacts = new ArrayList<Contact>(); contacts.add(new Contact("Toto", "Tata", "toto@tata.com")); contacts.add(new Contact("John", "Doe", "john@doe.com")); contacts.add(new Contact("Alan", "Smithee", "alan@smithee.com")); contacts.add(new Contact("Vivien", "Barousse", "barousse.vivien@gmail.com")); contacts.add(new Contact("Titi", "Tata", "titi@tata.com")); contacts.add(new Contact("Foo", "Bar", "foo.bar@provider.com")); contacts.add(new Contact("Bar", "Baz", "bar.baz@provider.com")); contacts.add(new Contact("Gloubi", "Boulga", "gloubi@goulba.com")); return (new ListDataModel(contacts)); } }

Et enfin, dernière étape, nous allons créer notre Rich DataTable, basique pour l'instant, capable d'afficher ces données : <rich:dataTable value="#{DataTableManager.sampleModel}" var="contact"> <f:facet name="header"> <h:outputText value="Sorting & Filter exemple" /> </f:facet> <rich:column> <f:facet name="header"> <h:outputText value="First name" /> </f:facet> <h:outputText value="#{contact.firstName}" /> </rich:column> <rich:column> <f:facet name="header"> <h:outputText value="Last name" /> </f:facet> <h:outputText value="#{contact.lastName}" /> </rich:column> <rich:column> <f:facet name="header"> <h:outputText value="Mail address" /> </f:facet> <h:outputText value="#{contact.mailAddress}" /> </rich:column> </rich:dataTable>

Nous avons dans l'exemple de code précédent créé une Rich DataTable. Le code ressemble à celui d'une DataTable classique, la seule différence étant l'utilisation de la taglib RichFaces au lieu de la taglib standard.

Rajout des fonctionnalités de tri

L'ajout du tri dans une Rich DataTable est très facile. La balise <rich:column /> possède un attribut sortBy, qui permet de spécifier la propriété qui sera utilisée pour trier la colonne concernée.

Notre code précédent ressemble donc désormais à ceci : <rich:dataTable value="#{DataTableManager.sampleModel}" var="contact"> <f:facet name="header"> <h:outputText value="Sorting & Filter exemple" /> </f:facet> <rich:column sortBy="#{contact.firstName}"> <f:facet name="header"> <h:outputText value="First name" /> </f:facet> <h:outputText value="#{contact.firstName}" /> </rich:column> <rich:column sortBy="#{contact.lastName}"> <f:facet name="header"> <h:outputText value="Last name" /> </f:facet> <h:outputText value="#{contact.lastName}" /> </rich:column> <rich:column sortBy="#{contact.mailAddress}"> <f:facet name="header"> <h:outputText value="Mail address" /> </f:facet> <h:outputText value="#{contact.mailAddress}" /> </rich:column> </rich:dataTable>
L'exécution de ce code nous montre que sur chaque colonne, RichFaces a rajouté des boutons permettant à l'utilisateur de choisir quelle colonne sera utilisée pour trier les données, et de choisir l'ordre de tri.

Il est également possible de donner un ordre de tri par défaut à notre DataTable. Pour celà, nous allons utiliser l'attribut sortOrder de notre balise <rich:column /> : <rich:column sortBy="#{contact.lastName}" sortOrder="ASCENDING"> <f:facet name="header"> <h:outputText value="Last name" /> </f:facet> <h:outputText value="#{contact.lastName}" /> </rich:column>
Ainsi, au lancement de la page, les contacts seront triés par ordre alphabétique en fonction de leur nom de famille. Il sera également possible pour l'utilisateur de changer la propriété servant à faire le tri (et de choisir le prénom, ou l'adresse mail). L'utilisateur aura également la possibilité de changer l'ordre de tri (croissant, décroissant).

Filtrer les données

Le filtrage des données à l'intérieur d'une DataTable passe par plusieurs étapes :

• Il faut commencer par créer un champ de texte, permettant à l'utilisateur de rentrer la requête sur laquelle nous allons nous baser pour filtrer les entrées
• Il faudra ensuite créer une méthode permettant de filter chacune de nos entrées. Cette méthode prends en paramètre l'objet à filter, et renvoie un booléen indiquant si l'objet doit être affiché
• Enfin, il faudra que notre DataTable soit mise à jour à chaque modification de la requête

La première étape est donc de créer notre champ de texte. Il s'agit d'un simple champ de texte JSF (<h:inputText />) que nous allons lier à une propriété d'un managed bean : public class DataTableManager { // [...] // Filtering private String filterValue; public String getFilterValue() { return filterValue; } public void setFilterValue(String filterValue) { this.filterValue = filterValue; } } Puis le code JSP correspondant : <h:inputText value="#{DataTableManager.filterValue}" id="lastNameFilterText"> </h:inputText>
Seconde étape, toujours dans notre managed bean, nous allons créer une méthode filtrant les objets de type Contact en fonction de la requête qui nous est envoyée par le champ de saisie. Dans l'exemple ci dessous, la méthode doFilter prends en paramètre l'objet que nous allons devoir filtrer (dans notre cas, on objet de type Contact), et dois renvoyer true si le contact doit être affiché, false sinon : public class DataTableManager { // [...] public boolean doFilter(Object value) { if (filterValue == null) { return (true); } Contact contact = (Contact) value; if (contact.getFirstName().toLowerCase() .startsWith(filterValue.toLowerCase())) { return (true); } if (contact.getLastName().toLowerCase() .startsWith(filterValue.toLowerCase())) { return (true); } if (contact.getMailAddress().toLowerCase() .contains(filterValue.toLowerCase())) { return (true); } return (false); } } Nous allons également dire à notre DataTable d'utiliser cette méthode afin de filtrer les entrées à afficher : <rich:column sortBy="#{contact.firstName}" filterMethod="#{DataTableManager.doFilter}"> <f:facet name="header"> <h:outputText value="First name" /> </f:facet> <h:outputText value="#{contact.firstName}" /> </rich:column>
Enfin, dernière étape, nous allons préciser à RichFaces que notre champ de texte doit automatiquement rafraîchir, en Ajax, notre DataTable afin que les données soient de nouveau filtrées, avec la nouvelle requête : <h:inputText value="#{DataTableManager.filterValue}" id="lastNameFilterText"> <a4j:support event="onkeyup" reRender="dataTable" requestDelay="500" /> </h:inputText> La balise <a4j:support /> permet, entre autres, de mettre rafraîchir un composant. Elle prends 3 paramètres :

• event : l'évènement JavaScript qui devra déclencher le rafraîchissement
• reRender : le composant à rafraîchir
• requestDelay : permet de spécifier un délai entre la requête et le refraîchissement du composant

A chaque fois que la valeur du champ de texte est modifiée, la nouvelle valeur est envoyé dans notre managed bean, et notre DataTable est raffraîchie. Ainsi, le tableau va de nouveau être filtré, et notre méthode va permettre d'éliminer certains résultats de notre tableau.


Nous avons donc vu un premier exemple de fonctionnalité Ajax qu'il est possible de réaliser grâce à RichFaces. Une DataTable avec fonctionnalités de tri et de filtre, qui se rafraîchit sans recharger la page.

Les sources du projet NetBeans de cet article sont disponnibles ici.