Navegação Menu Primefaces + JSF2

3 de maio de 2011 8 respostas

furacao123 3 de maio de 2011

Aew galera a uns tempos atras tinha feito um exemplo com RichFaces + Facelets + JSF 1.2 com layouts e menu que altera a pagina do centro com o reRender, mas agora estou utilizando o Primefaces e JSF 2 e estou com duvidas em como fazer um layout fixo com um menu a esquerda e um centro (corpo) onde de acordo com a opção do menu selecionada eu altero a pagina sem recarregar a pagina, vou mostrar como estou fazendo e gostaria de saber oq estou fazendo de errado.

menu.xhtml

&lt;h:body&gt;

        &lt;ui:composition&gt;

            &lt;h:form&gt;

                &lt;p:menu model="#{menuController.model}"/&gt;
                
                &lt;h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout"&gt;
                    &lt;h:outputText value="Sair"/&gt;
                &lt;/h:outputLink&gt;

            &lt;/h:form&gt;

        &lt;/ui:composition&gt;

    &lt;/h:body&gt;

template.xhtml

&lt;h:body&gt;
        
        &lt;p:layout fullPage="true" &gt;
            &lt;p:layoutUnit position="left" width="200" header="Menu" resizable="false" closable="false" collapsible="true"&gt;
                &lt;ui:insert name="menu"&gt;
                    &lt;ui:include src="menu.xhtml" /&gt;
                &lt;/ui:insert&gt;
            &lt;/p:layoutUnit&gt;

            &lt;p:layoutUnit position="center"&gt;
                &lt;ui:insert name="content" /&gt;
            &lt;/p:layoutUnit&gt;
        &lt;/p:layout&gt;
    
    &lt;/h:body&gt;

principal.xhtml

&lt;h:body&gt;
        &lt;ui:composition template="./templates/template.xhtml"&gt;

            &lt;ui:define name="content"&gt;

                &lt;p:panel id="corpo"&gt;
                    &lt;ui:include src="#{menuController.menuSelected}"/&gt;
                &lt;/p:panel&gt;

            &lt;/ui:define&gt;

        &lt;/ui:composition&gt;
    &lt;/h:body&gt;

MenuController.java

@ManagedBean(name = "menuController")
@ViewScoped
public class MenuController {

    private MenuModel model;
    private String menuSelected = "corpo/grid_usuario.xhtml";

    public MenuController() {
        model = new DefaultMenuModel();
        
        Submenu subMenu = new Submenu();
        subMenu.setLabel("Cadastro");
        
        //Empresa
        MenuItem item = new MenuItem();
        item.setValue("Empresa");
        item.setUrl("corpo/grid_empresa.xhtml");
        item.setAjax(true);
        item.setUpdate("corpo");
        
        subMenu.getChildren().add(item);
        
        //Usuario
        item = new MenuItem();
        item.setValue("Usuário");
        item.setUrl("corpo/grid_usuario.xhtml");
        item.setAjax(true);
        item.setUpdate("corpo");
        
        subMenu.getChildren().add(item);
        
        model.addSubmenu(subMenu);
    }

    public MenuModel getModel() {
        return model;
    }

    public String getMenuSelected() {
        return menuSelected;
    }

Mas quando clico no menu ele me linka para o caminho corpo/grid_empresa.jsf e vem sem o layout do facelets, eu preciso que ele jogue por ajax a pagina no corpo como se fosse um frame do html mas em ajax o que estaria errado?

Obrigado.

8 Respostas

caio.gaspar 3 de mai. de 2011

voce colocou o template na pagina grid_empresa.jsf ??

furacao123 3 de mai. de 2011

Segue o arquivo grid_empresa.xhtml

&lt;h:body&gt;
        &lt;ui:composition&gt;

            &lt;h:form id="gdEmpresa"&gt;

                &lt;p:panel id="pnlConsulta" 
                         header="Lista de Empresas" 
                         style="text-align:left;width:700px;" &gt;


                    &lt;p:dataTable value="#{empresaController.listaEmpresa}"
                                 selection="#{empresaController.empresa}"
                                 selectionMode="single"
                                 onRowSelectUpdate="display"
                                 onRowSelectComplete="empresaDialog.show()"
                                 id="tabela"
                                 emptyMessage="Nenhum registro encontrado"
                                 rowIndexVar="var"
                                 paginator="true"
                                 paginatorPosition="bottom"
                                 firstPageLinkLabel="Primeira"
                                 previousPageLinkLabel="Anterior"
                                 nextPageLinkLabel="Proxima"
                                 lastPageLinkLabel="ultima"
                                 rows="10"
                                 var="empresa"
                                 width="600"&gt;


                        &lt;p:column sortBy="#{empresa.id}" filterBy="#{empresa.id}"&gt; 
                            &lt;f:facet name="header"&gt;
                                &lt;h:outputText value="Cód." /&gt;
                            &lt;/f:facet&gt;
                            &lt;h:outputText value="#{empresa.id}" /&gt;	
                        &lt;/p:column&gt;

                        &lt;p:column sortBy="#{empresa.razaoSocial}" filterBy="#{empresa.razaoSocial}"&gt;
                            &lt;f:facet name="header"&gt;
                                &lt;h:outputText value="Razão Social" /&gt;
                            &lt;/f:facet&gt;
                            &lt;h:outputText value="#{empresa.razaoSocial}" /&gt;	
                        &lt;/p:column&gt;

                        &lt;p:column style="width:50px;"&gt;
                            &lt;p:commandButton action="#{empresaController.excluir}" value="excluir" update="usuarioForm"&gt;
                                &lt;f:setPropertyActionListener target="#{empresaController.empresa}" value="#{empresa}" /&gt;
                            &lt;/p:commandButton&gt;
                        &lt;/p:column&gt;

                    &lt;/p:dataTable&gt;

                    &lt;p:dialog header="Detalhe Empresa" widgetVar="empresaDialog" resizable="false"  
                              width="500" height="300" showEffect="explode" hideEffect="explode"&gt;  

                        &lt;h:panelGrid id="display" columns="2" cellpadding="4"&gt;  

                            &lt;h:outputText value="Cód." /&gt;  
                            &lt;h:outputText value="#{empresaController.empresa.id}" /&gt;  

                            &lt;h:outputText value="Empresa" /&gt;  
                            &lt;h:inputText value="#{empresaController.empresa.razaoSocial}" /&gt;

                            &lt;p:commandButton value="Salvar" action="#{empresaController.gravar}" /&gt;

                        &lt;/h:panelGrid&gt;  
                    &lt;/p:dialog&gt;  

                &lt;/p:panel&gt;



            &lt;/h:form&gt;

        &lt;/ui:composition&gt;
    &lt;/h:body&gt;

ja tentei tb

&lt;ui:composition template="../templates/template.xhtml"&gt;

caio.gaspar 3 de mai. de 2011

tenta isso…

utilizei a tag <ui:define name=“content”>

<h:body>
        <ui:composition>
          <ui:define name="content">
            <h:form id="gdEmpresa">
   
                <p:panel id="pnlConsulta" 
                         header="Lista de Empresas" 
                         style="text-align:left;width:700px;" >


                    <p:dataTable value="#{empresaController.listaEmpresa}"
                                 selection="#{empresaController.empresa}"
                                 selectionMode="single"
                                 onRowSelectUpdate="display"
                                 onRowSelectComplete="empresaDialog.show()"
                                 id="tabela"
                                 emptyMessage="Nenhum registro encontrado"
                                 rowIndexVar="var"
                                 paginator="true"
                                 paginatorPosition="bottom"
                                 firstPageLinkLabel="Primeira"
                                 previousPageLinkLabel="Anterior"
                                 nextPageLinkLabel="Proxima"
                                 lastPageLinkLabel="ultima"
                                 rows="10"
                                 var="empresa"
                                 width="600">


                        <p:column sortBy="#{empresa.id}" filterBy="#{empresa.id}"> 
                            <f:facet name="header">
                                <h:outputText value="Cód." />
                            </f:facet>
                            <h:outputText value="#{empresa.id}" />	
                        </p:column>

                        <p:column sortBy="#{empresa.razaoSocial}" filterBy="#{empresa.razaoSocial}">
                            <f:facet name="header">
                                <h:outputText value="Razão Social" />
                            </f:facet>
                            <h:outputText value="#{empresa.razaoSocial}" />	
                        </p:column>

                        <p:column style="width:50px;">
                            <p:commandButton action="#{empresaController.excluir}" value="excluir" update="usuarioForm">
                                <f:setPropertyActionListener target="#{empresaController.empresa}" value="#{empresa}" />
                            </p:commandButton>
                        </p:column>

                    </p:dataTable>

                    <p:dialog header="Detalhe Empresa" widgetVar="empresaDialog" resizable="false"  
                              width="500" height="300" showEffect="explode" hideEffect="explode">  

                        <h:panelGrid id="display" columns="2" cellpadding="4">  

                            <h:outputText value="Cód." />  
                            <h:outputText value="#{empresaController.empresa.id}" />  

                            <h:outputText value="Empresa" />  
                            <h:inputText value="#{empresaController.empresa.razaoSocial}" />

                            <p:commandButton value="Salvar" action="#{empresaController.gravar}" />

                        </h:panelGrid>  
                    </p:dialog>  

                </p:panel>



            </h:form>
          </ui:define>
        </ui:composition>
    </h:body>

furacao123 3 de mai. de 2011

coloquei a tag define mas mesmo assim ao clicar no menu ele chama a seguinte url

http://localhost:8084/ExampleJSF/corpo/grid_empresa.xhtml

onde na verdade deveria ficar apenas na principal.jsf alterando o conteudo do content nao tem nada errado na classe MenuController na forma como estou passando a url?

O estranho é que na abertura do sistema funciona normalmente a inclusao da pagina no content, mas qdo acesso pelo menu ele linka errado

caio.gaspar 3 de mai. de 2011

experimente trocar a url no teu menuController.

ao inves de utilizar

item.setUrl("corpo/grid_empresa.xhtml");

use

item.setUrl("corpo/grid_empresa.jsf");

furacao123 4 de mai. de 2011

Putz mesma coisa agora ele joga esse caminho no endereço

http://localhost:8084/MensageriaNFe/corpo/grid_empresa.jsf

onde deveria apenas ficar

http://localhost:8084/MensageriaNFe/

e o conteudo do content ser renderizado cada vez que for chamado
Nao tem outra forma de fazer esse menu renderizar o content?

Raiduster 19 de ago. de 2011

Conseguiu resolver amigo?
Se sim, como? Estou com o mesmo problema

furacao123 22 de ago. de 2011

Ainda nao consegui resolver, tive de começar um outro projeto em struts 2 acabei nao dando continuidade para esse projeto em JSF2, mas se conseguir algo me avisa

Criado 3 de maio de 2011

Ultima resposta 22 de ago. de 2011

Respostas 8

Participantes 3

8 Respostas

Topicos relacionados