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.