JSF - Componenti compositi

JSF fornisce agli sviluppatori una potente capacità di definire i propri componenti personalizzati, che possono essere utilizzati per il rendering di contenuti personalizzati.

Definisci componente personalizzato

La definizione di un componente personalizzato in JSF è un processo in due fasi.

Passo	Descrizione
1a	Crea una cartella delle risorse. Crea un file xhtml nella cartella delle risorse con uno spazio dei nomi composto.
1b	Utilizza i tag compositi composito: interfaccia, composito: attributo e composito: implementazione, per definire il contenuto del componente composito. Usa cc.attrs in composite: implementation per ottenere la variabile definita usando composite: attribute in composite: interface .

Passaggio 1a: creazione di un componente personalizzato: loginComponent.xhtml

Crea una cartella tutorialspoint nella cartella delle risorse e crea un file loginComponent.xhtml al suo interno.

Usa lo spazio dei nomi composto nell'intestazione 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>

Passaggio 1b: utilizza tag compositi: loginComponent.xhtml

La tabella seguente descrive l'uso dei tag compositi.

S.No	Tag e descrizione
1	composite:interface Dichiara i valori configurabili da utilizzare in composito: implementazione.
2	composite:attribute I valori di configurazione vengono dichiarati utilizzando questo tag.
3	composite:implementation Dichiara il componente JSF. Può accedere ai valori configurabili definiti in composite: interface utilizzando l'espressione # {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>

Usa componente personalizzato

L'utilizzo di un componente personalizzato in JSF è un processo semplice.

Passo	Descrizione
2a	Crea un file xhtml e utilizza lo spazio dei nomi del componente personalizzato. Lo spazio dei nomi sarà http://java.sun.com/jsf/ <nome-cartella> dove nome-cartella è la cartella nella directory delle risorse contenente il componente personalizzato
2b	Utilizza il componente 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://java.sun.com/jsf/composite/tutorialspoint">

Passaggio 2b: utilizza tag personalizzato: home.xhtml e trasmetti valori

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

Applicazione di esempio

Creiamo un'applicazione JSF di prova per testare il componente personalizzato 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 delle risorse in src → cartella principale .
3	Crea la cartella tutorialspoint in src → main → cartella delle risorse .
4	Crea il file loginComponent.xhtml sotto src → main → risorse → cartella tutorialspoint .
5	Modificare il file UserData.java come spiegato di seguito.
6	Modifica home.xhtml come spiegato di seguito. Mantieni invariato il resto dei file.
7	Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti.
8	Infine, crea l'applicazione sotto forma di file war e distribuiscila in Apache Tomcat Webserver.
9	Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio.

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>

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 Next page ↱