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

Flex Localization – Formatter des dates, temps et unités suivant la locale

La façon d'afficher les dates, temps ou les devises varient grandement pour chaque locale. Par exemple, le standard américain pour représenter les dates est mois/jour/année, alors que le standard en Europe et donc en France est plutôt jour/mois/année. Vous pouvez utiliser les Resource Bundles pour formater des valeurs (en utilisant les Formatter Flex). Vous pouvez utiliser les valeurs contenues dans les Resource Bundles pour fixer les propriétés des composants Flex comme le DateFormatter ou le CurrencyFormatter.

De base, le framework Flex utilise des valeurs formatées  au standard US. Si vous avez une application en Français, il faut donc modifier les propriétés des composants. Vous pouvez le faire directement si vous êtes sûr que votre application ne sera utilisée que par un public Européen. Si vous voulez créer une application multi-langue, les Resource Bundles conviendront parfaitement.

Voici par exemple, les fichiers utilisés pour configurer des DateFormatter et CurrencyFormatter pour les locales en_US et fr_FR:

# locale/en_US/FormattingValues.properties
THEMECOLOR=0x0000FF
DATE_FORMAT=MM/DD/YY
TIME_FORMAT=L:NN A
CURRENCY_PRECISION=2
CURRENCY_SYMBOL=$
THOUSANDS_SEPARATOR=,
DECIMAL_SEPARATOR=.

# locale/fr_FR/FormattingValues.properties
THEMECOLOR=0xFF0000
DATE_FORMAT=DD/MM/YY
TIME_FORMAT=HH:NN
CURRENCY_PRECISION=2
CURRENCY_SYMBOL=€
THOUSANDS_SEPARATOR=.
DECIMAL_SEPARATOR=,

Et voici l'application qui utilise ces Formatter spécialisés suivant la langue:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp(event)"
	themeColor="{resourceManager.getUint('FormattingValues', 'THEMECOLOR')}">
    <mx:Script><![CDATA[
        import mx.resources.ResourceBundle;

        [Bindable]
        private var locales:Array = [ "fr_FR","en_US" ];

        [Bindable]
        private var dateValue:String;
        [Bindable]
        private var timeValue:String;
        [Bindable]
        private var currencyValue:String;           

        private var d:Date = new Date();

        private function initApp(e:Event):void {
            localeComboBox.selectedIndex = locales.indexOf(resourceManager.localeChain[0]);
            applyFormats(e);            

            // Updating the localeChain does not reapply formatters. As a result, you must
            // apply them whenever the ResourceManager's change event is triggered.
            resourceManager.addEventListener(Event.CHANGE, applyFormats);
        }

        private function comboChangeHandler():void {
            // Changing the localeChain property triggers a change event, so the
            // applyFormats() method will be called whenever you select a new locale.
            resourceManager.localeChain = [ localeComboBox.selectedItem ];
        }

        private function applyFormats(e:Event):void {
            dateValue = dateFormatter.format(d);
            timeValue = timeFormatter.format(d);
            currencyValue = currencyFormatter.format(1000);
        }
    ]]></mx:Script>

    <mx:Metadata>
        [ResourceBundle("FormattingValues")]
    </mx:Metadata> 

    <mx:ComboBox id="localeComboBox"
        dataProvider="{locales}"
        change="comboChangeHandler()"
    />
    <mx:DateFormatter id="dateFormatter"
        formatString="{resourceManager.getString('FormattingValues', 'DATE_FORMAT')}"
    />
    <mx:DateFormatter id="timeFormatter"
        formatString="{resourceManager.getString('FormattingValues', 'TIME_FORMAT')}"
    />
    <mx:CurrencyFormatter id="currencyFormatter"
        precision="{resourceManager.getInt('FormattingValues', 'CURRENCY_PRECISION')}"
        currencySymbol="{resourceManager.getString('FormattingValues', 'CURRENCY_SYMBOL')}"
        thousandsSeparatorTo="{resourceManager.getString('FormattingValues', 'THOUSANDS_SEPARATOR')}"
        decimalSeparatorTo="{resourceManager.getString('FormattingValues', 'DECIMAL_SEPARATOR')}"
    />
    <mx:Form>
        <mx:FormItem label="Date">
            <mx:TextInput id="ti1" text="{dateValue}"/>
        </mx:FormItem>
        <mx:FormItem label="Time">
            <mx:TextInput text="{timeValue}"/>
        </mx:FormItem>
        <mx:FormItem label="Currency">
            <mx:TextInput text="{currencyValue}"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

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

Si vous avez des problèmes avec les caractères accentués (ou le signe euro par exemple qui ne passera pas de base), consultez cet article:

Flex Tips - Insérer des caractères accentués dans un Resource Bundle (bug d'encodage)