Dveloppez des applications RIA avec Richfacespar Lotfi MelloukDate de publication : 30/12/08 Dernire mise jour :
Cet article fait l'objet d'une introduction au dveloppement d'applications Web riches avec JSF et Ajax/Richfaces.
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
I - Avant propos........................................................................................................................................................... 4 I-A - Prsentation................................................................................................................................................... 4 I-B - Pr-requis....................................................................................................................................................... 4 II - Ajax4JSF................................................................................................................................................................ 4 II-A - Introduction....................................................................................................................................................4 II-B - Comment a marche ?..................................................................................................................................4 III - Installation............................................................................................................................................................. 5 III-A - Compatibilit.................................................................................................................................................5 IV - Exemple d'application Richfaces.......................................................................................................................... 6 IV-A - Cration du projet web................................................................................................................................ 6 IV-B - Configuration des dpendances avec Maven............................................................................................. 6 IV-C - Configuration du filtre Richfaces................................................................................................................. 7 IV-D - Utilisation de Richfaces avec facelets.........................................................................................................8 IV-E - Premire page Richfaces............................................................................................................................ 8 V - Les principaux composants a4j........................................................................................................................... 11 V-A - ............................................................................................................................................ 11 V-B - .............................................................................................................................. 11 V-C - ...................................................................................................................................12 V-D - ............................................................................................................................................... 12 V-E - ..........................................................................................................................................12 V-F - ....................................................................................................................................................12 V-G - ......................................................................................................................................13 V-H - ..................................................................................................................................... 13 VI - Les principaux composants de Richfaces..........................................................................................................13 VI-A - ......................................................................................................................................... 13 VI-B - .............................................................................................................................................. 14 VI-C - .........................................................................................................................................14 VI-D - ........................................................................................................................ 15 VI-E - .................................................................................................................................... 15 VI-F - ........................................................................................................................................16 VI-G - .......................................................................................................................... 18 VI-H - ................................................................................................................................. 18 VI-I - ............................................................................................................................................. 21 VI-J - ................................................................................................................................... 21 VII - Amliorer la performance des applications Richfaces...................................................................................... 22 VII-A - Contrler la file d'attente des requtes Ajax............................................................................................ 22 VII-B - Contrler l'excution des phases JSF......................................................................................................22 VIII - Richfaces skins.................................................................................................................................................23 VIII-A - Prsentation............................................................................................................................................. 23 VIII-B - Utiliser un skin......................................................................................................................................... 23 VIII-C - Personnaliser un skin.............................................................................................................................. 24 VIII-D - Format XCSS.......................................................................................................................................... 25 VIII-E - Utiliser les skins Richfaces pour les composants HTML........................................................................ 26 IX - Astuces et questions frquentes........................................................................................................................ 27 IX-A - [rich:TabPanel] comment dfinir l'onglet courant :.....................................................................................27 IX-B - [rich:TabPanel] Comment raliser une navigation en cliquant sur un onglet.............................................27 IX-C - [rich:TabPanel] Comment dfinir son propre style des onglets.................................................................28 IX-D - [rich :TabPanel] Comment crer dynamiquement TabPanel..................................................................... 28 IX-E - [rich:dataTable] : comment afficher un modalPanel la fin de l'excution d'une action sur une ligne ....... 30 IX-F - [rich :dataTable] : comment dfinir un style diffrent pour deux lignes successives..................................30 IX-G - [rich :dataTable] : comment filtrer les donnes dans le managed Bean................................................... 30 IX-H - [rich:dataTable] : comment rduire la taille du champ texte gnr par filterBy........................................30 IX-I - [rich :dataTable] : comment cacher/afficher dynamiquement une colonne................................................. 31 IX-J - [rich :dataTable] [rich :dataScroller] : comment slectionner la page courante avec un selectOneMenu :................................................................................................................................................... 31 IX-K - [rich :dataTable] [rich:dataScroller] : comment mettre jour le dataScroller aprs l'utilisation d'un filtre:...................................................................................................................................................................... 32 IX-L - [rich:modalPanel] comment ajouter un scroller la modalPanel...............................................................32-2Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
IX-M - [rich:modalPanel] Comment afficher un modalPanel au chargement d'une page.................................... 32 IX-N - [rich:modalPanel] comment afficher les messages d'erreurs de validation dans un modalPanel..............32 IX-O - Comment grer l'expiration de session avec Richfaces........................................................................... 33 IX-P - [rich:comboBox] comment slectionner un lment par son id ?..............................................................34 IX-Q - [rich:suggestionBox] comment rcuprer l'id d'un lment slectionn?..................................................34 X - Remerciements.................................................................................................................................................... 34
-3Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
I - Avant propos I-A - PrsentationCe tutorial est une introduction au dveloppement d'applications riches avec JSF /Richfaces. Richfaces est une librairie de composants JSF pour le dveloppement d'applications web riches (RIA) Rich Internet Application avec Ajax, elle est le rsultat de la fusion de deux projets dvelopps par exadel qui sont: Ajax4jsf : Ajax4jsf est n dans la fondation sourceforge.net en 2005 sous le nom de Telamon, son concepteur a intgr ensuite la socit Exadel qui a commercialis le projet dans une premire priode avant de le rendre open source sur Java.net. Richfaces : C'est une librairie commerciale de composants JSF fournit par Exadel.
Ces deux projets sont passs dans le giron de JBoss en septembre 2007 pour former un projet open source nomm JBoss Richfaces.
I-B - Pr-requis La matrise de la technologie JSF, pour les dbutants. Voir tutoriels: Introduction au framework JSF de Mickael BARON, Gagner en productivit avec Java Server Faces de Xavier Paradon, et JSF et Facelets de Jawher Moussa. Comprhension du fonctionnement Ajax. Voir tutoriaux Ajax.
II - Ajax4JSF II-A - IntroductionAjax4jsf est n du besoin d'associer la technologie Ajax celle de JSF, il comporte un ensemble de composants permettant d'ajouter des fonctionnalits Ajax avances aux composants standards JSF sans manipulation du code JavaScript.
II-B - Comment a marche ?Ajax4jsf est bas sur un filtre qui ajoute des fonctions JavaScript ainsi que les dpendances de XmlHttpObject aux composants JSF. Un moteur Ajax est responsable de l'envoi de la requte cliente au filtre. Lorsque le client envoie une requte Ajax, le moteur Ajax transforme la requte et l'envoie au filtre ajax4jsf, ce dernier convertit les donnes au format XML et transfre la requte la servlet Faces Servlet, ainsi la requte suit le processus normal d'une requte JSF et passe par les six phases : Restore View ,Apply Request Values, Process Validations, Update Model Values, Invoke Application, Render Response. Le Framework ajax4jsf gre l'arbre de composants tout au long de la requte et la rponse Ajax. De plus, la prsence du moteur Ajax dans le client permet la mise jour de parties souhaites de la page Web, ce qui fait de Ajax4JSF un framework trs flexible qui offre au dveloppeur la possibilit de choisir les composants envoyer au serveur et les valeurs ractualiser la fin de la rponse. L'image ci-dessous prsente le cycle de vie d'une requte Ajax4jsf
-4Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
III - InstallationLa dernire version publie de Richfaces est disponible en tlchargement sur le site de JBoss. Les trois jars suivants sont ncessaires son utilisation: Richfaces-api Richfaces-ui Richfaces-impl
III-A - CompatibilitA partir de la version 3.2.0, Richfaces supporte uniquement : JSF 1.2 (JSF RI 1.2 et Myfaces 1.2) Java SE 5.0
-5Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
Toutefois, l'quipe Richfaces maintient la mise jour des versions 3.1.x, compatibles avec JSF 1.1 et Jdk 1.4.
IV - Exemple d'application RichfacesDans ce chapitre nous allons raliser une premire application avec Richfaces, JSF 1.2, Facelets avec Eclipse et Maven sur le serveur d'applications tomcat 5.5. Pour utiliser tomcat 6, pensez enlever les api EL (el-*.jar) qui sont disponibles par dfaut dans tomcat6.
IV-A - Cration du projet webNous commenons par crer un projet web avec maven et les fichiers de configuration d'eclipse Crer un projet web avec mavenmvn archetype:create -DgroupId=tutorial -DartifactId=Richfaces -DarchetypeArtifactId=maven-archetypewebapp
Ensuite dans le dossier Richfaces gnrer les fichiers de configuration d'Eclipsemvn eclipse:eclipse -Dwtpversion=1.5
et on importe le projet sous eclipse.
IV-B - Configuration des dpendances avec MavenLes dpendances dont nous avons besoin sont dfinies dans fichier pom.xml. maven dependencies javax.faces jsf-api 1.2_09 javax.faces jsf-impl 1.2_09 runtime javax.servlet servlet-api 2.5 provided javax.servlet.jsp jsp-api 2.1 provided javax.servlet jstl 1.1.2 provided
-6Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
maven dependencies
javax.el el-api 1.2 com.sun el-ri 1.2 com.sun.facelets jsf-facelets 1.1.14 org.richfaces.framework richfaces-impl 3.2.2.GA org.richfaces.framework richfaces-api 3.2.2.GA org.richfaces.ui richfaces-ui 3.2.2.GA commons-logging commons-logging 1.0.4
Ensuite il faut ajouter la dclaration du repository JBoss qui contient l'ensemble des projets Richfaces JBoss reppository jboss jboss repository http://repository.jboss.com/maven2/
Et le repository pour Facelets et el : dev.java.net repository dev.jav nonav https://maven-repository.dev.java.net/repository/ true
IV-C - Configuration du filtre RichfacesOn ajoute le filtre Ajax4jsf qui parse le contenu Html en XML pour les requtes Ajax.
-7Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
dfinition du filtre Ajax4jsf RichFaces Filter richfaces org.ajax4jsf.Filter richfaces Faces Servlet REQUEST FORWARD INCLUDE
IV-D - Utilisation de Richfaces avec faceletsPour utiliser Richfaces avec facelets, il faut dfinir le viewHandler de Richfaces, et remplacer le suffixe par dfaut des pages JSF en xhtml. Dans le fichier de configuration web.xml : configuration Facelets org.ajax4jsf.VIEW_HANDLERS com.sun.facelets.FaceletViewHandler javax.faces.DEFAULT_SUFFIX .xhtml
IV-E - Premire page RichfacesNous sommes maintenant en mesure de dvelopper une page JSF avec des fonctionnalits Ajax. Nous allons crer notre premire page index.xhtml, on la dclare comme page d'accueil de notre application. Pour dclarer une page JSF en tant que page d'accueil consultez la FAQ JSF Voici la page index.xhtml : index.xhtml Richfaces test -8Copyright 2008 - sniper37. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.http://lmellouk.developpez.com/tutoriels/jsf/richfaces/
Dveloppez des applications RIA avec Richfaces par Lotfi Mellouk
index.xhtml
#{person.name}" id="text"
