Fun Localizing...

Posted by Mattias Sandström on March 29, 2009

Spent the day working in Adobe Flex and added two additional languages to the VirtualTester User Pages; Traditional and Simplified Chinese. If the system can be localized into these two languages, every language will work...

Before starting, make sure that you have set the default encoding of the files in the project to UTF-8! Even if you do not plan to add double-byte characters from the start, the files should be encoded as UTF-8 to make sure that you do not have to remake the project when adding Chinese, Japanese, Korean or any other double-byte language. In the properties window of the project the default project encoding can be configured.

When adding new languages to a Flex application, the first thing is to prepare the Flex framework for the new language with the copylocale <old language> <new language> command that creates the resources needed inside of the framework and copies strings for validators and date and time format.

When the framework has been prepared, the languages should be added to the project as separate directories with a ResourceManager compatible file ending in .properties in each. We refer to the ResourceManager as localization so we thus add files with the name of localization.properties:

After adding these directories it is time to tell the Flex Compiler where the resources may be found. This is done from the Project Properties page:

The additional compiler argument -locale tells the compile which languages to include in the built application and the -source-path argument gives information about the location of the ResourceManager file to use.

When the project has been setup it is time to add the localized content. The format of the properties-files is simple and looks like:

certTabLabel=证书
examTabLabel=考试结果
creditTabLabel=信用额 / 凭证码
prefsTabLabel=设置
logoutButton=登出
teamTabLabel=组信息
refreshButton=刷新

the identifier is to the left of the equal sign and the localized string is to the right. The tricky part here is to make sure that Flex Builder treats the encoding of the file correctly not to destroy the UTF-8 encoded characters. To make sure Flex Builder understands that the file is to be treated as UTF-8 it is suggested that the .properties file is created in Flex Builder and that the encoding is verified to be UTF-8. Once this is done, paste the localized strings into Flex Builder.

Using the ResourceManager to initialize the language you can then use the localized strings in ActionScript and the MXML-files as:

MXML-example:
<mx:Button id="btnRefresh"
    visible="{btnLogout.visible}"
    icon="@Embed(source='assets/images/arrow_refresh.png')"
    label="{resourceManager.getString('localization', 'refreshButton')}"
    height="22"
    click="btnRefresh_click(event)" />


ActionScript example:
if ((loginEmail.text == "") || (loginPassword.text == "")) {
    Alert.show(resourceManager.getString('localization', 'LOGIN_Empty'),
        resourceManager.getString('localization', 'LOGIN_FailureTitle'));
    return;
}

We want the user to be able to dynamically select a language from a drop-down menu:

When the language is changed, setting the localeChain property of the ResourceManager will make all localized strings enabled in the system. The localeChain command makes it possible to use a chained approach to the localization where the ResourceManager gets the languages in order of preference. It is thus a good idea to include the application’s native language in first in the array that is used to set the localeChain property to make sure all strings are available in English and then in the different language.

As the ResourceManager is bindable, setting the localeChain will change the language of the application instantaneously:

Working with Chinese we quickly understood that we needed to change the default sizes of text labels to make the characters readable. This added some additional work, but once completed we are now able to add more languages as they get back from the localizers in a snap.


--Mattias