La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

- Formation JEE/JSF – Groupement Informatique

Présentations similaires


Présentation au sujet: "- Formation JEE/JSF – Groupement Informatique"— Transcription de la présentation:

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

2 www.objis.com - Formation JSF
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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 2

3 www.objis.com - Formation JSF
RAPPELS J2EE Architecture multicouche Architecture J2EE Livrables J2EE Services J2EE Roles J2EE Concepts techniques clés - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 3

4 Architecture multicouche
Rappel J2EE : Architecture multicouche 4 4

5 Rappel J2EE : Architecture J2EE
5 5

6 Livraisons J2EE 6 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 7

8 Concepts techniques clés
Injection de dépendances Programmation Orientée Aspects / Interception Annotations Mapping Objet / Relationnel Sécurité Transaction - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 9

10 Contexte développement d’applications 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 d’outils RAD Swing : Force: Composants graphiques Force: Outils RAD Faiblesse: pas d’équivalent web ! Besoin framework web MVC RAD - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 10

11 www.objis.com - Formation JSF
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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 11

12 www.objis.com - Formation JSF
Versions JSF et API J2EE JSF 1.1 (mai 2004) JSR 127 : servlet JSP Java 1.3 JSF 1.2 (août 2006) JSR 252 : Servlet JSP Java 5 JSF 2.0 (juillet 2009) JSR 314 : Servlet JSP Java 5+ Profil web JEE6 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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 : - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 13

14 Architecture & positionnement JSF
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 14

15 Architecture & positionnement JSF
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 15

16 JSF dans application J2EE
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 16

17 www.objis.com - Formation JSF
JSF et le modèle MVC - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 17

18 www.objis.com - Formation JSF
Exemple - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 18

19 www.objis.com - Formation JSF
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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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 l’utilisateur 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 20

21 www.objis.com - Formation JSF
Cycle de requêtes JSF - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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) - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 22

23 www.objis.com - Formation JSF
Packages / Javadoc JSF JSF 1.1 JSF 1.2 JSF 2.0 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 23

24 www.objis.com - Formation JSF
Composants JSF Comportement Composant - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 24

25 Composants JSF rendu HTML disponible avec Mojarra
25 composants : pas assez de choix ! - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 25

26 Héritage et comportement spécifique
Exemples Composants : Héritage et comportement spécifique - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 26

27 Packages / Javadoc JSF : Le contexte FacesContext
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING

28 www.objis.com - Formation JSF
Composants JSF supplémentaires RichFaces (Jboss) : 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 ( Composants MyFaces ( - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 28

29 www.objis.com - Formation JSF
Rappels Ajax - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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 l’objet XmlHttpRequest aux composants JSF Suite à requete HTTP, le moteur Ajax transforme la requête et l’envoi 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 30

31 JSF et Ajax avec RichFaces
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 31

32 www.objis.com - Formation JSF
Composants JSF supplémentaires IceFaces (IceSoft) : 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é : développeurs+ - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 32

33 JSF et Ajax avec IceFaces
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 33

34 www.objis.com - Formation JSF
Librairies Icefaces Dépendences icefaces 181 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 34

35 IceFaces : plugin Eclipse
Intégration du plugin dans Eclipse Manuelle si version plugin < 3.6.2 Exemple : eclipse 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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 36

37 industrialiser développements
IceFaces : industrialiser développements AppFuse : squelettes projets (archetypes maven) Initié en 2002 par Mark Raible Squelettes appli. Struts/Jsf + hibernate/spring... Aucun squelette avec Icefaces en frontal ! Edoras : Initié par MIMACOM, qui fournit support IceFaces en Europe (mimacom.ch) IceFusion = AppFuse pour IceFaces icefusion.googlecode.com - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 37

38 Développement IceFaces
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 38

39 Démo JSF : Cinématique application
Done.jsp index.jsp Main.jsp Register.jsp Confirm.jsp - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 39

40 www.objis.com - Formation JSF
Configuration JSF : fichier web.xml 1 2 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 40

41 Enchaînement accueilécran JSF
1 2 3 4 5 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 41

42 www.objis.com - Formation JSF
Configuration JSF : faces-config.xml 1 2 3 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 42

43 www.objis.com - Formation JSF
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 ! - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 43

44 www.objis.com - Formation JSF
Intégration JSP / JSF : Exemple de problème - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 44

45 Comprendre la technologie Facelet
Intégration JSP / JSF : Comprendre la technologie Facelet Technologie de Vue adaptée à JSF ViewHandler S’insère bien dans le cycle requête JSF - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 45

46 Comprendre la technologie Facelet
Intégration JSP / JSF : Comprendre la technologie Facelet - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 46

47 Facelet : Configuration
1 Faces-config.xml 2 3 Web.xml - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 47

48 Facelet : template.xhtml
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 48

49 Exemple ecran 1 (guess.xhtml)
Facelet : Exemple ecran 1 (guess.xhtml) 1 2 3 4 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 49

50 rendu ecran 1 (guess.xhtml)
Facelet : rendu ecran 1 (guess.xhtml) 3 4 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 50

51 Exemple ecran 2 (response.xhtml)
Facelet : Exemple ecran 2 (response.xhtml) 1 2 3 4 Permet collaboration développeur / webdesigner - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 51

52 rendu ecran 2 (response.xhtml)
Facelet : rendu ecran 2 (response.xhtml) - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 52

53 Démo Facelet avec IceFaces : Template v1 (merci Eclipse !)
53 53

54 Démo Facelet avec IceFaces :
Template v2 54 54

55 Démo Facelet avec IceFaces :
Template v3 55 55

56 Démo Facelet avec IceFaces :
Template v4 56 56

57 Démo Facelet avec IceFaces :
Page v0 57 57

58 Démo Facelet avec IceFaces :
Page v1 58 58

59 Démo Facelet avec IceFaces :
Page v1 rendu 59 59

60 Démo Facelet avec IceFaces :
Page v2 60 60

61 Démo Facelet avec IceFaces :
Page v2 rendu 61 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) - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 62

63 Comprendre un ActionEvent
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 63

64 type 1 : action utilisateur
Création listener type 1 : action utilisateur 1 2 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 64

65 type 2 : changement valeur champ
Création listener type 2 : changement valeur champ 1 2 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 65

66 www.objis.com - Formation JSF
Création listener type 3 : phases JSF 1 2 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 66

67 type 3 : exemple logs phases JSF
Création listener type 3 : exemple logs phases JSF - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 67

68 www.objis.com - Formation JSF
JSF et Ajax Ajax4jsf gère arbre de composants tout au long de la requête / réponse Ajax. - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 68

69 www.objis.com - Formation JSF
RichFaces Bibliothèque composants graphiques JSF Basé sur Ajax4jsf (+ ajout skins + composants) <a4j:> et <rich:> + 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 69

70 www.objis.com - Formation JSF
Composants a4j : <a4j:support> Permet d’ajouter le support d’ajax 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 l’action de l’application - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 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 l’attribut 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é d’un bean avec EL (sérialisée via JSON) - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 71

72 Intégration JSF / RichFaces Optionnel : intégration avec Facelets
1 Filtre RichFaces 3 2 Optionnel : intégration avec Facelets - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 72

73 Intégration JSF / RichFaces
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 73

74 Intégration Facelet / RichFaces
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 74

75 Intégration Facelet / RichFaces
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 75

76 www.objis.com - Formation JSF
Modification Skins Skins par défaut dans META-INF/skins de l’archive 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 76

77 Concepts clés RichFaces
Concept N°1 : envoi d'une requête Ajax <a4j:commandLink>,<a4j:commandButton> <a4j:support> <a4j:poll> Attribut limitToList Concept N°2 : mise à jour partielle de la page Attribut reRender <a4j:outputPanel> Concept N°3 : zones à traiter coté serveur <a4j:region> Attribut AjaxSingle Attribut process - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 77

78 Composants clés RichFaces
Composants d'entrée <rich:inplaceInput>, <rich:inplaceSelect> <rich:suggestionBox>, <rich:comboBox>,... Composants de sortie <rich:panel>,<rich:simpleTogglepanel> <rich:tabPanel>,<rich:modalPanel>,<rich:PanelBar> Composants d'itération de données <rich:dataTable>, <rich:dataList>,<rich:dataGrid> <rich:dataScroller> (Pagination) Composants de sélection <rich:pickList>, <rich:orderingList> Composants de Menu <rich:dropDownMenu>, <rich:contextMenu> Données et arbres scrollables <rich:scrollableDataTable>, <rich:tree> - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 78

79 Concept N°1 : envoi requête Ajax
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 79

80 Création composant personnalisé
1) Créer classe hérite de javax.faces.component.UIComponentBase Redéfinir ma méthode encodeBegin(FaceContext context) Si attribut, alors redéfinir encodeEnd() 2) Enregistrer la classe dans faces-config.xml balise <component> 3) Créer un Tag spécifique (classe héritant de UIComponentTag) Ex : sf:sellerHello 4) Créer le descripteur (TLD) du Tag Exemple : - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 80

81 Composant personnalisé : Comprendre son environnement
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 81

82 Composant personnalisé : Comprendre les sollicitations
Lnacées par UIViewRoot à differentes phases du cycle de vie Méthodes à gérer : ProcessDecodes ProcessValidators ProcessUpdates ProcessApplication RenderResponse - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 82

83 Composant personnalisé : Comprendre UIViewRoot
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 83

84 www.objis.com - Formation JSF
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.StateHolder 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 - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 84

85 Création composant personnalisé
1) Créer classe hérite de javax.faces.component.UIComponentBase Redéfinir ma méthode encodeBegin(FaceContext context) Si attribut, alors redéfinir encodeEnd() 2) Enregistrer la classe dans faces-config.xml balise <component> 3) Créer un Tag spécifique (classe héritant de UIComponentTag) Ex : sf:sellerHello 4) Créer le descripteur (TLD) du Tag Exemple : - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 85

86 Composant personnalisé :
Rendu visuel (Render) - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 86

87 Composant personnalisé : decode() dans composant
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 87

88 Composant personnalisé : decode() dans Renderer perso
- Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 88

89 Composant personnalisé :
encodeBegin() - Formation JSF - INTEGRATION CONTINUEwww.objis.com - Formation SPRING 89


Télécharger ppt "- Formation JEE/JSF – Groupement Informatique"

Présentations similaires


Annonces Google