web-dev-qa-db-ja.com

JSF / PrimeFaces-<p：layout>を使用したテンプレート

this のようなレイアウトを作成する必要がありますが、次のような個別のファイル上のすべてのコンテナを使用します。

top.xhtml

<p:layout fullPage="true">
        <p:layoutUnit position="north" header="#{support.applicationTitle}">
            <h:form>
                <p:menubar>
                    <p:menuitem value="Quit" icon="ui-icon-close" action="#{userController.logOut()}" />
                </p:menubar>
            </h:form>
        </p:layoutUnit>

</p:layout>なしでは、私のfooter.xhtmlに近いため：

<p:layoutUnit position="south" header="© 2012 - 2012 PORTAL DE IDEIAS">
</p:layoutUnit></p:layout>

両方のファイルを試しましたが、layoutタグを閉じる必要があることを示すエラーが表示されます。何が正しいのですか、どうすれば問題を解決できますか？これはテンプレートの最良のアプローチですか？もう1つの問題は、layoutタグに中央layoutUnitが必要なことです。

templatesjsflayoutprimefacesfacelets
15
Gerep

これは確かに正しいアプローチではありません。テンプレートはXML形式でなければなりません。センターユニットのみを指定したい場合は、代わりにマスターテンプレートファイルを作成することをお勧めします。

ショーケースサイトで例を挙げると、次のようになります。

/WEB-INF/templates/layout.xhtml

<!DOCTYPE html>
<html lang="en"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://Java.Sun.com/jsf/core"
     xmlns:h="http://Java.Sun.com/jsf/html"
     xmlns:ui="http://Java.Sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui"
>
    <h:head>
        <title>Title</title>
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
                <h:outputText value="Top unit content." />
            </p:layoutUnit>

            <p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
                <h:outputText value="South unit content." />
            </p:layoutUnit>

            <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
                <h:form>
                    <ui:include src="../templates/themeMenu.xhtml" />
                </h:form>
            </p:layoutUnit>

            <p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
                <h:outputText value="Right unit content." />
            </p:layoutUnit>

            <p:layoutUnit position="center">
                <ui:insert name="content">Put default content here, if any.</ui:insert>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>

<ui:insert>中央ユニット。

テンプレートクライアントは次のようになります。

/page.xhtml

<ui:composition template="/WEB-INF/templates/layout.xhtml"
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:f="http://Java.Sun.com/jsf/core"
     xmlns:h="http://Java.Sun.com/jsf/html"
     xmlns:ui="http://Java.Sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui"
>
     <ui:define name="content">
         <p>Here goes your view-specific content.</p>
     </ui:define>
</ui:composition>

http://example.com/contextname/page.xhtml で開きます。

こちらもご覧ください：

高度なFaceletsテンプレートのライブオープンソースの例を探している場合は、 OmniFaces showcase app が便利です。

30
BalusC