Olá pessoal, já tem um tempo que não escrevo um tutorial… mais tempo ainda sobre Flex. Resolvi escrever um pequeno tutorial explicando como usar validators e validators em runtime via actionscript. Como é uma dúvida que sempre aparece e eu já vi muita gente validando as coisas na mão em Flex, entã resolvi fazer este pequeno tutorialzinho.

O resultado será:

O código é simples e temos apenas um container form para alinhar nossos items, dois campos de texto (um para email e outro para nome) e um botão de enviar. Também acrescentei um label para exibir o status da validação.

Reparem nesse trecho de código:

1
2
3
4
5
6
7
8
9
10

    <mx:StringValidator source="{nome}" property="text"
      required="true"
      minLength="4"
      requiredFieldError="Campo obrigatório"
      tooShortError="Valor preenchido é muito curto"
      trigger="{nome}" triggerEvent="change"
      valid="status.text='Nome é válido'"/>  

Ele é o nosso primeiro validator. O flex possui vários tipos de validators e cada um com sua classe específica, são eles:

• CreditCardValidator
• CurrencyValidator
• DateValidator
• EmailValidator
• NumberValidator
• PhoneNumberValidator
• RegExpValidator
• SocialSecurityValidator
• StringValidator
• Validator
• ZipCodeValidator

Mas como tudo em flex você pode criar seu próprio validator sem problemas. Agora que já conhecemos quem são os validators default vamos voltar ao nosso código. Para validar o campo de texto nome (

Propriedade source é quem define a quem este validator está associado (reparem no bind definido por {}) e a propriedade property do validator é responsável por identificar qual propriedade do nosso componente source deve ser analisada. O restante do código é para definir quando o valor informado será valido ou não. Então meu campo nome não será válido se for vazio (required=”true”) ou se tiver menos caracteres que 4 (minLength=”4”), logo abaixo defino a mensagem para cada erro… se não definirmos as mensagens elas seram exibidas em inglés através de mensagem default definida pelo validator. Além destas duas validações eu ainda poderia validator pelo tamanho máximo, mas para este exemplo apenas isso basta.

As últimas propriedades definem quem vai disparar a validação e em qual evento isso vai ocorrer ( trigger=”{nome}” triggerEvent=”change”), estou dizendo que quem vai disparar a validação será o próprio campo nome no evento change dele, então a cada letra digitada ele será validado. A útlima propriedade diz o que fazer quando for válido, no caso estou apenas atribuindo uma nova mensagem ao meu label status.

Uma outra forma de de utilizar os validatos seria através de um outro trigger como um botão de enviar, e é exatametne isso que estamos fazendo no nosso EmailVallidator. EmailValidator tem as mensagens diferentes de StringValidator pois ele será válido em condições diferentes mas reparem que é bem semelhante a forma de usar.

Interessante, mas e se quisermos chamar nossos validators em runtime? Suponha que você possui um formulário grande e no click do botão enviar você precisa validar todo mundo e depois realizar algumas operações e depois dar um post para o servidor… como fazer?

Definido o nosso MXML, ele é bem simples e praticamente igual ao anterior mas agora estamos usando um RichTextEditor pois estaremos simulando cadastro de um artigo em um blog. Também não definimos triggers para os validators pois iremos chamar cada validator via AS3.

Só precisamos chamar o método validate dos nosso validadores e guardar o resultado dos métodos e depois verificar e o resultado é válido.

var evTituloValid:ValidationResultEvent = tituloValidator.validate();

O resultado será o abaixo (para ver o código clique com o botão direito no exemplo):