wake-up-neo.com

Wie binde ich ein anderes XHTML in XHTML ein, indem ich JSF 2.0 Facelets verwende?

Wie kann eine andere XHTML-Seite am besten in eine XHTML-Seite eingefügt werden? Ich habe verschiedene Wege ausprobiert, keiner von ihnen funktioniert.

jsfxhtmlincludejsf-2facelets
213
Ikthiander

<ui:include>

Der einfachste Weg ist <ui:include> . Der enthaltene Inhalt muss in <ui:composition> platziert werden.

Kickoff-Beispiel der Masterseite /page.xhtml:

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title>Include demo</title>
    </h:head>
    <h:body>
        <h1>Master page</h1>
        <p>Master page blah blah lorem ipsum</p>
        <ui:include src="/WEB-INF/include.xhtml" />
    </h:body>
</html>

Die Include-Seite /WEB-INF/include.xhtml (Ja, dies ist die gesamte Datei. Alle Tags außerhalb von <ui:composition> Sind unnötig, da sie von Facelets sowieso ignoriert werden.):

<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h2>Include page</h2>
    <p>Include page blah blah lorem ipsum</p>
</ui:composition>

Dies muss mit /page.xhtml Geöffnet werden. Beachten Sie, dass Sie <html>, <h:head> Und <h:body> In der Include-Datei nicht wiederholen müssen, da dies sonst zu ngültigem HTML führen würde.

Sie können einen dynamischen EL-Ausdruck in <ui:include src> Verwenden. Siehe auch So aktualisieren Sie dynamischen Include-Inhalt über das Navigationsmenü? (JSF SPA) .

<ui:define>/<ui:insert>

Eine fortgeschrittenere Art des Einbindens ist templating. Dies schließt grundsätzlich den umgekehrten Weg ein. Die Master-Vorlagenseite sollte <ui:insert> verwenden, um Stellen zum Einfügen von definiertem Vorlageninhalt anzugeben. Die Template-Client-Seite, die die Master-Template-Seite verwendet, sollte <ui:define> verwenden, um den einzufügenden Template-Inhalt zu definieren.

Mastervorlagenseite /WEB-INF/template.xhtml (Als Gestaltungshinweis: Die Kopf-, Menü- und Fußzeile kann auch eine <ui:include> - Datei sein):

<!DOCTYPE html>
<html lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
    <h:head>
        <title><ui:insert name="title">Default title</ui:insert></title>
    </h:head>
    <h:body>
        <div id="header">Header</div>
        <div id="menu">Menu</div>
        <div id="content"><ui:insert name="content">Default content</ui:insert></div>
        <div id="footer">Footer</div>
    </h:body>
</html>

Template Client Seite /page.xhtml (Beachten Sie das template Attribut; auch hier ist dies die Datei in ihrer Gesamtheit):

<ui:composition template="/WEB-INF/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets">

    <ui:define name="title">
        New page title here
    </ui:define>

    <ui:define name="content">
        <h1>New content here</h1>
        <p>Blah blah</p>
    </ui:define>
</ui:composition>

Dies muss mit /page.xhtml Geöffnet werden. Wenn kein <ui:define> Vorhanden ist, wird stattdessen der Standardinhalt in <ui:insert> Angezeigt, sofern vorhanden.

<ui:param>

Sie können Parameter mit <ui:include> an <ui:composition template> Oder <ui:param> Übergeben.

<ui:include ...>
    <ui:param name="foo" value="#{bean.foo}" />
</ui:include>

<ui:composition template="...">
    <ui:param name="foo" value="#{bean.foo}" />
    ...
</ui:composition >

In der Include-/Vorlagendatei ist sie als #{foo} Verfügbar. Wenn Sie "viele" Parameter an <ui:include> Übergeben müssen, sollten Sie die Include-Datei als Tag-Datei registrieren, damit Sie sie letztendlich wie folgt verwenden können <my:tagname foo="#{bean.foo}">. Siehe auch Wann werden <ui: include>, Tag-Dateien, Verbundkomponenten und/oder benutzerdefinierte Komponenten verwendet?

Sie können sogar ganze Beans, Methoden und Parameter über <ui:param> Übergeben. Siehe auch JSF 2: Übergeben einer Aktion einschließlich eines aufzurufenden Arguments an eine Facelets-Unteransicht (unter Verwendung von ui: include und ui: param)?

Design-Tipps

Die Dateien, auf die nicht öffentlich zugegriffen werden soll, indem nur die URL eingegeben/erraten wird, müssen im Ordner /WEB-INF Abgelegt werden, so wie die Include-Datei und die Vorlagendatei im obigen Beispiel. Siehe auch Welche XHTML-Dateien muss ich in/WEB-INF einfügen und welche nicht?

Außerhalb von <ui:composition> Und <ui:define> Muss kein Markup (HTML-Code) vorhanden sein. Sie können jede setzen, aber sie werden von Facelets ignoriert . Das Einfügen von Markups ist nur für Webdesigner nützlich. Siehe auch Gibt es eine Möglichkeit, eine JSF-Seite auszuführen, ohne das gesamte Projekt zu erstellen?

Der HTML5-Doctype ist heutzutage der empfohlene Doctype, obwohl es sich um eine XHTML-Datei handelt. Sie sollten XHTML als eine Sprache sehen, mit der Sie HTML-Ausgaben mit einem XML-basierten Tool erstellen können. Siehe auch Ist es möglich, JSF + Facelets mit HTML 4/5 zu verwenden? und JavaServer Faces 2.2 und HTML5 werden unterstützt, warum wird XHTML immer noch verwendet .

CSS/JS/Image-Dateien können als dynamisch verschiebbare/lokalisierte/versionierte Ressourcen eingefügt werden. Siehe auch Wie verweise ich auf CSS/JS/Bildressourcen in der Facelets-Vorlage?

Sie können Facelets-Dateien in eine wiederverwendbare JAR-Datei einfügen. Siehe auch Struktur für mehrere JSF-Projekte mit gemeinsamem Code .

Beispiele für fortgeschrittene Facelets-Vorlagen aus der Praxis finden Sie im Ordner src/main/webapp Von Java EE Kickoff App-Quellcode und OmniFaces-Showcase-Site-Quellcode .

409
BalusC

Mitgelieferte Seite:

<!-- opening and closing tags of included page -->
<ui:composition ...>
</ui:composition>

Einschließlich Seite:

<!--the inclusion line in the including page with the content-->
<ui:include src="yourFile.xhtml"/>
  • Sie starten Ihre enthaltene xhtml-Datei mit ui:composition wie oben gezeigt.
  • Sie fügen diese Datei mit ui:include in der enthaltenen xhtml-Datei, wie oben gezeigt.
22
Benchik