Say Hello Version RichFaces

Bonjour.
Ce billet est une sorte d’introduction rapide au développement Ajax avec JSF via la bibliothèque JBoss RichFaces.
Pour ce faire, je vous propose de réaliser étape par étape la célèbre application exemple SayHello.
Cette application se contente de récupérer le nom entré par l’utilisateur pour ensuite le saluer (Hello $nom).

[Suite:]

Pour commencer, dans eclipse Europa + WTP 2.0.1, il faut créer un projet “Dynamic Web Project” en prensant soin d’inclure 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 (WEB-INF/lib) ainsi qu’à modifier web.xml en ajoutant ces quelques lignes:
(juste après l’élément 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 saisi par l’utilisateur:

public class HelloBean { 
     private String name; 
 
     public String getName() { 
        return name; 
     } 
 
     public void setName(String name) { 
        this.name = name; 
     } 
}

On déclare ensuite ce bean dans faces-config.xml pour qu’il soit accessible depuis les pages JSF:

<managed-bean> 
     <managed-bean-name>helloBean</managed-bean-name> 
     <managed-bean-class>HelloBean</managed-bean-class> 
     <managed-bean-scope>request</managed-bean-scope> 
</managed-bean>

On crée ensuite une première pages (index.jsp) qui se contente de “forwarder” vers la page JSF:

<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 :" /> 
<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} !" />

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é pour capturer l’évènement onchange (javascript), formuler une requête AJAX et redessiner le composant outputText (reRender=”greeting”) à la reception d’une réponse à 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.

C’etait un aperçu rapide de la simplicité et la puissance de RichFaces.
Comptez sur moi pour d’autres exemples dans les prochains billets.

—-

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: