Flex 4 localization example.

At this post we will find out how to create a simple languages panel in a Flash Builder which will allow to switch between English and Russian languages. After clicking flag icon language of Label and toolTips should be changed (see img. 6).

Img. 1 - LanguagesPanel component

1. Create our localization files

Img. 2 - Example of location of languages files

2. Input data into each of localization.properties file. Text encoding of the files should be Unicode, UTF-8.

Img. 3 - Example of localization.properties file for English language
Img. 4 - Example of localization.properties file for Russian language

3. Modify properties of the project. In right-mouse menu choose Properties – > Flex Compiler.

Img. 5 - Flex Compiler properties

Set additional compiler arguments to:

-locale=ru_RU,en_US -source-path=locale/{locale} -allow-source-path-overlap=true

4. Create our component – LanguagesPicker.mxml.

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

<s:Group xmlns:fx=”http://ns.adobe.com/mxml/2009




HorizontalLayout verticalAlign=”middle” horizontalAlign=”right” gap=”5″/>



<!– Place non-visual elements (e.g., services, value objects) here –>
<mx:Glow id=”glowEffect” blurXTo=”1.25” blurYTo=”1.25 />



@namespace s “library://ns.adobe.com/flex/spark”;
@namespace mx “library://ns.adobe.com/flex/mx”;


skin: ClassReference(null);








import core.Constants;
import core.EmbeddedItemsStorage;
import events.ChangeEvent;
import mx.events.FlexEvent;
import mx.events.ListEvent;

protected function btn_En_clickHandler(event:MouseEvent):void

this.resourceManager.localeChain = [“en_US”];


protected function btn_Ru_clickHandler(event:MouseEvent):void

this.resourceManager.localeChain = [“ru_RU”];




<s:Label id=”label

text=”{resourceManager.getString(Constants.BUNDLE_NAME, ‘LANGS_PICKER_LABEL’)}

textAlign=”right” verticalAlign=”middle/>

LinkButton id=”btn_En


toolTip=”{resourceManager.getString(Constants.BUNDLE_NAME, ‘ENGLISH’)}

click=”btn_En_clickHandler(event)” mouseDownEffect=”{this.glowEffect}

styleName=”flagStyle” width=”32” height=”32/>

LinkButton id=”btn_Ru


toolTip=”{resourceManager.getString(Constants.BUNDLE_NAME, ‘RUSSIAN’)}

click=”btn_Ru_clickHandler(event)” mouseDownEffect=”{this.glowEffect}

styleName=”flagStyle” width=”32” height=”32/>



Please notice that in this example

1) bundleName was moved into Constants class

public class Constants

public static const BUNDLE_NAME: String = “localization”;


2) icons were embedded using EmbeddedItemsStorage class

public class EmbeddedItemsStorage

// Images
public static const RU_FLAG: Class;

public static const EN_US_FLAG: Class;


5. Run application and test results

Img. 6 - Example after switching to Russian language

Updating language for dataProvider of some component.

Let’s look at example when you need to update strings of ToggleButtonBar which is placed at your application component.

Img. 7 - ToggleButtonBar with English labels

1. Add new strings into localization.properties files

# locale/en_US/localization.properties
LANGS_PICKER_LABEL=Choose a language:

# locale/ru_RU/localization.properties

2. Modify LanguagesPicker.mxml to to send LANG_UPDATE event after localeChain changing.

protected function btn_En_clickHandler(event:MouseEvent):void

this.resourceManager.localeChain = [“en_US”];
this.dispatchEvent(new ChangeEvent(ChangeEvent.LANG_UPDATE));


protected function btn_Ru_clickHandler(event:MouseEvent):void

this.resourceManager.localeChain = [“ru_RU”];
this.dispatchEvent(new ChangeEvent(ChangeEvent.LANG_UPDATE));



ChangeEvent extends Event class and contains a constant for LanguageUpdate string.

public class ChangeEvent extends Event

public static const LANG_UPDATE: String = “LanguageUpdate”;

3. Place ToggleButtonBar component in your application mxml component and set its properties.

ToggleButtonBar id=”toggleBtnBar



maxHeight.MonetaryTransactions=”80″ maxHeight.HeaderMenu=”80″ maxHeight.TimeState=”80″/>

4. Define a getter for dataProvider of ToggleButtonBar component in ActionScript section of your application.

public function get dpToggleBtnBar():ArrayCollection

var arr: ArrayCollection = new ArrayCollection();

var money: Object = new Object();
money.data = “MonetaryTransactions”;
money.label = resourceManager.getString(Constants.BUNDLE_NAME, ‘MENU_MONETARY_TRANSACTIONS’);


var time: Object = new Object();
time.data = “TimeState”;
time.label = resourceManager.getString(Constants.BUNDLE_NAME, ‘MENU_TIME’);


return arr;


5. For you application add creationComplete event handler and add listener for LANG_UPDATE event of langsPicker component. When LANG_UPDATE event will be dispatched then you need to update dataProvider of ToggleButtonBar component.

protected function application_creationCompleteHandler(event:FlexEvent):void

this.langsPicker.addEventListener(ChangeEvent.LANG_UPDATE, this.updateStrings);


private function updateStrings(e: ChangeEvent):void

this.toggleBtnBar.dataProvider = this.dpToggleBtnBar;


6. Run your application and test results.

Img. 8 - ToggleButtonBar component with Russian labels

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s