JSF - Verbundkomponenten
JSF bietet den Entwicklern eine leistungsstarke Möglichkeit, ihre eigenen benutzerdefinierten Komponenten zu definieren, mit denen benutzerdefinierte Inhalte gerendert werden können.
Benutzerdefinierte Komponente definieren
Das Definieren einer benutzerdefinierten Komponente in JSF erfolgt in zwei Schritten.
Schritt | Beschreibung |
---|---|
1a | Erstellen Sie einen Ressourcenordner. Erstellen Sie eine XML-Datei im Ressourcenordner mit einem zusammengesetzten Namespace. |
1b | Verwenden Sie Composite-Tags Composite: Interface, Composite: Attribut und Composite: Implementierung, um den Inhalt der Composite-Komponente zu definieren. Verwenden Sie cc.attrs in der Composite: -Implementierung , um die Variable mithilfe des Composite: -Attributs in der Composite: -Schnittstelle zu definieren . |
Schritt 1a: Benutzerdefinierte Komponente erstellen: loginComponent.xhtml
Erstellen Sie einen Ordner tutorialspoint im Ressourcenordner und erstellen Sie darin eine Datei loginComponent.xhtml.
Verwenden Sie einen zusammengesetzten Namespace im HTML-Header.
<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>
Schritt 1b: Verwenden Sie zusammengesetzte Tags: loginComponent.xhtml
Die folgende Tabelle beschreibt die Verwendung von zusammengesetzten Tags.
S.No. | Tag & Beschreibung |
---|---|
1 | composite:interface Deklariert konfigurierbare Werte für Composite: Implementierung. |
2 | composite:attribute Konfigurationswerte werden mit diesem Tag deklariert. |
3 | composite:implementation Deklariert die JSF-Komponente. Kann mit dem Ausdruck # {cc.attrs.attribute-name} auf die in compos: interface definierten konfigurierbaren Werte zugreifen. |
<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>
Verwenden Sie eine benutzerdefinierte Komponente
Die Verwendung einer benutzerdefinierten Komponente in JSF ist ein einfacher Vorgang.
Schritt | Beschreibung |
---|---|
2a | Erstellen Sie eine XML-Datei und verwenden Sie den Namespace der benutzerdefinierten Komponente. Der Namespace ist http://java.sun.com/jsf/ <Ordnername>, wobei Ordnername der Ordner im Ressourcenverzeichnis ist, der die benutzerdefinierte Komponente enthält |
2b | Verwenden Sie die benutzerdefinierte Komponente als normale JSF-Tags |
Schritt 2a: Verwenden Sie den benutzerdefinierten Namespace: 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">
Schritt 2b: Verwenden Sie das benutzerdefinierte Tag: home.xhtml und übergeben Sie die Werte
<h:form>
<tp:loginComponent
usernameLabel = "Enter User Name: "
usernameValue = "#{userData.name}" />
</h:form>
Beispielanwendung
Lassen Sie uns eine Test-JSF-Anwendung erstellen, um die benutzerdefinierte Komponente in JSF zu testen.
Schritt | Beschreibung |
---|---|
1 | Erstellen Sie ein Projekt mit dem Namen helloworld unter einem Paket com.tutorialspoint.test, wie im Kapitel JSF - Erste Anwendung erläutert . |
2 | Erstellen Sie einen Ressourcenordner unter src → Hauptordner. |
3 | Erstellen Sie den Ordner tutorialspoint unter dem Ordner src → main → resources . |
4 | Erstellen Sie die Datei loginComponent.xhtml unter dem Ordner src → main → resources → tutorialspoint . |
5 | Ändern UserData.java Datei erklärt , wie unten. |
6 | Ändern home.xhtml wie unten erläutert. Lassen Sie den Rest der Dateien unverändert. |
7 | Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht. |
8 | Erstellen Sie abschließend die Anwendung in Form einer War-Datei und stellen Sie sie in Apache Tomcat Webserver bereit. |
9 | Starten Sie Ihre Webanwendung unter Verwendung der entsprechenden URL, wie im letzten Schritt unten erläutert. |
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>
Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung wie im Kapitel JSF - Erste Anwendung kompilieren und ausführen. Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis.