JSF - Tag personalizzato

JSF fornisce allo sviluppatore una potente capacità di definire i propri tag personalizzati, che possono essere utilizzati per il rendering di contenuti personalizzati.

La definizione di un tag personalizzato in JSF è un processo in tre fasi.

Passo	Descrizione
1a	Crea un file xhtml e definisci i contenuti in esso utilizzando ui:composition etichetta
1b	Crea un descrittore della libreria di tag (file .taglib.xml) e dichiara il tag personalizzato sopra in esso.
1c	Registra il tag libray descrittore in web.xml

Passaggio 1a: definizione del contenuto del tag personalizzato: buttonPanel.xhtml

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

Passaggio 1b: definire una libreria di tag: tutorialspoint.taglib.xml

Come cita il nome, una libreria di tag è una libreria di tag. La tabella seguente descrive gli attributi importanti di una libreria di tag.

S.No	Nodo e descrizione
1	facelet-taglib Contiene tutti i tag.
2	namespace Spazio dei nomi della libreria di tag e dovrebbe essere univoco.
3	tag Contiene un singolo tag
4	tag-name Nome del tag
5	source Implementazione dei tag

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

Passaggio 1c: registra la libreria di tag: web.xml

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

L'utilizzo di un tag personalizzato in JSF è un processo in due fasi.

Passo	Descrizione
2a	Crea un file xhtml e usa lo spazio dei nomi della libreria di tag personalizzati
2b	Utilizza il tag personalizzato come normali tag JSF

Passaggio 2a: utilizza lo spazio dei nomi personalizzato: 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">

Passaggio 2b: utilizza il tag personalizzato: home.xhtml

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

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare i tag del modello in JSF.

Passo	Descrizione
1	Creare un progetto con un nome helloworld sotto un pacchetto com.tutorialspoint.test come spiegato nel capitolo JSF - Prima applicazione .
2	Crea la cartella com nella directory WEB-INF .
3	Crea la cartella tutorialspoint in WEB-INF> directory com .
4	Crea il file buttonPanel.xhtml in WEB-INF> com> cartella tutorialspoint . Modificalo come spiegato di seguito.
5	Crea il file tutorialspoint.taglib.xml nella cartella WEB-INF . Modificalo come spiegato di seguito.
6	Modificare il file web.xml nella cartella WEB-INF come spiegato di seguito.
7	Modifica home.xhtml come spiegato di seguito. Mantieni invariato il resto dei file.
8	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
9	Infine, crea l'applicazione sotto forma di file war e distribuiscila in Apache Tomcat Webserver.
10	Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione come abbiamo fatto nel capitolo JSF - Prima applicazione. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato.

↰ Previous page