JSF EE6 salim.ismail

Introduction

JSF est un standard J2EE. C’est est un Framework d'interface utilisateur pour les applications web, basé sur les technologies JSP et Servlets.

Le but de JSF est d'accroître la productivité des développeurs dans le développement des interfaces utilisateur tout en facilitant leur maintenance. 

Architecture

Cycle de vie

  • Restore View :

Reconstruction de l’arborescence des composants. Cette vue va être construite sur le serveur et transformée sur le serveur en une page HTML qui sera envoyée au client.

  • Apply Requests :

Extraction des valeurs de la requête.

  • Process Validations :

Validation et conversion des données.

  • Update Model Values :

Mise à jour du modèle après validation et/ou conversion.

  • Invoke Application :

Appel des méthodes pour le traitement de la page.

  • Render Response :

Génération de la réponse qui sera retournée au client. 

Avantages

JSF présente de nombreux avantages, parmi lesquels:

  • respect du concept M.V.C. (Model/View/Controller).
  • Conversion des données.
  • Validation plus facile des données.
  • Automatisation de l’affichage des messages d’erreur.
  • Support d’Ajax sans programmation.
  • Fournit des composants standards simples pour l’interface utilisateur.
  • Possibilité d’ajouter ses propres composants.
  • Adaptable à d’autres langages de balise que HTML (WML par exemple pour les téléphones portables).
  • Internationalisation.


Liste des composants

Voici la liste des compostants proposée par JSF :

Composants HTML

Les composants HTML de JSF sont les suivants :

tagdescription
h:formFormulaire HTML
h:inputTextChamp de saisie de texte sur une ligne.
h:inputTextAreaChamp de saisie de texte sur plusieurs lignes.
h:inputSecretChamp de saisie de mot de passe.
h:inputHiddenChamp caché
h:outputLabelLabel pour un autre composant pour son accessibilité.
h:outputLinkAncre HTML
h:outputFormatComme outputText, mais ajoute un filtre d'affichage.
h:outputTextAffiche du texte.
h:commandButtonBouton de contrôle: submit, reset, ou button.
h:commandLinkLien de contrôle qui fonctionne comme un h:commandButton.
h:messageAffiche le message le plus récent pour un composant.
h:messagesAffiche tous les messages.
h:grapicImageAffiche une image.
h:selectOneListboxUne liste de selection, une seule sélection possible.
h:selectOneMenuUne liste de sélection de menu, une seule sélection possible.
h:selectOneRadioMet en place des radio buttons, une seule sélection possible.
h:selectBooleanCheckboxCheckbox.
h:selectManyCheckboxMet en place des checkboxes.
h:selectManyListboxSélection multiple.
h:selectManyMenuSélection multiple de menu.
h:panelGridTableau HTML.
h:panelGroupRegroupement de plusieurs composants dans un seul.
h:dataTableUn tableau paramétrable.
h:columnColonne dans un h:dataTable


Composants Core

Les composants Core de JSF sont les suivants :

TagDescription
f:viewCrée une vue au premier plan.
f:subviewCrée une sous-vue d'une vue.
f:facetAjoute une facette à un composant.
f:attributeAjoute un attribut (clé/valeur) à un composant.
f:paramCrée un composant de paramètre
f:actionListenerAjoute un écouteur à un composant.
f:valueChangeListenerAjoute un écouteur de valeur changée à un composant.
f:converterAjoute une conversion arbitraire à un composant.
f:convertDateTimeAjoute une conversion date/heure à un composant.
f:convertNumberAjoute une conversion de nombre à un composant.
f:validatorAjoute une validateur à un composant.
f:validateDoubleRangeValide un intervalle de double pour la valeur du composant.
f:validateLengthValide la taille de la valeur du composant.
f:validateLongRangeValide un intervalle de long pour la valeur du composant.
f:loadBundleCharge un ensemble de ressources, et enregistre les propriétés dans une Map.
f:selectitemsSpécifie une collection de choix pour les h:select*.
f:selectitemSpécifie un choix pour les h:select*.
f:verbatimAjoute des balises dans une page JSF.


Navigation

La navigation peut être statique : définie « en dur » au moment de l’écriture de l’application. .Elle peut aussi être dynamique : définie au moment de l’exécution par l’état de l’application (en fait par la valeur retournée par une méthode).

Navigation statique

<h:commandButton action="page1" value="Page1" />
Navigation vers page1.xhtml

En utilisant faces-config.xml:

1.<navigation-rule>
2.<from-view-id>home.xhtml</from-view-id>
3.<navigation-case>
4.<from-action>page1</from-action>
5.<from-outcome>page1</from-outcome>
6.<to-view-id>/page1.xhtml</to-view-id>
7.</navigation-case>
8.</navigation-rule>

Navigation dynamique et conditionnelle:

  • Par l’intermédiaire des fonctions:
<h:commandButton value= ″ test ″ action= ″#{beanName.move()}″ />
1.@ManagedBean
2.public class beanName{
3.public String move(){
4.//le test à faire
5.return nomPage;
6.}

Exemple:

la navigation selon le login d'un utilisateur
<h:commandButton value="Sign In" action="#{navigation.signIn()}" />
01.@RequestScoped
02.public class Navigation {
03. 
04.public String signIn() {
05.private String user;
06.if (user.equals("cnam")) {
07.return "admin";
08.} else if (user.equals("employee")) {
09.return "employee";
10.} else {
11.return "student";
12.}
13.}
14.}


  • Par l’intermédiaire de fichier faces-config.xml:
01.<navigation-rule>
02.<from-view-id>page.xhtml</from-view-id>
03.<navigation-case>
04.<from-action>#{bean.register}</from-action>
05.<if>#{bean.valide}</if>
06.<to-view-id>success.xhtml</to-view-id>
07.</navigation-case>
08.<navigation-case>
09.<from-action>#{bean.register}</from-action>
10.<if>#{!bean.valide}</if>
11.<to-view-id>error.xhtml</to-view-id>
12.</navigation-case>
13.</navigation-rule>


Paramètres de vue

Les paramètres d’une vue sont définis par des balises <f:viewParam> incluses dans une balise <f:metadata> (à placer au début, avant les <h:head> et <h:body>) :

<f:metadata>
	<f:viewParam name="n1" value="#{bean1.p1}" />
<f:metadata>
  • L’attribut name désigne le nom d’un paramètre de requête.
  • .L’attribut value désigne (par une expression du langage EL) le nom d’une propriété d’un bean dans laquelle la valeur du paramètre est rangée.
  • Il est possible d’indiquer une conversion ou une validation à faire sur les paramètres, comme sur les valeurs des composants saisis par l’utilisateur.

Donner une valeur à un paramètre:

Il y a plusieurs façons de donner une valeur à un paramètre de requête:
<h:link outcome="page2.xhtml?n1=hello" value= "Hello" />
Ou:
<h:link outcome="page2.xhtml" value= "Hello">
	<f:param name="n1" value=“hello” />
</h:link>
Ou:
<h:link outcome="page" includeViewParams="true" />

<h:commandButton value=“page”  action=“page?faces-redirect=true&amp;includeViewParams=true” />

Utilisation dans les Beans:

<h:link outcome="page2.xhtml" value= "Hello">
	<f:param name="n1" value=“hello” />
</h:link>
Bean:
 @ManagedProperty(value = "#{param.n1}")
    private String testParam;


Validation des données

f:validateLength :

Valider la taille d'une chaîne de charactères
<h:inputText id=“name” value=“#{bean.name}”  validatorMessage=“Error Message”>
	<f:validateLength minimum=“1” maximum=“10” />	
</h:inputText>
<h:message for=“name” style=“color:red” />
  • "validatorMessage" est le message affiché en cas d'erreure. Si ce n'est pas indiqué, un message de défaut est affiché.
  • <h:message> permet d'afficher le message slon, volontairement, un style donné.

f:validateLongRange

<f:validateLongRange minimum=“10” maximum=“500” />

f:validateDoubleRange

<f:validateDoubleRange minimum=“5.5” maximum=“100,25” />

f:validateRegex:

Valider la saisie d'une donnée en utilisant une expression régulière
<f:validateRegex pattern=“regular expression” />

Exemple:

la validation d'un email
<h:inputText id="email" value="#{register.mail}" validatorMessage="Invalid Email Format"> 
          <f:validateRegex pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
</h:inputText>
<h:message for="email" style="color:red" />

Custom Validator

On peut créer notre propre validateur qui devrait implémenter l’interface « Validator »:
1.@FacesValidator(“Validator_Id")
2.public class CustomValidator implements Validator {
3.@Override
4.public void validate(FacesContext facesContext,
5.UIComponent component, Object value) throws ValidatorException {
6....
7.}
8.}
  • value: est l'objet à valider

main.xhtml:

<h:inputText id=“ID” value=“#{bean.ID}”>
	<f:validator validatorId=“Validator_Id” />
</h:inputText>

Exemple:

la validation de la confiramation du password
 <h:inputSecret id="pass" binding="#{password}"  value="#{register.upassword}" /> 
<h:inputSecret id="confirmPass" value="#{register.confpassword}">
       <f:validator validatorId="passwordValidator" />
       <f:attribute name="password" value="#{password}" />
</h:inputSecret>
<h:message for="confirmPass" style="color:red" />
01.import javax.faces.application.FacesMessage;
02.import javax.faces.component.UIComponent;
03.import javax.faces.component.UIInput;
04.import javax.faces.context.FacesContext;
05.import javax.faces.validator.FacesValidator;
06.import javax.faces.validator.Validator;
07.import javax.faces.validator.ValidatorException;
08. 
09.@FacesValidator("passwordValidator")
10.public class PasswordValidator implements Validator{
11.@Override
12.public void validate(FacesContext facesContext, UIComponent component, Object value)
13.throws ValidatorException {
14. 
15.UIInput passwordComponent = (UIInput) component.getAttributes().get("password");
16.String password = (String) passwordComponent.getValue();
17.String confirm = (String) value;
18.if(!password.equals(confirm)){
19.FacesMessage msg = new FacesMessage("Password validation failed","Passwords do not match!!");
20.msg.setSeverity(FacesMessage.SEVERITY_ERROR);
21.throw new ValidatorException(msg);
22.}
23.}
24.}
Dans cet exemple, le password est passé comme un attribut "UIComponent ". "Object value" représente le confirmPass. en cas d'erreur, une exception "ValidatorException" est lancée en précisant la cause de l'erreur et le message affiché en utilisant l'objet FacesMessage comme paramètre.

On pourrait aussi implémenter notre propre fonction de validation dans une classe Bean, par exemple:

01.@ManagedBean(name = "register")
02.@RequestScoped
03.public class Register {
04.public void validatePass(FacesContext facesContext, UIComponent component, Object value)
05.throws ValidatorException {
06.String password = value.toString();
07.boolean valid = true;
08.if(password.toLowerCase().equals(password)) valid = false;
09.if(password.length() < 6 || !valid){
10.FacesMessage msg = new FacesMessage("Password validation failed","Invalid Password");
11.msg.setSeverity(FacesMessage.SEVERITY_ERROR);
12.throw new ValidatorException(msg);
13.}
14.}
15.}


Conversion des données

  • f:convertNumber

Ce convertisseur assure la conversion des nombres en utilisant plusieurs formats:

<f:convertNumber  type=“number” pattern=“#000.000” />

<f:convertNumber  maxIntegerDigits=“5” maxFractionDigits=“3” />

minFractionDigits, minIntegerDigits, integerOnly…


  • f:convertDateTime

Ce convertisseur assure la conversion à une date ou un temps selon un format spécifique (pattern):

<f:convertDateTime for=“dob” type=“date” pattern=“mm-dd-yyyy” />

  • Custom Converter

Ce type de convertisseur vous permet d'implementer votre propre conversion. ALors, on pourrait transformer les données saisies depuis l'utilisateur selon le format qu' on désire:

01.@FacesConverter(Converter_Id)
02.public class CustomConverter implements Converter {
03.@Override
04.public Object getAsObject(FacesContext facesContext,
05.UIComponent component, String value) {
06....
07.}
08.@Override
09.public String getAsString(FacesContext facesContext,
10.UIComponent component, Object value) {
11.return value.toString();
12.}
13.}
main.xhtml:
<h:inputText id=“ID” value=“#{bean.ID}”>
	<f:converter converterId=“Convertor_Id” />
</h:inputText>


Références

http://www.tutorialspoint.com/jsf

http://miageprojet2.unice.fr/@api/deki/files/1507/=CoursDeRichardAdapte.pdf

Comments