...

exercice

	Ajouter une page JSF
	Ajouter une page JSF

Créer la page test1.jsp, (la créer à partir de about.jsp, en ne gardant que la barre de navigation) et tester (elle doit s'afficher).

Note : la page doit s'afficher maintenant qu'elle existe.

solution

Contenu de test1.jsp :

Bloc de code
<%@include file="_include.jsp"%> <h:page stringsVar="msgs" menuItem="test1" locale="#{sessionController.locale}"> <%@include file="_navigation.jsp"%> </h:page>

exercice

	Créer une règle de navigation
	Créer une règle de navigation

Ajouter un formulaire avec un bouton Move sur la page, dont l'action gotoWelcome envoie sur la page welcome.jsp.

Info
Ajouter une règle de navigation dans le fichier /properties/jsf/navigation-rules.xml.

solution

1. Contenu de test1.jsp :

Bloc de code

<%@include file="_include.jsp"%>
<h:page stringsVar="msgs" menuItem="test1"
   locale="#{sessionController.locale}">
  <%@include file="_navigation.jsp"%>
  <h:form>
    <h:commandButton value="Move"
	action="gotoWelcome"/>
  </h:form>
</h:page>

2. Dans navigation-rules.xml ajouter :

Bloc de code

<navigation-rule>
  <from-view-id>/stylesheets/test1.jsp</from-view-id>
  <navigation-case>
    <from-outcome>gotoWelcome</from-outcome>
    <to-view-id>/stylesheets/welcome.jsp</to-view-id>
    <redirect />
   </navigation-case>
</navigation-rule>

exercice

	Créer un contrôleur
	Créer un contrôleur

Ajouter une classe contrôleur Test1Controller (la créer à partir de AboutController), ajouter à cette classe une méthode callback() qui renvoie la chaîne gotoWelcome, et appeler cette méthode en réaction au bouton de la page test1.jsp.
Tester.

Info
Ne pas oublier de déclarer le bean test1Controller dans /properties/web/controllers.xml.

solution

1. Création de la classe java Test1Controller qui extends AbstractContextAwareController :

Bloc de code
avec une méthode callback : /** * JSF callback. * @return A String. */ public String callback() { return "gotoWelcome"; }

2. Déclaration du bean dans le fichier controller.xml :

Bloc de code

<bean id="test1Controller"
  class="org.esupportail.formation.web.controllers.Test1Controller"
  parent="abstractContextAwareController"
  scope="session"
  >
  <description>A bean to manage the test1 page.</description>
</bean>

3. Modification le contenu de test1.jsp:

Bloc de code

<%@include file="_include.jsp"%>
<h:page stringsVar="msgs" menuItem="test1"
   locale="#{sessionController.locale}">
  <%@include file="_navigation.jsp"%>
  <h:form>
    <h:commandButton value="Move"
	action="#{test1Controller.callback}"/>
  </h:form>
</h:page>

Messages d'erreur

Dans une page JSP les balises <e:messages> et <e:message> permettent d'afficher des messages d'erreur à l'utilisateur.La balise <e:messages> permet d'afficher l'ensembles des messages d'erreurs.La balise <e:message> permet d'afficher les messages d'erreurs relatifs à une balise <e:inputText> particulière. Elle dispose, à cet effet, d'un attribut for qui lui permet de faire le lien avec un attribut id d'une balise <e:inputText> donnée. Ce mécanisme est notamment utilisé quand l'attribut required de la balise <e:inputText> est positionné à true ou bien quand un validateur (cf. ci-dessous) lui est associé.Il est aussi possible, dans une callback d'un contrôleur, de remonter des messages d'erreurs vers la vue. Ces messages seront généralement rendus grâce à la balise <e:messages>. Typiquement, la callback renverra null, c'est-à-dire que la page affichée à l'utilisateur restera la même (celle où s'est produite l'erreur de saisie). Dans l'exemple suivant, on affiche un message si l'utilisateur correspondant à l'identifiant donné est déjà administrateur :

...

exercice

	Afficher un message sur une page JSF
	Afficher un message sur une page JSF

Ajouter une boite de saisie (id="myInput") au dessus du bouton dans le formulaire, lier le contenu de la boite à une propriété myInput de test1Controller, et modifier la méthode callback() pour qu'elle ne renvoie vers la page d'accueil que si myInput a au moins deux caractères, sinon reste sur la vue test1.jsp en affichant le message d'erreur TEST1.MESSAGE.SHORT.

Info

On pourra utiliser le code

Bloc de code
addErrorMessage("form:myInput", "TEST1.MESSAGE.SHORT"))

et déclarer le message d'erreur dans les fichiers /properties/i18n/bundles/Messages_.properties*).

solution

1. Ajout de l'attribut myInput dans Test1controller :

Bloc de code
private String myInput; public String getMyInput() { return myInput; } public void setMyInput(String myInput) { this.myInput = myInput; }

2. Modification de la méthode callback :

Bloc de code
/* JSF callback. * @return A String. */ public String callback() { if (myInput.length() < 2) { addErrorMessage(null, "TEST1.MESSAGE.SHORT"); return null; } return "gotoWelcome"; }

3. Ajout du message dans messages_.properties* :

Bloc de code
Exemple pour messages_fr.properties TEST1.MESSAGE.SHORT = Le champ "myInput" doit contenir plus de 2 caractères.

4. Modification de la page test1.jsp :

Bloc de code

<%@include file="_include.jsp"%>
<h:page stringsVar="msgs" menuItem="test1" locale="#{sessionController.locale}">
  <%@include file="_navigation.jsp"%>
  <h:form>
	<h:messages/>
	<h:inputText value="#{test1Controller.myInput}" required="true"/>
	<h:commandButton value="Move"
	action="#{test1Controller.callback}"/>
  </h:form>
</h:page>form>

Validation des formulaires

...

exercice

	Utiliser un validateur prédéfini
	Utiliser un validateur prédéfini

Ajouter un validateur prédéfini à la boite de saisie et supprimer le code correspondant de la méthode callback() (utiliser le validateur validateLength)

solution

1. Modification de la méthode callback :

Bloc de code
/** * JSF callback. * @return A String. */ public String callback() { return "gotoWelcome"; }

2. Modification de test1.jsp :

Bloc de code

<%@include file="_include.jsp"%>
<h:page stringsVar="msgs" menuItem="test1" locale="#{sessionController.locale}">
  <%@include file="_navigation.jsp"%>
  <h:form>
    <h:messages/>
    <h:inputText value="#{test1Controller.myInput}" required="true">
	<f:validateLength minimum="3"/>
    </h:inputText>
    <h:commandButton value="Move"
	action="#{test1Controller.callback}"/>
  </h:form>
</h:page>

Développement de validateurs personnalisés

...

exercice

	Écrire un validateur
	Écrire un validateur

Ajouter un validateur personnalisé validateMyInput() à la boite de saisie qui se charge de lancer une exception à la place de la méthode callback().

solution

1. Ajout dans Test1Controller:

Bloc de code

/**
 * @param context
 * @param componentToValidate
 * @param value
 * @throws ValidatorException
 */
public void validateMyInput(FacesContext context,
  UIComponent componentToValidate,
  Object value) throws ValidatorException {
  String strValue = (String) value;
  if (strValue.length() < 2) {
	throw new ValidatorException(getFacesErrorMessage("TEST1.MESSAGE.SHORT"));
  }
}

2. Modification test1.jsp :

Bloc de code

<%@include file="_include.jsp"%>
<h:page stringsVar="msgs" menuItem="test1" locale="#{sessionController.locale}" >
 <%@include file="_navigation.jsp"%>
 <h:form>
   <h:messages/>
   <h:inputText value="#{test1Controller.myInput}" required="true"
      validator="#{test1Controller.validateMyInput}"/>
   <h:commandButton value="Move"
	action="#{test1Controller.callback}"/>
 </h:form>
 </h:page>form>

Mise à jour de propriétés par les formulaires (updateActionlistener)

...

exercice

	Utiliser un updateActionListener
	Utiliser un updateActionListener

Faire une vue test2.jsp qui s'appuie sur un contrôleur test2Controller qui possède une propriété chaîne de caractères value. Cette vue test2.jsp ne fait qu'afficher la valeur de value. Rajouter un bouton SetTest2Value à la vue test1.jsp et faire en sorte que l'appuie de ce bouton mettre dans test2Controller.value la valeur de myInput.

Info
Rajouter au passage une entrée dans la barre de navigation pour aller sur la vue test2.jsp depuis n'importe quelle page de l'application.

solution

1. Création de Test2Controller qui extends AbstractContextAwareController et qui contient l'attribut value :

Bloc de code
private String value; public String getValue() { return value; } public void setValue(String value) { this.value = value; }

2. Ajout dans controller.xml :

Bloc de code

<bean id="test2Controller"
  class="org.esupportail.formation.web.controllers.Test2Controller"
  parent="abstractContextAwareController"
  scope="session"
  >
  <description>A bean to manage the test2 page.</description>
</bean>

3. Création de la page test2.jsp:

Bloc de code

<%@include file="_include.jsp"%>
<h:page stringsVar="msgs" menuItem="test2" locale="#{sessionController.locale}">
 <%@include file="_navigation.jsp"%>
 <h:form>
  <h:outputText value="#{test2Controller.value}"/>
 </h:form>
</h:page>

4. Modification du navigation-rules.xml :

Bloc de code

<navigation-rule>
  <from-view-id>/stylesheets/test1.jsp</from-view-id>
  <navigation-case>
    <from-outcome>gotoWelcome</from-outcome>
    <to-view-id>/stylesheets/welcome.jsp</to-view-id>
    <redirect />
  </navigation-case>
  <navigation-case>
    <from-outcome>gotoTest2</from-outcome>
    <to-view-id>/stylesheets/test2.jsp</to-view-id>
    <redirect />
  </navigation-case>
</navigation-rule>

5. Modification de test1.jsp :

Bloc de code

<%@include file="_include.jsp"%>
<e:page stringsVar="msgs" menuItem="test1" locale="#{sessionController.locale}">
  <%@include file="_navigation.jsp"%>
  <h:form>
    <h:messages/>
    <h:inputText value="#{test1Controller.myInput}"
        validator="#{test1Controller.validateMyInput}"/>
    <h:commandButton value="Move"
      action="#{test1Controller.callback}"/>
    <h:commandButton value="SetTest2Value"
      action="gotoTest2">
       <t:updateActionListener value="#{test1Controller.myInput}"
	  property="#{test2Controller.value}"/>
    </h:commandButton>
  </h:form>
</h:page>

Remarque

title	Ordre des opérations en JSF

Appel des validateurs,
Affectation des valeurs des entrées de formulaires,
Appel des updateActionListeners,
Appel de la callback d'action du formulaire.

...

Pages enfant

Comparaison des versions

Ancienne version 8

Nouvelle version 9

Légende

Messages d'erreur

Validation des formulaires

Développement de validateurs personnalisés

Mise à jour de propriétés par les formulaires (updateActionlistener)

Pages enfant

Pages … Projets Les projets arrêtés esup-commons - Framework de développement Guide du développeur V2 1 Prise en main 1.9 JSF (Java Server Faces) 1.9.3 Ecriture des formulaires Historique de la page

Comparaison des versions

Ancienne version 8

Nouvelle version 9

Légende

Messages d'erreur

Validation des formulaires

Développement de validateurs personnalisés

Mise à jour de propriétés par les formulaires (updateActionlistener)

Pages

Projets
Les projets arrêtés
esup-commons - Framework de développement
Guide du développeur V2
1 Prise en main
1.9 JSF (Java Server Faces)
1.9.3 Ecriture des formulaires

Historique de la page