[resolvido] Dúvidas - layout primeface

Front-end
#1

Bom dia pessoal,

Estou com o seguinte problema.
Estou usando o “p:layout” e dentro do “p:layout” eu tenho “ui:insert”. Necessito no momento que somente o centro sem alterar os outros elementos, alguma dica dos ninjas?

segue abaixo meu código:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
 
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                
        <style type="text/css">
            body {background-color: #eeeeee; font-size: 12px}
        </style> 
    </h:head>
    <h:body>
        <!--<div align="center">-->
        <p:layout style="width: auto;height: 100%;" fullPage="true">  
                <p:layoutUnit position="north" size="100"  collapsible="true" closable="true" resizable="true" effect="drop">  
                    <div style="width: 20%;float: left; text-align: left;">
                        <img src="../img/Sin título-1.jpg" style="height: 100%; width: 100%;"/>
                    </div>
                    <div style="width: 80%;height: 100%;float: right;text-align: right;">
                        
                        <p style="margin-top: 5em; margin-right: 1em;">
                            <h:outputLabel value="#{login.usuario.nome}"/>: 
                            <p:commandLink  actionListener="#{login.logOut()}"  value="Sair"/>   
                        </p>
                    </div>
                    
                </p:layoutUnit>  
 
                <p:layoutUnit position="west" size="220" resizable="true" collapsible="true" effect="drop" header="Menu">  
                    <ui:insert name="menu">
                        <h:form>
                            <p:menu style="width: 200px">
                                <p:submenu>
                                    <p:menuitem value="Teste" icon="ui-icon-key" action="#{menu.menu()}"/>
                                    <p:menuitem value="Teste" icon="ui-icon-key" action="#{menu.menu2()}"/>
                                    <p:menuitem value="Tabela" icon="ui-icon-key" action="#{menu.menuTabela()}"/>
                                    <p:menuitem value="Teste" icon="ui-icon-key" />
                                    <p:menuitem value="Teste" icon="ui-icon-key" />
                                    <p:menuitem value="Teste" icon="ui-icon-key" />
                                    <p:menuitem value="Teste" icon="ui-icon-key" />
                                    <p:menuitem value="Teste" icon="ui-icon-key" />
                                    <p:menuitem value="Teste" icon="ui-icon-key" />
                                </p:submenu>
                            </p:menu>
                        </h:form>
                    </ui:insert>
                </p:layoutUnit>  
                <p:layoutUnit position="center">  
                    <ui:insert name="centro">
                        
                    </ui:insert>
                </p:layoutUnit>  
            </p:layout>  
        <!--</div>-->
    </h:body>
</html>
#2

@phelipe.galiotti consegue descrever melhor o que quer dizer como “…Necessito no momento que somente o centro sem alterar os outros elementos…” ?

Obrigado!

#3

Olá felipe obrigado pela resposta, eu consegui resolver o problema utilizando o Ajax. A ideia era que somente o centro fosse alterado, sem que os outros elementos mudassem, eu clico, por exemplo no menu ao lado e o centro é alterado, sem refresh na página inteira, ficou mais claro?

#4

Consegui sanar meu problema (pelo menos por enquanto hehe) dessa forma:

    <ui:define name="menu">
        
        <h:form>
            <p:menu style="width: 200px">
                <p:submenu>
                    <p:menuitem value="Teste" icon="ui-icon-key" action="#{menu.setMenu()}" ajax="true" update=":form:outputPanelConteudo"/>
                    <p:menuitem value="Teste" icon="ui-icon-key" action="#{menu.setMenu2()}" ajax="true" update=":form:outputPanelConteudo"/>
                    <p:menuitem value="Tabela" icon="ui-icon-key" action="#{menu.setMenuTabela()}" ajax="true" update=":form:outputPanelConteudo"/>
                    <p:menuitem value="Teste" icon="ui-icon-key" />
                    <p:menuitem value="Teste" icon="ui-icon-key" />
                    <p:menuitem value="Teste" icon="ui-icon-key" />
                    <p:menuitem value="Teste" icon="ui-icon-key" />
                    <p:menuitem value="Teste" icon="ui-icon-key" />
                    <p:menuitem value="Teste" icon="ui-icon-key" />
                </p:submenu>
            </p:menu>
        </h:form>
        
    </ui:define>

    <ui:define name="centro">
        
        <h:panelGrid columns="1" width="100%">
            <p:outputPanel id="outputPanelConteudo">
                <ui:include src="#{menu.paginaAtual}"/>
            </p:outputPanel>
        </h:panelGrid>
        
        
    </ui:define>
</ui:decorate>