Multiple Language Support-SDK 4.0

Flex 3 / Flex 4 allow switching among multiple languages in flex application.

Here I explain how this makes possible in a flex application using sdk ver. 4.0.

The following steps need to be followed.

·         Step 1: Add unsupported locale in the folder structure.

·         Step 2: Creating my-resources, a flex project

·         Step 3: Creating my-application, a flex project

So let us build a small flex application, from which we can switch from US English to French at run time and vise-versa.  

For the purpose of this exercise, we create an assumption that the language switching is implemented in the main application while the contents are coming from the project library.

Step 1: Add unsupported locale in the folder structure.

By default flex sdk ver. 3.0 supports the resources US English (en_US), Japanese (ja_JP).These 2 are already configured. We are trying to add a new language resource French (fr_FR).

For this the flex framework needs to be configured to recognize the locale.

·         First go to the command prompt.

·         Then change the directory to {Flex SDK Path}     (for e.g.: C:\Program Files\Adobe\Flash Builder4\Adobe Flash Builder 4\sdks\4.0.0\bin).

·         Then execute the command copylocale en_US fr_FR

·         Refer the following image.

'copylocale' command execution
                             

Step 2: Creating my-resources, a flex project

We are creating this project in terms of reusable scenario. Now create a project named my-resources in your default flex workspace. So we can refer this common project via ‘${DOCUMENTS}/my-resources’.

·         Add the folders ‘locale’, ’en_US’ and ‘fr_FR’ as shown in the following image.

Resource project folder structure                                                                   

·         Add ‘resources.properties’ file in both folders ’en_US’ and ‘fr_FR’ as shown in the above image.


·         Copy the following code & paste to the file {Flex local folder path} \locale\en_US\ resources.properties. 

      # ${DOCUMENTS}/my-resources/locale/en_US/resources.properties

      ENGLISH=English

      FRENCH=French – Français

      TEXT=Let's switch languages!

      SELECT_LANGUAGE=Select a language 

·         Copy the following code & paste to the file {Flex local folder path} \locale\fr_FR\ resources.properties. 

      # ${DOCUMENTS}/my-resources/locale/fr_FR/resources.properties

      ENGLISH=Anglais - English

      FRENCH=Français

      TEXT=Changeons de langue !

      SELECT_LANGUAGE=Choisissez une langue

Step 3: Creating my-application, a flex project

Creating a new flex project in flash builder 

·         Create a Flex project named ‘my-application’.
·         Then select the properties of the project ‘my-application’.
·         Select the option ‘Flex Build Path’.
·         Select the tab ‘Source path’.
·         Click Add Folder…
·         Paste the line to the text area “ ${DOCUMENTS}/my-resources/locale/{locale} “
       and click OK. 

Property window 

·         Then set the additional compiler arguments for the main project.
·         Select the properties of the project ‘my-application’.
·         Select the option ‘Flex Compiler’.
·         Replace the Additional compiler arguments with the following string 
       “-locale=en_US,fr_FR -include-resource-bundles resources “ 
       and click Apply then OK.

Adding additional compiler arguments. 

·         Edit the main mxml file (here it is ‘MyApplication.mxml’).

my-application folder structure. 

·         Replace its content by the following code.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                     xmlns:s="library://ns.adobe.com/flex/spark"

                     xmlns:mx="library://ns.adobe.com/flex/mx"

                     minWidth="955"

                     minHeight="600"

                     creationComplete="handleCreationComplete()">

      <fx:Declarations>

          <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

      <fx:Metadata>

            [ResourceBundle("resources")]

      </fx:Metadata>

      <fx:Script>

            <![CDATA[

                  import mx.controls.Alert;

                  private const en_US:String="en_US";

                  private const fr_FR:String="fr_FR";

                  [Bindable]

                  private var locales:Array=[{label: "English", code: "en_US"}, {label: "Français", code: "fr_FR"}]; 

                  private function handleCreationComplete():void

                  {

                        localeComboBox.selectedIndex=0;

                  }

                  private function changeHandler(event:Event):void

                  {

                    resourceManager.localeChain=localeComboBox.selectedItem.code];

                  }

            ]]>

      </fx:Script>

 <s:HGroup horizontalAlign="center"

           verticalAlign="middle"

           width="100%">

 <s:Label text="{resourceManager.getString('resources','SELECT_LANGUAGE')}:-"/>

      <mx:ComboBox id="localeComboBox"

                   dataProvider="{locales}"

                   change="changeHandler(event)"/>

  </s:HGroup>

</s:Application>

·         Now we created a flex project (using sdk 4) which can switch among multiple languages.

If you need this as single unit (project), follow the steps below

Execute Step 1.

Then directly go to Step 3.

my-application folder structure (single unit case).        

·         Create a Flex project named ‘my-application’.
·         Add folders ‘locale’,’en_US’ & ‘fr_FR’.
·         Add ‘resources.properties’ file in both folders ’en_US’ and ‘fr_FR’ 
       as shown in the above image.
·         Copy the following code & paste to the file {Flex local folder path} \locale\en_US\ resources.properties. 

      # ${DOCUMENTS}/my-resources/locale/en_US/resources.properties

      ENGLISH=English

      FRENCH=French – Français

      TEXT=Let's switch languages!

      SELECT_LANGUAGE=Select a language 

·         Copy the following code & paste to the file {Flex local folder path} \locale\fr_FR\ resources.properties. 

      # ${DOCUMENTS}/my-resources/locale/fr_FR/resources.properties

      ENGLISH=Anglais - English

      FRENCH=Français

      TEXT=Changeons de langue !

      SELECT_LANGUAGE=Choisissez une langue 

·         Then select the properties of the project ‘my-application’.
·         Select the option ‘Flex Build Path’.
·         Select the tab ‘Source path’.
·         Click Add Folder…
·         Paste the line to the text area “ locale/{locale} “ and click OK.

          

Follow remaining process in Step 3.