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

Flex Validator: Exemple de CurrencyValidator en MXML et ActionScript

Le composant Flex CurrencyValidator vous permet de valider des chaînes dont le format est celui d'un montant, exprimé en dollar par exemple. Evidemment, le CurrencyValidator a beaucoup de similitudes avec le NumberValidator. Par exemple les propriétés minValue, maxValue, precision, allowNegative, decimalSeparator et thousandsSeparator fonctionne de la même manière que pour un NumberValidator.

En plus, le CurrencyValidator permet de spécifier les propriétés currencySymbol et alignSymbol:

• currencySymbol permettre de spécifier quel caractère sera utilisé comme devise, le dollar par défaut (String, "$" par défaut)
• alignSymbol: détermine l'endroit où le currencySymbol doit apparaître par rapport à la valeur numérique. Les valeurs possibles sont "left", "right" et "any" (String, "left" par défaut)

Flex Validator: Personnaliser les tooltip d’erreur du CurrencyValidator

Les exemples suivant montrent comment utiliser ce composant Flex CurrencyValidator en MXML.

Le premier exemple utilise le CurrencyValidator avec les propriétés par défaut, c'est-à-dire pour un affichage en dollar $:

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

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

        <mx:Form>
            <mx:FormItem label="Entrez un montant en dollars ($1,877.56 par ex): ">
                <mx:TextInput id="priceUS" 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.CurrencyValidator;
			public function initApp():void{
				var currencyValidator:CurrencyValidator = new CurrencyValidator();
				currencyValidator.source = priceUS;
				currencyValidator.property = "text";
			}
		]]>
	</mx:Script>

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

        <mx:Form>
            <mx:FormItem label="Entrez un montant en dollars ($1,877.56 par ex): ">
                <mx:TextInput id="priceUS" width="100%"/>
            </mx:FormItem>

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

Le format par défaut d'un CurrencyValidator est le format américain. Pour utiliser le CurrencyValidator avec un format en euros, il suffit de modifier certaines de ses propriétés.

Ce code impose la saisie d'un montant borné sous le format européen:

<?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:CurrencyValidator source="{priceEuro}" property="text" precision="2"
    	allowNegative="false"
    	currencySymbol="€"
    	alignSymbol="right"
    	decimalSeparator=","
    	thousandsSeparator="."
    	minValue="2000"
    	maxValue="7500"
        trigger="{myButton}" triggerEvent="click"
        valid="Alert.show('Le champ est valide');"/>

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

        <mx:Form>
        	<mx:Label text="Entrez une valeur en euro entre 2000€ et 7500€ (3.321,87€ ou 6500,3€ par ex)" fontWeight="bold"/>
            <mx:FormItem label="Entrez un montant en euros: ">
                <mx:TextInput id="priceEuro" 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