JSF - Balise personnalisée

JSF fournit au développeur une capacité puissante pour définir ses propres balises personnalisées, qui peuvent être utilisées pour rendre le contenu personnalisé.

La définition d'une balise personnalisée dans JSF est un processus en trois étapes.

Étape	La description
1a	Créez un fichier xhtml et définissez-y son contenu en utilisant ui:composition marque
1b	Créez un descripteur de bibliothèque de balises (fichier .taglib.xml) et y déclare la balise personnalisée ci-dessus.
1c	Enregistrez le descripteur de libray de balises dans web.xml

Étape 1a: définir le contenu de la balise personnalisée: buttonPanel.xhtml

<h:body>
   <ui:composition> 
      <h:commandButton type = "submit" value = "#{okLabel}" />
      <h:commandButton type = "reset" value = "#{cancelLabel}" /> 
   </ui:composition>
</h:body>

Étape 1b: définir une bibliothèque de balises: tutorialspoint.taglib.xml

Comme son nom l'indique, une bibliothèque de balises est une bibliothèque de balises. Le tableau suivant décrit les attributs importants d'une bibliothèque de balises.

S. Non	Nœud et description
1	facelet-taglib Contient toutes les balises.
2	namespace L'espace de nom de la bibliothèque de balises et doit être unique.
3	tag Contient une seule balise
4	tag-name Nom du tag
5	source Implémentation des balises

<facelet-taglib>
   <namespace>http://tutorialspoint.com/facelets</namespace>
   <tag>
      <tag-name>buttonPanel</tag-name>
      <source>com/tutorialspoint/buttonPanel.xhtml</source>
   </tag>
</facelet-taglib>

Étape 1c: Enregistrez la bibliothèque de balises: web.xml

<context-param>
   <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
   <param-value>/WEB-INF/tutorialspoint.taglib.xml</param-value>
</context-param>

L'utilisation d'une balise personnalisée dans JSF est un processus en deux étapes.

Étape	La description
2a	Créez un fichier xhtml et utilisez l'espace de noms de la bibliothèque de balises personnalisées
2b	Utilisez la balise personnalisée 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://tutorialspoint.com/facelets">

Étape 2b: utilisez la balise personnalisée: home.xhtml

<h:body>
   <tp:buttonPanel okLabel = "Ok" cancelLabel = "Cancel" /> 		
</h:body>

Exemple d'application

Créons une application de test JSF pour tester les balises de modèle 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 le dossier com sous le répertoire WEB-INF .
3	Créez le dossier tutorialspoint sous le répertoire WEB-INF> com .
4	Créez le fichier buttonPanel.xhtml sous le dossier WEB-INF> com> tutorialspoint . Modifiez-le comme expliqué ci-dessous.
5	Créez le fichier tutorialspoint.taglib.xml dans le dossier WEB-INF . Modifiez-le comme expliqué ci-dessous.
6	Modifiez le fichier web.xml dans le dossier WEB-INF comme expliqué ci-dessous.
sept	Modifiez home.xhtml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
8	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.
9	Enfin, créez l'application sous la forme d'un fichier war et déployez-la dans Apache Tomcat Webserver.
dix	Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

buttonPanel.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:ui = "http://java.sun.com/jsf/facelets">
   
   <h:body>
      <ui:composition> 
         <h:commandButton type = "submit" value = "#{okLabel}" />
         <h:commandButton type = "reset" value = "#{cancelLabel}" /> 
      </ui:composition>
   </h:body>
</html>

tutorialspoint.taglib.xml

<?xml version = "1.0"?>
<!DOCTYPE facelet-taglib PUBLIC
"-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN"
"http://java.sun.com/dtd/facelet-taglib_1_0.dtd">

<facelet-taglib>
   <namespace>http://tutorialspoint.com/facelets</namespace>
   
   <tag>
      <tag-name>buttonPanel</tag-name>
      <source>com/tutorialspoint/buttonPanel.xhtml</source>
   </tag>
</facelet-taglib>

web.xml

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
   <display-name>Archetype Created Web Application</display-name>
   <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
   </context-param>	
   
   <context-param>
      <param-name>javax.faces.FACELETS_LIBRARIES</param-name>
      <param-value>/WEB-INF/tutorialspoint.taglib.xml</param-value>
   </context-param>
   
   <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>*.jsf</url-pattern>
   </servlet-mapping>
</web-app>

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:ui = "http://java.sun.com/jsf/facelets"
   xmlns:tp = "http://tutorialspoint.com/facelets">
   
   <h:head>
      <title>JSF tutorial</title>			
   </h:head>
   
   <h:body>
      <h1>Custom Tags Example</h1>
      <tp:buttonPanel okLabel = "Ok" cancelLabel = "Cancel" />
   </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