Olá desenvolvedores, no tutorial de hoje iremos proceder com algumas melhorias em algumas implementações dos botões, h:commandButton. Entenda o problema, quando criamos um formulário sem que todas as informações sejam preenchidas e clicamos no botão para limpar os campos, uma tentativa de envio de formulário é realizada, e desse modo como não há o que enviar as validações de restrição são invocadas.

BOTÃO LIMPAR | CORREÇÃO

Para corrigir o problema citado acima com o botão de limpar, analisaremos a implementação correspondente ao botão. Temos definido que o type do botão é do tipo reset. Assim, promoveremos uma mudança, substituindo o type por uma action. Esta action executará alguma ação no lado do ManageBean e retornará ou para uma outra página ou para a mesma página.

SOLUÇÃO 1

Assim, como uma das soluções de implementação o action então chamará no ManagedBean, pessoaBean, o método novo() que inicia uma nova pessoa e retorna para a mesma página.

OBSERVAÇÃO. Por se tratar de uma implementação já feita suprimimos aqui algumas propriedades e atributos aplicadas ao h:commandLink, concentrando-nos apenas na questão que nos interessa neste momento.

<h:commandLink action=“#{pessoaBean.novo}” />

Desse modo um objeto poderá ser colocado em edição, e ao tentar limpar, não haverá mais mensagens de validações sendo exibidas.

SOLUÇÃO 2

Outra forma de resolver o problema é separando as responsabilidades criando um novo método, que poderá ou não executar alguma rotina antes de limpar os campos. Dessa forma, o action chamará o novo método criado limpar().

action=“#{pessoaBean.limpar}”

BOTÃO LIMPAR | CORREÇÃO

Perceba que em nossa aplicação quando colocamos um objeto em edição ele não está trazendo todos os campos, como “nome”, por exemplo.

A primeira correção é fazer com que o formulário de cadastro e h:dataTable trabalhem separadamente, cada um dentro do seu respectivo h:form. Da forma como está implementado com o h:dataTable aninhado dentro do h:form do formulário de cadastro, quando qualquer ação é realizada no h:dataTable o formulário de cadastro é enviado juntamente.

Assim, criaremos um h:form exclusivamente para o h:dataTable, visto que alguns componentes dentro do h:dataTable precisam de um h:form para funcionarem corretamente. Assim, deixaremos o formulário de cadastro dentro de outro h:form, também exclusivamente para ele.

E o simples fato de separarmos o formulário do h:dataTable já corrigiu o problema apresentado quando um objeto era colocado em edição.

No entanto, voltamos a ter problemas ao tentar criar um novo objeto ou limpar os campos de um objeto em edição. Para solucionar estes problemas, primeiro atribuiremos um id para o h:form da h:dataTable.

<h:form id=“formTable”>

Também recorreremos a facelets f:ajax. Desse modo abra uma tag de fechamento para o h:commandButton correspondente ao botão “Novo”. Crie também um identificador “id” para este botão.

Na tag f:ajax execute o botão, referenciando-o por meio do “id”, e assim enviando-o para o lado do servidor. Usando a propriedade “render”, renderize o @form. Quando adicionamos o @form estamos fazendo uma referência direta ao formulário pai do respectivo componente, no caso o botão “Novo”.

Proceda da mesma forma para o botão de limpar, abra a tag de fechamento para o h:commandButton correspondente ao botão “limpar”, atribua um id a ele, “botaoLimpar” e insira a tag f:ajax com as respectivas propriedades “execute” e “render”.

EM POUCAS PALAVRAS

A dica de hoje é para que, quando da implementação de um formulário cuja exibição dos dados na mesma página faz uso de um h:dataTable, recomenda-se que sejam colocadas em h:forms separados. E que assim, seja utilizado o Ajax em implementações que colocam um objeto em “edição”, ou mesmo para limpar campos, como fizemos neste tutorial.