Localizing Flex Applications

Localizing a Flex application is very simple. All we need to do is to create resource bundles for different languages and then use the ResourceManager class provided by the Flex API to get the resources. Just changing the locale of the resource manager will reflect changes in the entire application with the values from the new locale’s resource bundle.

Creating assets can be done in two ways. One is to create resource bundles, which will be compiled into the application SWF or create resource modules, which are resource bundles compiled as swfs which will not be compiled into the application SWF. If the resource bundles are created as resource modules, you can load them on runtime using the loadResourceModule()method of the resourceManager.

resourceManager is the instance of the ResourceManager class, included in the UIComponent class. If your class is not extending UIComponent then you can get the instance of the ResourceManager using ResourceManager.getInstance().

Sample application

Sample application is a registration form which supports two locales. I created resource bundles and accessed them using resourceManager property of the UIComponent class.

Creating Resource Bundles

All the resource bundles have to be created in one parent folder. Under this parent folder there should be one separate folder containing resource bundles for each locale. For example if I want to support two locales (en_US and en_ES) in my application and I my parent folder is named as “Locales”, then I might have following folders.

Locales/en_US

Locales/en_ES

These two folders have to be added to the application source path. Create two properties files named WelcomePage.properties and place them in the two folders. The properties files have to be in UTF-8 format. Modify the WelcomePage.properties files as shown below.

en_US/WelcomePage.properties

welcome_title_text=Welcome, select your locale and register

form_first_name_text=First Name

form_second_name_text=Last Name

form_gender_text=Gender

form_gender_list_male_text=Male

form_gender_list_female_text=Female

form_company_text=Company

form_designation_text=Designation

form_description_text=About yourself

form_register_text=Register

form_response_text=Registration Successful

select_locale_text=Change Locale

en_ES/WelcomePage.properties

welcome_title_text=Bienvenido, seleccione la opción y registro

form_first_name_text=Nombre

form_second_name_text=Apellido

form_gender_text=Género

form_gender_list_male_text=Hombre

form_gender_list_female_text=Mujeres

form_company_text=Compañía

form_designation_text=Designación

form_description_text=Acerca de ti

form_register_text=Registro

form_response_text=El éxito de Registro

select_locale_text=Cambiar Locale

Adding Locales

Add the locale to the compiler options.

-locale=en_US,en_ES

When adding other locales, you must also include the framework resources for that locale. The en_US locale is already provided. For all other locales, you must create the framework resources. To create a locale’s framework resources, use the copylocale utility in the /sdk/bin directory. For Flex Builder, the copylocale utility is located in flex_builder_install/sdks/3.0.0/bin. You can only execute this utility from the command line.

For example, to create the framework locale files for the es_ES locale, use the following command:

copylocale en_US en_ES

Using the Resource Manager to retrieve the resources

Below is the MXML file in which we use the ResourceManager to retrieve the locale specific resources. This application provides a combo box, using which you can change your locale preference. When the locale preference is changed, the application reflects the changes.

MXML file

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.controls.Alert;

import mx.resources.ResourceBundle;

[Bindable]

private var locales:Array = [{data:"en_US", label:"English"}, {data:"en_ES", label:"Spanish"}];

private function changeLocale():void

{

resourceManager.localeChain =[currentLocale.selectedItem.data];

genderList.dataProvider = listValues;

}

private function register():void

{

Alert.show(resourceManager.getString(‘WelcomePage’, ‘form_response_text’));

}

]]>

</mx:Script>

<mx:Metadata>

[ResourceBundle("WelcomePage")]

</mx:Metadata>

<mx:Array id=”listValues”>

<mx:String>{resourceManager.getString(‘WelcomePage’, ‘form_gender_list_male_text’)}</mx:String>

<mx:String>{resourceManager.getString(‘WelcomePage’, ‘form_gender_list_female_text’)}</mx:String>

</mx:Array>

<mx:HBox horizontalAlign=”center” width=”100%”>

<mx:Label text=”{resourceManager.getString(‘WelcomePage’, ‘select_locale_text’)}” fontSize=”11″ fontWeight=”normal”/>

<mx:ComboBox id=”currentLocale” dataProvider=”{locales}” change=”changeLocale()”/>

</mx:HBox>

<mx:Label id=”welcomeLbl” text=”{resourceManager.getString(‘WelcomePage’, ‘welcome_title_text’)}” fontWeight=”bold” fontSize=”13″/>

<mx:Form id=”registrationForm”>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_first_name_text’)}”>

<mx:TextInput id=”firstNameTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_second_name_text’)}”>

<mx:TextInput id=”lastNameTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_gender_text’)}”>

<mx:ComboBox id=”genderList” dataProvider=”{listValues}”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_company_text’)}”>

<mx:TextInput id=”companyTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_designation_text’)}”>

<mx:TextInput id=”designationTxt”/>

</mx:FormItem>

<mx:FormItem label=”{resourceManager.getString(‘WelcomePage’, ‘form_description_text’)}”>

<mx:TextInput id=”descriptionTxt”/>

</mx:FormItem>

</mx:Form>

<mx:Button label=”{resourceManager.getString(‘WelcomePage’, ‘form_register_text’)}” click=”register();”/>

</mx:Application>

Try using the application. http://sujitreddy.g.googlepages.com/Localizing.swf