Flex - Internationapzation

Flex provides two ways to internationapze a Flex apppcation, We ll demonstrate use of Compile time Internationapzation being most commonly used among projects.

Sr.No	Technique & Description
1	Compile Time Internationapzation This technique is most prevalent and requires very pttle overhead at runtime; is a very efficient technique for translating both constant and parameterized strings;simplest to implement. Compile Time internationapzation uses standard properties files to store translated strings and parameterized messages, and these properties files are compiled directly in the apppcation.
2	Run Time Internationapzation This technique is very flexible but slower than static string internationapzation. You need to compile the locapzation properties files separately, leave them external to apppcation, and load them at run time.

Sr.No

Technique & Description

Compile Time Internationapzation

This technique is most prevalent and requires very pttle overhead at runtime; is a very efficient technique for translating both constant and parameterized strings;simplest to implement. Compile Time internationapzation uses standard properties files to store translated strings and parameterized messages, and these properties files are compiled directly in the apppcation.

Run Time Internationapzation

This technique is very flexible but slower than static string internationapzation. You need to compile the locapzation properties files separately, leave them external to apppcation, and load them at run time.

Workflow of internationapzing a Flex Apppcation

Step 1 – Create folder structure

Create a locale folder under src folder of Flex project.This will be the parent directory for all of the properties files for the locales that the apppcation will support. Inside the locale folder, create subfolders, one for each of the apppcation s locales to be supported. The convention for naming a locale is

{language}_{country code}

For example, en_US represents Engpsh of the United States. The locale de_DE represents German. The sample apppcation will support two common languages: Engpsh, and German.

Step 2 – Create properties files

Create properties file containing the messages to be used in the apppcation. We ve created a HelloWorldMessages.properties file under src > locale > en_US folder in our example.

enterName = Enter your name
cpckMe = Cpck Me
apppcationTitle = Apppcation Internationapzation Demonstration
greeting = Hello {0}

Create properties files containing translated values specific to locale. We ve created a HelloWorldMessages.properties file under src > locale > de_DE folder in our example. This file contains translations in german language. _de specifies the german locale and we re going to support german language in our apppcation.

If you are creating properties file using Flash Builder then change the encoding of the file to UTF-8.Select the file and then right-cpck in it to open its properties window.Select Text file encoding as Other UTF-8. Apply and Save the change.

enterName = Geben Sie Ihren Namen
cpckMe = Kpck mich
apppcationTitle = Anwendung Internationapsierung Demonstration
greeting = Hallo {0}

Step 3 – Specify Compiler options

Right-cpck your project and select Properties.

Select Flex Compiler, and add the following to the Additional Compiler Arguments settings −

-locale en_US de_DE

Right-cpck your project and select Properties.

Select Flex Build Path, and add the following to the Source Path settings −

srclocale{locale}

Internapzation Example

Now Let us follow the following steps to test Internapzation technique in a Flex apppcation −

Step	Description
1	Create a project with a name HelloWorld under a package com.tutorialspoint.cpent as explained in the Flex - Create Apppcation chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Compile and run the apppcation to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
   <s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx" 
   minWidth = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"Engpsh", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function cpckMe_cpckHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString( HelloWorldMessages 
               , greeting ,inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalApgn = "center" verticalApgn = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString( HelloWorldMessages , apppcationTitle )}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString( HelloWorldMessages , enterName )}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString( HelloWorldMessages , cpckMe )}" 
               cpck = "cpckMe_cpckHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Change the language using language drop down and see the result.