tete du loic

Loïc YON [KIUX]
Enseignant-chercheur
Référent Formation Continue

@
loic.yon@isima.fr
telephone
(+33 / 0) 4 73 40 50 42
adresse postale
ISIMA
Campus des Cézeaux
BP 10125
63173 Aubière CEDEX
  • twitter
  • linkedin
  • viadeo
  • calendar

[JEE] JSF & AJAX

 Cette page commence à dater. Son contenu n'est peut-être plus à jour. Contactez-moi si c'est le cas!

Date de première publication : 2012/05/24

Objectif et contexte

L'objectif de cet exercice est de créer une petite application JSF qui utilise de l'AJAX sous Glassfish. On pourrait modifier la devinette du nombre mais nous allons nous intéresser à un carnet d'adresse.

Site sans AJAX

Créer un nouveau projet Netbeans :

Créer un nouveau bean managé CarnetBean (de portée SessionScoped par exemple). Ce bean va simuler l'interaction avec le carnet d'adresse en créant quelques instances d'une classe Personne (nom, prenom, telephone, mail, notes). Créer cette classe Personne qui n'est pas un bean.

Le bean contiendra entre autres un attribut personnes, une liste de Personne.

@ManagedBean
@SessionScoped
public class CarnetBean {
    List<Personne> personnes;
    // ...
}

Première version du site

On va essayer d'afficher la liste des personnes dans un tableau (apr√®s tout ce sont des donn√©es tabulaires) en ne pr√©cisant que les noms et pr√©noms et un clic sur une petite ic√īne va ouvrir une nouvelle page avec tous les d√©tails sur cette personne.

Pour afficher un tableau, on a besoin des balises :

<table>
  <thead>
    <th> <td> </td> <td> </td> </th>
  </thead>
  <tbody>
    <tr>  <td> </td> <td> </td> </tr>
  </tbody>
</table>

Un boucle se déclare facilement en JSF : c:forEach et les attributs var et items.

Si l'on veut appliquer facilement un style sur les lignes (par exemple une ligne sur deux), on peut définir et modifier une variable avec c:set

<c:set var="i" scope="view" value="1" />
<c:set var="i" value="#{(i+1)%2}" />
   

Les balises commandLink et graphicsImage permettent de finaliser le lien avec la deuxième page qui contient la description, page qu'il faut également créer. La page affiche les détails d'une personne que le bean mémorise.

Une version un peu plus JSF

Nous avons déjà obtenu une page relativement potable avec les balises de la JSTL, mais, en fait, on peut mieux faire. JSF propose une balise h:dataTable capable de faire ce que l'on a fait avec les attributs var et value.

Les balises h:column et f:facet permettent respectivement de déclarer les colonnes et leur titre. On peut également appliquer des styles aux différents éléments générés :

<h:dataTable value="#{carnetBean.getPersonnes()}" var="p" 
             rowClasses="line1,line0"
             styleClass="general"
             headerClass="header">
  <h:column><f:facet name="header">Nom</f:facet>#{p.getNom()}</h:column>
</h:dataTable>  
   

Ça a l'air quand m√™me plus simple, non ?

Une pincée d'AJAX

On va maintenant passer à l'ajax qui est intégré depuis la norme 2.0 de JSF (chargement automatique d'une bibliothèque javascript lors de l'utilisation du tag). Le résultat à l'écran sera le suivant : une zone de la page affichera les détails de la personne et non plus une nouvelle page.

Pour intégrer de l'ajax, il suffit d'ajouter la balise f:ajax sur les actions que l'on générait auparavant et de spécifier ce que l'on veut faire par exemple en donnant les informations suivantes :

Les composants sont rep√©r√©s par les identifiants (id) et suivant l'endroit o√Ļ ils sont, les noms peuvent √™tre compliqu√©s. L'utilisation des deux points (:) devant un id permet de sp√©cifier que le nom de l'√©l√©ment est donn√© en absolu.

h:outputText permet de générer un span, il nous faut générer un div en précisant obligatoirement le layout et l'id

<h:panelGroup layout="block" id="" />

Si vous utilisez au mauvais endroit la proprit√©t√© render, sachez que vous pouvez avoir l'erreur : malformedXML :during update : XXX id not found. La raison en est tr√®s simple : l'interface √©tant ex√©cut√©e du c√īt√© vue (client), il faut que l'id soit connu pour √™tre modifi√©, ce qui n'est pas le cas si le composant n'est pas affich√©. La solution : imbriquer des panelGroup par exemple.

Dernière remarque, nous avions choisi une durée de vie (portée) pour le bean lié à la session (SessionScope), c'était pratique pour changer de page. On peut maintenant se restreindre au niveau de la vue (ViewScoped) car on ne change plus de page.

Prochaine étape : intégrer la persistance avec JPA