web-dev-qa-db-fra.com

JSF / PrimeFaces - Modèle avec <p: layout>

J'ai besoin de créer une mise en page comme this mais avec tous les conteneurs sur des fichiers séparés, comme:

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>

Sans le </p:layout> car il sera proche de mon footer.xhtml comme:

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

J'ai essayé avec les deux fichiers mais je reçois une erreur me disant que je dois fermer la balise layout, qu'est-ce qui est correct, mais comment puis-je résoudre mon problème? Est-ce la meilleure approche pour un modèle? Et un autre problème est que la balise layout nécessite un centre layoutUnit

templatesjsflayoutprimefacesfacelets
15
Gerep

Ce n'est en effet pas la bonne approche. Votre modèle doit être XML bien formé. Je suggère de créer un fichier de modèle principal à la place si tout ce que vous voulez est de spécifier uniquement l'unité centrale.

En prenant l'exemple sur le site vitrine, cela devrait ressembler à ceci:

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

Noter la <ui:insert> dans l'unité centrale.

Le client de modèle peut alors simplement ressembler à ceci:

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

que vous ouvrez par http://example.com/contextname/page.xhtml .

Voir également:

Si vous recherchez des exemples open source en direct de modèles avancés de Facelets, vous pouvez trouver application de présentation OmniFaces utile.

30
BalusC