JAVA SERVER FACES (JSF)

Mariam HAMADNajwa HAMDANE

Abbas ABBAS

Valeur C2: Analyse

Plan

C’est quoi JSF ?

Comment ça marche ?

Détail de fonctionnement - configuration

Le développement

Demo

Bref Historique

Divergences d'approche selon les éditeurs. Plus grande séparation des concepts.

d’où vient l’idée de JSF?-Problème : Comment concevoir une application Web de la même façon qu'une application traditionnelle-Plusieurs solutions existent :

WebForms : Microsoft Struts : Apache JSF : Sun

Sun Open-source Microsoft

19961997

Servlet PHP,PERL,etc… ASP

1998 JSP

MVC

ASP.NET, WebForms

2000 Struts

2004 JSF

C’est quoi JSF?

Java Server Faces est un Framework d'interface utilisateur coté serveur pour les applications webs permettant de respecter le modèle d’architecture MVC, basé sur les technologies JSP, Servlets, Xhtml....

Définie au sein d’une Java Specification Request (JSR) émise par la Java Community Process (JCP).

- JSF est actuellement en version 1.2 ( JSR 252).- Les spécifications de la version 1.0 et 1.1 étaient

définies dans la JSR 127.- La version 2.0 est en cours d’utilisation via la JSR 314.

- Jsf 2.0 est integree dans NetBeans 6.8

Qu’est ce que JSF?

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.

But de JSF?

JSF est le fruit de la communauté Java via le JCP. Le développement de JSF suit donc la même procédure que les autres technologies Java comme JSP, Servlets, EJB, ....

Cette procédure consiste pour une version donnée de la technologie, en une phase de spécification puis une phase d'implémentation quasiment parallèle. JSF fait partie de J2EE 1.4.

Quelle place dans Java/J2EE ?

Quelle place dans Java/J2EE ?

JSF s’appuie sur les technologies précédentes:

Génération en Servlet Utilisation des composants JSF dans les

pages JSP Les composants JSF sont exposés aux

JSPs grâce aux balises personnalisés

Pourquoi utiliser JSF ?JSF est un standard J2EE.Le support de JSF par les éditeurs J2EE est

obligatoire. Actuellement, les plus grands éditeurs Java annoncent ou proposent une intégration de JSF dans leurs IDEs: ( Environnement de développement intégré) comme NetBeans, Eclipse,…

Il existe plusieurs frameworks webs Java dédiés au développement d'interfaces utilisateur mais aucun n'est un standard et va aussi loin que JSF.

Il bénéficie de concepts déjà éprouvés par Java 2 et J2EE (composants graphiques Swing, modèle événementiel, JSP, Servlets) et des apports de Struts dont le concepteur, Craig Mac Clanahan, est aussi le co leader et principal développeur de JSF.

JSF permet : une séparation nette entre la couche de présentation

et les autres couches un mapping entre l’HTML et l’Objet un modèle riche de composants graphiques

réutilisables une gestion de l'état de l'interface entre les

différentes requêtes:- L’état peut changer chez le client entre 2 requêtes- JSF prend en charge la gestion de cet état

Voyons l’exemple de gestion d’état:

Les Avantages

Exemple d’événements

AccepterXEVENEMENT

value_changed

Gérer

événement

Changement état

action

Enregistrement formulaire

Les Avantages…(Suite)une liaison simple entre les actions

côté client de l'utilisateur (event listener)et le code Java côté serveur

JSF peut être utilisé pour générer autre chose que du HTML (XUL,XML, WML, …)

Possibilité de créer de nouveaux composants

- JSF permet de combiner plusieurs composants pour aboutir à un composant plus complexe

comment ça marche …

L’interface utilisateur construite dans la page JSP est générée à l’aide de la technologie JSF(résultat myUI)

Elle fonctionne sur le serveur et le rendu est retourné au client:

Etapes pour traiter un formulaire1.Construire le formulaire dans une page JSP en

utilisant les balises JSF2. Développer un Bean qui effectue un « Mapping »

avec les valeurs du formulaire3. Modifier le formulaire pour spécifier l’action et

l’associer au Bean4. Fournir des Converters et des Validators pour

traiter les données du formulaire5. Paramétrer le fichier faces-config.xml pour

déclarer le Bean et les règles de navigation6. Créer les pages JSP correspondant à chaque

condition de retour7. Protéger les pages JSP utilisées par le contexte JSF

de façon à éviter d’y accéder directement

Représentation de la page sous forme d’arbre

◦accessible via le contexte de l’application.

MaPage

Mot de passe:

Identifiant:

Soumettre

ViewRoot

Form

InputText

InputText

CommandButton

OutputText

OutputText

Détail de fonctionnement-IHM

Plusieurs technologies possibles pour l’écriture des pages :◦ JSP◦ XHTML

Ensemble de balises JSF constituant la page :◦ Composants graphiques: éléments de formulaires,

tableaux…◦ Composants de conversion et de validation : pour

gérer très simplement les entrées◦ Les « renderers » : pour l’affichage des

composantsTemplating (modélisation) de pages avec

Facelets◦ Inclus dans JSF

IHM : Template de page - Facelets

Modèle (template)

Facelets est un framework de composition de pages ou de composants.

En-tête

Corps

Pied de page

En-tête

Pied de page

Corps

IHM : Template de page (suite…)

Inclusion de page

Inclusion de page

Insertion de page

fait partie du jeu de composants core, utilisé comme conteneur de tous les composants JSF dans le page

Composants JSF

IHM : Exemple de page

Déclaration des librairies

Template de page(Facelets)

Ressources

Lien JavaBean

IHM : Les composants graphiques

IHM : Composants additionnels

Il existe des librairies supplémentaires proposant des composants supplémentaires.◦ Compléments des composants de base,◦ Menu◦ Onglet◦ Treeview◦ Calendrier◦ …

MyFaces Tomahawk ICEfacesJBoss RichFaces

C’est quoi ManagedBean?

C’est un JavaBean géré par JSF.

Permet de faire le lien entre l’IHM et le code métier de l’application.◦Doit contenir des accesseurs et des

mutateurs pour champs de l’IHM: get() et set()

Définition au sein du fichier faces-config.xml ou par le biais d’annotations.

Dessine moi un ManagedBeanAnnotations de

paramétrage

Attribut relatif au champ

de saisie de l’IHM

Accesseur du champ de saisie

Mutateur du champ de saisie

Détail de fonctionnement - configuration

Configuration :le fichier contrôleur «faces-config.xml »

Le fichier gérant la logique de l’application web s’appelle par défaut faces-config.xml

Il est placé dans le répertoire WEB-INF au même niveau que web.xml

Il décrit essentiellement six principaux éléments :- les Beans managés <managed-bean>- les règles de navigation <navigation-rule>- les ressources éventuelles suite à des messages <message-

bundle>- la configuration de la localisation <resource-bundle>- la configuration des Validators et des Converters <validator>

<converter>- d’autres éléments liés à des nouveaux composants JSF

<render-kit> Le fichier de configuration est un fichier XML décrit par une

DTD. La balise de départ est <faces-config> (version 1.1)

La configuration : faces-config.xml

Fichier de ressources par défaut

Navigation

I18N

Configuration :JSF dans le web.xml

Nécessite la configuration du fichier web.xml de façon à ce que JSF soit pris en compte

- Paramétrer le fonctionnement général de l’application : le contrôleur

- Identifier la servlet principale : javax.faces.webapp.FacesServlet

Spécifier le nom et le chemin du fichier de configuration- Nom du paramètre :

javax.faces.application.CONFIG_FILES- Exemple : /WEB-INF/faces-config.xml Spécifie où l’état de l’application doit être sauvé- Nom du paramètre : javax.faces.STATE_SAVING_METHOD- Valeurs possibles : client ou server Valider ou pas les fichiers XML- Nom du paramètre : com.sun.faces.validateXml- Valeurs possibles : true ou false (défaut : false)

La configuration : web.xml

Nom de l’application

Mapping de la servlet

Page d’accueil

Servlet utilisée qui gère les entréesau contexte JSF

Extension des pages

JSF et MVCModèle :

◦Couplé à JSF par un Bean géré.Vue :

◦JSP + balises JSFContrôleur :

◦Servlet (FaceServlet)◦Règles définies dans un fichier xml

Convertisseur – Validateur - Renderer

Les convertisseurs

Permet la conversion des données :◦IHM (un composant)vers

ManagedBean,◦ManagedBean vers IHM(un composant).

JSF offre deux converters standards qui sont convertDateTime et convertNumber.

On peut créer mon propre convertisseur.

PersonneBean

Les convertisseursMaPage

Prénom :

Nom :

Enregistrer

Date de

naissance :

Les validateurs

Vérifier la validité des données converties. Applicable sur l’ensemble des composants de saisies. On peut créer mon propre validateur.

La création d'un validator personnalisé passe par les étapes suivantes:-Créer une classe qui implémente l'interface javax.faces.validator.Validator .-Déclarer cette classe dans faces-config.xml en lui associant un identifiant.

Exemples de validateurs :◦ valider la présence de saisie,◦ valider que la saisie est conforme à une plage de valeurs,◦ valider le format de saisie (expression régulière)◦ valider la longueur de la saisie,◦ …

Validator personnalisé Par exemple, on souhaite saisir le nom, le prénom et

l'age d'une personne dans un seul champ texte avec le format

"prénom nom age", et on va créer un validator qui valide une saisie:

public class PersonValidator implements Validator {private Pattern p = Pattern.compile("[a-zA-Z]+\\s+[a-zA-Z]+\\s+[0-9]+");public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException {Matcher m = p.matcher((String) value);if (!m.matches()) throw new ValidatorException(new FacesMessage( FacesMessage.SEVERITY_ERROR, "Entrée non valide", "Entrée non valide"));}}

Il faut ensuite déclarer ce validator dans faces-config.xml:

Et enfin, pour utiliser le validator dans les pages JSF, on procède comme suit:

<validator><validator-id>personValidator</validator-id><validator-class>validators.PersonValidator</validator-class></validator>

<h:inputText value="#{control.name}" id="name"><f:validator validatorId="personValidator" /></h:inputText>

à chaque fois qu'on remplit un champ texte et qu'on valide, JSF va invoquer la méthode validate de notre Validator en lui passant les paramètres suivants:

• context: permet d'accéder à l'environnement JSF.• component: le composant parent de notre validator.• value: la valeur saisie par l'utilisateur. Si l'entrée n'est pas valide, il faut lancer une

exception du type ValidatorException qui prend un message comme paramètre.

Un message est composé de:• gravité: l'une des valeurs suivantes: SEVERITY_FATAL,

SEVERITY_ERROR, SEVERITY_WARN et SEVERITY_INFO.• sommaire: version courte du message d'erreur.

Les validateurs

MaPage

Mot de passe :

Identifiant :

Soumettre

MaPage

Mot de passe :

Identifiant :

Soumettre

Erreur

Le rendu

Les composants JSF peuvent être transcrits en HTML, XML, WML… en fonction de la cible.

Ceci est possible par le biais de « Renderer ».

Les « Renderers » sont des classes Java :◦récupérant les attributs des composants,◦transcrivant le composant en fonction du

format souhaité.

Le rendu

HTMLInputTextRenderer.java

maPage.xhtml

maPage.html

Le cycle de vie

Le cycle de vie

Le cycle de vie correspond aux différentes étapes entre la requête du client et la réponse retournée.

Le cycle de vie

ApplyRequests

ApplyRequests

RestoreView

RestoreView

Process Validations

Process Validations

UpdateModelValues

UpdateModelValues

InvokeApplication

InvokeApplication

RenderResponse

RenderResponse

Reconstruction de l’arborescence des composants

Génération de la réponse

Validation et conversion des données

Extraction des valeurs de la requête

Appel des méthodes pour le traitement

de la page

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

Erreur de conversion Erreur de

conversion et/ou de validation

Réponse retournée

au client

Requête issue

du client

Et AJAX ?

Les implémentations JSF2 supportent nativement AJAX.

Les librairies supplémentaires proposent des compléments :◦MyFaces◦ICEfaces ◦JBoss Richfaces

Le developpement

Et je développe avec quoi ?

Avec les IDE bien connus et quelques plugins :◦Eclipse◦NetBeans◦Oracle Jdeveloper

Le problème :◦Les plugins sont prévus pour

fonctionner avec une version bien précise de JSF.- Le paramétrage est un peu fastidieux.

Technologies Utilisees dans le demoinstalling Java EE 6 SDK From

OracleNetBeans IDE 7.0Glassfish 3JSF 2.0

Demo

Arbre de file dans notre demo

Les étapes d’ éxecution

index.jsp

login.jsp

welcome.jsp create.jsp

Java Server Faces Welcome Page

Create New Accountlogi

n logout Create