Adobe Flex Tutorial - Adobe Flex Tutorial

18mai/087

Flex Formatter: Exemple de NumberFormatter en MXML et ActionScript

Le composant Flex NumberFormatter vous permet de formater tout nombre ou valeur pouvant être convertie en nombre. Vous trouverez à la fin de ce billet un exemple simple de NumberFormatter.

Vous pouvez voir rapidement le formatage par défaut en utilisant le code suivant:

<mx:TextInput text="{numberFormatter.format('1234.56789')}"/>
<mx:NumberFormatter id="numberFormatter"/>

Cet exemple affiche 1,234.56789. Le formatage par défaut n'affecte pas la précision du nombre mais ajoute simplement le séparateur des milliers.

Avec un NumberFormatter, vous pouvez contrôler si un nombre doit être arrondi grâce à la propriété "rounding". La valeur par défaut est "none" mais vous pouvez spécifier "up", "down" ou "nearest" (le plus proche).

L'exemple suivant affiche 1,2345, car la valeur est arrondie au nombre le plus proche:

<mx:TextInput text="{numberFormatter.format('1234.56789')}"/>
<mx:NumberFormatter id="numberFormatter" rounding="nearest"/>

Vous pouvez aussi contrôler la précision de la chaîne de sortie en utilisant la propriété "precision". La valeur par défaut est -1, ce qui signifie que la précision n'est pas prise en compte. Une valeur positive représente la position à laquelle la décimale sera arrondi si besoin est.

Par exemple, le code suivant affiche 1,234.56:

<mx:TextInput text="{numberFormatter.format('1234.56789')}"/>
<mx:NumberFormatter id="numberFormatter" precision="2"/>

Si la saisie utilisateur contient des séparateurs de décimales et/ou de millers, le Formatter a besoin de les connaître pour pouvoir les interpréter. Pour cela, le NumberFormatter utilise les propriétés decimalSeparatorFrom et thousandsSeparatorFrom. Les valeurs par défaut sont les valeurs américaines: le point pour les decimales et la virgule pour les milliers.

L'exemple suivant utilise les valeurs utilisées en Europe:

<mx:TextInput text="{numberFormatter.format('1234.56789')}"/>
<mx:NumberFormatter id="numberFormatter" decimalSeparatorFrom="," thousandsSeparatorFrom="."/>

Vous pouvez aussi spécifier les séparateurs à utiliser pour la chaîne de sortie en utilisant les propriétés decimalSeparatorTo et thousandsSeparatorTo.

Pour créer un NumberFormatter en ActionScript, il suffit d'utiliser le constructeur:

 var numberFormatter:NumberFormatter = new NumberFormatter();

Enfin, un exemple simple pour vous permettre de tester le NumberFormatter:

<?xml version="1.0"?>
<!-- Simple example to demonstrate NumberFormatter. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

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

          // Event handler to validate and format input.
          private function Format():void
          {
             vResult = numVal.validate();
             if (vResult.type==ValidationResultEvent.VALID) {

                formattedNumber.text= numberFormatter.format(inputVal.text);
             }

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

    <mx:NumberFormatter id="numberFormatter" precision="4"
        useThousandsSeparator="true" useNegativeSign="true"/>

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

    <mx:Panel title="NumberFormatter Example" width="75%" height="75%"
            paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">

        <mx:Form>
            <mx:FormItem label="Enter number:">
                <mx:TextInput id="inputVal" text="" width="50%"/>
            </mx:FormItem>

            <mx:FormItem label="Formatted number (precision=4): ">
                <mx:TextInput id="formattedNumber" editable="false" width="50%"/>
            </mx:FormItem>

            <mx:FormItem>
                <mx:Button label="Validate and Format" click="Format();"/>
            </mx:FormItem>
        </mx:Form>

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

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

This movie requires Flash Player 11

Remplis sous: ActionScript, Exemple, Formatter, NumberFormatter || Taggé comme: Formatter, NumberFormatter, precision, rounding Laisser un commentaire

Articles similaires

Commentaires (7) Trackbacks (0) (Souscrire aux commentaires de cet article)

Serge
10 juin 2010

Bonjour Fabien,

Votre avis là-dessus ?
(ou celui de toute autre personne qui saurait répondre...)

J'ai une floppée de nombre que je veux pouvoir afficher en séparant les milliers ou non.

Dans mon code,
- dans la partie script :
[Bindable]private var avecSeparateur : Boolean = false;

- dans la partie Declarations>

Ce que je constate :
- si je change l'initialisation de 'avecSeparateur', avant la compil, (donc si je l'init à true), le programme se comporte comme attendu, les milliers sont séparés --> je suis donc certain que ce n'est
pas la directive d'affichage qui est en cause...

- si je change 'avecSeparateur', à l'exécution (clic bouton avecSeparateur = !avecSeparateur), rien ne se passe, alors que je me suis bien assuré que le boolean change ....

Cordialement.

PS : j'ai bien noté votre exemple et le recours à une fonction, mais par curiosité intellectuelle...
Serge
10 juin 2010

Désolé

un manque dans mon post précédent

- dans la partie Declarations

mx:NumberFormatter id="numberFormatter"
thousandsSeparatorTo = " "
useThousandsSeparator ="{avecSeparateur}"

Ca m'apprendra à utiliser les balises !
fnicollet
10 juin 2010

Salut Serge,
Le plus simple quand cela ne fonctionne pas, c'est d'aller voir le code . En l'occurence, il faut ouvrir la classe Flex NumberFormatter. Ctrl+Shift+T, recherche NumberFormatter, hop la classe s'ouvre. On cherche ensuite le setter de "useThousandsSeparator" (Ctrl+0), hop, on trouve:

COPIER-COLLER
Actionscript:
public function set useThousandsSeparator(value:Object):void

{

useThousandsSeparatorOverride = value;

_useThousandsSeparator = value != null ?

Boolean(value) :

resourceManager.getBoolean(

"formatters", "useThousandsSeparator");

}
Et oui, rien ne se passe, pas d'invalidation, donc le formattage ne se re-fera pas tant que la méthode format() ne sera pas appelée.
Au passage, si tu as vraiment beaucoup de valeurs et que c'est la seule modification possible, tu peux générer les valeurs formattées et les réutiliser, cela peut être plus rapide

Fabien
Serge
11 juin 2010

Merci Fabien

- pour l'astuce du Ctrl Shift T + Ctrl Shift O, que je réutiliserai - C'est en plus je pense un biais pédagogique profitable.

- pour l'astuce de la fin du post : c'est ce que je me suis finalement résolu à faire (avec réticence, mais il faut être pragmatique).

Cordialement
Vincent
29 septembre 2010

Bonjour,

j'aurais voulu afficher ma valeur formatée sans les décimales si elles sont égales à zéro :

exemple :

COPIER-COLLER
Actionscript:
var numberFormatter:NumberFormatter = new NumberFormatter();

numberFormatter.decimalSeparatorFrom = ","

numberFormatter.decimalSeparatorTo = ","

numberFormatter.precision = 2;

numberFormatter.rounding = NumberBaseRoundType.NEAREST;

numberFormatter.thousandsSeparatorFrom = " ";

numberFormatter.thousandsSeparatorTo = " ";

numberFormatter.useNegativeSign= true;

numberFormatter.useThousandsSeparator= true;

numberFormatter.format('1234.134164') // Renvoie '1 234,13'

numberFormatter.format('1342') // Renvoie '1 342,00' alors que je souhaiterais avoir uniquement '1 342'
Y'a-t-il une manière simple de le faire ? J'ai pensé à faire quelque chose comme ça mais je trouve cela un peu lourd :

COPIER-COLLER
Actionscript:
var otherNumberFormatter:NumberFormatter = new NumberFormatter();

otherNumberFormatter.decimalSeparatorFrom = ","

otherNumberFormatter.decimalSeparatorTo = ","

otherNumberFormatter.precision = 0;

otherNumberFormatter.rounding = NumberBaseRoundType.NEAREST;

otherNumberFormatter.thousandsSeparatorFrom = " ";

otherNumberFormatter.thousandsSeparatorTo = " ";

otherNumberFormatter.useNegativeSign= true;

otherNumberFormatter.useThousandsSeparator= true;

var numberToFormat:Number = 1342;

if (numberToFormat == Math.ceil(numberToFormat))

{

return numberFormatter.format(numberToFormat);

}

else

{

return otherNumberFormatter.format(numberToFormat);

}
merci en tout cas si vous avez une solution plus propre.

Vincent
Vincent
29 septembre 2010

Je me suis trompé dans mon exemple il fallait comprendre :

COPIER-COLLER
Actionscript:
var numberToFormat:Number = 1342;

if (numberToFormat == Math.ceil(numberToFormat))

{

return otherNumberFormatter.format(numberToFormat);

}

else

{

return numberFormatter.format(numberToFormat);

}
fnicollet
29 septembre 2010

Salut Vincent,
j'ai pas fait le test mais il suffit que tu regardes ta valeur à formatter pour savoir quelle précision il te faut. Un code genre
numberFormatter.precision = int(numberToFormat) == numberToFormat ? 0 : 2;

Non?
Fabien