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

Flex Formatter: Exemple de DateFormatter en MXML

Le composant Flex DateFormatter vous permet de transformer un objet Date en une String. Il existe une seule propriété que vous pouvez configurer avec le DateFormatter. Cette propriété, appelée formatString, permet de spécifier la manière avec laquelle les éléments de l'objet Date (jour, mois, année, heure etc...) seront formatés en sortie. La valeur par défaut est MM/DD/YYYY, qui représente le mois, suivi par le jour, suivi par l'année sur 4 caractères (format américain).

Les caractères suivants ont un sens spécial quand ils sont utilisés comme valeur de formatString:

• Y: année
• M: mois
• D: jour du mois
• E: jour de la semaine
• A: AM/PM
• J: heure (0-23)
• H: heure (1-24)
• K: heure (0-11, à utiliser avec AM/PM)
• L: heure (1-12, à utiliser avec AM/PM)
• N: minute
• S: seconde

Les valeurs Y, M, D et E proposent des résultats différents lorsqu'ils sont groupés. Par exemple YY retourne l'année sur 2 caractères (08 pour 2008 par exemple) tandis que YYYY retourne l'année sur 4 caractères (2008). Comme autre exemple, on peut prendre M/D/YYYY qui affiche 1/2/2010 pour le 2 Janvier 2010 alors que MM/DD/YYYY affiche 01/02/2010. M et E donnent aussi les abréviations et les noms complets des mois et jour de la semaine quand ils sont utilisés par groupes de trois ou quatre. Par exemple, MMM va afficher Jan., et MMMM va afficher January. Vous pouvez utiliser n'importe quel autre caractère pour la valeur de formatString, qui seront interprétés littéralement.

L'exemple suivant illustre la manière dont on peut créer un DateFormatter en MXML:

<?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 = dateVal.validate();
                if (vResult.type==ValidationResultEvent.VALID) {
                    formattedDate.text=dateFormatter.format(dob.text);
                }

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

    <mx:DateFormatter id="dateFormatter" formatString="mois: MM, jour: DD, année: YYYY"/>

    <mx:DateValidator id="dateVal" source="{dob}" property="text" inputFormat="mm/dd/yyyy"/>

    <mx:Panel title="Exemple de DateFormatter " width="95%" height="95%"
            paddingTop="10" paddingLeft="5" paddingRight="5" paddingBottom="10">

        <mx:Form width="100%">
            <mx:FormItem label="Entrer une date (mm/dd/yyyy):" width="100%">
                <mx:TextInput id="dob" text=""/>
            </mx:FormItem>

            <mx:FormItem label="Date Formatée: " width="100%">
                <mx:TextInput id="formattedDate" text="" 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