JSF - Composants composites

JSF fournit aux développeurs une capacité puissante pour définir leurs propres composants personnalisés, qui peuvent être utilisés pour rendre des contenus personnalisés.

Définir un composant personnalisé

La définition d'un composant personnalisé dans JSF est un processus en deux étapes.

Étape	La description
1a	Créez un dossier de ressources. Créez un fichier xhtml dans le dossier des ressources avec un espace de noms composite.
1b	Utilisez les balises composites composite: interface, composite: attribute et composite: implementation, pour définir le contenu du composant composite. Utilisez cc.attrs dans composite: implementation pour obtenir la variable définie à l'aide de composite: attribute dans composite: interface .

Étape 1a: Créer un composant personnalisé: loginComponent.xhtml

Créez un dossier tutorialspoint dans le dossier resources et créez un fichier loginComponent.xhtml dedans.

Utilisez un espace de noms composite dans l'en-tête html.

<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:composite = "http://java.sun.com/jsf/composite">
...
</html>

Étape 1b: Utilisez les balises composites: loginComponent.xhtml

Le tableau suivant décrit l'utilisation des balises composites.

S. Non	Balise et description
1	composite:interface Déclare les valeurs configurables à utiliser dans composite: implémentation.
2	composite:attribute Les valeurs de configuration sont déclarées à l'aide de cette balise.
3	composite:implementation Déclare le composant JSF. Peut accéder aux valeurs configurables définies dans composite: interface à l'aide de l'expression # {cc.attrs.attribute-name}.

<composite:interface>
   <composite:attribute name = "usernameLabel" />
   <composite:attribute name = "usernameValue" />
</composite:interface>

<composite:implementation>
<h:form>
   #{cc.attrs.usernameLabel} : 
   <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
</h:form>

Utiliser un composant personnalisé

L'utilisation d'un composant personnalisé dans JSF est un processus simple.

Étape	La description
2a	Créez un fichier xhtml et utilisez l'espace de noms du composant personnalisé. L'espace de noms sera le http://java.sun.com/jsf/ <nom-dossier> où nom-dossier est le dossier dans le répertoire des ressources contenant le composant personnalisé
2b	Utilisez le composant personnalisé comme balises JSF normales

Étape 2a: utiliser l'espace de noms personnalisé: home.xhtml

<html xmlns = "http://www.w3.org/1999/xhtml"   
   xmlns:h = "http://java.sun.com/jsf/html"
   xmlns:ui = "http://java.sun.com/jsf/facelets">
   xmlns:tp = "http://java.sun.com/jsf/composite/tutorialspoint">

Étape 2b: utilisez la balise personnalisée: home.xhtml et transmettez les valeurs

<h:form>
   <tp:loginComponent 
      usernameLabel = "Enter User Name: " 
      usernameValue = "#{userData.name}" />
</h:form>

Exemple d'application

Créons une application de test JSF pour tester le composant personnalisé dans JSF.

Étape	La description
1	Créez un projet avec un nom helloworld sous un package com.tutorialspoint.test comme expliqué dans le chapitre JSF - Première application .
2	Créez un dossier de ressources sous src → dossier principal .
3	Créez le dossier tutorialspoint sous src → main → dossier de ressources .
4	Créez le fichier loginComponent.xhtml sous src → main → resources → dossier tutorialspoint .
5	Modifiez le fichier UserData.java comme expliqué ci-dessous.
6	Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangés.
sept	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
8	Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
9	Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

loginComponent.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:composite = "http://java.sun.com/jsf/composite">
   
   <composite:interface>
      <composite:attribute name = "usernameLabel" />
      <composite:attribute name = "usernameValue" />
      <composite:attribute name = "passwordLabel" />
      <composite:attribute name = "passwordValue" />
      <composite:attribute name = "loginButtonLabel" />
      <composite:attribute name = "loginButtonAction" 
         method-signature = "java.lang.String login()" />
   </composite:interface>
   
   <composite:implementation>
      <h:form>
         <h:message for = "loginPanel" style = "color:red;" />
         
         <h:panelGrid columns = "2" id = "loginPanel">
            #{cc.attrs.usernameLabel} : 
            <h:inputText id = "username" value = "#{cc.attrs.usernameValue}" />
            #{cc.attrs.passwordLabel} : 
            <h:inputSecret id = "password" value = "#{cc.attrs.passwordValue}" />
         </h:panelGrid>
         
         <h:commandButton action = "#{cc.attrs.loginButtonAction}" 
            value = "#{cc.attrs.loginButtonLabel}"/>
      </h:form>
   </composite:implementation>
</html>

UserData.java

package com.tutorialspoint.test;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userData", eager = true)
@SessionScoped
public class UserData implements Serializable {
   private static final long serialVersionUID = 1L;
   private String name;
   private String password;
   
   public String getName() {
      return name;
   }
   
   public void setName(String name) {
      this.name = name;
   }
   
   public String getPassword() {
      return password;
   }
   
   public void setPassword(String password) {
      this.password = password;
   }	
   
   public String login() {
      return "result";
   }	
}

home.xhtml

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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:tp = "http://java.sun.com/jsf/composite/tutorialspoint">
   
   <h:head>
      <title>JSF tutorial</title>		     
   </h:head>
   
   <h:body> 
      <h2>Custom Component Example</h2>
      
      <h:form>
      <tp:loginComponent 
         usernameLabel = "Enter User Name: " 
         usernameValue = "#{userData.name}" 
         passwordLabel = "Enter Password: " 
         passwordValue = "#{userData.password}"
         loginButtonLabel = "Login" 
         loginButtonAction = "#{userData.login}" />
      </h:form>
   </h:body>
</html>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application comme nous l'avons fait dans le chapitre JSF - Première application. Si tout va bien avec votre application, cela produira le résultat suivant.

↰ Previous page Next page ↱