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

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

xmlns:mx=”library://ns.adobe.com/flex/mx“>

<s:layout>

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

</s:layout>

<fx:Declarations>

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

</fx:Declarations>

<fx:Style>

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

.flagStyle
{

skin: ClassReference(null);

}

</fx:Style>

<fx:Metadata>

[ResourceBundle(“localization”)]

</fx:Metadata>

<fx:Script>

<!–[CDATA[–>

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”];

}

]]>

</fx:Script>

<s:Label id=”label

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

textAlign=”right” verticalAlign=”middle/>

LinkButton id=”btn_En

icon=”{EmbeddedItemsStorage.EN_US_FLAG}

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

icon=”{EmbeddedItemsStorage.RU_FLAG}

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

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

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

</s:Group>

Comment:

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
[Embed(source=“/assets/flags/Ru_flag_32x32.png”)]
public static const RU_FLAG: Class;

[Embed(source=“/assets/flags/US_flag_32x32.png”)]
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:
ENGLISH=English
RUSSIAN=Russian
MENU_MONETARY_TRANSACTIONS=Monetary transactions
MENU_TIME=Time

# locale/ru_RU/localization.properties
LANGS_PICKER_LABEL=Выберите язык:
ENGLISH=Английский
RUSSIAN=Русский
MENU_MONETARY_TRANSACTIONS=Денежные операции
MENU_TIME=Время

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));

}

Comment:

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

dataProvider=”{this.dpToggleBtnBar}

itemClick=”toggleBtnBar_itemClickHandler(event)”

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’);

arr.addItem(money);

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

arr.addItem(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

Flex4 ToggleButtonBar with icons. Switching between states using ToggleButtonBar.

Example for Flash Builder.

ToggleButtonBar contains Home and Downloads buttons (img. 1 and img. 2) which should present icons and allow to switch between states.

This slideshow requires JavaScript.

<s:states>

<s:State name=”HomeState/>

<s:State name=”DownloadsState/>

</s:states>

<fx:Script>
<!–[CDATA[–>

import mx.events.ItemClickEvent;

protected function toggleBtnBar_itemClickHandler(event:ItemClickEvent):void
{

this.currentState = event.item.data;

}

]]>
</fx:Script>

<fx:Declarations>

<!– Place non-visual elements (e.g., services, value objects) here –>
<fx:Array id=”menuDataProvider”>

<fx:Object data=”HomeState

label=”Home

icon=”@Embed(source=’/assets/menu_icons/home.png’)/>

<fx:Object data=”DownloadsState

label=”Downloads

icon=”@Embed(source=’/assets/menu_icons/downloads.png’)/>

</fx:Array>

</fx:Declarations>

ToggleButtonBar id=”toggleBtnBar

iconField=”icon”

dataProvider=”{menuDataProvider}

itemClick=”toggleBtnBar_itemClickHandler(event)” />

Flex4 ToggleButtonBar c иконками. Переключение состояний при помощи ToggleButtonBar.

Пример для Flash Builder.

ToggleButtonBar будет содержать 2 кнопки – Home и Downloads (рис. 1 и рис. 2), которые должны отображать соответствующую иконку и переключаться между состояниями.

Рис. 1 - Пример HomeState

Рис. 2 - Пример DownloadsState

<s:states>

<s:State name=“HomeState”/>

<s:State name=“DownloadsState”/>

</s:states>

<fx:Script>
<!–[CDATA[–>

import mx.events.ItemClickEvent;

protected function toggleBtnBar_itemClickHandler(event:ItemClickEvent):void
{

this.currentState = event.item.data;

}

]]>
</fx:Script>

<fx:Declarations>

<!– Place non-visual elements (e.g., services, value objects) here –>
<fx:Array id=”menuDataProvider”>

<fx:Object data=”HomeState

label=”Home

icon=”@Embed(source=’/assets/menu_icons/home.png’)/>

<fx:Object data=”DownloadsState

label=”Downloads

icon=”@Embed(source=’/assets/menu_icons/downloads.png’)/>

</fx:Array>

</fx:Declarations>

<mx:ToggleButtonBar id=”toggleBtnBar

iconField=”icon

dataProvider=”{menuDataProvider}

itemClick=”toggleBtnBar_itemClickHandler(event)” />