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.

About these ads

This entry was posted in flex, i18n, internationalization, localization. Bookmark the permalink.