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
[code]<h:body>
<ui:composition>
<h:form>
<p:menu model="#{menuController.model}"/>
<h:outputLink value="#{facesContext.externalContext.requestContextPath}/j_spring_security_logout">
<h:outputText value="Sair"/>
</h:outputLink>
</h:form>
</ui:composition>
</h:body>[/code]
template.xhtml
[code]<h:body>
<p:layout fullPage="true" >
<p:layoutUnit position="left" width="200" header="Menu" resizable="false" closable="false" collapsible="true">
<ui:insert name="menu">
<ui:include src="menu.xhtml" />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content" />
</p:layoutUnit>
</p:layout>
</h:body>[/code]
principal.xhtml
[code]<h:body>
<ui:composition template="./templates/template.xhtml">
<ui:define name="content">
<p:panel id="corpo">
<ui:include src="#{menuController.menuSelected}"/>
</p:panel>
</ui:define>
</ui:composition>
</h:body>[/code]
MenuController.java
[code]@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;
}[/code]
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.
voce colocou o template na pagina grid_empresa.jsf ??
Segue o arquivo grid_empresa.xhtml
[code]<h:body>
<ui:composition>
<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:composition>
</h:body>[/code]
ja tentei tb
<ui:composition template="../templates/template.xhtml">
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>
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
experimente trocar a url no teu menuController.
ao inves de utilizar
item.setUrl("corpo/grid_empresa.xhtml");
use
item.setUrl("corpo/grid_empresa.jsf");
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?
Conseguiu resolver amigo?
Se sim, como? Estou com o mesmo problema
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