The way applications present dates, times, and currencies varies greatly for each locale. For example, the U.S. standard for representing dates is month/day/year, whereas the European standard for representing dates is day/month/year. One of the more common uses of resource bundles is to provide the formatting values for times, dates, and currencies. You can use values in the resource bundles to set properties on Flex controls such as the DateFormatter and CurrencyFormatter.
The following properties file sets the values that the DateFormatter and CurrencyFormatter will use for the en_US locale:
# 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=.
For the Spanish locale, the properties file might appear as follows:
# locale/es_ES/FormattingValues.properties THEMECOLOR=0xFF0000 DATE_FORMAT=DD/MM/YY TIME_FORMAT=HH:NN CURRENCY_PRECISION=2 CURRENCY_SYMBOL=�?� THOUSANDS_SEPARATOR=. DECIMAL_SEPARATOR=,
The following example uses these resources to set up the formatters.
<?xml version="1.0"?>
<!-- l10n/FormattingExample.mxml -->
<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 = [ "es_ES","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>
The executing SWF file for the previous example is shown below: