Présentation des framework JSF et richfaces issue de la formation J2EE réalisée par le club CFEM ( club futur entrepreneur en multimédia) au sein de l'institut supérieur d'informatique et multimédia de sfax (ISIMS)

1. Développement
des applications web
avec J2EE
Réalisé par:
Jihed DGHAIES
Copyright club CFEM ©2010
JSF et RichFaces

2. Programme
1 JSF
2 Cycle JSF
3 Intégration de JSF dans un projet J2EE
4 Création page JSF
5
3 Managed Bean
6 Validators et converters
7
3 Richfaces
2/29

3. JSF 1/3
 La technologie JSF représente un Framework basé sur les
composantes utilisateurs utilisées pour construire des applications web.
 L’API de JSF permet de représenter les composants, de gérer leur état
et leur comportement. Elle facilite l’écriture d’interfaces utilisateurs en
fournissant une bibliothèque de contrôles :
 Simples : zones de saisie classiques, boutons, liens hypertextes.
 Complexes : tableaux de données …
 Elle permet même de créer ses propres composants, ou d’enrichir les
composants existants.
3/29

4. JSF 2/3
 JSF permet principalement de:
 Faciliter le développement de pages web grâce à un Framework basé sur les
composants.
 représenter les composantes UI et gérer leurs états.
 Gestion d’événements.
 Validation coté serveur.
 Conversion de données.
 Définition de la navigation des pages.
 gérer les composantes et les lier aux objets coté serveur.
4/29

5. JSF 3/3
 il existe plusieurs implémentations de JSF :
 Myfaces
 RichFaces
 Icefaces
 Tomahawk
 Trinidad
 Pour plus de détails : http://www.jsfmatrix.net/
5/29

6. Cycle JSF
6/29

7. Intégration de JSF dans un projet J2EE 1/2
 La première étape à faire lorsqu’on veut utiliser les ServerFaces est
de définir le mapping avec l'instance de FacesServlet dans le fichier
de déploiement web.xml.
 Toutes les pages contenant le mapping /faces/ seront interprétées
par le serveur comme contenant des composants JSF.
7/29

8. Intégration de JSF dans un projet J2EE 2/2
 Après avoir déclaré la servlet de JSF on déclare le chemin de fichier
de configuration de JSF « faces-config.xml ».
 le nom et l'emplacement du fichier de configuration de JSF faces-
config.xml sont spécifiés par un paramètre de contexte dans web.xml.
 Le chemin vers ce fichier est un chemin relatif à partir de la racine de
l'application.
8/29

9. Création Page JSF 1/2
 la création d’une page JSF se résume à :
 Ajouter les librairies contenant les TagLibs JSF :
 l'intégration des composants et à définir à quel Bean chaque composant est
relié.
 Les JSF se présentent sous la forme d'un arbre de composants
appelé une "vue". La balise "view" correspond à la racine de cet
arbre et contiendra tous les composants.
 le formulaire qui contient toutes les informations transmises au
serveur lorsque le formulaire sera envoyé, via un clique sur un
bouton en général.
9/29

10. Création Page JSF 2/2
10/29

11. Managed Bean 1/4
 Un bean est une classe Java qui comprend :
 Un constructeur vide.
 Des méthodes publique de lecture et de modification de ses attributs (getXXX et
setXXX) et aucun attribut public.
 Un bean managé est un bean :
 dont la vie est gérée par JSF.
 déclaré dans le fichier de configuration faces-config.xml.
 Ayant un scope.
 Les beans managés sont utiles pour afficher les données provenant
de la couche métier ou pour la saisie de données par l'utilisateur.
11/29

12. Managed Bean 2/4
12/29

13. Managed Bean 3/4
13/29

14. Managed Bean 4/4
14/29

15. Navigation rules 1/2
 Les navigations rules permettent de définir la manière de
naviguer entre les différentes pages JSF.
15/29

16. Navigation rules 2/2
16/29

17. Validateurs
 Afin de vérifier si la saisie utilisateur est valide JSF fournit des Validator.
Validateurs fournies
par défaut en JSF
17/29

18. Validateurs : Managed Bean
18/29

19. Validateur : Création d’un validateur
19/29

20. Les Converters
 La conversion des données est le processus de
conversion ou de transformation d’un type de données
à un autre.
20/29

21. Converter : Création converter
21/29

22. Richfaces
 Richfaces est né du besoin d'associer la technologie Ajax à celle
de JSF.
 il comporte un ensemble de composants permettant d'ajouter des
fonctionnalités Ajax avancées aux composants standards JSF
sans manipulation du code JavaScript.
 Richfaces permet aussi d’enrichir les composants graphiques de
JSF et d’ajouter des nouveaux composants.
22/29

23. Richfaces
23/29

24. Intégration Richfaces
24/29

25. Format page richfaces
 Pour ajouter les balises richfaces dans une page JSP on
ajoute à l’entête de la page les taglib A4J et Rich.
 La bibliothèque a4j( Ajax for JSF) permet d’jouter des
traitement Ajax aux pages JSF.
 La bibliothèque rich contient les composant graphiques de
richfaces .
25/29

26. Les composants ajax: «a4j:support»
 « A4J:support »:Le plus connu et le plus utile des composants Ajax4jsf,
il permet d'ajouter le support Ajax aux composants JSF de base. parmi
ces attributs :

 event : l'évènement javascript qui lance la requête Ajax
 reRender : contient les ids des composants à mettre à jours lors du retour de la
réponse.
 action : la méthode qui invoque l'action de l'application
 ajaxSingle: pour limiter le passage par les phases decode, validation/conversion,
apply values, seulement au composant qui envoie la requête.
 oncomplete: code à exécuter coté client à la fin de la requête
26/29

27. Les composants ajax
 <a4j:commandButton /> : Similaire à h: commandButton, mais
génère une requête Ajax et fait la mise à jour des composants inclus
dans l'attribut reRender.
 <a4j:region/> : Il permet de définir la zone de composants qui seront
traités coté serveur pour une requêtes Ajax. Par défaut, la page
entière est prise en compte.
 <a4j:keepAlive/>: Permet de garder en vie un managedBean déclaré
dans le scope request entre plusieurs requête Ajax.
27/29

28. Les composants graphiques richfaces
 http://livedemo.exadel.com/richfaces-demo/index.jsp
28/29

29. Richfaces skins
 Richfaces propose un système de styles appelé skin pour habiller
les composants Richfaces et JSF.
 Les skins disponibles par défaut sont :
DEFAULT ,plain ,emeraldTown ,blueSky ,wine ,japanCherry ,ruby ,
classic et deepMarine
29/29