Olá desenvolvedores, neste tutorial utilizaremos o componente ajax para colocar o objeto “selecionado” pelo usuário em edição. O Objeto a ser colocado em edição está listado na tabela que exibe todos os registros cadastrados. A tabela foi desenvolvida com a biblioteca de componentes de interface de usuário (IU), o PrimeFaces. Assim com o f:ajax iremos recarregar o formulário e executar o botão “Editar”, e isso em apenas uma linha de código.

COLOCANDO UM OBJETO EM EDIÇÃO

A ideia ainda é apenas enviar o valor correspondente ao botão “Editar”, para que isso seja possível será preciso adicionar um “id” ao botão, h:commandLink, referente ao “Editar”. Neste contexto estruturaremos cada parte, formulário e tabela dentro de um respectivo h:form. Assim será possível trabalhar com cada uma delas de forma independente.

Para diferenciar as duas estruturas h:form adicione um identificador “id” a cada uma delas. A linha de código abaixo exemplifica o botão “Editar” da tabela que exibe os registros cadastrados.

<h:commandLink value=“Editar” immediate=“true” id=“botaoeditar” >

Passando o valor do “id” do botão h:commandLink para o atributo “execute” do componente f:ajax possibilitaremos a execução do botão. Isto é, o objeto será colocado em edição quando o botão for clicado. E desse modo enviando o formulário para o lado do ManagedBean.

Com o atributo render recebendo o “id” do formulário, o objeto em edição será enviado para o lado do servidor e o formulário então será recarregado, exibindo os dados do registro em questão.

BOTÃO REMOVER

Observe que quando o botão “Remover” é clicado o formulário é enviado. O objeto correspondente é removido com sucesso, tanto da tabela quanto da base de dados, mas não há necessidade de que a tabela seja enviada junto com execução do botão.

Para evitar que o formulário seja enviado a cada vez que o botão é clicado, primeiro adicione um “id” ao h:commandLink referente ao botão “Remover”. E então proceda tal como foi implementado no botão “Editar”.

<h:commandLink value=“Remover” immediate=“true” id=“botaoremover” >

O valor do “id” do botão h:commandLink será passado para o atributo “execute” do componente f:ajax possibilitando que apenas o botão seja executado quando clicado.

Quando o botão “Remover” for clicado queremos que apenas a tabela seja renderizada, dessa forma o atributo render apontará para o h:form referente a tabela. Por estar apontando para a tabela do formulário “pai” o valor poderá referenciar apenas o h:form.

BOTÃO NOVO

Quando o botão “Novo” do formulário de cadastro é clicado aqui também ocorre uma tentativa de enviar o formulário. Desse modo, e por se tratar de um formulário vazio, as mensagens de validação são exibidas.

Para evitar o envio do formulário sempre que quisermos adicionar um novo objeto adicionaremos o atributo immediate ao botão h:commandLink. A função do immediate é determinar em qual fase do ciclo de vida do JSF – JavaServer Faces o componente será processado. Em outras palavras, atribuindo a ele o valor true as validações serão “puladas”, isto é, somente os valores da solicitação serão aplicados.

Adicionaremos ainda o componente f:ajax, onde por meio do valor do atributo execute reforçaremos que o botão a ser executado é o “Novo”. Então renderizaremos o formulário de cadastro, passando o valor @form para o atributo render.

EM POUCAS PALAVRAS

Neste tutorial corrigimos alguns bugs nos botões “Editar”, “Remover” e “Novo”. É muito comum que após “finalizada” a implementação, o código passe por este refinamento onde o objetivo é identificar bugs e corrigi-los.

E não confunda estas correções com a refatoração que tem o objetivo de reestruturar o código realizando pequenas mudanças, mas sem alterar o comportamento da aplicação.