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 🙂
Posted by Sujit Reddy G 
Sujit Reddy G - The Evangelist 