JSF 2.0 + PrimeFaces - Atualizar determinada parte da página

Front-end
#1

Estou construindo uma aplicação, no qual estou utilizando e como layouts de todas as páginas, ou seja, possuo uma página padrão onde todas as outras páginas serão igual a ela.

O Problema é que quando clico em um link, toda a página é recarregada. Gostaria que, ao clicar no link, apenas a parte onde o conteúdo deste link irá aparecer, fosse carregada. Como faço isso?

Irei postar o meu layout e a outra página que o link irá chamar

Página padrão

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui">


<h:head>
	<title>IntraSur</title>
</h:head>

<h:body>

	<p:layout fullPage="true" >

		<p:layoutUnit position="top" header="TOP" height="90">
			<h:outputText value="Top content." />
		</p:layoutUnit>
	
		<p:layoutUnit position="left" header="LEFT" width="300" collapsible="true">
		
		<h:form>
			
			<p:accordionPanel activeIndex="0" autoHeight="false">
			<p:tab title="Cadastrar">
				<h:panelGrid columns="1">
                	<p:commandLink value="Cadastrar Usuário" action="/paginas/cadastros/cadastrarUsuario.xhtml" 
                	ajax="false" immediate="true"/>
               		<p:commandLink value="Cadastrar Operação" action="/paginas/cadastros/cadastrarOperacao.xhtml" 
               		ajax="false" immediate="true"/>
               		
            	</h:panelGrid>   		
           </p:tab>
            
          <p:tab title="Alterar">
            	<h:panelGrid>
               		<h:commandLink value="Alterar Usuário" action="/paginas/alterar/alterarUsuario.xhtml"/>
               		<h:commandLink value="Voltar" action="/paginas/layout/index.xhtml"/>
               	</h:panelGrid>	
            </p:tab>
            
             </p:accordionPanel>	
              
        </h:form>      
		</p:layoutUnit>
		
		
		
			<p:layoutUnit position="center" header="CENTER" id="centro1">
			
				<ui:insert name="centro" >
				</ui:insert>
			
			</p:layoutUnit>
		
	</p:layout>

</h:body>

</html>

Página que será chamada em um dos links!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui" >

<ui:composition template="/paginas/layout/index.xhtml">
	<ui:define name="centro">
	
	<h:messages layout="table" errorStyle="color: red" infoStyle="color: green" warnStyle="color: orange"
		fatalStyle="color: gray" showSummary="false" showDetail="true" />
	
	
	<h:form id="frmCadastroOperacao">
	
	<h:panelGrid columns="2" id="cadastroOperacao">
	
		<h:outputText value="Nome: "/>
		<h:panelGroup>
			<p:inputText value="#{operacaoBean.operacao.nome}" id="nomeOperacao"/>
			<h:message for="nomeOperacao" showSummary="true" />
		</h:panelGroup>
		<h:commandButton value="Cadastrar" actionListener="#{operacaoBean.salvarOperacao}"/>
	</h:panelGrid>
	
	</h:form>
	
	</ui:define>
	
</ui:composition>
</html>
#2

jonatex, utilizando o JSF com primefaces, dentro de cada componente de ação do prime, existe um atributo chamado update, que neste você vai passar o ID do componente que você deseja que seja atualizado, e para certificar que seja soliçitação via ajax, coloque o atributo ajax=“true”, assim você terá o controle que deseja.

1 curtida
#3

Andre não deu certo. Quando coloco ajax=“true”, o link fica como um javascript, e não faz ação nenhuma. Se coloco ajax=“false” ele abre a link normalmente, porém recarrega a página inteira.

Meu código do layout ficou desta forma

<p:tab title="Cadastrar">
				<h:panelGrid columns="1">
                	<p:commandLink value="Cadastrar Usuário" action="/paginas/cadastros/cadastrarUsuario.xhtml" 
                	ajax="true" update="teste"/>
               		<p:commandLink value="Cadastrar Operação" action="/paginas/cadastros/cadastrarOperacao.xhtml" 
               		ajax="false" immediate="true"/>
               		
            	</h:panelGrid>   		
           </p:tab>
            
          <p:tab title="Alterar">
            	<h:panelGrid>
               		<h:commandLink value="Alterar Usuário" action="/paginas/alterar/alterarUsuario.xhtml"/>
               		<h:commandLink value="Voltar" action="/paginas/layout/index.xhtml"/>
               	</h:panelGrid>	
            </p:tab>
            
             </p:accordionPanel>	
              
        </h:form>      
		</p:layoutUnit>
		
		
		
			<p:layoutUnit position="center" header="CENTER" id="teste">
			
				<ui:insert name="centro"  >
				</ui:insert>
			
			</p:layoutUnit>
#4

jonatex, tente fazer da seguite forma

//pode usar o commandLink tbm
<h:commandButton value="Valor" action="#{actionBean}">
	<f:ajax render="@form" />
 //caso vc queira atualizar um formulario completo, ou se for algum especifico coloque o id do mesmo  render="@form :idForm "
</h:commandButton>

espero ter ajudado

#5

Cara é o seguinte, nem li seu codigo todo, mas por ter um pouco de experiencia com primefaces ti digo o seguinte:

-Como o cara tinha ti respondido ae, cada componente tem um atributo chamado “update”, certifique-se pelo FIREBUG se ele esta pegando o caminho correto do componente a ser atualizado…

Faça o seguinte teste marque no h:form - > prependId=“false”, deste modo o navegador nao vai criar o id, fica mais claro de voce ver pelo firebug.

Pelo firebug voce da inspect no componente e ve a atualizacao se bate com o componente a ser atualizado… Provavelmente é isto.

Outra coisa, por DEFAULT o AJAX ja é marcado como “TRUE” entao seria redundancia marca-lo.

#6

Ace, esta sua forma deu certo, porém ao clicar no link, este não aparece na URL, ele “trava” a URL.
Desta forma quando vou, por exemplo, cadastrar um cliente, ao clicar no botão novo, ele atualiza a página e ai sim a URL também atualiza.

Vocês sabem de alguma forma, que continue do jeito que está, porém ao clicar no link ele atualizar a URL também?

#7

Mas ai vc acaba caindo um pouco em contradição rsrs.
No inicio vc disse não querer que a pagina seja recarregada, a solução para isto é uma requisição ajax, pois somente um conteudo especifico será renderizado.

Pense por exemplo, qdo se quer inserir um novo cliente, vc insere os dados e ao submeter a requisição, é onde o ajax entra em ação renderizando somente o formulario de listagem por exemplo.

<h:commandButton action="#{clienteBean.grava}" value="Gravar">
	<f:ajax execute="@form" render="@form :formLista" />
</h:commandButton>

Ao executar este comando acima, vc esta submetendo todo os dados do formulario e renderizando todo formulario de listagem cujo o id é “formLista”.

A ideia do ajax é exatamente esta não “piscar” a tela ao executar uma determinada função.

:wink:

#8

Entendi. Só devo fazer isso então apenas em certas ocasiões que estou pensando aqui.
Como página principal, ao clicar no link, o interessante é ele carregar toda a página, para que assim possa atualizar a URL.
Quando eu já estiver onde eu quero, o interessante é utililzar o seu exemplo para atualizar só o meu form.

Muito obrigado!

#9