Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Flex Validator: Exemple de EmailValidator en MXML et ActionScript

Le composant Flex EmailValidator vous permet de valider des chaînes dont le format est celui d'une adresse email. Cette opération souvent fastidieuse avec des langages tels que le JavaScript est ici fait très facilement avec ce Validator. Les seules propriétés à définir sont les propriétés de base: source et property. Le composant EmailValidator fera ensuite toutes les vérifications (présences d'un @, d'un point et d'une extension ...).

Flex Validator: Personnaliser les tooltip d’erreur du EmailValidator

L' exemple suivant montrent comment utiliser ce composant Flex EmailValidator en MXML:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">

    <mx:Script>
        import mx.controls.Alert;
    </mx:Script>

    <mx:EmailValidator source="{email}" property="text"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

    <mx:Panel title="Exemple simple de EmailValidator" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez une adresse email: ">
                <mx:TextInput id="email" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l'application

Pour créer ce composant avec le même comportement en ActionScript, il suffit d'utiliser ce code AS3:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	creationComplete="initApp()">
	<mx:Script>
		<![CDATA[
			import mx.validators.EmailValidator;
			public function initApp():void{
				var emailValidator:EmailValidator = new EmailValidator();
				emailValidator.source = email;
				emailValidator.property = "text";
			}
		]]>
	</mx:Script>

    <mx:Panel title="Exemple simple de EmailValidator" width="75%" height="75%"
        paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Entrez une adresse email: ">
                <mx:TextInput id="email" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Valider" />
            </mx:FormItem>
        </mx:Form>
    </mx:Panel>
</mx:Application>