Implementing localization/internationalization(i18n) in Flex


I spent yesterday and today morning understanding the intricacies of flex localization. There is considerable amount of Adobe documentation around the syntax and procedure for implementing localization. Unfortunately this documentation is not adequate for a first time localization implementer.


Just for reference, I continue to do my development using Flex Builder in Windows environment.
First set up the Flex Builder to handle internationalization(i18n). In case you have tried implementing i18n for say France using the Adobe documentation and tried running your sample, you would encounter the following error message:

"unable to open ‘C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\frameworks\locale\fr_FR’"

This would have been a dead-end for me but for the useful blog I found surfing the net.

Open a command prompt. Go to bin folder located within C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\bin. And run  the following command on the prompt.

copylocale en_US fr_FR

This command will create fr_FR folder within C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0\frameworks\locale\. Four files namely: airframework_rb.swc, automation_rb.swc,framework_rb.swc and rpc_rb.swc are created.
Now let’s move on implementing the i18n functionality in Flex Builder.
Create a new flex project. Within the project’s src folder create a sub-folder named locale. Within locale create two folders namely en_US and fr_FR. These sub-folders will have the property file named form.properties

Contents of form.properties file under the en_US sub-folder

firstname=First Name

Contents of form.properties file under the fr_FR sub-folder

firstname=Prénom
Here’s the sample Flex Application MXML to test the i18n functionality. The MXML is self-explanatory.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Metadata>
		[ResourceBundle("form")]
	</mx:Metadata>

	<mx:XMLList id="localeDD">
		<locale key="1" value="" />
		<locale key="2" value="English" />
		<locale key="3" value="French" />
	</mx:XMLList>
	<mx:Script>
		<![CDATA[
			private function setLocale():void {
				var selectedLocale:String = localeDropDown.selectedItem.@key;
				if ("1" == selectedLocale) {
					resourceManager.localeChain = ["en_US"];
				} else if ("2" == selectedLocale) {
					resourceManager.localeChain = ["en_US"];
				} else if ("3" == selectedLocale) {
					resourceManager.localeChain = ["fr_FR"];
				}
			}
		]]>
	</mx:Script>

	<mx:ComboBox id="localeDropDown" x="329" y="165" editable="true" enabled="true"
		dataProvider="{localeDD}" labelField="@value" change="setLocale()"/>
	<mx:Label x="225" y="167" text="Select Locale" color="#FFFFFF" fontWeight="bold" fontSize="13"/>
	<mx:TextInput x="329" y="195"/>
	<mx:Label x="238" y="196" text="{resourceManager.getString('form', 'firstname')}"
		color="#FFFFFF" fontWeight="bold" fontSize="13"/>

</mx:Application>
Before running the Flex application, open the Properties of the flex project. Select Flex Compiler item within the Properties window. It will provide a text input field titled “Additional Compiler Arguments”. Key in the following arguments:

-locale=en_US,fr_FR -source-path+=/locale/{locale}

Run the application, change the locale and observe the changes in the label display value.
Advertisements

8 thoughts on “Implementing localization/internationalization(i18n) in Flex

  1. The command line option did not work for me. Was getting some java runtime errors.
    I just went to the FLEX_HOME/frameworks/locale directory and just dulicated en_US. Then I renamed it to my locale (fr_FR).
    Worked fine 😉

  2. It will essentially be the folder in which Flex is installed for e.g. for me it is C:\Program Files\Adobe\Flex Builder 3\sdks\3.1.0

  3. Can anybody tell me that what changes will be required in pom.xml to build the module (through maven)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s