Validação do Formulário de Ajax Utilizando a Spring e o DWR – Parte 03
Eric Spiegelberg
Este artigo apresenta um projeto genérico e reutilizável de validação de formulários em Ajax que, por utilizar componentes open source existentes, pode fácil e rapidamente ser usado para o validar cada formulário de seus aplicativos. Para fornecer um exemplo concreto, o formulário de registro da aplicação exemplo jPetstore, fornecido pelo framework Spring, foi modificado. Este artigo descreve os passos realizados para modificar o jPetstore e discute os detalhes dos níveis de projeto e de execução.
Antes de começarmos, é importante destacarmos que o leitor já possui conhecimentos básicos do framework Spring e do MVC. Caso você não esteja familiarizado com Spring, não se preocupe. Conceitualmente, toda informação apresentada se aplica, igualmente, a qualquer framework MVC e seria trivial modificar os exemplos fornecidos para trabalhar com Struts ou JSF, por exemplo.
Controlando o processo com JavaScript
Com a lógica de validação do lado do servidor e a estrutura da comunicação de Ajax no lugar, o terceiro e último componente é modificar a fila da rede para suportar o processo de validação de Ajax. Cada página que contém um formulário que deva ser validado por Ajax necessita ter uma pequena quantidade da infra-estrutura do Javascript adicionada. Um exemplo desta infra-estrutura pode ser visto abaixo:
Depois de incluir dois certificados de núcleo DWR nas duas primeiras linhas, a terceira linha inclui o objeto proxy de AccountValidatorJS gerado. Enquanto os dois primeiros certificados serão incluídos tipicamente em qualquer página na qual você utilizar DWR, a terceira linha é específica a que objeto de Java do lado do servidor você pretende se beneficiar e irá variar de página a página.
Em seguida, os manipuladores globais de erros e advertências são ajustados para zero, desse modo engolindo todos os erros e advertências de DWR. Enquanto é aceitável para as finalidades deste artigo, este obviamente não é suficiente para o software de nível empresa e sugiro fortemente um projeto diferente para os seus aplicativos de produção.
A função validateAccountInputField() é a sustentação da validação do lado do cliente. Por aceitar uma referência ao elemento de entrada de dados do formulário que deve ser validada, o objeto do proxy AccountValidatorJS é utilizado para transmitir a identificação e o valor do campo de entrada de dados ao servidor para a validação. Embora a sintaxe seja enigmática e difícil de ler, o terceiro parâmetro à função AccountValidatorJS.getInputFieldValidaçãoMessage() instrui DWR para invocar a função de re-chamada setInputFieldStatus() quando a resposta do servidor estiver disponível. Neste momento, a função setInputFieldStatus() executa a exposição e a atualização dinâmica da mensagem de validação na tela. Adicionando Erro à identificação do elemento, uma referência à extensão utilizada a exposição visual é obtida e seu innerHTML é atualizado com o conteúdo da mensagem de validação de resposta.
Finalmente, validateAccountInputField() necessita de alguma maneira de ser invocado quando o usuário alterar um campo de entrada de dados. Isso é realizado adicionando um ouvinte de evento onChange() a cada entrada de dados do formulário que você deseje que Ajax valide. Um fragmento de um formulário exemplo é exibido abaixo:
Enquanto a utilização das capacidades de manipulação de formulários de Spring será incomum àqueles não familiarizados com o Spring MVC, o resto é um típico formulário de HTML com uma extensão localizada próxima ao campo de entrada de dados utilizado para exibir a mensagem de validação. A utilização de um ouvinte de evento onChange() vai invocar validateAccountInputField() quando um usuário modificar o valor neste campo de entrada de dados. Utilizando isto para passar uma referência de si mesmo para a função validateAccountInputFiled(), o código é genérico para cada campo de entrada de dados e pode ser rapidamente adicionado a todos os seus formulários.
A Figura 1 demonstra a fila de rede, UI, após um usuário ter modificado o formulário. Neste caso particular, o usuário preencheu o formulário e, subseqüentemente, removeu todas as entradas de dados à exceção do campo de identificação do usuário. Como o usuário removeu as entradas de dados e o foco do navegador se deslocou para uma entrada de dados diferente, a validação do Ajax foi invocada e uma mensagem indicando que o campo era requerido foi dinamicamente exibida. De interesse particular, é o campo de entrada de dados de identificação do usuário, com a mensagem dinâmica que aquele nome de usuário não está disponível.
Figura 1. Exibição de mensagens de validação dinâmica
Conclusão
Utilizando a aplicação exemplo do jPetStore, este artigo discutiu e demonstrou um projeto para uma solução genérica e reutilizável da validação do formulário de Ajax. Utilizar projetos de fonte aberta existentes e alavancando sua lógica de validação dos aplicativos, o tempo de desenvolvimento e complexidade requeridos para executar esta solução em seus aplicativos será mínimo. Após configurar a infra-estrutura necessária (e possivelmente, algum mínimo refactoring aos aplicativos existentes), o maior esforço provavelmente será simplesmente adicionar ouvintes de evento do onChange() aos elementos de entrada de dados do formulário de HTML que você queria validar através de Ajax. Enquanto este artigo empregou a Spring e estruturas de DWR, nada sobre Ajax ou os conceitos de validação de Ajax apresentados aqui estão amarrados a qualquer ferramenta, estrutura ou língua particular, e as execuções podem ser criadas de qualquer maneira que atenda às exigências técnicas específicas: suas ou do negócio.
