Framework kde composants UI côté serveur destiné à faciliter le développement

Transcription

1 JSF

2 Introduction Framework kde composants UI côté serveur destiné à faciliter le développement d applications pour le web Validation Navigation Internationalisation Gestion des erreurs Conversion de données S appuie sur le modèle MVC Mapping HTML/Objet Navigation

3 JSF Balises JSF Composant JavaBeans Ecouteurs Classe de rendu Conversion de données Validation de données

4 Cycle de vie d une requête/réponse 3 cas JSF Requête non JSF/Réponse JSF Requête JSF/Réponse JSF Requête JSF/Réponse non JSF

5 Cycle de vie d une requête/réponse JSF Restauration Mise à jour Traitement Traitement Traitement Requête de l état de la de l état de des des des JSF vue la vue événements validations événements Réponse JSF Rendu de la réponse Traitement des événements Appel de l application Traitement des événements Mise à jour du modèle

6 Cycle de vie d une requête/réponse JSF Phase 1: Construction ti de la vue Si la page correspondante est affichée pour la première fois: Les composants UI de la vue sont créés, stockés dans une structure arborescente (Une vue JSF est une structure arborescente dont la racine est une instance de la classe UIViewRoot, l implémentation JSF Sinon utilise les informations de l objet HttpServletRequest pour constituer cette arborescence) puisl état létat de lavue estsauvegardépourdes sauvegardé des appels ultérieurs. L état Létat précédent de la vue est restauré (par appel récursif de la la méthode UIComponent.restoreState sur les composants de l arbre ) et la vue devient la vue courante, elle peut être accessible par : FacesContext fc= FacesContext.getCurrentInstance(); UIViewRoot vr= fc.getviewroot(); t() Le binding de tous les composants est alors établi

7 Cycle de vie d une requête/réponse JSF Phase 2: mise à jour de l état t de la vue Lors de cette phase la vue côté serveur est synchronisée avec la vue côté client, les modifications apportées par le client sur la vue sont récupérées é é à l aide de l objet HttpServletRequest (cette mise à jour est effectuée par appel récursif de la méthode UIComponent.processDecodes() Phase 3: Validations Un composant JSF peut posséder un validator ou un converter qui sont invoqués lors de l appel récursif de la méthode UIComponent.processValidators(), si une erreur survient alors JSF passe automatiquement à la phase rendu de la réponse Phase 4: Mise à jour du modèle

8 Utilisation dans une page JSP Deux bibliothèques jstl html core

9 Bibliothèque HTML Catégorie Eléments Description i Input Output Sélection Commandes Divers h:inputhidden, h:inputsecret, h:inputtext, h:inputtextarea h:message, h:messages, h:outputformat, h:outputlabel, h:outputlink, h:outputtext h:selectbooleancheckbox, h:selectmanycheckbox, h:selectmanylistbox, h:selectmanymenu, h:selectonelistbox, h:selectonemenu, h:selectoneradio h:commandbutton, h:commandlink h:datatable, h:form, h:graphicimage, h:panelgrid, h:panelgroup, h:column

10 Bibliothèque de base Catégorie Eléments Description i Vue f:facet, f:subview, f:view Sélection f:selectitem, f:selectitems Ecouteurs Validation f:actionlistener, f:valuechangelistener f:validatedoublerange, f:validatelength, f:validatelongrange, f:validator Conversion f:convertdatetime, t f:convertnumber, f:converter Divers f:facet, f:subview, f:view Création d une vue, sous vue JSF

11 Développement d une application JSF: Etapes 1. Mapping d une instance de FacesServlet dans le dd web.xml. 2. Création des pages JSF 3. Définition de la navigation dans le fichier de configuration des ressources de l application. 4. Création des backing beans. 5. Déclaration des managed bean dans le fichier de configuration des ressources de l application.

12 Exemple: guessnumber Mappingde la servlet ltfacesservlet <servlet> <display name>facesservlet</display name> <servlet name>facesservlet</servlet name> <servlet class>javax.faces.webapp.facesservlet </servlet class> l <load on startup>1</load on startup> </servlet> <servlet mapping> <servlet name>facesservlet</servlet name> <url pattern>/guess/*</url pattern> </servlet mapping>

13 Création de la page greeting.jsp Dans les pages jsp ajouter les déclarations suivantes: taglib uri=" prefix="h" %> taglib uri=" prefix="f" %> Ajouter le tag view : le tag view représente la racine de l arbrorescence des composants JSF Le tag form <f:view> <h:form id="form1"> </h:form> </f:view>

14 Création de la page greeting.jsp Le tag Label: <h2>bonjour. Mon nom est duke. Je pense à un nombre entre <h:outputtext lang="fr" value="#{usernumberbean.minimum}"/> i et <h:outputtext value="#{usernumberbean.maximum}"/>. maximum}"/> Pouvez vous le deviner?</h2> Le Tag image <h:graphicimage id="waveimg" url="/wave.med.gif" />

15 Création de la page greeting.jsp d Le tag zone de texte <h:inputtext id="userno" label=«nombre utilisateur" value="#{usernumberbean.usernumber}">... </h:inputtext> L attribut id est utilisé par le tag message. Le contenu de l attribut label est affiché dans le message d erreur de validation L attribut value lie la valeur du composant userno à la propriété UserNumberBean.userNumber

16 Création de la page greeting.jsp Ajout d un validateur du composant userno Dans le tag outputtext <f:validatelongrange minimum="#{usernumberbean.minimum}" maximum="#{usernumberbean.maximum}" maximum}" /> Message d erreur personnalisé Dans le tag userno on ajoute l attribut suivant: convertermessage="#{errmsg.usernoconvert}" pour surcharger le message d erreur par défaut Remarque: L expression utilisée dans l attribut convertermessage contient une référence à la clé usernoconvert définie le fichier de ressources ErrMsg Dans le noeud application du fichier de configuration JSF faces config.xml: <resource bundle> <base name>guessnumber.applicationmessages</base name> <var>errmsg</var> </resource bundle> Le fichier des propriétés guessnumber.properties (package guessnumber) définit la valeur suivante: usernoconvert=la valeur saisie n'est pas un nombre.

17 Création de la page greeting.jsp Ajout d un bouton <h:commandbutton id="submit" action="success" value="submit" /> L action success est définie dans le fichier de configuration JSF faces config.xml à l aide d une règle de navigation: <navigation rule> <from view id>/greeting.jsp</from view id> <navigation case> <from outcome>success</from outcome> <to view id>/response.jsp</to view id> </navigation case> </navigation rule>

18 Création de la page greeting.jsp Affichage des messages <h:message showsummary="true" showdetail="false" style="color: red; font family: New Century Schoolbook, serif; font style: oblique; text decoration: overline" id="errors1" for="userno"/>

19 Création des beans backing bean: définit les propriétés p et méthodes associées à un composant UI. Exemple: la propriété value du composant userno est liée à la propriété usernumber du backing bean UserNumberBean: <h:inputtext id="userno" label="user Number" value="#{usernumberbean.usernumber}"> Ajout des déclarations Managed Beans dans le fichier faces config.xml <managed bean> <managed bean name>usernumberbean</managed bean name> <managed bean class>guessnumber.usernumberbean</managed bean class> <managed bean scope>session</managed bean scope> <managed property> <property name>minimum</property name> <property class>long</property class> <value>0</value> </managed property> <managed property> <property name>maximum</property name> <property class>long</property class> <value>10</value> </managed property> </managed bean>

20 Création de la page greeting.jsp

21 FacesServlet Reçoit les requêtes des clients Initialise les ressources

22

23

24