Cícero Ednilson

Blog sobre Desenvolvimento de Softwares

Home » Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 10: Editando um registro.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 10: Editando um registro.

Nessa parte do nosso tutorial vamos aprender a editar um registro já cadastrado no nosso banco de dados.

Páginas do tutorial.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 1: Introdução.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 2: Criando o banco de dados.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 3: Criando o projeto com JSF no Maven.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 4: Criando o template com Facelets.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 5: Desenvolvendo a autenticação do sistema.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 6: Desenvolvendo cadastro de pessoa.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 7: Desenvolvendo cadastro via upload de arquivo XML.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 8: Desenvolvendo consulta com PrimeFaces dataTable.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 9: Formatando LocalDateTime.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 10: Editando um registro.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 11: Excluindo um registro.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 12: Consulta com Carousel PrimeFaces.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 13: Consulta com Gráfico PrimeFaces.

Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 14: Exportando arquivo XML com fileDownload e Jdom.

Criando rotina de edição

Vamos abrir a nossa classe PessoaRepository, e na nossa classe vamos adicionar o código abaixo, podemos ver que temos um método chamada AlterarRegistro que vai ser responsável por atualizar o registro que informarmos, e também temos um método com o nome GetPessoa, esse método vai retornar a pessoa que vamos editar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
	/***
	 * CONSULTA UMA PESSOA CADASTRADA PELO CÓDIGO
	 * @param codigo
	 * @return
	 */
	private PessoaEntity GetPessoa(int codigo){
 
		entityManager =  Uteis.JpaEntityManager();
 
		return entityManager.find(PessoaEntity.class, codigo);
	}
 
	/***
	 * ALTERA UM REGISTRO CADASTRADO NO BANCO DE DADOS
	 * @param pessoaModel
	 */
	public void AlterarRegistro(PessoaModel pessoaModel){
 
		entityManager =  Uteis.JpaEntityManager();
 
		PessoaEntity pessoaEntity = this.GetPessoa(pessoaModel.getCodigo());
 
		pessoaEntity.setEmail(pessoaModel.getEmail());
		pessoaEntity.setEndereco(pessoaModel.getEndereco());
		pessoaEntity.setNome(pessoaModel.getNome());
		pessoaEntity.setSexo(pessoaModel.getSexo());
 
		entityManager.merge(pessoaEntity);
	}

Agora vamos abrir a nossa classe ConsultarPessoaController, e vamos adiconar o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
	/***
	 * CARREGA INFORMAÇÕES DE UMA PESSOA PARA SER EDITADA
	 * @param pessoaModel
	 */
	public void Editar(PessoaModel pessoaModel){
 
		/*PEGA APENAS A PRIMEIRA LETRA DO SEXO PARA SETAR NO CAMPO(M OU F)*/
		pessoaModel.setSexo(pessoaModel.getSexo().substring(0, 1));
 
		this.pessoaModel = pessoaModel;
 
	}
 
	/***
	 * ATUALIZA O REGISTRO QUE FOI ALTERADO
	 */
	public void AlterarRegistro(){
 
		this.pessoaRepository.AlterarRegistro(this.pessoaModel);	
 
 
		/*RECARREGA OS REGISTROS*/
		this.init();
	}

Agora vamos criar uma página com o nome de editarPessoa.xhtml, depois vamos deixar nossa página com o código abaixo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui">
 
    <h:form>
 
       <h:panelGrid id="panelGrid-campos-form" columns="2" cellpadding="10">
 
	 <p:outputLabel value="Código" for="inputText-nome"/>
	 <p:inputText   id="inputText-codigo"
	 		value="#{consultarPessoaController.pessoaModel.codigo}"
	 		style="width:50px"
	 		readonly="true"/>
 
 
	<p:outputLabel value="Nome" for="inputText-nome"/>
	<p:inputText   id="inputText-nome" 
	               style="width:300px" maxlength="70" 
	               value="#{consultarPessoaController.pessoaModel.nome}"
	               required="true"
	               requiredMessage="O nome é de preenchimento obrigatório"/>
 
	<p:outputLabel for="selectOneRadio-sexo" value="Sexo:" />
        <p:selectOneRadio id="selectOneRadio-sexo" 
        		  value="#{consultarPessoaController.pessoaModel.sexo}"
        		  required="true"
	            	  requiredMessage="O sexo é de preenchimento obrigatório">
 
            	<f:selectItem itemLabel="Masculino" itemValue="M"/>
            	<f:selectItem itemLabel="Feminino" itemValue="F" />            				
        </p:selectOneRadio>
 
	<p:outputLabel value="E-mail" for="inputText-email"/>
	<p:inputText id="inputText-email" 
	             style="width:300px" 
	             maxlength="80" 
	             value="#{consultarPessoaController.pessoaModel.email}"
	             required="true"
	             requiredMessage="O email é de preenchimento obrigatório"/>           		
 
 
	<p:outputLabel value="Endereço" for="inputText-endereco"/>
	<p:inputText id="inputText-endereco" 
	             style="width:400px" 
	             maxlength="200" 
	             value="#{consultarPessoaController.pessoaModel.endereco}"
	             required="true"
	             requiredMessage="O endereço é de preenchimento obrigatório"/>
 
	<p:spacer/>
	<p:commandButton value="Alterar" 
	            	 id="commandButton-alterar"
			 icon="ui-icon-gear"
	   actionListener="#{consultarPessoaController.AlterarRegistro}"							 
			 oncomplete="PF('dialog-modal-editar').hide();"
		         update="form-consulta"/> 
 
 
        <p:spacer/>
	<p:messages showDetail="false" autoUpdate="true" closable="true" severity="error"/>
 
     </h:panelGrid>                  
 
    </h:form>
 
</ui:composition>

Podemos ver na imagem abaixo o código que será executado quando clicarmos no botão alterar da nossa tela de edição.

Ação que será executada quando clicar no botão alterar.

Agora vamos abrir a página consultarPessoa.xhtml e vamos adicionar o código em destaque, essa parte do código vai ser responsável por carregar nossa página de edição editarPessoa.xhtml em uma popup.

Agora na penúltima coluna do nosso dataTable da página consultarPessoa.xhtml vamos adicionar o código em destaque na imagem abaixo, o código em destaque vai adicionar um botão que vai abrir a popup para a edição do registro.

91

Abaixo o código completo da nossa página de consulta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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://xmlns.jcp.org/jsf/facelets"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:p="http://primefaces.org/ui"	
	xmlns:format="http://ciceroednilson.com.br/LocalDateTimeConverter">
 
<h:head>
</h:head>
 
<ui:composition template="/template/layoutBase.xhtml">
 
	<ui:define name="content">
 
		<p:dialog header="Editar cadastro de pessoa" 
				  id="dialog-modal-editar" 
		   		  widgetVar="dialog-modal-editar" 
		   		  modal="true" 
		   		  height="400px"
		   		  width="550px">
 
    		 <ui:include src="/sistema/editarPessoa.xhtml"/>
 
 
		</p:dialog>
 
		<h:form style="margin:auto;margin-left:2%;" id="form-consulta">
 
			<p:dataTable id="dataTable-registros"
						 var="pessoa" 
						 value="#{consultarPessoaController.pessoas}" 
						 rows="15"
						 paginator="true"
						 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15"
                         style="width:98%;">
 
					<p:column headerText="Código">
            				<h:outputText value="#{pessoa.codigo}" />
        				 </p:column>
 
        				 <p:column headerText="Nome">
            				<h:outputText value="#{pessoa.nome}" />
        				 </p:column>
 
        				 <p:column headerText="Sexo">
            				<h:outputText value="#{pessoa.sexo}" />
        				 </p:column>
 
        				 <p:column headerText="Cadastro">
            				<h:outputText value="#{pessoa.dataCadastro}">            					
            					<format:LocalDateTimeConverter pattern="dd/MM/yyyy HH:mm:ss"/>
            				</h:outputText>
        				 </p:column>
 
        				 <p:column headerText="Email" style="width:200px;">
            				<h:outputText value="#{pessoa.email}" />
        				 </p:column>
 
        				 <p:column headerText="Endereço" style="width:200px;">
            				<h:outputText value="#{pessoa.endereco}" />
        				 </p:column>
 
        				 <p:column headerText="Origem">
            				<h:outputText value="#{pessoa.origemCadastro}" />
        				 </p:column>
 
        				 <p:column headerText="Usuário">
            				<h:outputText value="#{pessoa.usuarioModel.usuario}" />
        				 </p:column>
 
        				 <p:column headerText="" style="width:25px;">
 
        				       <p:commandButton icon="ui-icon-pencil" 
        				    				    title="Editar Registro"                        					 
                        					    ajax="true"                        					 
                        					    actionListener="#{consultarPessoaController.Editar(pessoa)}"
                        					    oncomplete="PF('dialog-modal-editar').show();" 
                        					    update="dialog-modal-editar"/>
 
        				 </p:column>
 
        				 <p:column headerText="" style="width:25px;">
 
        				 </p:column>
 
			</p:dataTable>
 
		</h:form>
 
	</ui:define>
 
</ui:composition>
</html>

Testando a edição do registro

Vamos executar a nossa aplicação e depois vamos até a página de consulta.

dataTable com o botão para editar registro

Agora vamos clicar no botão editar de um registro, no meu caso vou clicar no primeiro registro, então vai aparecer a popup abaixo.

95

Depois de clicar no botão alterar podemos ver o nosso registro alterado.

É isso ai amigos, nessa parte do nosso tutorial aprendemos a criar a rotina para editar um registro no banco de dados, na próxima parte vamos adicionar mais um botão no nosso dataTable para excluir um registro, até a próxima.

Comentários

Name of author

Name: ciceroednilson@gmail.com

16 thoughts on “Criando uma aplicação Java com JSF, PrimeFaces, CDI e JPA – Parte 10: Editando um registro.

  • quando coloco pra consultar a listagem vem toda certinha, mas quando vou clicar no editar que abre o “pop-up” pra fazer alteração dos dados, o pop-up abre vazio. O que percebi, então comecei a debugar pra tentar entender o pq de não trazer, ai percebi que sempre que clico no botão alterar ele chama o metodo init() da classe ConsultarPessoaController, que está com a anotação @PostConstruct… vi que é por conta dessa anotação aparentemente que ele sempre esta carregando todos os dados ao invés de selecionar somente 1 e passar os dados para o pop-up.

    Reply
    • ciceroednilson@gmail.com Post author

      Obrigado Flávio por acompanhar o blog,

      Podemos ver na página de consulta que ela já passa como parâmetro a pessoa que queremos visualizar no popup de edição.

      O Popup está aparecendo com os campos ou apenas um popup vazio? Não podemos esquecer de colocar no popup a página de edição(editarPessoa.xhtml), que é a página que vai mostrar os registros.

      Para ficar mais fácil na última parte do tutorial tem o código fonte completo, você pode fazer o download e tentar rodar.

      Qualquer dúvida é só falar!

      Abraços.

      Reply
  • LUCIANO LAVANDOSK PIRES

    Boa tarde….
    Quando clico em Alterar está apenas atualizando a interface e não o banco…
    Sabe o que poderia ser?

    Abraço

    Reply
    • ciceroednilson@gmail.com Post author

      Em primeiro lugar muito obrigado por visitar o blog.

      No botão alterar você está chamando consultarPessoaController.AlterarRegistro como no exemplo ? Esse método primeiro atualiza o registro no banco de dados depois o da página, se você seguiu o exemplo deveria ter atualizado, se você mudou alguma coisa do código e poder me enviar para dar uma olhada.

      //código que atualiza o registro no controller
      public void AlterarRegistro(){

      this.pessoaRepository.AlterarRegistro(this.pessoaModel);

      /*RECARREGA OS REGISTROS*/
      this.init();
      }

      Na última parte do tutorial tem o código fonte completo para download, você pode baixar e comparar com o seu.

      abraços.

      Reply
      • LUCIANO LAVANDOSK PIRES

        Olá!

        Está tudo igual no código…
        Talvez seja algo com as versões… estou usando o eclipse Neon… talvez o drive do MySQL.
        Acredito que o “entityManager.merge(pessoaEntity);” não esteja salvando.
        Vou continuar tentando aqui.

        Abraço

        Reply
        • ciceroednilson@gmail.com Post author

          Acredito que a versão no Eclipse não seja, mais assim que você resolver posta a resposta para ajudar outros amigos, obrigado.

          Abraços!!!

          Reply
          • Passei pelo mesmo problema e marquei para debugar, mas na hora de salvar nem chamou o método, ou seja, parece que nem sai da página. Alguma dica?

          • Resolvido. Passou a funcionar quando adicionei o id do form da página de editar. Estou usando o Firefox, não testei nos outros navegadores, mas por algum motivo ele não estava fazendo a distinção correta entre o form que efetiva a mudança e o form que atualiza a grid.

            No mais, parabéns pelo tutorial, tudo funcionando corretamente!
            Apenas uma observação: na exclusão é legal colocar uma forma de confirmar a operação. Achei que excluindo assim direto pode deixar o registro vulnerável ao usuário, kkkk. Mas o tutorial é excelente! Parabéns!

            Abraços!

        • verifique esta linha
          actionListener=”#{consultarPessoaController.AlterarRegistro}”

          Reply
  • Cicero parabéns pela iniciativa me ajudando muito.

    meu caso acontece o mesmo alguém achou a solução para o caso ?

    Reply
  • Boa tarde Cicero…

    Fazendo algumas modificações no banco, coloquei o campo NM_PESSOA da tabela PESSOA para UK, para que eu consiga gerar de uma maneira mais pratica exceções, dai tentei algumas maneiras de retornar uma mensagem na tela informando “que não foi possível alterar o nome pois já existe um igual” ou algo do tipo.
    Queria saber uma maneira pratica de tratar as exceções e retornar para o usuário na tela, se observar esse seu exemplo quando conseguimos inserir um registro é exibia a mensagem: “Registro cadastrado com sucesso” que está no CadastrarPessoaController.java.
    Tentei usar algo assim, no levantamento da exceção no catch, mas não obtive sucesso, na verdade nada ocorre, no console do Eclipse eu vejo que gerou a exceção mas no browser não faz nada.

    Em resumo, queria saber se é possível e como enviar mensagens na pagina para o usuário saber que não conseguiu editar algo ou até mesmo não conseguiu inserir um novo registro porque feriu uma restrição do banco.

    Desde já agradeço… obrigado!

    Reply
  • Complementando…

    queria que a mensagem ao usuario fosse na mesma pagina que ja se encontra aberta, não abrir uma nova.
    Como falei feita a mensagem “Registro cadastrado com sucesso” ou feito aquelas mensagens que aparecem de obrigatoriedade de algum campo.

    Reply
  • Cicero,

    não consegui com esse exemplo, pois é levantada uma exceção no momento que tento incluir ou editar um registro por exemplo, quando essa exceção ocorre não consigo mandar a mensagem para o navegador com esse comando Uteis.MensagemInfo(“Registro cadastrado com sucesso”);
    pois quando ocorre a exceção simplesmente não faz nada no navegador, ja tentei outras maneiras usando o facesContext.addMessage(null, new FacesMessage(“Alerta”,mensagem));

    A ideia que quero seria uma mensagem feito essa que você citou de quando o cadastro é efetuado com sucesso, so que essa mensagem não consigo usar quando ocorre uma exceção.

    Reply
  • Mauricio Pereira

    Primeiramente parabéns pelo tutorial.
    Tem um pequeno trecho do editarPessoa.xhtml que está faltando uma chave “{” abrindo o actionListener do commandButton Alterar.
    Está:
    actionListener=”#consultarPessoaController.AlterarRegistro}”
    E deve ficar:
    actionListener=”#{consultarPessoaController.AlterarRegistro}”

    É isso.

    Reply

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *