Zusammengesetzte Komponenten in JSF 2.0

Verbundkomponenten in JSF 2.0

Seit JSF 2.0 ist es sehr einfach, eine wiederverwendbare Komponente zu erstellen, die alscomposite components bezeichnet wird. In diesem Tutorial zeigen wir Ihnen, wie Sie einfache zusammengesetzte Komponenten (gespeichert als „register.xhtml“) erstellen. Dies ist ein Benutzerregistrierungsformular, das Namens- und E-Mail-Textfelder (h:inputText) und eine Senden-Schaltfläche enthält (h:commandButton). Außerdem zeigen wir Ihnen, wie man es benutzt.

Erstellen Sie zusammengesetzte Komponenten

So erstellen Sie zusammengesetzte Komponenten:

1. Zusammengesetzter Namespace

Erstellen Sie eine.xhtml-Datei und deklarieren Sie den zusammengesetzten Namespace.

2. Schnittstelle & Implementierung

Verwendet zusammengesetzte Tagscomposite:interface,composite:attribute undcomposite:implementation, um den Inhalt der zusammengesetzten Komponente zu definieren. Zum Beispiel,



      
            
      

      
            #{cc.attrs.anything}

Dascomposite:interface-Tag wird verwendet, um die konfigurierbaren Werte zu deklarieren, die dem Entwickler, der es verwendet, zur Verfügung gestellt werden. Und dascomposite:implementation-Tag deklariert alle XHTML-Markups, die den Inhalt der zusammengesetzten Komponente darstellen. Innerhalb descomposite:implementation-Tags können Sie mit dem Ausdruck#{cc.attrs.attributeName} auf dascomposite:interface-Attribut zugreifen.

3. Ressourcenordner

Fügen Sie zusammengesetzte Komponenten (".xhtml" -Datei) in den JSF-Ressourcenordner ein (siehe Abbildung 1):

Abbildung 1: Verzeichnisstruktur dieses Beispiels

jsf2-composite-component-folder

In diesem Fall legen Sie die zusammengesetzten Komponenten "register.xhtml" in einem Ordner mit dem Namen "Beispiel" ab.

4. Komplettes Beispiel

Fertig, sehen wir uns ein vollständiges Beispiel für "register.xhtml" an.

Datei: register.xhtml





    

        
        
        
        

    
        

    

    

    

        

        

            #{cc.attrs.nameLable} :
            

            #{cc.attrs.emailLable} :

Verwenden Sie Composite-Komponenten

Sie haben gerade eine zusammengesetzte Komponente "register.xhtml" erstellt, und jetzt zeigen wir Ihnen, wie Sie sie verwenden.

1. Zugriffspfad für zusammengesetzte Komponenten

Siehe Abbildung 1 oben; Die Datei "register.xhtml" befindet sich unter dem Ordner "example". So greifen Sie darauf zu:

http://java.sun.com/jsf/composite/folder-name-in-resources-folder
Der Ordnername der zusammengesetzten Komponenten wird als Komponentenzugriffspfad definiert. Wenn Sie beispielsweise Ihre Datei "register.xhtml" unter dem Ordner "abc" ablegen, sollten Sie wie folgt darauf zugreifen Dies :

2. Komplettes Beispiel

In einem vollständigen Beispiel wird die Verwendung der zusammengesetzten Komponenten "register.xhtml" gezeigt.

Datei: default.xhtml





    

        Composite Components in JSF 2.0

Sie können entweder einen fest codierten Wert oder eine Backing-Methode oder -Eigenschaft über exponierte Attribute an die Composite-Komponente übergeben. Wenn das Formular gesendet wird, übernimmt JSF die gesamte Backing-Bean-Bindung automatisch.

P.S Here’s the “user” managed or backing bean, for those who are interested.

package com.example;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="user")
@SessionScoped
public class UserBean{

    public String name;
    public String email;

    //getter and setter methods for name and email

    public String registerAction(){
        return "result";
    }
}

Demo

Hier ist das Ergebnis.

URL:http://localhost:8080/JavaServerFaces/default.xhtml

jsf2-composite-component-example

Quellcode herunterladen

Laden Sie es herunter -JSF-2-Composite-Components-Example.zip (11 KB)

TOC