Retours sur le ParisJUG du 9 octobre 2012 : Nouveautés JSF 2.2 & PrimeFaces

Préparation et rencontre

Après la rencontre de Çagatay Çivici, créateur et leader du projet PrimeFaces, nous rejoignons l’ISEP où se déroule le ParisJUG. Les organisateurs préparent la salle et les premiers invités se manifestent. En quelques dizaines de minutes, la salle se remplit jusqu’à être pleine. Avant de commencer les présentations, l’équipe d’Ippon Technologies annonce qu’un tirage au sort sera organisé pour gagner 2 places pour la formation PrimeFaces qui aura lieu dans les locaux d’Ippon.

Prélude : présentation de Programmatoo

La soirée commence avec une intervention de Programmatoo, une petite équipe qui propose, sous forme d’ateliers, d’initier les enfants de 6 à 14 ans à la programmation. Le but est de leur faire travailler les points suivants :

  • Mathématiques
  • Logique
  • Algorithme

Pour les intéressé(e)s, une session atelier sera organisée lors d’un prochain ParisJUG.

Première partie : présentation des nouveautés JSF 2.2 par Çagatay Çivici

La première session commence par une présentation des nouveautés de JSF 2.2. Voici les principales nouveautés évoquées :

  • Faces Flows : au même titre que Spring Web Flow, cette nouvelle fonctionnalité permet de gérer un flow. L’annotation @FlowScoped(id=”flowName“) permet de définir un “flow scoped bean”, utilisé pour retourner un flow complet et non plus une seule vue/page. Ce bean sera uniquement accessible depuis les vues/pages qui composent ce flow. La définition du flow s’effectue avec un fichier flowName.xhtml et permet de préciser les règles de navigation avec les différentes vues correspondantes.
  • Multi-Templating : cette fonctionnalité permet de changer le look and feel d’une application JSF à partir de différents templates. Chacun de ces templates disposera de ses propres ressources (css, js, images) et sera indépendant de l’application.
  • Support de l’HTML5 : JSF 2.2 supporte tous les nouveaux attributs HTML5 (tel que l’attribut placeholder d’une balise input) en introduisant le concept d’attributs pass-through. A partir d’une facelet, ces attributs peuvent être définis de 3 façons (nous prendrons l’attribut placeholder pour les exemples) : - Utiliser l’attribut désiré préfixé du namespace xmlns:p=”http://java.sun.com/jsf/passthrough”:
    <h:inputText value="#{bean.value}" <span style="color: #800000;">p:placeholder="Enter text"</span> />
  • Utiliser le nouveau tag jsf/core *passThroughAttribute à l’intérieur de la balise correspondante *avec les attributs name et value correspondant au nom et à la valeur de l’attribut désiré :
    <span style="color: #003366;"><h:inputText value="#{bean.value}" ></span><br></br><span style="color: #800000;">    <f:passThroughAttribute name="placeholder" value="Enter text" /></span><br></br><span style="color: #003366;"></h:outputText></span>
  • Utiliser le nouveau tag jsf/core *passThroughAttributes *avec l’attribut value correspondant à la référence d’une *Map<String, Object> *définissant plusieurs attributs et leurs valeurs :
    <span style="color: #003366;"><h:inputText value="#{bean.value}" ></span><br></br><span style="color: #800000;">    <f:passThroughAttributes value="#{bean.attributesMap}" /></span><br></br><span style="color: #003366;"></h:outputText></span>
  • Support avancé d’Ajax : JSF 2.2 propose un composant pour l’upload de fichier avec la possibilité de traiter l’envoi en mode synchrone ou en mode asynchrone. Une nouvelle fonctionnalité est la gestion d’une file d’attente des requêtes Ajax avec l’utilisation du tag <f:ajax>. Son attribut value permet de définir un délai pour l’envoi de la requête afin de pouvoir traiter les requêtes dans l’ordre voulu. Enfin, JSF 2.2 fournit une sécurité renforcée contre les attaques de type CSRF.

Seconde partie : présentation de PrimeFaces par Çagatay Çivici

Après un petit break restauration, Çagatay Çivici nous fait une présentation de Primefaces. Il s’agit d’une bibliothèque de composants JSF permettant de créer rapidement et simplement des applications web. Cette bibliothèque prend en charge :

  • les interfaces visuelles avec de nombreux composants
  • les interactions Ajax (avec possibilité de Server Push)
  • la gestion des thèmes graphiques
  • un environnement mobile pour prendre totalement en charge la navigation de l’application à partir d’un smartphone.

Après avoir montré que Primefaces était aujourd’hui la bibliothèque la plus convoitée sur Google (google trend), Çagatay Çivici nous fait une démo des différents composants PrimeFaces et de la rapidité à les mettre en place. Quelques lignes de codes suffisent pour créer un tableau dynamique avec filtrage et tri en fonction des colonnes. Ou encore pour effectuer des drag’n’drop dynamiques avec possibilité d’interagir avec n’importe quel élément graphique. Tous les évènements utilisateurs sont clairement définis et peuvent être utilisés pour déclencher des traitements (tant côté serveur que côté client). PrimeFaces rapproche tellement les interactions côté client et côté serveur que nous pouvons déclencher des traitements Javascript à partir d’une méthode Java. Vous pouvez avoir une vue d’ensemble des composants, de démos et codes correspondants sur la page : http://www.primefaces.org/showcase-labs/ui/home.jsf

Fin de la soirée : remise des prix

Alors que nous annonçons la fin de participation pour le concours Ippon, une âme innoncente (Antoine) tire au sort les heureux gagnants. Ils se voient remettre sur le champ une place pour une formation PrimeFaces. Dans la joie et la bonne humeur, les gens quittent la salle après cette soirée riche en informations.

Découvrez les photos de la soirée :