TOC

Beispiel für das JSF 2-Template mit Facelets

JSF 2 Templating mit Facelets Beispiel

In Webanwendungen folgen die meisten Seiten einem ähnlichen Layout und Stil der Weboberfläche, z. B. der gleichen Kopf- und Fußzeile. In JSF 2.0 können Sie Facelets-Tags verwenden, um auf einfache Weise ein Standardlayout für die Weboberfläche bereitzustellen. Tatsächlich sieht es mitApache Tiles framework ähnlich aus.

In diesem Beispiel wird die Verwendung von 4 Facelets-Tags zum Erstellen einer Seite aus einer Vorlage gezeigt:

  1. ui:insert - Wird in der Vorlagendatei verwendet und definiert den Inhalt, der durch die Datei ersetzt wird, die die Vorlage lädt. Der Inhalt kann durch das Tag "ui: define" ersetzt werden.

  2. ui:define - Definiert Inhalte, die in eine Vorlage eingefügt werden, mit einem passenden Tag "ui: insert".

  3. ui:include - Enthält ähnlich wie JSPs "jsp: include" Inhalte von einer anderen XHTML-Seite.

  4. ui:composition - Bei Verwendung mit dem Attribut "template" wird die angegebene Vorlage geladen, und die untergeordneten Elemente dieses Tags definieren das Vorlagenlayout. Andernfalls handelt es sich um eine Gruppe von Elementen, die irgendwo eingefügt werden können. Außerdem entfernt JSF alle Tags "außerhalb" des Tags "ui: composition".

1. Vorlagenlayout

In JSF 2.0 ist eine Vorlagendatei nur eine normale XHTML-Datei mit wenigen JSF-Facelets-Tags zum Definieren des Vorlagenlayouts.

Datei: commonLayout.xhtml

In dieser Vorlage wird ein Standard-Weblayout definiert:

  1. Verwendet das Tag "h:outputStylesheet", um eine CSS-Datei in den Kopf aufzunehmen, um das gesamte Seitenlayout zu gestalten.

  2. Verwendet das Tag "ui:insert", um drei austauschbare Abschnitte zu definieren: Kopf-, Inhalts- und Fußzeile.

  3. Verwendet das Tag "ui:include", um einen Standardinhalt bereitzustellen, wenn bei Verwendung der Vorlage kein Ersatz angegeben wird.

2. Kopfzeile, Inhalt und Fußzeile

Drei Standardseiteninhalte.

Datei: commonHeader.xhtml 




    
        

        
This is default header

Datei: commonContent.xhtml 




    
        

        
This is default content

Datei: commonFooter.xhtml 




    
        

        
This is default footer

Wenn diese Seiten in die Vorlagendatei eingefügt werden, werden alle Tags außerhalb der "ui:composition" entfernt. Zum Beispiel,

Datei: commonHeader.xhtml 




    
        ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
        

        
This is default header


        
        ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF

JSF verwendet nur die folgenden Elemente und fügt sie in die Vorlagendatei ein 



    
This is default header

Beim Einfügen in die Vorlage "commonLayout" wurde…

Datei: commonLayout.xhtml 

    ...
    

    


        
    ...

3. Vorlage verwenden

Um eine vorhandene Vorlage zu nutzen, z. "commonLayout.xhtml" verwenden Sie das Tag "ui:composition" mit dem Attribut "template". Siehe folgende zwei Beispiele:

Datei: default.xhtml

Diese JSF-Seite lädt die Vorlage "commonLayout.xhtml" und zeigt den gesamten Standard-Seiteninhalt an.

jsf2-facelets-template-example-1

Datei: page1.xhtml 




    

        

            
                
This is page1 content

            

        
                
This is page1 Footer

Diese JSF-Seite lädt eine Vorlage "commonLayout.xhtml" und verwendet das Tag "ui: define", um das in der Vorlagendatei definierte Tag "ui: insert" zu überschreiben.

jsf2-facelets-template-example-2

Note
Solange der Name des Tags "ui:define" mit dem Namen des Tags "ui:insert" übereinstimmt, das in der Vorlage definiert ist, wird "ui: Einfügen “wird ersetzt.

Quellcode herunterladen

Laden Sie es herunter -JSF-2-Facelets-Template-Example.zip (12 KB)

Verweise

  1. Apache Tiles Framework

  2. JSF "ui: include" JavaDoc

  3. JSF "ui: insert" JavaDoc

  4. JSF "ui: define" JavaDoc

  5. JSF "ui: Komposition" JavaDoc

Related