Bonjour.
Chose promise, chose dû (voir post précédent) ... enfin, presque: au lieu du célèbre GuessGame, on va démarre avec un truc plus simple : le non moins célèbre SayHello.
Donc, il s'agit ici de réaliser une petite application JSF + JBoss RichFaces qui se contente de récupérer un nom entrée par l'utilisateur pour ensuite le saluer (Hello $nom).
Pour commencer, dans eclipse Europa + WTP 2.0.1, il faut créer un projet "Dynamic Web Project" en prensant soin d'unclure dans les librairies du projet les 3 fichiers jars de Rich Faces 3.1.2 GA téléchargeables ici.
Ajaxifier son application JSF avec RichFaces revient juste à ajouter ces 3 fichiers jars dans le classpath de l'applciation ainsi qu'ajouter ces quelques lignes dans son web.xml (juste après <display-name>).
<filter>
<display-name>RichFaces Filter</display-name>
<filter-name>richfaces</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>richfaces</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
<dispatcher>INCLUDE</dispatcher>
</filter-mapping>
Attaquons maintenant le jeu. On commence par créer un simle POJO (le managed bean) qui servira à stocker le nom saisie par l'utilisateur:
public class HelloBean {On déclare ensuite ce bean dans faces-config.xml pour qu'il soit accessible à nos pages:
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
<managed-bean>On crée ensuite une première pages (index.jsp) qui se contente de "forwarder" vers la page JSF:
<managed-bean-name>helloBean</managed-bean-name>
<managed-bean-class>HelloBean</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<jsp:forward page="hello.jsf" />Enfin, on arrive aux choses sérieuses: du JSF et de l'AJAX. Dans la page hello.jsp, et à l'intérieur de l'élément view:
<h:outputText value="Name :" />Toute la magie de la chose est réalisée par le <a4j:support>. Il permet d'ajaxifier n'importe quel composant JSF standard. Ce composant est très flexible et a de nombreux usages, mais dans ce cas particulier, on l'a utilisé par capturer l'évènement onchange (javascript), formuler une requête AJAX et redessiner le composant outputText (reRender="greeting") à la reception de la réponse de cette requête. C'etait le comportement côté client. Côté serveur, RichFaces s'occupe de décoder la requête AJAX, mettre à jour le champ "name" de notre managed bean et formuler la réponse.
<h:form>
<h:inputText value="#{helloBean.name}">
<a4j:support event="onchange" reRender="greeting" />
</h:inputText>
</h:form>
<h:outputText id="greeting" value="Hello #{helloBean.name} !" />
C'etait un aperçu rapide sur la simplicité de la puissance de RichFaces. Je suis en train de rédiger un tutoriel plus détaillé sur RichFaces que je publierais ensuite dans mon espace de Développez.com.
3 comments:
Hello,
Article vraiment intéressant!
Je débuite avec JSF et je me posais la question concernant l'interaction entre JSF et AJAX. J'avais peur que ce soit une usine à gaz! Et bien non! :-)
Grace à ton exemple, je ne vais pas hésiter à l'intégrer dans l'application sur laquelle je travaille.
Merci!
:-)
J'en suis ravi !
Bon, ce n'etait qu'un cas d'utilisation simple, mais même pour d'autres cas plus complexes, ça reste toujours simple dans l'ensemble.
Je compte prochainement poster un autre tuto sur comment faire du drag'n'drop ainsi que la réalisation du guess-number game, mais là, je suis saturé par le boulot :-(
Hello,
J'attend avec (im)patience ton nouveau post! ;-)
Bon courage pour le boulot!
Post a Comment