JSF - Tag Personalizada

O JSF fornece ao desenvolvedor um recurso poderoso para definir suas próprias tags personalizadas, que podem ser usadas para renderizar conteúdos personalizados.

Definir uma tag personalizada no JSF é um processo de três etapas.

Degrau	Descrição
1a	Crie um arquivo xhtml e defina o conteúdo nele usando ui:composition etiqueta
1b	Crie um descritor de biblioteca de tags (arquivo .taglib.xml) e declare a tag personalizada acima nele.
1c	Registre o descritor de tag libray em web.xml

Etapa 1a: Definir o conteúdo da tag personalizada: buttonPanel.xhtml

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

Etapa 1b: Definir uma biblioteca de tags: tutorialspoint.taglib.xml

Como o nome menciona, uma biblioteca de tags é uma biblioteca de tags. A tabela a seguir descreve atributos importantes de uma biblioteca de tags.

S.Não	Nó e descrição
1	facelet-taglib Contém todas as tags.
2	namespace Namespace da biblioteca de tags e deve ser exclusivo.
3	tag Contém uma única tag
4	tag-name Nome da tag
5	source Implementação de tag

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

Etapa 1c: Registre a biblioteca de tags: web.xml

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

Usar uma tag customizada no JSF é um processo de duas etapas.

Degrau	Descrição
2a	Crie um arquivo xhtml e use o namespace da biblioteca de tags personalizadas
2b	Use a tag personalizada como tags JSF normais

Etapa 2a: use o namespace 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">

Etapa 2b: usar tag personalizada: home.xhtml

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

Aplicação de exemplo

Vamos criar um aplicativo JSF de teste para testar as tags de modelo no JSF.

Degrau	Descrição
1	Crie um projeto com o nome helloworld sob um pacote com.tutorialspoint.test conforme explicado no capítulo JSF - Primeira Aplicação .
2	Crie a pasta com no diretório WEB-INF .
3	Crie a pasta tutorialspoint no diretório WEB-INF> com .
4	Crie o arquivo buttonPanel.xhtml na pasta WEB-INF> com> tutorialspoint . Modifique-o conforme explicado abaixo.
5	Crie o arquivo tutorialspoint.taglib.xml na pasta WEB-INF . Modifique-o conforme explicado abaixo.
6	Modifique o arquivo web.xml na pasta WEB-INF conforme explicado abaixo.
7	Modifique home.xhtml conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
8	Compile e execute o aplicativo para ter certeza de que a lógica de negócios está funcionando de acordo com os requisitos.
9	Por fim, construa o aplicativo na forma de um arquivo war e implante-o no Apache Tomcat Webserver.
10	Inicie seu aplicativo da web usando o URL apropriado, conforme explicado a seguir na última etapa.

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>

Assim que você estiver pronto com todas as mudanças feitas, vamos compilar e rodar a aplicação como fizemos no capítulo JSF - Primeira Aplicação. Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado.

↰ Previous page