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.