Aula 3.6- Validando dados em formulários no Flex 4

Aula 3.6- Validando dados em formulários no Flex 4.

Requisitos

Introdução

Nesse exercício usaremos classe de validação disponível no Framework Flex para validar dados inseridos no formulário (veja Figura 1). Primeiro vamos começar validando um único campo e em seguida aprenderemos como validar todo os campos no formulário usando ActionScript.

Figura 1: Visualizando a aplicação e os campos validados.

Nessa aula você aprenderá:

I. Adicionando indicadores de campos requeridos.

1. Baixe o arquivo ex3_06_inicial.zip se ainda não baixou e descompacte-o em seu computador.

2. Abra o Flash Builder.

3. Importe o arquivo ex3_06_inicial.fxp.

4. No painel Package Explorer expanda a pasta components e abra o arquivo FormRequisicaoVeiculos3_06.mxml.

5. Dentro do container Form, localize o bloco FormItem que tem aninhado o controle TextInput id="txt_telefoneCelular".

6. No container FormInput, adicione a propriedade required com o valor true.

<mx:FormItem label="Telefone celular:" required="true">
<s:TextInput id="txt_telefoneCelular"/>
</mx:FormItem>

7. Salve o arquivo e rode a aplicação.

Você deve ver um asterisco próximo ao campo de telefone (veja a Figura 2).

Figura 2: Rodando a aplicação e vendo o asterisco próximo ao campo de telefone.

II. Criando e usando o PhoneNumberValidator.

Nesta seção você criará uma instância PhoneNumberValidator que será usada para validar o campo de telefone da aplicação.

1. Retorne ao FormRequisicaoVeiculos3_06.mxml no Flash Builder.

2. Localize o bloco Declarations.

3. Dentro da tag, abaixo de DateFormatter adicione uma instância de PhoneNumberValidator.

<fx:Declarations>
<mx:DateFormatter id="requestDateFormatter"
formatString="DD-MM-YYYY"/>
<mx:PhoneNumberValidator />
</fx:Declarations>

4. No validador PhoneNumberValidator adicione uma propriedade id com o valor de "mobileValidator".

<mx:PhoneNumberValidator id="mobileValidator" />

5. Salve o arquivo.

III. Engatilhando um validador usando um evento.

Nesta seção você usará o evento click do controle botão para disparar a validação no campo telefone.

1. Dentro do bloco Declarations, na instância PhoneNumberValidator, adicione uma propriedade source e vincule-a ao valor do controle TextInput telefoneCelular.

<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}" />

2. Adicione a propriedade property com o valor de text.

<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}"
property="text" />

3. Adicione a propriedade target com o valor que foi vinculado ao controle botão submitButton.

<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}"
property="text"
trigger="{submitButton}" />

4. Adicione a propriedade triggerEvent configurada ao evento click.

<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}"
property="text"
trigger="{submitButton}"
triggerEvent="click" />

5. Salve o arquivo.

6. Rode a aplicação.

7. Clique no botão Enviar Solicitação

Você deve ver uma borda vermelha aparecer ao redor do campo "Telefone Celular" como mostrada na Figura 3.

Figura 3: Validação em ação no campo telefone celular.

8. Passe o mouse sobre o campo telefone celular.

Você deve ver a mensagem de validação informando que o campo é requerido (veja Figura 4).

Figura 4: Movendo o mouse sobre o controle TextInput para ver a mensagem de validação.

IV. Suprimindo a validação automática.

Nesta seção você removerá o evento trigger da instância PhoneNumberValidator.

1. Retorne ao Flash Builder.

2. Localize a instância PhoneNumberValidator

3. No PhoneNumberValidator delete a propriedade trigger e seu valor.

4. Mude o valor da propriedade triggerEvent para uma String vazia.

<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}"
property="text"
trigger="{submitButton}"
triggerEvent="" />

5. Salve o arquivo.

V. Usando o método validate().

Nesta seção você validará campos do formulário de requisição de uso de veiculos da empresa ficticia com ActionScript usando o metodo validate()

1. Abaixo da função init(), crie uma função privada chamada validatePhones() com tipo de retorno void.

private function validatePhones():void
{

}

2. Dentro da função validatePhones(), crie uma variável local chamada "event" com tipo de dados da classe ValidationResultEvent.

Observe que se você usar o assistente de código (code lookup) para criar a variável, o Flash Builder gerará a declaração import correspondente. Caso não gere você deve adicioná-la manualmente.

private function validatePhones():void
{
var event:ValidationResultEvent
}

3. Atribua à variável event a possibilidade de chamar o metodo validate() da instância telefoneValidador da classe PhoneNumberValidator.

private function validatePhones():void
{
var event:ValidationResultEvent = mobileValidator.validate();
}

4. Localize o container FormItem, que tem aninhado o controle Botão.

5. No controle botão adicione o evento clique com valor do manipulador de evento validatePhones().

<mx:FormItem>
<s:Button id="submitButton"
label="Enviar Requisição"
click="validatePhones()"/>
</mx:FormItem>

6. Salve o arquivo.

7. Rode a aplicação.

8. Clique no botão Submeter Reqisição.

Você deve ver uma borda vermelhao ao redor da caixa de entrada de texto do telefone (veja Figura 5).

Figura 5: Clique no botão dispara o método validação no campo de texto telefone.

VI. Engatilhando múltiplas validações.

Nesta seção usaremos ActionScript e validadores Flex para validar mais de um campo de entrada de texto no formulário de requisição de veículos de nossa aplicação de exemplo.

1. Retorne ao arquivo FormRequisicaoVeiculos3_06.mxml no Flash Builder.

2. Dentro do bloco Declarations, copie a instância PhoneNumberValidator e cole-a logo abaixo da primeira, conforme abaixo:

<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}"
property="text"
triggerEvent=""/>
<mx:PhoneNumberValidator id="mobileValidator"
source="{txt_telefoneCelular}"
property="text"
triggerEvent=""/>

3. Para a segunda instância PhoneNumberValidator, mude a propriedade id para "officePhoneValidator" e vincule a fonte dos dados ao valor do controle TextInput telefone fixo.

<mx:PhoneNumberValidator id="officePhoneValidator"
source="{txt_telefoneFixo}"
property="text"
triggerEvent=""/>

4. Localize o bloco de Script.

5. Crie uma nova declaração import para importar o pacote mx.validators.Validator.

import events.VehicleRequestEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CalendarLayoutChangeEvent;
import valueObjects.VehicleRequest;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;

6. Localize a função validatePhones().

7. Dentro da função validatePhones() delete a variável "event" e seu valor.

8. Dentro da função validatePhones(), declare uma variável chamada validationArray com tipo de dados da classe Array.

private function validatePhones():void
{
 var validationArray:Array
 
}

9.Atribua à variável validationArray a possibilidade de chamar o método Validator.validateAll().

private function validatePhones():void
{
var validationArray:Array = Validator.validateAll();
}

10. Dentro da chamada do método Validator.validateAll(), use colchetes para criar um array de validadores. Use nesse array as instâncias mobileValidator e officePhoneValidator.

private function validarTelefones():void
{
var validationArray:Array = Validator.validateAll([mobileValidator,officePhoneValidator]);
}

11. Salve o arquivo.

12. No controle DropDownList selecione um funcionário.

13. Remova o número de telefone fixo.

14. Clique no botão Submeter Requisição.

Ambos os controles de entrada de texto ficarão rodeados por linhas vermelhas como mostrado na Figura 6.

Figura 6: Clicando no botão Submeter Requisição após deletar o número de telefone fixo.

Conhecimentos adquiridos

Nesse exercício você aprendeu como criar uma instância PhoneNumberValidator e usa-la para validar campos de formulário através de evento clique em controle do tipo button.

Agora você está apto a responder as perguntas abaixo: