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

Flex Formatter: Exemple de CurrencyFormatter en MXML

Le composant CurrencyFormatter fonctionne pratiquement de la même manière que le NumberFormatter sauf qu'il ajoute le symbole de la devise (currency) en plus de formater le nombre. Le CurrencyFormatter a toutes les mêmes propriétés que le NumberFormatter sauf qu'il a deux propriétés supplémentaires: currencySymbol et alignSymbol. La valeur par défaut pour currencySymbol est le signe du dollar américain ($). La valeur par défaut de la propriété alignSymbol est "left", l'autre valeur possible est "right", pour l'euro par exemple.

L'exemple suivant montre comment l'utiliser pour formater un nombre en euros:

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

    <mx:Script>
        <![CDATA[

              import mx.events.ValidationResultEvent;
              private var vResult:ValidationResultEvent;

              private function Format():void {

                     vResult = numVal.validate();

                    if (vResult.type==ValidationResultEvent.VALID) {
                        var temp:Number=Number(priceEU.text);
                        formattedEUPrice.text= eurosFormatter.format(temp);
                    }

                    else {
                       formattedEUPrice.text="";
                    }
              }
        ]]>
    </mx:Script>

    <mx:CurrencyFormatter id="eurosFormatter" precision="2"
        currencySymbol="€" useNegativeSign="true"
        alignSymbol="right"/>

    <mx:NumberValidator id="numVal" source="{priceEU}" property="text"
        allowNegative="true"/>

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

        <mx:Form>
            <mx:FormItem label="Entrer un montant en euros (24 ou 35.4):">
                <mx:TextInput id="priceEU" text="" width="50%"/>
            </mx:FormItem>

            <mx:FormItem label="Montant Formaté: ">
                <mx:TextInput id="formattedEUPrice" text="" width="50%" editable="false"/>
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button label="Valider et Formater" click="Format();"/>
            </mx:FormItem>
        </mx:Form>

    </mx:Panel>
</mx:Application>

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