Article written the 27/07/2007 10:26.
By iteratif ( Bugalotto Olivier ).

These resources allow you to create applications which are configured according to the location and language of the execution environment.

To make a localised application we need to define one or many files with the .properties extension which contain the data to display. These files store the data in key = value format as in the following example:

// resources.properties
titleContact=Contact
fieldName=Surname
fieldFName=Name
fieldEmail=Email
labelBtnSave=Save
labelBtnCancel=Cancel

These files will be entered into the SWF file as a result of compiling your project.

We place the resource files in a folder named locale at the root level of the project that contains another folder called en_EN (language underscore county):

This locale file therefore needs to be included in the project:

By default there is one -locale argument en_US, in this case we indicate the choice of the language and the country and we add the command line -source-path+=locale\{locale\} to tell the compiler where to find the resource files. You will have noticed that the value in brackets corresponds to that of the first argument.

Let’s create the project Flex ResourceBundleMXML in which we will use the metadata @Resource:

// File ResourceBundleMXML.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
	<mx:Style source="styles.css" />
 
       	<!-- 
	bundle 	corresponds to the name of the resource file 
	key	name of the key
	-->
	<mx:Panel title="@Resource(bundle='i18n',key='titleContact')" 
		width="314" height="183"
		layout="absolute"
		titleIcon="@Embed('assets/addressbook2.png')">
		<mx:Form styleName="frmContact" left="10" right="10" top="10" bottom="10">
			<mx:FormItem label="@Resource(bundle='i18n',key='fieldName')" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="@Resource(bundle='i18n',key='fieldFName')" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="@Resource(bundle='i18n',key='fieldEmail')" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="42" y="128" horizontalAlign="right">
			<mx:Button label="@Resource(bundle='i18n',key='labelBtnSave')"/>
			<mx:Button label="@Resource(bundle='i18n',key='labelBtnCancel')"/>
		</mx:ControlBar>
	</mx:Panel>
 
</mx:Application>

We can do the same thing with Actionscript by using the metadata ResourceBundle and the class of the same name which gives us:

note: i18n is an abbreviation of the word internationalisation

// File ResourceBundleAS3.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
 
	<mx:Style source="styles.css" />
 
	<mx:Script>
		<![CDATA[
			import mx.resources.ResourceBundle;
 
			[Bindable]
			[ResourceBundle("i18n")]
			private var i18n:ResourceBundle;
 
			// Execute after the creation of the panel
			private function onCreatePanel():void {
				pnlContact.title = i18n.getString("titleContact");	
			}
		]]>
	</mx:Script>
 
	<mx:Panel id="pnlContact" width="314" height="183" layout="absolute"
		titleIcon="@Embed('assets/addressbook2.png')" creationComplete="onCreatePanel()">
		<mx:Form styleName="frmContact" left="10" right="10" top="10" bottom="10">
			<mx:FormItem label="{i18n.getString('fieldName')}" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="{i18n.getString('fieldFName')}" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
			<mx:FormItem label="{i18n.getString('fieldEmail')}" width="100%">
				<mx:TextInput width="100%"/>
			</mx:FormItem>
		</mx:Form>
		<mx:ControlBar height="42" y="128" horizontalAlign="right">
			<mx:Button label="{i18n.getString('labelBtnSave')}"/>
			<mx:Button label="{i18n.getString('labelBtnCancel')}"/>
		</mx:ControlBar>
	</mx:Panel>
 
</mx:Application>
</xml>

We can therefore use the ResourceBundle to translate Flex components in whatever language we wish. Let’s take the case of the DateChooser component (Calendar). This component has an ensemble of properties allowing us to modify and label days (dayNames) and months (monthNames). Let’s create a resource file (properties file):

//components.properties
dayNames=D,L,M,M,J,V,S
monthNames=January, February, March, April, May, June, July, August, September, October, November, December
formatString=DD/MM/YYYY

These properties dayNames and monthNames need an array, as well as a getArrayString() method of the ResourceBundle allowing us to return an array:

// File ComponentResourceBundle.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Script>
		<![CDATA[
			import mx.resources.ResourceBundle;
 
			[Bindable]
			[ResourceBundle("components")]
			private var i18n:ResourceBundle;
		]]>
	</mx:Script>
	<mx:DateField dayNames="{i18n.getStringArray('dayNames')}"
		monthNames="{i18n.getStringArray('monthNames')}"
		formatString="{i18n.getString('formatString')}"/>
	<mx:DateChooser dayNames="{i18n.getStringArray('dayNames')}"
		monthNames="{i18n.getStringArray('monthNames')}" />
</mx:Application>

If your projects are often destined (from a geographical point of view) to a French audience for example, it would be better to not translate each component choice. It is better to just indicate it in the locale command of the compiler by choosing fr_FR.

It is for this reason that we will create a compiled component (swc) which will contain all the file resources.

Let’s create a flex library project that we will call framework_rb and let’s place in it the previous resource file. We will indicate to the project the resource files to include with the following command line option:

-include-resource-bundles nameOfFileProperties

In our case :

note: the name of the resource File without its extension.

We get the framework_rb.swc File in the bin folder. We now need to add the ComponentResourceBundle component to our project:

In the following code:

C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\locale\en_US

there are numerous resource files which contain properties by default for all of the Flex components. You just need to create a project in the Flex library as before and to include these files translated into the language of your choice. After having obtained the compiler file (.swc), create a fr_FR folder in the folder indicated above and add the compiled component (swc) to it.

For all your future projects now you will just need to modify the following command option to the folder name of your choice of language:

In version 3 of Flex we can work dynamically with resources which will allow the user to choose the language of the application on execution. I will talk about this in a future tutorial but meanwhile you can find the source code of this tutorial here: ResourceBundle

By ITERATIF - BUGALOTTO Olivier (copyright 2007) You can find this tutorial and its comments on my flex forum