Projets
Pages enfant
  • 1.9.3 Ecriture des formulaires

Comparaison des versions

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.
Remarque

Bon pour relecture

Sommaire

Exemple

L'écriture des formulaires JSF ne déroutera pas l'habitué des formulaires JSP. On utilisera par exemple :

...

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"%>
  <%@include file="_navigation.jsp"%>
  <h:form>
    <h:commandButton value="Move"
	action="#{test1Controller.callback}"/>
  </h:form>

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"%>
  <%@include file="_navigation.jsp"%>
  <h:form>
	<h:messages/>
	<h:inputText value="#{test1Controller.myInput}" required="true"/>
	<h:commandButton value="Move"
	action="#{test1Controller.callback}"/>
  </h:form>

Validation des formulaires

Utilisation des validateurs prédéfinis

Il existe des validateurs par défaut dans JSF (validateLength, validateLongRange et validateDoubleRange), par exemple :

...

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"%>
  <%@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>

Développement de validateurs personnalisés

Il est aussi possible d'écrire ses propres validateurs. Leur mise en œuvre est relativement simple, par exemple :

...

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"%>

 <%@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>

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

updateActionListener est une balise de la librairie JSF Tomahawk qui est particulièrement utile. C'est un listener qui est associé à une balise permettant une action (bouton, lien) qui, au moment où ce dernier est activé, va lire le contenu de son attribut value pour l'assigner à la référence contenue dans son attribut property.On utilisera par exemple :

...

Remarque
titleOrdre 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.

Conversion des types complexes

Il existe des convertisseurs par défaut dansJSF (DateTimeConverter et NumberConverter). Ils permettent de transformer une date ou un nombre suivant différentes règles, par exemple :

...

La classe LocaleConverter implémente l'interface Converter de JSF.

JSF et accessibilité

Un des objectifs de l'utilisation de JSF est, via un standard de haut niveau, de tendre vers plus d'accessibilité (WAI). L'accessibilité des applications doit être une préoccupation constante des programmeurs, qui ne doivent pas hésiter à tester leurs applications en utilisant des navigateurs pauvres, tel Lynx. En règle générale, on évitera absolument d'utiliser les balises h:commandLink qui à cause de l'utilisation de Javascript brisent toutes les règles de l'accessibilité. On préfèrera dans tous les cas des boutons (e:commandButton). Javascript peut néanmoins être utilisé pour améliorer l'IHM des applications, en faisant attention à ce que les navigateurs ne parlant pas Javascript puissent quand même utiliser l'application. Nous montrons ici à titre d'exemple comment on peut soumettre un formulaire par simple changement de la valeur d'une boite déroulante :

...