LG

Outils pour utilisateurs

Outils du site

Piste : • jsp_jstl_el • jsp • jsp • java • jsf • jsf
helloworld:web:java:jsf

Ceci est une ancienne révision du document !

Table des matières

Une page JSF avec l'utilisation des EL utilise du code HTML dans lequel est mis des tags définis par les spécifications des JSF. Ce sont ces tags qui appellent les fonctions Java. Le code généré par les appels aux fonctions JSF est du XHTML 1.0.

<note>Avec JSF, les EL s'utilisent avec le symbole #.</note>

<note>Tous les exemples ci-dessous utilisent le BeanPersonne.</note>

Cycle de vie

Cycle de vie

Source Archive

Création du projet

Nécessite un projet de type Dynamic Web Project.

Exemple 1 - La base

index.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</h:head>
<h:body>
  <p>
    <h:outputText value="15 est un nombre pair." rendered="#{15 % 2 == 0}" />
    <h:outputText value="15 est un nombre impair." rendered="#{15 % 2 == 1}" />
    <br />
    <h:outputText value="16 est un nombre pair." rendered="#{16 % 2 == 0}" />
    <h:outputText value="16 est un nombre impair." rendered="#{16 % 2 != 0}" />
  </p>
</h:body>
</html>

Rendu 

15 est un nombre impair. 
16 est un nombre pair.

Exemple 2 - Utilisation d'un Bean

<note important>Dans le cas de Beans utilisés par JSF, la valeur par défaut définie lors de la définition de l'attribut ou par le constructeur est initialisé à 0 (pourquoi ????). Il est donc nécessaire de définir une fonction init avec l'annotation @PostConstruct.</note>

L'exemple est présenté ici afin de garder une cohérence avec les autres pages (servlet, JSP et JSP+JSTL). Cependant, il n'est pas possible de définir dans JSF la valeur d'attribut sans intervention de l'utilisateur.

<note important>Il est indispensable que le nom de la classe définissant le Bean managé commence par une majuscule. En effet, lorsqu'on désignera la classe, il faudra taper com.llgc.BeanPersonne mais si l'on soit désigner la référence à un attribut, il faudra taper beanPersonne.taille avec une minuscule.</note>

index2.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Insert title here</title>
</head>
<body>
  <p>
    La personne possède une taille de #{beanPersonne.taille} cm et
    <h:outputText value="a" rendered="#{beanPersonne.yeuxBleus}"/>
    <f:subview rendered="#{!beanPersonne.yeuxBleus}">n'a pas</f:subview>
    les yeux bleus.
  </p>
</body>
</f:view>
</html>

Code à ajouter au BeanPersonne : 

  @PostConstruct
  public void init ()
  {
    setTaille (150);
    setYeuxBleus (true);
    setDiplomes (null);
  }

Rendu : 

La personne possède une taille de 150 cm et a les yeux bleus.

Exemple 3 - Formulaire avec Bean global et session

index3.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
<f:view>
  <h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Insert title here</title>
  </h:head>
  <h:body>
    <p>
      <h:outputText value="Valeur en cours de la taille : #{beanPersonne.taille}" />
    </p>
    <h:form>
      <span class="label_nav"><h:outputLabel value="taille" /></span>
      <h:inputText id="taille" required="true" value="#{beanPersonne.taille}" />
      <h:commandButton value="Validation" id="button" action="#{index3Action.action}" />
    </h:form>
    <h:message for="taille" style="color:red" />
  </h:body>
</f:view>
</html>

<note>La valeur retour de la méthode action définie la page de redirection.</note>

Index3Action.java
package com.llgc;
 
import javax.faces.bean.ManagedBean;
 
@ManagedBean
public class Index3Action
{
  public String action ()
  {
    return "Servlet3";
  }
}

Rendu du formulaire : Rendu du formulaire

Rendu de la réponse : Rendu de la réponse

Exemple 4 - context-param et init-param

Ajout de trois context-param.

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  version="3.1">
  <display-name>EL</display-name>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  </servlet>
  <context-param>
    <param-name>user</param-name>
    <param-value>utilisateur</param-value>
  </context-param>
  <context-param>
    <param-name>password</param-name>
    <param-value>mot de passe</param-value>
  </context-param>
  <context-param>
    <param-name>driver</param-name>
    <param-value>com.mysql.jdbc.Driver</param-value>
  </context-param>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
  …
</web-app>
index4.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">
<f:view>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</h:head>
<h:body>
  <p>
    nom : ${initParam['user']}<br />
    pass : ${initParam['password']}<br />
    driver : ${initParam['driver']}<br />
  </p>
</h:body>
</f:view>
</html>

<note important>Les init-param ne sont plus du tout accessibles en JSF, ce qui démontre bien la volonté de séparer la représentation visuelle (.xhtml) des servlets.</note>

Rendu : 

nom : utilisateur
pass : mot de passe
driver : com.mysql.jdbc.Driver

Exemple 5 - Cookies

Il n'est pas possible de modifier les cookies sans passer par des commandes Java. Il est donc nécessaire de passer par l'intermédiaire d'une servlet.

web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
  <display-name>EL</display-name>
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
  </servlet-mapping>
</web-app>

<note important>Il est important de noter la présence de /faces au début de l'URL de redirection /faces/indexjsf5.xhtml. Le fichier se trouve bien dans le dossier WebContent et non pas dans un hypothétique dossier WebContent/faces. Sans cette dénomination (conformément au fichier web.xml), les tags JSF ne seraient pas interprétés. Par contre, je n'ai pas réussi mettre le fichier indexjsf5.xhtml dans le dossier WEB-INF et y accéder via /faces/WEB-INF/indexjsf5.xhtml. La solution peut être de remplacer dans web.xml, <url-pattern>/faces/*</url-pattern> par <url-pattern>*.xhtml</url-pattern> et d'utiliser le lien de redirection /WEB-INF/indexjsf5.xhtml.</note>

ServletJSF5.java
package com.llgc;
 
import java.io.IOException;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class ServletJSF5
 */
@WebServlet ("/ServletJSF5")
public class ServletJSF5 extends HttpServlet
{
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
   *      response)
   */
  protected void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
  {
    response.setCharacterEncoding ("UTF-8");
    String value = getCookie (request.getCookies (), "compteur");
    response.setContentType ("text/html");
    int compteur = 0;
    if (value != null)
    {
      compteur = Integer.parseInt (value);
    }
    compteur++;
    Cookie c = new Cookie ("compteur", "" + compteur);
    c.setMaxAge (3600);
    response.addCookie (c);
    this.getServletContext ().getRequestDispatcher ("/faces/indexjsf5.xhtml").forward (request, response);
  }
 
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
   *      response)
   */
  protected void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
  {
    doGet (request, response);
  }
 
  // Renvoie la valeur d'un cookie.
  protected static String getCookie (Cookie[] cookies, String cookieName)
  {
    if (cookies == null)
    {
      return null;
    }
    for (int i = 0; i < cookies.length; i++)
    {
      if (cookieName.equalsIgnoreCase (cookies[i].getName ()))
      {
        return cookies[i].getValue ();
      }
    }
    return null;
  }
}
indexjsf5.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</h:head>
<h:body>
  <p>
    <h:outputText rendered="#{cookie.compteur != null}" value="compteur : #{cookie.compteur.value}" />
    <h:outputText rendered="#{cookie.compteur == null}" value="Pas de cookie, allez cuisiner !!!" />
  </p>
</h:body>
</html>

Rendu 1 : 

Pas de cookie, allez cuisiner !!!

Rendu 2 : 

compteur : 1

Exemple 6 - Affichage d'une liste dans un tableau

La liste est générée par une classe Java Liste6 et affiche un type BeanPersonne.

index6.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert title here</title>
</h:head>
<h:body>
  <table border="1">
    <tr>
      <td>Taille</td>
      <td>Yeux bleus</td>
    </tr>
    <ui:repeat var="perso" value="${liste6.getListePersonne ()}">
      <tr>
        <td>${perso.taille}</td>
        <td>${perso.yeuxBleus}</td>
      </tr>
    </ui:repeat>
  </table>
</h:body>
</f:view>
</html>

Rendu : Rendu exemple 6

index6-2.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:ui="http://java.sun.com/jsf/facelets">
<f:view>
  <h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Insert title here</title>
    <h:outputStylesheet library="css" name="table-style.css" />
  </h:head>
  <h:body>
    <h:dataTable value="#{liste6.getListePersonne ()}" var="perso"
      styleClass="order-table" headerClass="order-table-header"
      rowClasses="order-table-odd-row,order-table-even-row">
      <h:column>
        <f:facet name="header">Taille</f:facet>
        #{perso.taille}
      </h:column>
      <h:column>
        <f:facet name="header">Yeux bleus</f:facet>
        #{perso.yeuxBleus}
      </h:column>
    </h:dataTable>
  </h:body>
</f:view>
</html>

Le fichier .css (Source, Archive) doit être placé dans le dossier WebContent\resources\css.

table-style.css
.order-table{   
  border-collapse:collapse;
}
 
.order-table-header{
  text-align:center;
  background:none repeat scroll 0 0 #E5E5E5;
  border-bottom:1px solid #BBBBBB;
  padding:16px;
}
 
.order-table-odd-row{
  text-align:center;
  background:none repeat scroll 0 0 #FFFFFFF;
  border-top:1px solid #BBBBBB;
}
 
.order-table-even-row{
  text-align:center;
  background:none repeat scroll 0 0 #F9F9F9;
  border-top:1px solid #BBBBBB;
}

Rendu : Rendu exemple 6

helloworld/web/java/jsf.1439328316.txt.gz · Dernière modification : 2015/08/11 23:25 de root