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

9 de setembro de 2011 7 respostas

jonatex 9 de setembro de 2011

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>

7 Respostas

andre.froes 9 de set. de 2011 1 like

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.

jonatex 9 de set. de 2011

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>

Ace 9 de set. de 2011

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

thiago_fernando 9 de set. de 2011

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.

jonatex 9 de set. de 2011

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?

Ace 10 de set. de 2011

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.

jonatex 10 de set. de 2011

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!

Criado 9 de setembro de 2011

Ultima resposta 10 de set. de 2011

Respostas 7

Participantes 4

7 Respostas

Topicos relacionados