Arquivo Discussoes de Programacao e Tecnologia 
Boa madruga,
Amigos, pesquisei muito aqui no guj e não consegui sanar uma dúvida que está tirando meu sono.
Vejam a página que eu criei:
Estou usando um template com 4 divs.
Quando clico no commandButton Gerenciar clientes, eu quero exibir uma página na div principal. Mas quero fazer isso sem recarregar toda a página.
Como posso fazer isso? Imaginei que com templates do Facelets isso já estaria implementado tendo que todas as páginas fazem uso do mesmo template.
Agradeço qualquer ajuda.
Você pode fazer isso utilizando AJAX… Só não sei como fazer isso com JSF e facelets…
Olá melges, bom dia!
É o que eu imagino,
Você sabe como eu faço? Teria algum exemplo?
Ficaria muito agradecido.
Já tentei de inúmeras formas mas não sei como faço!
cara… você terá que deixar todo este conteúdo dinâmico.
e faria isso com javascript(usa o plugin jQuery) utitlizando ajax.
Agora eu te digo…
é realmente preciso fazer isso?
não há nenhum problema em se recarregar a página…
se for realmente preciso, você vai ter uma trabalheira amigo…
Olá melges, bom dia!Você pode fazer isso utilizando AJAX... Só não sei como fazer isso com JSF e facelets...É o que eu imagino,
Você sabe como eu faço? Teria algum exemplo?
Ficaria muito agradecido.
Já tentei de inúmeras formas mas não sei como faço!
Eu fiz algo parecido:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="./resources/templates/layoutBase.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:define name="tituloNavegacao">
<h:outputText value="Configurações" styleClass="subtituloSistema" rendered="#{controleAcesso.acessoLiberado}"/>
</ui:define>
<ui:define name="content">
<p:layout fullPage="false" rendered="#{controleAcesso.acessoLiberado}">
<p:layoutUnit id="layoutUnitConfViewLeft" position="west" minSize="300" gutter="2" collapsible="true">
<h:form>
<p:panel header="Configurações">
<p:menu style="border: none;">
<p:menuitem action="#{configuracoes.setAtual(1)}" update=":panelConfAtual" value=" Pessoais" icon="ui-icon ui-icon-wrench"/>
<p:menuitem action="#{configuracoes.setAtual(2)}" update=":panelConfAtual" value=" Banco de dados" icon="ui-icon-gear" rendered="#{documents.usuario.perfil.confBanco}"/>
<p:menuitem action="#{configuracoes.setAtual(3)}" update=":panelConfAtual" value=" Pasta de arquivos" icon="ui-icon-copy" rendered="#{documents.usuario.perfil.confCaminhoArquivos}"/>
<p:menuitem action="#{configuracoes.setAtual(4)}" update=":panelConfAtual" value=" Senha" icon="ui-icon ui-icon-key"/>
</p:menu>
</p:panel>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:panel id="panelConfAtual">
<f:facet name="header">
<h:outputText value="#{configuracoes.headerAtual}"/>
</f:facet>
<h:form rendered="#{!configuracoes.headerAtual.isEmpty()}">
<p:toolbar id="toolBar" style="border: none">
<p:toolbarGroup align="left">
<p:commandLink style="float: right" immediate="true" update=":panelConfAtual" title="Cancelar" action="#{configuracoes.setAtual(0)}">
<h:outputText styleClass="ui-icon ui-icon-G ui-icon-G-cancel"/>
</p:commandLink>
<p:commandLink rendered="#{configuracoes.atual == 1}" style="float: right" process="@form" title="Salvar configurações pessoais" action="#{themeSwitcher.aplicarTema()}">
<h:outputText styleClass="ui-icon ui-icon-G ui-icon-G-check"/>
</p:commandLink>
<p:commandLink rendered="#{configuracoes.atual == 2}" style="float: right" process="@form" title="Salvar configurações de banco de dados" action="#{conexao.salvarConexao()}">
<h:outputText styleClass="ui-icon ui-icon-G ui-icon-G-check"/>
</p:commandLink>
<p:commandLink rendered="#{configuracoes.atual == 3}" style="float: right" process="@form" title="Salvar configurações de diretório" action="#{documents.salvarDiretorio()}">
<h:outputText styleClass="ui-icon ui-icon-G ui-icon-G-check"/>
</p:commandLink>
<p:commandLink rendered="#{configuracoes.atual == 4}" style="float: right" process="@form" title="Salvar nova senha" action="#{controleAcesso.alterarSenha()}">
<h:outputText styleClass="ui-icon ui-icon-G ui-icon-G-check"/>
</p:commandLink>
</p:toolbarGroup>
</p:toolbar>
<p:spacer height="5"/>
<p:panelGrid columns="1" rendered="#{configuracoes.atual == 1}">
<h:outputText style="font-weight: 600;" value="Tema atual"/>
<p:themeSwitcher style="150px" value="#{themeSwitcher.tema}" valueChangeListener="#{themeSwitcher.listenerTheme}">
<f:selectItems value="#{themeSwitcher.themes}"/>
</p:themeSwitcher>
</p:panelGrid>
<p:panelGrid columns="1" rendered="#{configuracoes.atual == 2}">
<h:outputText style="font-weight: 600;" value="Servidor" /><p:inputText style="width: 300px" value="#{conexao.servidor}" required="true" requiredMessage="O campo [Servidor] deve ser preenchido."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Porta" /><p:inputText style="width: 150px" value="#{conexao.porta}" required="true" requiredMessage="O campo [Porta] deve ser preenchido."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Banco" /><p:inputText style="width: 300px" value="#{conexao.banco}" required="true" requiredMessage="O campo [Banco] deve ser preenchido."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Usuário" /><p:inputText style="width: 300px" value="#{conexao.usuario}" required="true" requiredMessage="O campo [Usuário] deve ser preenchido."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Senha *" /><p:password style="width: 300px" match="confirmaPassBanco" value="#{conexao.senha}" required="true" requiredMessage="O campo [Nova senha] deve ser preenchido" validatorMessage="As duas senhas devem ser iguais."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Confirme a senha *" />
<p:password id="confirmaPassBanco" required="true" requiredMessage="O campo [Confirme a nova senha] deve ser preenchido" style="width: 300px"/>
</p:panelGrid>
<p:panelGrid columns="1" rendered="#{configuracoes.atual == 3}">
<h:outputText style="font-weight: 600;" value="Diretório " /><p:inputText style="width: 300px" value="#{documents.realPath}" required="true" requiredMessage="O campo [Diretório] deve ser preenchido."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Tamanho máximo dos arquivos *"/>
<p:inputMask style="width: 150px" mask="[telefone removido]" value="#{documents.sizeMax}" required="true" requiredMessage="O campo [Tamanho máximo] deve ser preenchido."/>
<h:outputText value="* O tamanho deve ser em bytes."/>
<h:outputText value="** O Tamanho atual do diretório é: #{(documents.longSizeMax)/1024/1024} MB"/>
</p:panelGrid>
<p:panelGrid columns="1" rendered="#{configuracoes.atual == 4}">
<h:outputText style="font-weight: 600;" value="Senha atual *"/><p:password style="width: 300px" value="#{controleAcesso.senha}" required="true" requiredMessage="O campo [Senha atual] deve ser preenchido" />
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Nova senha *" /><p:password style="width: 300px" id="novaSenha" match="confirmaSenha" value="#{controleAcesso.novaSenha}" feedback="true" promptLabel="Entre com a senha" weakLabel="Senha fraca"
goodLabel="Senha média" strongLabel="Senha forte" required="true" requiredMessage="O campo [Nova senha] deve ser preenchido" validatorMessage="As duas senhas devem ser iguais."/>
<p:spacer height="5"/>
<h:outputText style="font-weight: 600;" value="Confirme a nova senha *"/>
<p:password id="confirmaSenha" required="true" requiredMessage="O campo [Confirme a nova senha] deve ser preenchido" style="width: 300px"/>
</p:panelGrid>
</h:form>
</p:panel>
</p:layoutUnit>
</p:layout>
</ui:define>
</ui:composition>
Ai tipo, ao invés de deixar tudo na mesma página, vc pode usar Iframes nessa div de conteudo que vc quer, pq aí vc carregaria a pagina q quer, sem que todo o template seja recarregado.
Acho melhor vc fazer dessa forma que usar javascript. Acho mais complicado, mais difícil e mais suscetível a erros.
Cara já fiz isso usando o spring web mvc. Não sei como fazer com JSF e facelets.
Com o spring usei o seguinte site como referencia, acho q não te ajudará mto, mas ai vai:
http://blog.springsource.org/2010/01/25/ajax-simplifications-in-spring-3-0/