Développement des applications web

avec J2EE

Réalisé par:Jihed DGHAIES

Copyright club CFEM ©2010

JSF et RichFaces

Programme

JSF

Cycle JSF

Création page JSF

1

2

4

33

Managed Bean35

Intégration de JSF dans un projet J2EE

Validators et converters6

Richfaces37

2/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

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

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

Cycle JSF

6/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

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

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 cet

arbre 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

Création Page JSF 2/2

10/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

Managed Bean 2/4

12/29

Managed Bean 3/4

13/29

Managed Bean 4/4

14/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

Navigation rules 2/2

16/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

Validateurs : Managed Bean

18/29

Validateur : Création d’un validateur

19/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

Converter : Création converter

21/29

Richfaces

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

de JSF.

il comporte un ensemble de composants permettant d'ajouter des

fonctionnalité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

Richfaces

23/29

Intégration Richfaces

24/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

Les composants ajax: «a4j: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 la

ré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

Les composants ajax

<a4j:commandButton /> : Similaire à h: commandButton, mais

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

dans l'attribut reRender.

<a4j:region/> : 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.

<a4j:keepAlive/>: Permet de garder en vie un managedBean déclaré

dans le scope request entre plusieurs requête Ajax.

27/29

Les composants graphiques richfaces

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

28/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

29/29