Tutoriel JSF N°12 : Mise en œuvre de Mojarra + Primefaces

Avec Objis, spécialiste formation JSF maîtrisez le téléchargement et l’installation de PrimeFaces, librairie de composants JSF. Identifiez le lien entre Primefaces et Mojarra, implémentation de référence de JSF. Comparez Primefaces avec d’autres bibliothèques comme RichFaces et Icefaces. Enfin, mettez en œuvre le composant DataTable de Primefaces.

Objectifs

- Comprendre le pourquoi de Primefaces.
- Télécharger et intégrer PrimeFaces dans une application JSF 2
- Mise en œuvre de quelques composants.

Programme

- Contexte JSF
- Partie 1 : téléchargement Primefaces
- Partie 2 : installation de Primefaces
- Partie 3 : mise en œuvre du composant datatable de Primefaces

Durée

30 min.

Contexte

Mojarra fournit en standard 32 de composants visuels pour développer votre interface. Ce nombre de composants ne suffit pas pour répondre au besoin des interfaces riches qui se veulent modernes. ces interfaces sont caractérisées par des composants supportant la mise à jour partielle c’est le principe d’Ajax.

- Plusieurs bibliothèque de composant répondent à ce besoin :
- Primefaces , Icefaces, Richfaces.
- Primefaces reste à ce jour la bibliothèque la plus utilisée.

PNG - 39.2 ko
comparaison avec d’autres librairies

- Avec PrimeFaces le choix a été fait de ne pas intégrer des plugins tierces. On a donc juste un seul jar qui ne nécessite aucune configuration et aucune dépendance.

- Les Composants de PrimeFaces sont développés avec un principe de conception qui stipule qu ’« un composant d’interface utilisateur doit masquer la complexité, mais garder la souplesse".

- Il fournit plus de 100 composants dévéloppés sur le principe d’AJAX

PNG - 78.9 ko
plus de 100 composants ajaxisés

- Sa souplesse permet de développer des interfaces riches de façon rapide.

PNG - 30.7 ko
flexibilité et rapidité d’utilisation

Partie 1 : téléchargement Primefaces

- Télécharger le seul fichier JAR de Primefaces primefaces-3.4.2

- Installez le zip C :\objis\Formation\outils\librairies ou un autre répertoire de votre choix.

Partie 2 : installation de Primefaces

REMARQUE : dans le cadre de ce tutoriel nous partirons d’un projet jsf2.

- Téléchargez le zip du projet

Zip - 2.3 Mo
Jsf2Primefaces-3
PNG - 34 ko
nouvelle_structure_du_projet

Installation de Primefaces
- 1- Mettre le JAR primefaces-3.4.2.jar->primefaces-3.4.2 dans le dossier WEB-INF/lib de l’application.

a- Ajouter les sources primefaces-sources-3.4.2.jar ( jar optionnel)dans WEB-INF/lib

INFO 1 :
- La richesse de la librairie primefaces est telle qu’il existe plus de 30 thèmes que vous pouvez utiliser dans votre application : ces thèmes sont disponible sous forme de jar sur le repository ici

télécharger et Placer le JAR bluesky-1.0.8.jar dans le dossier WEB-INF/lib de l’application.

- Obtenez, la structure suivante pour WEB-INF/lib de l’application.

PNG - 18.3 ko
Structure du dossier WEB-INF/lib

Note : les thèmes sont configurable dans le fichier web.xml comme sur la figure ci-dessous :

PNG - 64.8 ko
configuration du thème bluesky dans web.xml

- 2- Déclarer dans toutes vues de l’application utilisant Primefaces le namespace que voici : • xmlns:p="http://primefaces.org/ui

- Vos vues sont prêtes a accueillir les composants Primefaces.

Partie 3 : mise en œuvre de quelques composants

- Télécharger les fichiers contenant des composants Primefaces ici, copiez ces fichiers dans le répertoire WebContent comme sur l’image ci-dessous :

PNG - 18.2 ko
Structure des vues

- Refresh sur projet.

- Dans un package com.primefaces.sample , copiez les classes java téléchargées ici

PNG - 23 ko
classes Java

- L’exécution de notre projet donne les rendus suivants :

PNG - 28.3 ko
login.xhtml

- Après authentification avec le login=test et mot de passe=test, obtenez la vue ci-dessous :

PNG - 44.4 ko
home.xhtml

Expliquez les tags suivants :

- p:panel
- p:dataTable ainsi que l’attribut selection et rowkey
- p:ajax, ainsi que l’attribut update et listner
- p:column

- Téléchargez le zip du projet

Zip - 5.3 Mo
Jsf2Primefaces-4

Conclusion

Dans ce tutoriel, vous avez télécharger Primefaces, installer primefaces et, mis en œuvre la richesse des composants que fournit cette librairie .