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

Flex Formatter: Exemple de PhoneFormatter en MXML

Le composant Flex PhoneFormatter prend n'importe quel nombre ou String pouvant être convertie en nombre et la formate à la manière d'un numéro de téléphone. Le PhoneFormatter propose la possibilité de configurer le format de la chaîne de sortie en utilisant la propriété formatString. La valeur par défaut est cette propriété est (###) ###-####, où # représente l'emplacement d'un nombre (standard américain).

L'exemple suivant produira 123.456.7890:

<mx:TextInput text="{phoneFormatter.format('1234567890')}"/>
<mx:PhoneFormatter id="phoneFormatter" formatString="###.###.####"/>

Par défaut, la propriété formatString permet de spécifier plusieurs caractères. Ces caractères sont données par la propriété validPatternChars, qui a pour valeur par défaut +, (,), #, -, . et l'espace.

Pour formater une numéro de téléphone au format français, vous pouvez par exemple utiliser cet exemple et l'adapter:

<?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;

            // Event handler to validate and format input.
            private function Format():void
            {
                vResult = pnVal.validate();
                if (vResult.type==ValidationResultEvent.VALID) {
                    formattedPhone.text= phoneFormatter.format(phone.text);
                }

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

    <mx:PhoneFormatter id="phoneFormatter"
        formatString="## ## ## ## ##" validPatternChars="# "/>

    <mx:PhoneNumberValidator id="pnVal" source="{phone}" property="text"
            allowedFormatChars=""/>

    <mx:Panel title="Exemple de PhoneFormatter pour la France" 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 (0448372389 par ex.):">
                <mx:TextInput id="phone" text="" width="75%"/>
            </mx:FormItem>

            <mx:FormItem label="Numéro de téléphone formaté: ">
                <mx:TextInput id="formattedPhone" text="" width="75%" 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