Retour d’expérience sur l’utilisation de PrimeFaces

Sur un projet JSF  il est très utile, voire indispensable, de sélectionner une bibliothèque de composants graphiques pour gagner en productivité et efficacité. Cela évite de réinventer la roue. Parmi les différentes bibliothèques disponibles, celle qui a particulièrement retenu mon attention est PrimeFaces.

Comme cette bibliothèque est récente, je vous propose mon retour d’expérience sur cette technologie.

PrimeFaces  est une bibliothèque développée par la société Prime Teknoloji (http://www.prime.com.tr/).

Son créateur et principal développeur de PrimeFaces, Çağatay Çivici (@cagataycivici), est très impliqué dans le monde JSF puisqu’il fait lui-même partie des membres de l’expert group JSF.

Il est à noter que la philosophie de Prime Teknoloji est non seulement de faire évoluer PrimeFaces, mais aussi de l’utiliser au quotidien. Ils peuvent ainsi mieux concevoir et réaliser leur bibliothèque.

Cette bibliothèque est open source (sous licence Apache License V2) et se compose de trois projets :

  • PrimeUI pour les composants graphiques destinés principalement aux interfaces desktop ;
  • PrimeMobile pour les composants graphiques destinés aux appareils mobiles (basé sur jQuery Mobile);
  • PrimePush pour utiliser du push dans un navigateur en communication client-serveur (basé sur la librairie Atmosphère).

Malheureusement (ou heureusement :-)), PrimeFaces fonctionne uniquement sous JSF2.

Richesses des composants

L’intérêt principal de PrimeFaces réside dans la diversité et la qualité des composants proposés. Ils sont nombreux, plus de 100, et répondent le plus souvent en standard aux besoins des applications. Ce sont des composants graphiques avancés qui possèdent des fonctionnalités prêtes à l’emploi, aidant ainsi à créer aisément des RIA (Rich Internet Application). L’ensemble des composants est présenté dans une page de démonstration, avec le code (à la fois xhtml et Java) s’y rapportant (http://www.primefaces.org/showcase/ui/home.jsf).

Il existe 13 catégories de composants :

  • Ajax Core : les fonctionnalités ajax de PrimeFaces
  • Input : De composant d’entrée utilisateur
  • Button : Remplacement des boutons de JSF
  • Data : Présentation des données
  • Panel : Mise en page
  • Overlay : Fenêtre de dialog
  • Menu : Menus contextuels
  • Charts : Graphiques
  • Message : Messages destinés à l’utilisateur
  • Multimedia : Intégration avec des images, utilisation d’une webcam,
  • File : Upload et download de fichier
  • DragDrop : Déplacement d’élément du DOM
  • Misc : Catégorie fourre-tout (lecteur de flux rss, Captcha)

Comme certains pourraient le constater, les composants graphiques ressemblent à ceux de jQuery ui, puisqu’ils étaient à la base des encapsulations de ces derniers. De cette encapsulation il reste les classes css et la structure html du composant. C’est un gage de qualité de rendu des composants.

Par ailleurs, le code généré est simple, lisible et évite (contrairement à RichFaces) l’utilisation  de tableaux pour la mise en page, ce qui est un plus indéniable.

Il est à noter que l’utilisation d’ajax est très présente dans PrimeFaces. Par exemple, l’action déclenchée par les boutons qu’il propose est par défaut en ajax.

Voici quelques-uns des composants qui ont attiré le plus mon attention :

  • AjaxStatus

Ce composant, facile d’utilisation, offre un indicateur lors des requêtes ajax faites par les composants PrimeFaces.

(http://www.primefaces.org/showcase/ui/ajaxStatusStandard.jsf)

  • Partial Submit

C’est un composant utile dans le cadre de l’optimisation d’une application car il permet de réduire le trafic dans les requêtes ajax en transmettant seulement le contenu de certains composants d’entrée.

(http://www.primefaces.org/showcase/ui/partialSubmit.jsf)

  • Growl

Celui-ci affiche des messages à l’utilisateur à la manière du Growl sur Mac, c’est-à-dire à l’aide de notifications.

(http://www.primefaces.org/showcase/ui/growl.jsf)

Thèmes

Les nombreux thèmes disponibles dans PrimeFaces apportent un réel plus en ce sens qu’ils rendent les applications particulièrement attrayantes, avec peu d’effort et de connaissances en css. Par défaut PrimeFaces utilise le thème Aristo, rappelant les interfaces MacOS. De plus, depuis peu le fameux thème du Twitter Bootstrap a été mis à disposition.

Ces thèmes se présentent sous la forme de jars contenant à la fois le css et les images dont il a besoin. Les thèmes s’installent aisément dans le classpath et sont appliqués dans le web.xml.

Si un thème est conçu pour une entreprise en utilisant sa charte graphique, le jar créé peut être ajouté aux applications utilisant PrimeFaces pour harmoniser leurs rendus. Il sera ainsi possible, en cas de modification de la charte graphique de changer l’aspect général de ces applications via un simple changement de jar. La tâche est ainsi largement simplifiée puisqu’elle évite ainsi la modification du css des applications. C’est pour cela qu’il est parfois préférable d’utiliser les composants PrimeFaces en remplacement de ceux fournis avec JSF, car ils utilisent par défaut le thème sélectionné.

De plus, comme nous l’avons vu précédemment, les composants étaient initialement basés sur jQuery UI, il est donc facile de créer des thèmes personnalisés via le ThemeRoller de jQuery disponible sur http://jqueryui.com/themeroller/.

Pour ma part, il m’a été facile de changer le style appliqué aux composants, pour leur donner un rendu différent de celui prévu à l’origine.

Communauté et suivi

Un des avantages indéniables est l’engouement et la communauté qui existent autour de PrimeFaces. On trouve ainsi aisément réponse à ses questions et des solutions adaptées à ses problèmes.

La documentation quant à elle, est complète et conséquente (près de 500 pages au format pdf). Chaque composant y est décrit avec les paramètres offerts par le tag. Cependant la plupart du temps, je trouve qu’il est plus simple d’aller sur la page de démonstration du composant et de voir le code html et java associé pour en comprendre l’utilisation.

Le projet PrimeFaces quant à lui est régulièrement mis à jour, soit pour corriger des bugs soit pour ajouter des nouvelles fonctionnalités. D’ailleurs la politique des développeurs est d’intégrer gratuitement dans PrimeFaces les nouvelles fonctionnalités, initialement demandées par les entreprises ayant un support payant.

Cet engouement a engendré le projet PrimeFaces Extensions qui apporte des fonctionnalités supplémentaires à PrimeFaces, manquantes pour les développeurs.

Conclusion

Ce qui m’a intéressé le plus dans PrimeFaces  est son approche web, respectueux des standards et basé sur jQuery. Les composants sont également simples d’utilisations, mais néanmoins puissants lorsqu’on les exploite avec plus de paramètres. Par exemple, il est possible de passer d’un simple tableau à un tableau trié avec pagination en ajax tout en faisant du lazy-loading).

De plus, PrimeFaces s’installe sans difficulté dans un projet soit manuellement en plaçant l’unique jar dans le classpath, soit via Maven en ajoutant le repository et la dépendance suivante dans le pom.xml (http://primefaces.org/downloads.html). Puis il suffit de rajouter le namespace « xmlns:p=http://primefaces.org/ui » dans la page xhtml  pour indiquer que l’on souhaite utiliser les composants PrimeFaces.

Enfin, sur notre projet nous hésitions entre PrimeFaces et RichFaces. Une des craintes provenait de la pérennité du projet face au mastodonte qu’est RichFaces (JBoss). Nous avons fait le pari de PrimeFaces (à partir de sa troisième version) sur un nouveau projet  et nous ne regrettons pas ce choix, tant il apporte satisfaction et qu’il est amené à devenir prochainement incontournable!

Nombre de vue : 531

COMMENTAIRES 4 commentaires

  1. thierryler dit :

    Interview de Çagatay Çivici, créateur de PrimeFaces : http://thierry-leriche-dessirier.developpez.com/articles/interview/cagatay-civici-prime-faces/

  2. thierryler dit :

    Tu ne voudrais pas co-écrire un article sur prime faces ?

  3. elhhaloui dit :

    thanks

  4. Moustapha dit :

    Merci Richard pour le retour d’expérience,
    J’ajoute que ça m’a plaisait beaucoup la documentation de primefaces, qui favorise le ease-using, avec des exemples simple.

AJOUTER UN COMMENTAIRE