JSF/PrimeFaces - Template with <p:layout>

facelets, jsf, layout, primefaces, templates

Solution

This is indeed not the right approach. Your template has to be XML well formed. I suggest to create a master template file instead if all you want is to only specify the center unit.

Taking the example on the showcase site, that should look like this:

`/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>

Note the `<ui:insert>` in the center unit.

The template client can then just look like this:

`/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>

which you open by http://example.com/contextname/page.xhtml.

See also:

- How to include another XHTML in XHTML using JSF 2.0 Facelets?

If you're looking for live open source examples of advanced Facelets templating, you may find OmniFaces showcase app useful.

Problem

I need to create a layout like this but with all the containers on separated files, like: 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> ``` Without the `</p:layout>` because it will be close on my footer.xhtml like: ``` <p:layoutUnit position="south" header="© 2012 - 2012 PORTAL DE IDEIAS"> </p:layoutUnit></p:layout> ``` I have tried with both files but I get a error telling me that I need to close the layout tag, what is correct, but how can I solve my problem? Is this the best approach for a template? And another problem is that the layout tag require a center layoutUnit

Original source

Related problems