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

Flex Validator: Exemple de NumberValidator en MXML et ActionScript

Le composant NumberValidator vous permet de valider toute sortes de nombre. Vous pouvez par exemple spécifier un intervalle en utilisant les propriétés minValue et maxValue ou bien spécifier si le nombre doit être réel ou entier. Toutes ces propriétés seront implantées dans un exemple.

Vous avez accès à 7 propriétés:

• allowNegative: permettre la saisie de nombre négatif (Boolean, true par défaut)
• decimalSeparator: permet de choisir le caractère qui sépare les nombres à virgule (String, "." par défaut)
• domain: choisir le type de nombre autorisé, entier ou réel (String, "real" ou "int", "real" par défaut
• maxValue: permet de fixer une valeur de saisie maximale (Number, NaN par défaut)
• minValue: permet de fixer une valeur de saisie minimale (Number, NaN par défaut)
• precision: le nombre de chiffre autorisé après la virgule (int, -1 par défaut)
• thousandsSeparator: permet de choisir le caractère qui sépare les milliers (String, "," par défaut)

Les exemples suivant montrent comment utiliser ce composant Flex NumberValidator en MXML. Il est bien sur possible de combiner les différentes possibilités afin de faire un composant de validation qui correspond à votre besoin.

Flex Validator: Personnaliser les tooltip d’erreur du NumberValidator

Le premier exemple impose que le nombre soit compris entre 15 et 55 et que ce soit un entier :

<?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:NumberValidator source="{age}" property="text"
minValue="15" maxValue="55" domain="int"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form>
            <mx:FormItem label="Entrez une valeur entre 15 et 55: ">
                <mx:TextInput id="age" width="100%"/>
            </mx:FormItem>

            <mx:FormItem >
                <mx:Button id="myButton" label="Validate" />
            </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.NumberValidator;
			public function initApp():void{
				var numValidator:NumberValidator = new NumberValidator();
				numValidator.source = age;
				numValidator.property = "text";
				numValidator.minValue = 15;
				numValidator.maxValue = 55;
				numValidator.domain = "int";
			}
		]]>
	</mx:Script>

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

        <mx:Form>
            <mx:FormItem label="Entrez une valeur entre 15 et 55: ">
                <mx:TextInput id="age" width="100%"/>
            </mx:FormItem>

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

</mx:Application>

Lorsque vous autorisez les nombres réels, vous pouvez aussi contrôler leur précision. La précision est le nombre de chiffres après la virgule (décimales). La propriété precision à une valeur par défaut de -1, ce qui autorise toutes précisions. Une valeur de 0 aurait le même effet que la restriction au domaine des entiers.

Ce code impose la saisie d'un nombre avec au maximum 4 chiffres après la virgule et positif:

<?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:NumberValidator source="{number}" property="text"
        precision="2" allowNegative="false"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form>
            <mx:FormItem label="Nombre positif avec max 2 chiffres après la virgule: ">
                <mx:TextInput id="number" 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

Par défaut, un NumberValidator utilise une virgule pour séparer les milliers et un point pour séparer les décimales (notation utilisées par les États-Unis). Cependant, si vous voulez utiliser d'autres signes, vous devez utiliser les propriétés thousandsSeparator et decimalSeparator. La seule règle pour ces propriétés est qu'elles doivent être des caractères et ne doivent pas être les mêmes.

L'exemple suivant montre comment utiliser un validateur pour la majorité des pays Européens, avec la virgule pour séparer les décimales et un point pour séparer les milliers:

<?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:NumberValidator source="{number}" property="text"
       thousandsSeparator="." decimalSeparator="," 
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form>
            <mx:FormItem label="Entrez une valeur du type 45.456,89 (format européen): ">
                <mx:TextInput id="number" 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