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

Flex Validator: Exemple de PhoneNumberValidator en MXML et ActionScript

Le composant Flex PhoneNumberValidator vous permet de valider des chaînes dont le format est celui d'un numéro de téléphone. Un numéro de téléphone valide contient au moins 10 caractères, sans compter les caractères de formatage. Le validateur ne vérifie bien sûr pas si le numéro est attribué. Les seules propriétés à définir sont les propriétés de base: source et property. Le composant PhoneNumberValidator fera ensuite toutes les vérifications.

Flex Validator: Personnaliser les tooltip d’erreur du PhoneNumberValidator

L' exemple suivant montre comment utiliser ce composant Flex PhoneNumberValidator 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:PhoneNumberValidator source="{phone}" property="text"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form>
            <mx:FormItem label="Entrez un numéro de téléphone: ">
                <mx:TextInput id="phone" 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.PhoneNumberValidator;
			public function initApp():void{
				var phoneNumberValidator:PhoneNumberValidator = new PhoneNumberValidator();
				phoneNumberValidator.source = phone;
				phoneNumberValidator.property = "text";
			}
		]]>
	</mx:Script>

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

        <mx:Form>
            <mx:FormItem label="Entrez un numéro de téléphone: ">
                <mx:TextInput id="phone" width="100%"/>
            </mx:FormItem>

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