[RESOLVIDO]Atualizando dataTable a partir de um Dialog - JSF

Boa tarde Pessoal, iniciei meus estudos com o JSF e estou encontrando algumas dificuldades básicas.

Criei uma página com um DataTable, exibindo dados de uma tabela do meu banco e uma tela de cadastro, onde usei um Dialog para isso. O que não consigo fazer, de maneira alguma, é atualizar o DataTable após os dados terem sido incluídos no banco, somente após dar um F5 na página é que os dados são carregados.

Já pesquisei e tentei de inúmeras maneiras para isso funcionar e nenhuma deu certo.

Posto abaixo o código da minha página e do meu managedBean:

usuario.xhtml


<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:mj="http://mojarra.dev.java.net/mojarra_ext"
	  xmlns:p="http://primefaces.prime.com.tr/ui"> 

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Usu&aacute;rio</title>
</h:head> 

<h:body> 
  
<h:form id="form">    
  
  <p:dialog header="Novo Usuário" id="panel" width="800" widgetVar="dlg" closeOnEscape="true" 
		    resizable="false">    
        
        <h:panelGrid columns="2" width="400">  
			<h:outputText for="nome" value="Nome" style="FONT-FAMILY: 'Verdana';"/>
            <p:inputText id="nome" value="#{usuarioBean.usuario.nome}" required="true" label="Nome">  
                <f:validateLength minimum="2" />
                </p:inputText>                   			
			   			            
<h:outputText id="lblEmail" value="E-mail" style="FONT-FAMILY: 'Verdana';"/>
<p:inputText id="email" size="40" maxlength="60" value="#{usuarioBean.usuario.email}" title="Digite Seu E-mail"
			 required="true" label="E-mail" />   			 

<h:outputText id="lblSenha" value="Senha" style="FONT-FAMILY: 'Verdana';"/>
<h:inputSecret id="senha" size="20" required="true" title="Digite Sua Senha"
			   maxlength="20" value="#{usuarioBean.usuario.senha}" label="Senha" />			   
			
<h:outputText id="lblNiver" value="Aniversário" style="FONT-FAMILY: 'Verdana';"/>			
<p:inputMask id="aniversario" mask="99/99" size="5" value="#{usuarioBean.usuario.aniversario}" title="Digite Seu Aniversário Mês/Ano" 
			 required="true" label="Aniversário" />			

<h:outputText id="lblTelefone" value="Telefone" style="FONT-FAMILY: 'Verdana';"/>			
<p:inputMask type="tel" size="16" mask="(99) 9999-9999" id="telefone" title="Digite Seu Telefone"
			  label="Telefone" required="true" value="#{usuarioBean.usuario.telefone}"/>						   			                			  	  
			
    		<p:commandButton value="Salvar" update="panel,display" id="ajax"  
            				 actionListener="#{usuarioBean.salvar}" /> 			

			<p:commandButton title="Clique Para Cancelar" id="fechaDlg" value="Cancelar" type="reset" update="dlg" process="@this" onclick="dlg.hide()"/>						
	 	
			<p:message for="nome" />  
            
               
        </h:panelGrid>  
    
  </p:dialog>   

<p:messages id="messages" />               
      
    <p:panel id="display" header="Usuários" style="margin-top:10px;">         
    
<p:dataTable id="tbl" var="usuario" value="#{usuarioBean.usuarios}" rowKey="#{usuario.nome}" 
			 selectionMode="single" paginator="true" rows="10">    
    
	<p:column id="modelHeader" sortBy="#{usuario.nome}">
		<f:facet name="header">
			<h:outputText value="Nome"/>
		</f:facet>
			<h:outputText value="#{usuario.nome}"/>
	</p:column>
	<p:column sortBy="#{usuario.email}">
		<f:facet name="header">
			<h:outputText value="Email"/>
		</f:facet>
			<h:outputText value="#{usuario.email}"/>
	</p:column>
	
	<p:column sortBy="#{usuario.aniversario}">
		<f:facet name="header">
			<h:outputText value="Aniversário"/>
		</f:facet>
			<h:outputText value="#{usuario.aniversario}"/>
	</p:column>	
	
	<p:column sortBy="#{usuario.telefone}">
		<f:facet name="header">
			<h:outputText value="Telefone"/>
		</f:facet>
			<h:outputText value="#{usuario.telefone}"/>
	</p:column>	 
	
	<p:column sortBy="#{usuario.senha}">
		<f:facet name="header">
			<h:outputText value="Senha" />
		</f:facet>
		  	<h:outputText value="#{usuario.senha}" />
	</p:column>  
    
    </p:dataTable>
    <p:commandButton value="Adicionar" update="display" oncomplete="dlg.show()" />
    </p:panel>  
      
</h:form>  

</h:body>
</html>

UsuarioBean


@ManagedBean(name = "usuarioBean")
@ViewScoped
public class UsuarioBean extends BaseBean{
	
	private static final long serialVersionUID = 1L;
	
	@ManagedProperty("#{usuarioService}")	
	
	private UsuarioService usuarioService;
	private Usuario usuario;
	private String nome;
	private String senha;	
	private String email;
	private String aniversario;
	private String telefone;
	private Usuario selectedUsuario;
	
	private List<Usuario> usuarios;
	
	public UsuarioService getUsuarioService() {
		return usuarioService;
	}

	public void setUsuarioService(UsuarioService usuarioService) {
		this.usuarioService = usuarioService;
	}

	public Usuario getUsuario() {
		
		if(usuario == null){
			usuario = new Usuario();
		}		
		return usuario;
	}

	public void setUsuario(Usuario usuario) {
		this.usuario = usuario;
	}
	
	public void salvar() {
		
		usuario = usuarioService.createUsuario(usuario);	
	       
		usuario = new Usuario();			
				
	}
	
	public List<Usuario> getUsuarios() {		
		if(usuarios == null){			
			usuarios = usuarioService.getAllUsuarios();			
		}		
		return usuarios;		
	}

	public String getNome() {
		return nome;
	}

	public void setNome(String nome) {
		this.nome = nome;
	}

	public String getSenha() {
		return senha;
	}

	public void setSenha(String senha) {
		this.senha = senha;
	}

	public String getEmail() {
		return email;
	}

	public void setEmail(String email) {
		this.email = email;
	}

	public String getAniversario() {
		return aniversario;
	}

	public void setAniversario(String aniversario) {
		this.aniversario = aniversario;
	}

	public String getTelefone() {
		return telefone;
	}

	public void setTelefone(String telefone) {
		this.telefone = telefone;
	}

	public Usuario getSelectedUsuario() {
		return selectedUsuario;
	}

	public void setSelectedUsuario(Usuario selectedUsuario) {
		this.selectedUsuario = selectedUsuario;
	}


}

Conto com a ajuda de vocês.

Coloca o process como :id, coloque também no h:form prependId = false, para não criar o id dos componentes dentro do form com o id do form.

Meu amigo, muito obrigado por responder.

Inclui o prependId=“false” na tag h:form

<h:form id="form" prependId="false">    

Porém não entendi a questão do process. Seria na tag <h:form> ou na tag <p:commandButton> ?

O process é para dizer qual componente vai ser renderizado após o processamento.

No commandButton tenta colocar os id’s com : antes do id, por exemplo,
process=":telefone :outroId"

[quote=lele_vader]O process é para dizer qual componente vai ser renderizado após o processamento.

No commandButton tenta colocar os id’s com : antes do id, por exemplo,
process=":telefone :outroId"[/quote]

Meu Amigo, fiz as alterações e o código ficou assim :

<!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:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:mj="http://mojarra.dev.java.net/mojarra_ext"
	  xmlns:p="http://primefaces.prime.com.tr/ui"> 

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<title>Usu&aacute;rio</title>
</h:head> 

<h:body> 
  
<h:form id="form" prependId="false">    
  
  <p:dialog header="Novo Usuário" id="panel" width="800" widgetVar="dlg" closeOnEscape="true" 
		    resizable="false">    
        
        <h:panelGrid columns="2" width="400">  
			<h:outputText for="nome" value="Nome" style="FONT-FAMILY: 'Verdana';"/>
            <p:inputText id="nome" value="#{usuarioBean.usuario.nome}" required="true" label="Nome">  
                <f:validateLength minimum="2" />
                </p:inputText>                   			
			   			            
<h:outputText id="lblEmail" value="E-mail" style="FONT-FAMILY: 'Verdana';"/>
<p:inputText id="email" size="40" maxlength="60" value="#{usuarioBean.usuario.email}" title="Digite Seu E-mail"
			 required="true" label="E-mail" />   			 

<h:outputText id="lblSenha" value="Senha" style="FONT-FAMILY: 'Verdana';"/>
<h:inputSecret id="senha" size="20" required="true" title="Digite Sua Senha"
			   maxlength="20" value="#{usuarioBean.usuario.senha}" label="Senha" />			   
			
<h:outputText id="lblNiver" value="Aniversário" style="FONT-FAMILY: 'Verdana';"/>			
<p:inputMask id="aniversario" mask="99/99" size="5" value="#{usuarioBean.usuario.aniversario}" title="Digite Seu Aniversário Mês/Ano" 
			 required="true" label="Aniversário" />			

<h:outputText id="lblTelefone" value="Telefone" style="FONT-FAMILY: 'Verdana';"/>			
<p:inputMask type="tel" size="16" mask="(99) 9999-9999" id="telefone" title="Digite Seu Telefone"
			  label="Telefone" required="true" value="#{usuarioBean.usuario.telefone}" />						   			                			  	  
			
    		<p:commandButton value="Salvar" update="panel,display" id="ajax" process=":display :tbl" actionListener="#{usuarioBean.salvar}" /> 			

			<p:commandButton title="Clique Para Cancelar" id="fechaDlg" value="Cancelar" type="reset" update="dlg" process=":id" onclick="dlg.hide()"/>						
	 	
			<p:message for="nome" />  
            
               
        </h:panelGrid>  
    
  </p:dialog>   

<p:messages id="messages" />               
      
    <p:panel id="display" header="Usuários" style="margin-top:10px;">         
    
<p:dataTable id="tbl" var="usuario" value="#{usuarioBean.usuarios}" rowKey="#{usuario.nome}" 
			 selectionMode="single" paginator="true" rows="10">    
    
	<p:column id="modelHeader" sortBy="#{usuario.nome}">
		<f:facet name="header">
			<h:outputText value="Nome"/>
		</f:facet>
			<h:outputText value="#{usuario.nome}"/>
	</p:column>
	<p:column sortBy="#{usuario.email}">
		<f:facet name="header">
			<h:outputText value="Email"/>
		</f:facet>
			<h:outputText value="#{usuario.email}"/>
	</p:column>
	
	<p:column sortBy="#{usuario.aniversario}">
		<f:facet name="header">
			<h:outputText value="Aniversário"/>
		</f:facet>
			<h:outputText value="#{usuario.aniversario}"/>
	</p:column>	
	
	<p:column sortBy="#{usuario.telefone}">
		<f:facet name="header">
			<h:outputText value="Telefone"/>
		</f:facet>
			<h:outputText value="#{usuario.telefone}"/>
	</p:column>	 
	
	<p:column sortBy="#{usuario.senha}">
		<f:facet name="header">
			<h:outputText value="Senha" />
		</f:facet>
		  	<h:outputText value="#{usuario.senha}" />
	</p:column>  
    
    </p:dataTable>
    <p:commandButton value="Adicionar" update="display" oncomplete="dlg.show()" />
    </p:panel>  
      
</h:form>  

</h:body>
</html>

Mas agora não é executado o actionListener

gostaria também de saber resolver isso de uma maneira mais “bonita”
eu fiz uma gambiarra violenta no meu aqui pra resolver isso… haha

Você em algum momento deve chamar um método para listar, popular a sua datatable certo?
O que eu fiz foi chamar esse método no final do método ‘Salvar’… algo como:

public void salvar(){
	//...método para salvar..
	resetUsuario();
}

public void resetUsuario(){
	usuario = new Usuario(); //para sempre instanciar um novo objeto no final do método salvar, para não ficar o objeto antigo nos campos preenchidos
	listarUsuarios(); //método para popular a sua dataTable
}

Com certeza deve existir uma melhor prática para resolver isso, mas como não consegui, e precisava de alguma forma resolver isso rapidamente, fiz isso =/

[quote=pcsantana]gostaria também de saber resolver isso de uma maneira mais “bonita”
eu fiz uma gambiarra violenta no meu aqui pra resolver isso… haha

Você em algum momento deve chamar um método para listar, popular a sua datatable certo?
O que eu fiz foi chamar esse método no final do método ‘Salvar’… algo como:

public void salvar(){
	//...método para salvar..
	resetUsuario();
}

public void resetUsuario(){
	usuario = new Usuario(); //para sempre instanciar um novo objeto no final do método salvar, para não ficar o objeto antigo nos campos preenchidos
	listarUsuarios(); //método para popular a sua dataTable
}

Com certeza deve existir uma melhor prática para resolver isso, mas como não consegui, e precisava de alguma forma resolver isso rapidamente, fiz isso =/[/quote]

Boa tarde meu amigo, consegui resolver dessa forma. Muito obrigado pela idéia.

Tenho pesquisado a respeito dessa situação e o pessoal tem tido bastante dúvidas sobre como atualizar um dataTable. Acredito que o “process” ou o “update” deveria resolver essa situação, porém no meu caso não resolveu e vi várias pessoas com o mesmo problema e tendo que adotar soluções alternativas.

Mais uma vez obrigado!