8/18/2019 3-jsf-100208091449-phpapp02

1/29

Développement

des applications web

avec J2EE

Réalisé par:

Jihed DGHAIES

Copyright club CFEM ©2010

JSF et RichFaces

8/18/2019 3-jsf-100208091449-phpapp02

2/29

Programme

JSF

Cycle JSF

Création page JSF

1

2

4

3

3

Managed Bean3

5

Intégration de JSF dans un projet J2EE

Validators et converters6

Richfaces3

7

2/29

8/18/2019 3-jsf-100208091449-phpapp02

3/29

JSF 1/3

  La technologie JSF représente   un Framework basé   sur les

composantes utilisateurs utilisées pour construire des applications web.

L’API de JSF permet de représenter  les composants, de gérer  leur état

et leur comportement. Elle facilite l’écriture d’interfaces utilisateurs en

fournissant une bibliothèque de contrôles :

  Simples : zones de saisie classiques, boutons, liens hypertextes.

  Complexes : tableaux de données …

  Elle permet même de créer  ses propres composants, ou d’enrichir  les

composants existants.

3/29

8/18/2019 3-jsf-100208091449-phpapp02

4/29

JSF 2/3

  JSF permet principalement de:

 Faciliter le développement de pages web grâce à un Framework basé sur les

composants.

représenter  les composantes UI et gérer  leurs états.

  Gestion d’événements.

  Validation coté serveur.

  Conversion de données.

Définition de la navigation des pages.

gérer  les composantes et les lier aux objets coté serveur.

4/29

8/18/2019 3-jsf-100208091449-phpapp02

5/29

JSF 3/3

  il existe plusieurs implémentations de JSF :

  Myfaces

  RichFaces

  Icefaces

  Tomahawk

  Trinidad

  Pour plus de détails : http://www.jsfmatrix.net/

5/29

8/18/2019 3-jsf-100208091449-phpapp02

6/29

Cycle JSF

6/29

8/18/2019 3-jsf-100208091449-phpapp02

7/29

Intégration de JSF dans un projet J2EE 1/2

  La première étape à faire lorsqu’on veut utiliser les ServerFaces est

de définir le mapping avec l'instance de FacesServlet dans le fichier

de déploiement web.xml.

Toutes les pages contenant le mapping /faces/ seront interprétées

par le serveur comme contenant des composants JSF.

7/29

8/18/2019 3-jsf-100208091449-phpapp02

8/29

 Après avoir déclaré la servlet de JSF on déclare le chemin de fichier 

de configuration de JSF « faces-config.xml ».

  le nom et l'emplacement du fichier de configuration de JSF faces-config.xml sont spécifiés par un paramètre de contexte dans web.xml.

  Le chemin vers ce fichier est un chemin relatif à partir de la racine de

l'application.

Intégration de JSF dans un projet J2EE 2/2

8/29

8/18/2019 3-jsf-100208091449-phpapp02

9/29

Création Page JSF 1/2

  la création d’une page JSF se résume à :

  Ajouter les librairies contenant les TagLibs JSF :

l'intégration des composants et à définir à quel Bean chaque composant est

relié.

  Les JSF se présentent  sous la forme d'un arbre de composants

appelé  une "vue". La balise "view" correspond à   la racine de cetarbre et contiendra tous les composants.

  le formulaire qui contient toutes les informations transmises au

serveur lorsque le formulaire sera envoyé,   via un clique sur un

bouton en général.9/29

8/18/2019 3-jsf-100208091449-phpapp02

10/29

Création Page JSF 2/2

10/29

8/18/2019 3-jsf-100208091449-phpapp02

11/29

Managed Bean 1/4

  Un bean est une classe Java qui comprend :

  Un constructeur vide.

  Des méthodes publique de lecture et de modification de ses attributs (getXXX et

setXXX) et aucun attribut public.

  Un bean managé est un bean :

  dont la vie est gérée par JSF.

déclaré   dans le fichier de configuration faces-config.xml.

  Ayant un scope.

  Les beans managés sont utiles pour afficher les données provenant

de la couche métier  ou pour la saisie de données par l'utilisateur.

11/29

8/18/2019 3-jsf-100208091449-phpapp02

12/29

Managed Bean 2/4

12/29

8/18/2019 3-jsf-100208091449-phpapp02

13/29

Managed Bean 3/4

13/29

8/18/2019 3-jsf-100208091449-phpapp02

14/29

Managed Bean 4/4

14/29

8/18/2019 3-jsf-100208091449-phpapp02

15/29

Navigation rules 1/2

  Les navigations rules permettent de définir  la manière de

naviguer entre les différentes pages JSF.

15/29

8/18/2019 3-jsf-100208091449-phpapp02

16/29

Navigation rules 2/2

16/29

8/18/2019 3-jsf-100208091449-phpapp02

17/29

Validateurs

  Afin de vérifier  si la saisie utilisateur est valide JSF fournit des Validator.

Validateurs fournies

par défaut en JSF

17/29

8/18/2019 3-jsf-100208091449-phpapp02

18/29

Validateurs : Managed Bean

18/29

8/18/2019 3-jsf-100208091449-phpapp02

19/29

Validateur : Création d’un validateur 

19/29

8/18/2019 3-jsf-100208091449-phpapp02

20/29

Les Converters

  La conversion des données   est le processus de

conversion ou de transformation d’un type de données

à un autre.

20/29

8/18/2019 3-jsf-100208091449-phpapp02

21/29

Converter : Création converter 

21/29

8/18/2019 3-jsf-100208091449-phpapp02

22/29

Richfaces

  Richfaces est né du besoin d'associer la technologie Ajax à celle

de JSF.

  il comporte un ensemble de composants permettant d'ajouter desfonctionnalités   Ajax avancées   aux composants standards JSF

sans manipulation du code JavaScript.

  Richfaces permet aussi d’enrichir  les composants graphiques de

JSF et d’ajouter  des nouveaux composants.

22/29

8/18/2019 3-jsf-100208091449-phpapp02

23/29

Richfaces

23/29

8/18/2019 3-jsf-100208091449-phpapp02

24/29

Intégration Richfaces

24/29

8/18/2019 3-jsf-100208091449-phpapp02

25/29

Format page richfaces

  Pour ajouter les balises richfaces dans une page JSP on

ajoute à l’entête de la page les taglib A4J et Rich.

  La bibliothèque   a4j( Ajax for JSF) permet d’jouter   des

traitement Ajax aux pages JSF.

  La bibliothèque rich contient les composant graphiques de

richfaces .

25/29

8/18/2019 3-jsf-100208091449-phpapp02

26/29

Les composants ajax: «a4 j:support»

« A4J:support »:Le plus connu et le plus utile des composants Ajax4jsf,

il permet d'ajouter le support Ajax aux composants JSF de base. parmi

ces attributs :

  event : l'évènement javascript qui lance la requête Ajax

  reRender : contient les ids des composants à mettre à  jours lors du retour de laréponse.

  action : la méthode qui invoque l'action de l'application

  ajaxSingle: pour limiter le passage par les phases decode, validation/conversion,

apply values, seulement au composant qui envoie la requête.

  oncomplete: code à exécuter coté client à la fin de la requête

26/29

8/18/2019 3-jsf-100208091449-phpapp02

27/29

Les composants ajax

  : Similaire à   h: commandButton, mais

génère une requête Ajax et fait la mise à jour des composants inclus

dans l'attribut reRender.

  : Il permet de définir  la zone de composants qui seront

traités coté  serveur pour une requêtes  Ajax. Par  défaut,   la page

entière est prise en compte.

  : Permet de garder en vie un managedBean déclaré

dans le scope request entre plusieurs requête Ajax.

27/29

8/18/2019 3-jsf-100208091449-phpapp02

28/29

Les composants graphiques richfaces

  http://livedemo.exadel.com/richfaces-demo/index.jsp

28/29

8/18/2019 3-jsf-100208091449-phpapp02

29/29

Richfaces skins

  Richfaces propose un système de styles appelé skin pour habiller 

les composants Richfaces et JSF.

  Les skins disponibles par défaut sont :

DEFAULT ,plain ,emeraldTown ,blueSky ,wine ,japanCherry ,ruby ,

classic et deepMarine