JSF: etiqueta personalizada

JSF proporciona al desarrollador una poderosa capacidad para definir sus propias etiquetas personalizadas, que se pueden utilizar para representar contenido personalizado.

La definición de una etiqueta personalizada en JSF es un proceso de tres pasos.

Paso	Descripción
1a	Cree un archivo xhtml y defina su contenido usando ui:composition etiqueta
1b	Cree un descriptor de biblioteca de etiquetas (archivo .taglib.xml) y declare la etiqueta personalizada anterior en él.
1c	Registre el descriptor de la biblioteca de etiquetas en web.xml

Paso 1a: Defina el contenido de la etiqueta personalizada: buttonPanel.xhtml

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

Paso 1b: Defina una biblioteca de etiquetas: tutorialspoint.taglib.xml

Como su nombre lo menciona, una biblioteca de etiquetas es una biblioteca de etiquetas. La siguiente tabla describe los atributos importantes de una biblioteca de etiquetas.

S. No	Nodo y descripción
1	facelet-taglib Contiene todas las etiquetas.
2	namespace Espacio de nombres de la biblioteca de etiquetas y debe ser único.
3	tag Contiene una sola etiqueta
4	tag-name Nombre de la etiqueta
5	source Implementación de etiquetas

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

Paso 1c: registre la biblioteca de etiquetas: web.xml

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

El uso de una etiqueta personalizada en JSF es un proceso de dos pasos.

Paso	Descripción
2a	Cree un archivo xhtml y use el espacio de nombres de la biblioteca de etiquetas personalizadas
2b	Utilice la etiqueta personalizada como etiquetas JSF normales

Paso 2a: use el espacio de nombres personalizado: 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">

Paso 2b: use la etiqueta personalizada: home.xhtml

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

Aplicación de ejemplo

Creemos una aplicación JSF de prueba para probar las etiquetas de plantilla en JSF.

Paso	Descripción
1	Cree un proyecto con un nombre helloworld en un paquete com.tutorialspoint.test como se explica en el capítulo JSF - Primera aplicación .
2	Cree la carpeta com en el directorio WEB-INF .
3	Cree la carpeta tutorialspoint en WEB-INF> directorio com .
4	Cree el archivo buttonPanel.xhtml en WEB-INF> com> carpeta tutorialspoint . Modifíquelo como se explica a continuación.
5	Cree el archivo tutorialspoint.taglib.xml en la carpeta WEB-INF . Modifíquelo como se explica a continuación.
6	Modifique el archivo web.xml en la carpeta WEB-INF como se explica a continuación.
7	Modifique home.xhtml como se explica a continuación. Mantenga el resto de los archivos sin cambios.
8	Compile y ejecute la aplicación para asegurarse de que la lógica empresarial funcione según los requisitos.
9	Finalmente, compile la aplicación en forma de archivo war e impleméntela en Apache Tomcat Webserver.
10	Inicie su aplicación web utilizando la URL adecuada como se explica a continuación en el último paso.

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>

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación como lo hicimos en JSF - Capítulo Primera aplicación. Si todo está bien con su aplicación, esto producirá el siguiente resultado.

↰ Previous page