La nouvelle version 4.0 de PrimeFaces est disponible en version candidate (RC1). J'ai principalement utilisé les versions 2.0.2 et 2.2.1 dans mes précédents projets. Je vais profiter de la nouvelle version pour montrer un exemple simple d'utilisation de PrimeFaces. Attention !!! Ne démarrez jamais de développement pour une version de production en vous basant sur une version en Release Candidate. N'utilisez que des versions stables.
PrimeFaces (http://www.primefaces.org/) est une suite de composants JSF qui permet de développer des applications Web en Java. La composition des pages se fait en utilisant des balises HTML un peu particulières et des JavaBeans sont utilisées côté serveur pour stocker les données. Le principal avantage est que la mise au point des pages Web peut être faite en modifiant les pages dynamiquement. La recompilation n'est nécessaire que lorsque les classes Java doivent être modifiées. L'inconvénient principal est qu'il y a beaucoup de XML à manipuler et que certaines erreurs ne se voient qu'en cours d'exécution.
Les prérequis pour cet exemple sont :
- récupérer la librairie PrimeFaces 4.0RC1 (http://repository.primefaces.org/org/primefaces/primefaces/4.0.RC1/primefaces-4.0.RC1.jar)
- serveur Tomcat (6 ou 7)
Création du projet dans Eclipse
Créez un projet Web dans Eclipse. Utilisez un Dynamic Web Project pour avoir la structure de répertoire adpatée pour un fichier War qui sera l'exécutable finale à déployer sous Tomcat.
Choisissez un nom de projet et configurez si nécessaire le serveur Tomcat à utiliser. Vous pouvez ne pas en spécifier un si vous préférez lancer Tomcat manuellement.
Si la librairie JSF n'est pas déjà installée, cliquez sur le bouton download sur le côté pour télécharger la librairie JSF 2.2 Mojarra. Depuis JSF 2.1, un seul fichier jar (javax.faces.jar) est nécessaire pour le déploiement d'une application JSF. Vous pouvez également inclure la librairie dans le répertoire WEB-INF/lib.
La structure du projet est la suivante.
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID"
version="2.5">
<display-name>PrimeFaces</display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
</web-app>
Le fichier faces-config.xml contient les informations de navigation. Il peut être édité en mode XML ou en mode graphique (bouton droit + Open With + Faces Config Editor). Le mode graphique permet de visualiser la page qui sera affichée en fonction de la valeur renvoyée par l'application. Le fichier faces-config.xml peut également contenir la définition des ManagedBeans, mais dans notre cas nous utiliserons des annotations Java pour les identifier.
<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_1.xsd"
version="2.1">
<navigation-rule>
<from-view-id>/login.xhtml</from-view-id>
<navigation-case>
<from-outcome>login</from-outcome>
<to-view-id>/login.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
L'application de test n'inclut qu'une seule page pour simuler le login.
<html xmlns="http://www.w3c.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link type="text/css" rel="stylesheet" href="themes/bluesky/skin.css" />
</h:head>
<h:body>
<p:layout>
<p:layoutUnit position="center">
<center>
<p:panel header="Login Form" style="width: 350;">
<h:form>
<h:panelGrid columns="2" cellpadding="2">
<h:outputLabel value="UserName"/>
<h:inputText value="#{userManagedBean.username}" label="UserName"></h:inputText>
<h:outputLabel value="Password"/>
<h:inputSecret value="#{userManagedBean.password}"></h:inputSecret>
<h:commandButton type="submit" value="Login" action="#{userManagedBean.login}"></h:commandButton>
</h:panelGrid>
</h:form>
</p:panel>
<div><h:messages id="username" ></h:messages></div>
</center>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
La page de login fait référence au ManagedBean UserManagedBean. Par convention de nommage, la variable écrite en minuscule "userManagedBean" fait référence à la classe du même nom commençant par une Majuscule "UserManagedBean". L'appui sur le bouton "Login" appelle la méthode Java correspondante. La classe UserManagedBean est la suivante :
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
@ManagedBean
@SessionScoped
public class UserManagedBean
{
private String username;
private String password;
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getPassword()
{
return password;
}
public void setPassword(String password)
{
this.password = password;
}
public String login()
{
System.out.println("Login = " + getUsername() + " " + "Password = " + getPassword());
if ("test".equals(getPassword())) {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage("username", new FacesMessage("Welcome " + getUsername()));
return "login";
}
else {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage("username", new FacesMessage("Invalid UserName and Password"));
return "login";
}
}
}
Après la compilation du projet, exportez le fichier War, copiez le dans le répertoire tomcat/webapps et démarrez Tomcat. Après le déploiement du War, connectez vous dans un browser sur la page "http://localhost:8080/TestPrimeFaces4". Remplacez si nécessaire le port 8080 par celui configuré dans le fichier server.xml de votre Tomcat.
Saisissez un Username et un Password. Si la mot de passe est "test", le message "Welcome Test" est affiché. Dans le cas contraire, le message "Invalid Username and Password" est affiché.
J'ai également joint le code source du projet sous Eclipse.
Commentaires
Enregistrer un commentaire