Bom, como algumas pessoas tinham pedido, estou mostrando aqui como fazer validações de campo no Flex, é bem simples e já existem muita coisa pronta nas próprias bibliotecas do Flex, para começar vamos ter em mente que estamos inserindo os códigos dentro da tag <Application> nela deverão estar todas as informações que vamos precisar.:
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>
Nela escolhi o layout como vertical, mas não tem problema se você estiver qualquer outro tipo. Vamos criar agora uma panel com três campos e um botão para validar os campos, dessa forma fiz dessa maneira:
<mx:Panel width=”444″ height=”266″ layout=”absolute”>
<mx:Form x=”82″ y=”38″>
<mx:FormItem label=”Nome:” required=”true”>
<mx:TextInput id=”nome”/>
</mx:FormItem>
<mx:FormItem label=”email:”>
<mx:TextInput id=”email”/>
</mx:FormItem>
<mx:FormItem label=”Telefone”>
<mx:TextInput id=”telefone”/>
</mx:FormItem>
<mx:FormItem label=”Idade:”>
<mx:TextInput id=”idade”/>
</mx:FormItem>
<mx:FormItem label=”">
<mx:Button label=”Validar” id=”validarButton” click=”validar()”/>
</mx:FormItem>
</mx:Form>
</mx:Panel>
<mx:Panel width=”444″ height=”266″ layout=”absolute”> <mx:Form x=”82″ y=”38″> <mx:FormItem label=”Nome:” required=”true”> <mx:TextInput id=”nome”/> </mx:FormItem> <mx:FormItem label=”email:”> <mx:TextInput id=”email”/> </mx:FormItem> <mx:FormItem label=”Telefone”> <mx:TextInput id=”telefone”/> </mx:FormItem> <mx:FormItem label=”Idade:”> <mx:TextInput id=”idade”/> </mx:FormItem> <mx:FormItem label=”"> <mx:Button label=”Validar” id=”validarButton” click=”validar()”/> </mx:FormItem> </mx:Form> </mx:Panel>
O panel por fora e dentro dele um form com vários form itens.
Notem que em cada formItem eu coloquei um id correspondente, vamos precisar utilizar ele para validar nossos campos, se você simplemente colar o código no flex builder ele vai dar erro de compilação por que no botão de validação incluímo a propriedade click, que vai chamar o método validar() que vamos criar agora. O método deverá ficar dentro de um bloco de script que irá gerar uma tag [CDATA que indica que dentro dela vamos poder usar qualquer tipo de caracter. O função fica desta maneira:
<mx:Script>
<![CDATA[
import mx.validators.StringValidator;
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.events.VideoEvent;
private function validar(){
var result:ValidationResultEvent = stringValidator.validate();
var result:ValidationResultEvent = emailValidator.validate();
var result:ValidationResultEvent = telefoneValidator.validate();
if(result.results != null){
Alert.show("Verificar campos em vermelho!");
} else {
Alert.show("Cadastro com Sucesso!");
}
}
]]>
</mx:Script>
Colocando este bloco de script em cima no nosso form vamos finalmente poder fazer as validações, não vou entrar em muitos detalhes pois não tem dificuldade, o próprio flex 3 ou a SDK para o eclipse já possuem o auto-complete do código, o que ajuda bastante a descobrirmos mais funções dessas ferramentas. Para cada campo correspondente vamos utilizar funções que já existem no flex, neste exemplo vamos utilizar três delas:
1 – EmailValidator
2 – PhoneNumberValidator
3 – StringValidator
Para cada um delas vamos ter validações específicas, utilizei algumas nesse tutorial, você poderá utilizar qualquer uma que exista para cada uma delas, vamos ver como ficou a validação do email:
<mx:EmailValidator id=”emailValidator”
required=”true”
triggerEvent=”click”
source=”{email}”
trigger=”{validarButton}”
requiredFieldError=”Campo obrigatório”
property=”text”/>
Utilizamos o id correspondente ao nome do campo que estamos validando, a propriedade ‘required’ para dizermos que este campo será obrigatório entre os outros. O campo requiredFieldError faz com que possamos personalizar a menssagem que deverá ser exibida, pois se não utilizarmos ele irá colocar a mensagem padrão do flex.
Abaixo segue as outras validações e telefone e email:
Validando email:
<mx:PhoneNumberValidator id=”telefoneValidator”
triggerEvent=”click”
required=”true”
requiredFieldError=”Obrigatório uso do email”
source=”{telefone}”
trigger=”{validarButton}”
property=”text”
/>
Validando Texto:
<mx:StringValidator
id=”stringValidator”
source=”{nome}”
property=”text”
required=”true”
trigger=”{validarButton}”
triggerEvent=”click”
minLength=”5″
tooShortError=”O valor para este campo deve ter mais de 5 caracteres”
maxLength=”10″
tooLongError=”O valor para este campo não pode ser maior que 20″ />
Agora está pronto, com o código feito basta rodar a aplicação e ver os resultados
