Formation

1
Formation Java Server Faces
Participant Mr Frédéric MULLER
www.objis.com - Formation JEE/JSF Groupement
Informatique
1
2
SOMMAIRE

• Rappels J2EE
  p 3
• Positionnement JSF et architecture
  p 9
• Cycle de vie JSF
  p 21
• Packages clés et composants JSF natifs
  p 23
• Composants supplémentaires RichFaces
  p 28
• Composants supplémentaires IceFaces
  p 32
• Exemple cinématique application JSF
  p 39
• Problématique JSP / JSF et réponse Facelet
  p 44
• Exemple mise en oeuvre Facelet / IceFaces
  p 53
• Listeners personalisés
  p 62
• RichFaces configuration
  p 69
• Méthode création composant personnalisé
  p 80

www.objis.com - Formation JSF
2
3
RAPPELS J2EE

• Architecture multicouche
• Architecture J2EE
• Livrables J2EE
• Services J2EE
• Roles J2EE
• Concepts techniques clés

www.objis.com - Formation JSF
3
4
Rappel J2EE Architecture multicouche
4
5
Rappel J2EE Architecture J2EE
5
6
Livraisons J2EE
6
7
Services J2EE

• JNDI Java Naming Directory Interface
• JCA Java Connector Architecture
• JTA Java Transaction API
• JPA Java Persistence API
• JMS Java Message Service
• JAAS Java Authentication Authorisation
  Service
• JAX-WS Java API for XML Web Services
• JAXB Java API for XML Binding

7
8
Concepts techniques clés

• Injection de dépendances
• Programmation Orientée Aspects / Interception
• Annotations
• Mapping Objet / Relationnel
• Sécurité
• Transaction

www.objis.com - Formation JSF
8
9
Positionnement et architecture JSF

• Contexte création JSF
• Versions et Implémentations
• JSF dans J2EE
• JSF et le pattern MVC
• Cycle de vie requête JSF
• Packages et composants JSF
• Composants additionnels RichFaces / IceFaces

www.objis.com - Formation JSF
9
10
Contexte développement dapplications Java/J2ee
en 2001

• JSP Servlets
• Force bien maîtrisé développeurs
• Faiblesse maintenance !
• Struts
• Force Framework web MVC2
• Faiblesse création interface
• Faiblesse peu doutils RAD
• Swing
• Force Composants graphiques
• Force Outils RAD
• Faiblesse pas déquivalent web !
• Besoin framework web MVC RAD

www.objis.com - Formation JSF
10
11
Naissance de JSF

• Besoin framework et outils web RAD
• Composants visuels
• Gestion état écran
• Gestion évènements client
• Multilingue
• Validation entrée utilisateur
• Affichage adapté (pda,portable)
• Accessibilité
• Navigation entre page
• Acteurs IBM, SUN, BEA, ORACLE
• Mars 2004 spécifications JSF 1.0
• Mai 2004 spécifications JSF 1.1

Amy Fowler
Craig Mac Clanahan
Ed Burns
www.objis.com - Formation JSF
11
12
Versions JSF et API J2EE

• JSF 1.1 (mai 2004)
• JSR 127 http//jcp.org/en/jsr/detail?id127
• servlet 2.3 JSP 1.2 Java 1.3
• JSF 1.2 (août 2006)
• JSR 252 http//jcp.org/en/jsr/detail?id252
• Servlet 2.5 JSP 2.1 Java 5
• JSF 2.0 (juillet 2009)
• JSR 314 http//jcp.org/en/jsr/detail?id314
• Servlet 2.5 JSP 2.1 Java 5
• Profil web JEE6

www.objis.com - Formation JSF
12
13
Implémentations de JSF

• Mojarra implémentation de référence (SUN)
• Librairies jsf-api.jar, jsf-impl.jar
• Composants natifs core, html
• MyFaces implémentation Apache
• Librairies myfaces-api, myfaces-impl
• Composants TomaHawk, Tobago, Trinidad
• Nombreuses autres
• Détail et comparaison www.jsfmatrix.net

www.objis.com - Formation JSF
13
14
Architecture positionnement JSF
www.objis.com - Formation JSF
14
15
Architecture positionnement JSF
www.objis.com - Formation JSF
15
16
JSF dans application J2EE
www.objis.com - Formation JSF
16
17
JSF et le modèle MVC
www.objis.com - Formation JSF
17
18
Exemple
www.objis.com - Formation JSF
18
19
Caractéristiques JSF

• Développement évènementiel orienté Composant
• Simplifie accès et gestion données métiers
• Automatise simplifie gestion état écran entre
  plusieurs requêtes
• Mise en oeuvre de patterns connus
• Masque bas niveau (HttpServletRequest/Response)
• Meilleure maintenance

www.objis.com - Formation JSF
19
20
Modèle évènementiel JSF

• Evènements liés aux actions utilisateurs
• Appui boutton, clic sur lien hypertexte.
• Tout composant implémentant ActionSource
• Evènements liés à MAJ interface par lutilisateur
• Modification données champ texte, combo
• Tout composant implémentant EditableValueHolder
• Evènements liés aux données du modèle métier
• Les 'listeners' traitent les évènements

www.objis.com - Formation JSF
20
21
Cycle de requêtes JSF
www.objis.com - Formation JSF
21
22
Cycle de vie requête JSF 6 étapes clés
ordonnées

• 1) Restauration vue (Arbre composants ecran)
• 2) Appliquer paramètres requête
• 3) Validation ( conversion) entrées utilisateur
• 4) Mise à jour des objets Modèle (backing beans)
• 5) Exécution Appli (ActionEvent,
  ValueChangeEvent)
• 6) Rendu de la réponse (Render)

www.objis.com - Formation JSF
22
23
Packages / Javadoc JSF
JSF 1.1
JSF 1.2
JSF 2.0
www.objis.com - Formation JSF
23
24
Composants JSF
Comportement
Composant
www.objis.com - Formation JSF
24
25
Composants JSF rendu HTML disponible avec Mojarra
25 composants pas assez de choix !
www.objis.com - Formation JSF
25
26
Exemples Composants Héritage et comportement
spécifique
www.objis.com - Formation JSF
26
27
Packages / Javadoc JSF Le contexte FacesContext
JSF 1.2
www.objis.com - Formation JSF
28
Composants JSF supplémentaires

• RichFaces (Jboss) www.jboss.org/richfaces
• Fusion projets Jboss 'RichFaces' et 'Ajax4jsf'
• Le développeur choisit les zones de la page à
  traiter coté serveur zones à mettre à jour
• de 100 composants UI avec support Ajax testés
  avec différents navigateurs
• Chaque composant de 30 attributs
• Tags (a4j et rich)
• Skins (DEFAULT, blueSky, plain, laguna...)
• CDK (Components Development Kit)
• IceFaces (www.icefaces.org)
• Composants MyFaces (http//myfaces.apache.org)

www.objis.com - Formation JSF
28
29
Rappels Ajax
www.objis.com - Formation JSF
29
30
JSF et Ajax avec RichFaces

• Ajax4jsf né de la volonté de créer applications
  riches / Ajax avec JSF
• Ajax4jsf filtre qui ajoute des fonctions
  javascript ainsi que les dépendances de lobjet
  XmlHttpRequest aux composants JSF
• Suite à requete HTTP, le moteur Ajax transforme
  la requête et lenvoi au filtre Ajax4jsf
• Le filtre Ajax4jsf convertit les données au
  format XML et transfère la requête à la servlet
  FacesServlet, pour réaliser cycle 6 étapes JSF

www.objis.com - Formation JSF
30
31
JSF et Ajax avec RichFaces
www.objis.com - Formation JSF
31
32
Composants JSF supplémentaires

• IceFaces (IceSoft) www.icefaces.org
• Leader historique sur JSF Ajax/Web2
• Technologies Skinning, Multimedia, AJAX Push
• Intégration avec
• JSF 1.x / JSF 1.2 / Facelet
• Spring Web Flow
• Jboss Seam
• MyFaces Tomahawk
• Portails Liferay, Jboss Portal, WebLo. Portal
• IDE Eclipse, MyEclipse, Netbeans
• Communauté 100.000 développeurs

www.objis.com - Formation JSF
32
33
JSF et Ajax avec IceFaces
www.objis.com - Formation JSF
33
34
Librairies Icefaces
Dépendences icefaces 181
www.objis.com - Formation JSF
34
35
IceFaces plugin Eclipse

• Intégration du plugin dans Eclipse
• Manuelle si version plugin lt 3.6.2
• Exemple eclipse 3.4 Icefaces 1.8.1
• Sinon Update site icefaces.org/eclipse-updates
• Exemple dès Eclipse 3.5
• Valeur ajoutée du plugin pour développeur
• Création projets Web JSF ICeFaces
• Création projets Web JSF IceFaces Facelet
• Complétion de code
• Gestion visuelle composants graphiques

www.objis.com - Formation JSF
35
36
IceFaces Plugin Eclipse
Plugin m2eclipse (Maven)
Plugin IceFaces (dézipper archive install
eclipse 'local')
Plugin JbossTools pour intégration Jboss
(dézipper le zip dans répertoire 'eclipse')
36
37
IceFaces industrialiser développements

• AppFuse squelettes projets (archetypes maven)
• www.appfuse.org
• Initié en 2002 par Mark Raible
• Squelettes appli. Struts/Jsf hibernate/spring...
  
• Aucun squelette avec Icefaces en frontal !
• Edoras
• www.edorasframework.org
• Initié par MIMACOM, qui fournit support IceFaces
  en Europe (mimacom.ch)
• IceFusion AppFuse pour IceFaces
• icefusion.googlecode.com

37
38
Développement IceFaces
www.objis.com - Formation JSF
38
39
Démo JSF Cinématique application
Done.jsp
index.jsp
Main.jsp
Register.jsp
Confirm.jsp
www.objis.com - Formation JSF
39
40
Configuration JSF fichier web.xml
1
2
www.objis.com - Formation JSF
40
41
Enchaînement accueil?écran JSF
0
1
2
3
4
5
www.objis.com - Formation JSF
41
42
Configuration JSF faces-config.xml
1
2
3
www.objis.com - Formation JSF
42
43
Intégration JSP / JSF

• Objectifs différents
• JSP html java / traitement de haut en bas
• JSF composants / traitement évènementiel
• Cycle de vie différent
• JSP ? Java ? html
• JSF cycle de requête précis (6 étapes)
• Etapes gestion composant JSF
• création gestion entrée rendu
• Etapes composant JSF dans JSP
• En parrallèle création rendu
• Ajout de conenu dans la page par JSF JSP
• En parallèle création rendu !

www.objis.com - Formation JSF
43
44
Intégration JSP / JSF Exemple de problème
www.objis.com - Formation JSF
44
45
Intégration JSP / JSF Comprendre la technologie
Facelet

• Technologie de Vue adaptée à JSF
• ViewHandler
• Sinsère bien dans le cycle requête JSF
• http//facelets.dev.java.net

www.objis.com - Formation JSF
45
46
Intégration JSP / JSF Comprendre la technologie
Facelet
www.objis.com - Formation JSF
46
47
Facelet Configuration
1
Faces-config.xml
2
3
Web.xml
www.objis.com - Formation JSF
47
48
Facelet template.xhtml
www.objis.com - Formation JSF
48
49
Facelet Exemple ecran 1 (guess.xhtml)
1
2
3
4
www.objis.com - Formation JSF
49
50
Facelet rendu ecran 1 (guess.xhtml)
3
4
www.objis.com - Formation JSF
50
51
Facelet Exemple ecran 2 (response.xhtml)
1
2
3
4
Permet collaboration développeur / webdesigner
www.objis.com - Formation JSF
51
52
Facelet rendu ecran 2 (response.xhtml)
www.objis.com - Formation JSF
52
53
Démo Facelet avec IceFaces Template v1 (merci
Eclipse !)
53
54
Démo Facelet avec IceFaces Template v2
54
55
Démo Facelet avec IceFaces Template v3
55
56
Démo Facelet avec IceFaces Template v4
56
57
Démo Facelet avec IceFaces Page v0
57
58
Démo Facelet avec IceFaces Page v1
58
59
Démo Facelet avec IceFaces Page v1 rendu
59
60
Démo Facelet avec IceFaces Page v2
60
61
Démo Facelet avec IceFaces Page v2 rendu
61
62
Création listener personnalisé

• Pour écouter et traiter 3 types dévènements
• Type 1 actions utilisateur
• Action event déclenché par bouton ou lien
• Type 2 changement de valeur champ
• inputText
• Type 3 phases JSF
• Une des 6 phases traitement requête.
• Accès par programmation à lévènement
  (ActionEvent) ou au contexte JSF (FacesContext)

www.objis.com - Formation JSF
62
63
Comprendre un ActionEvent
www.objis.com - Formation JSF
63
64
Création listener type 1 action utilisateur
1
2
www.objis.com - Formation JSF
64
65
Création listener type 2 changement valeur
champ
1
2
www.objis.com - Formation JSF
65
66
Création listener type 3 phases JSF
1
2
www.objis.com - Formation JSF
66
67
Création listener type 3 exemple logs phases
JSF
www.objis.com - Formation JSF
67
68
JSF et Ajax

• Ajax4jsf gère arbre de composants tout au long de
  la requête / réponse Ajax.

www.objis.com - Formation JSF
68
69
RichFaces

• Bibliothèque composants graphiques JSF
• Basé sur Ajax4jsf ( ajout skins composants)
• lta4jgt et ltrichgt
• de 100 composants visuels
• demos jboss.org/richfaces/demos.html
• JSF 1.2 / RichFace 3.x
• RI Mojarra
• MyFaces 1.2
• JSF 2 / RichFaces 4

www.objis.com - Formation JSF
69
70
Composants a4j lta4jsupportgt

• Permet dajouter le support dajax aux composants
  JSF de base
• Attribut event évènement javascript qui lance
  la requête ajax
• Attribut reRender contient les ids des
  composants à mettre à jour lors du retour de la
  réponse
• Attribut actionListener binding de la méthode
  qui prend un ActionEvent en paramètre et retourne
  un type void.
• Attribut action binding de la méthode qui
  invoque laction de lapplication

www.objis.com - Formation JSF
70
71
Attributs commun A4J / RichFaces

• reRender
• ajaxSingle booléen pour limiter les phases
  2,3,4 seulement au composant qui envoie la
  requête
• Immediate comme en jsf, pour éviter phase
  validation/conversion
• bypassUpdates permet déviter phases MAJ modèle
  invocation application pour passer directement
  à phase rendu réponse.
• onComplete code à exécuter coté client à la fin
  de la requête
• limitTolist si valeur est true, la mise à jour
  des composants coté clients se limite à la liste
  dans lattribut reRender
• timeOut Max durée requête ajax
• Data permet de récupérer du serveur une donnée
  durant la requête ajax. Ex propriété dun bean
  avec EL (sérialisée via JSON)

www.objis.com - Formation JSF
71
72
Intégration JSF / RichFaces
1
Filtre RichFaces
3
2
Optionnel intégration avec Facelets
www.objis.com - Formation JSF
72
73
Intégration JSF / RichFaces
www.objis.com - Formation JSF
73
74
Intégration Facelet / RichFaces
www.objis.com - Formation JSF
74
75
Intégration Facelet / RichFaces
www.objis.com - Formation JSF
75
76
Modification Skins

• Skins par défaut dans META-INF/skins de larchive
  RichFaces-impl-xxx.jar
• blueSky, Laguna, classic, glass-x,
• Pour personnaliser skin,
• désarchiver richfaces-impl-xxx.jar
• Sur un fichier .properties, faire modif css
  désirées
• Archiver à nouveau le jar et mettre ds projet

Web.xml
www.objis.com - Formation JSF
76
77
Concepts clés RichFaces

• Concept N1 envoi d'une requête Ajax
• lta4jcommandLinkgt,lta4jcommandButtongt
• lta4jsupportgt
• lta4jpollgt
• Attribut limitToList
• Concept N2 mise à jour partielle de la page
• Attribut reRender
• lta4joutputPanelgt
• Concept N3 zones à traiter coté serveur
• lta4jregiongt
• Attribut AjaxSingle
• Attribut process

www.objis.com - Formation JSF
77
78
Composants clés RichFaces

• Composants d'entrée
• ltrichinplaceInputgt, ltrichinplaceSelectgt
• ltrichsuggestionBoxgt, ltrichcomboBoxgt,...
• Composants de sortie
• ltrichpanelgt,ltrichsimpleTogglepanelgt
• ltrichtabPanelgt,ltrichmodalPanelgt,ltrichPanelBargt
  
• Composants d'itération de données
• ltrichdataTablegt, ltrichdataListgt,ltrichdataGridgt
• ltrichdataScrollergt (Pagination)
• Composants de sélection
• ltrichpickListgt, ltrichorderingListgt
• Composants de Menu
• ltrichdropDownMenugt, ltrichcontextMenugt
• Données et arbres scrollables
• ltrichscrollableDataTablegt, ltrichtreegt

78
79
Concept N1 envoi requête Ajax
www.objis.com - Formation JSF
79
80
Création composant personnalisé

• 1) Créer classe hérite de javax.faces.component.UI
  ComponentBase
• Redéfinir ma méthode encodeBegin(FaceContext
  context)
• Si attribut, alors redéfinir encodeEnd()
• 2) Enregistrer la classe dans faces-config.xml
• balise ltcomponentgt
• 3) Créer un Tag spécifique (classe héritant de
  UIComponentTag)
• Ex sfsellerHello
• 4) Créer le descripteur (TLD) du Tag

Exemple http//www.theserverside.com/news/136478
6/Building-Custom-JSF-UI-Components
www.objis.com - Formation JSF
80
81
Composant personnalisé Comprendre son
environnement
www.objis.com - Formation JSF
81
82
Composant personnalisé Comprendre les
sollicitations
Lnacées par UIViewRoot à differentes phases du
cycle de vie
Méthodes à gérer ProcessDecodes ProcessValida
tors ProcessUpdates ProcessApplication RenderR
esponse
www.objis.com - Formation JSF
82
83
Composant personnalisé Comprendre UIViewRoot
www.objis.com - Formation JSF
83
84
Impact à chaque phase

• Phase 1 (Restauration de la vue)
• Gestion de l'état (coté client ou serveur)
  sauver / restaurer
• (optionnel) Implémenter javax.faces.component.Sta
  teHolder
• Ex saveState retourne tableau d'objets
  Sérialisables
• Ex restoreState attend un tableau d'objets
  Sérialisables
• Phase 2 (Traitement de la requête)
• 'Décoder' (exploiter en interne) les paramètres
  de requête
• Le faire dans composant OU déléguer à classe
  (Renderer)
• Impulsion par méthode processDecode du
  UIViewRoot
• (obligatoire) Implémeter méthode decode()
• Decode() travailler avec le Renderer
• 3) Créer un

www.objis.com - Formation JSF
84
85
Création composant personnalisé

• 1) Créer classe hérite de javax.faces.component.UI
  ComponentBase
• Redéfinir ma méthode encodeBegin(FaceContext
  context)
• Si attribut, alors redéfinir encodeEnd()
• 2) Enregistrer la classe dans faces-config.xml
• balise ltcomponentgt
• 3) Créer un Tag spécifique (classe héritant de
  UIComponentTag)
• Ex sfsellerHello
• 4) Créer le descripteur (TLD) du Tag

Exemple http//www.theserverside.com/news/136478
6/Building-Custom-JSF-UI-Components
www.objis.com - Formation JSF
85
86
Composant personnalisé Rendu visuel (Render)
www.objis.com - Formation JSF
86
87
Composant personnalisé decode() dans composant
www.objis.com - Formation JSF
87
88
Composant personnalisé decode() dans Renderer
perso
www.objis.com - Formation JSF
88
89
Composant personnalisé encodeBegin()
www.objis.com - Formation JSF
89