Yoann on flex

July 11, 2007

Internationalization in Flex

Filed under: Flex, i18, internationalization — yoyoann @ 3:18 pm

The flex site I am working on need internationalization. So of course I googled a bit and found some informations on how to use i18n in Flex. And the only really good answer I found was doing different builds using resources.

However I need i18n at runtime, it is something the client needs, and I don’t want the user to reload the whole flex app when he wishes to change language.

I googled a bit more and found a blog post that explained how to get this to work … But could understand anything :

http://jeff.mxdj.com/internationalizing_flex_2_apps_pt_2.htm

So I am doing here a doable tutorial :

  1. create a Flex project.
  2. create a locale directory at the flex root
  3. add -sp locale to your flex compile options (right click, properties, flex compiler with eclipse) to add it to classpath
  4. create a fra.properties and an eng.properties file in the locale directory
  5. in the fra.properties, add the line : hello=salut
  6. in the eng.properties, add the line : hello=hi
  7. now let’s get to the code

We create a singleton that will take care of all this.

package
{

import mx.resources.ResourceBundle;
import flash.events.Event; public class Localizator
{

public static const FRENCH:int = 1;
public static const ENGLISH:int = 2; protected static var myLocalizator:Localizator;

[Bindable]
private var cur:ResourceBundle;

[ResourceBundle("eng")]
private var rb_eng:ResourceBundle;
[ResourceBundle("fra")]
private var rb_fra:ResourceBundle;

private var _lang:int;

public function Localizator (language:int=ENGLISH){

selectLang( language );

}

private function selectLang( language:int ) : void{

this._lang = language;
switch ( language ) {
case ENGLISH :

this.cur = rb_eng;
break;

case FRENCH :

this.cur = rb_fra;
break;

default :

this._lang = Localizator.ENGLISH;
this.cur = rb_eng;
break;

}

}

public static function getInstance (language:int) : Localizator {

if( Localizator.myLocalizator == null ){

Localizator.myLocalizator = new Localizator(language);

}
return Localizator.myLocalizator;

}

[Bindable(event="langChange")]
public function getText( key:String ) : String {

return this.cur.getString( key );

}

/**
* Shortcut for getText
*/
[Bindable(event="langChange")]
public function gT( key:String ) : String {

return this.getText(key);

}

public function get lang () : int {

return this._lang;

}

public function set lang ( language:int ) : void {

if( this._lang != language ){

this.selectLang( language );
var e:Event = new Event(“langChange”);
this.dispatchEvent(e);

}

}

}

}

You can now create a file, and for example add a lable with text=”{Localizatior.getInstance().gT(‘hello’)}” and a button that will change the language of the localizator.

This example is pretty dirty but adapt it to match your needs and you should have an easy way to have an international app.

15 Comments »

  1. for encoding problems :
    http://viconflex.blogspot.com/2006/09/resourcebundle-files-in-localized-flex.html

    Comment by yoyoann — July 11, 2007 @ 3:55 pm

  2. Thanks for the great i18n example. I implemented the UI using radio buttons and it works fine.

    I have two separate files: Localizer.as and Localization.mxml, both located inside the same Flex Builder 2 project. How would I go about dynamically passing the locale property files to Localizer.as, to be able to reuse this class?

    Thanks for your help.

    Comment by gers32 — July 31, 2007 @ 9:34 am

  3. Thanks so much for posting this class. I was trying to do this all using the original method from Jeff and it worked with my main mxml application but getting the localization to work in custom components, especially components that were created at runtime, was not working. Creating the singleton class and then using a bindable, private variable in each of the components to access the singleton worked perfectly.

    Thanks again,
    David

    Comment by David Ethell — August 7, 2007 @ 5:43 pm

  4. At my company we’re doing some R&D on Flex at the moment and Internationalization is an important issue in an upcoming application. Thanks for doing this post – it provided some much needed information. I extended the example to include Internationalization support for components directly without having to call a translation method explicitly:

    I haven’t managed to work out how to get the text to retranslate when the user changes the application language though…Flex’s event model is still a bit of a black art to me.

    Comment by David Bates — August 31, 2007 @ 8:01 am

  5. Hi Yoann,

    I tried your tutorial but I got some errors. One of them is: Unable to resolve a class for ResourceBundle: containers. I’m wondering if I put the locale directory at the wrong place. Do you know what should I do tho fix it?

    Comment by Mellisa — September 26, 2007 @ 7:39 am

  6. Mellisa, try to add -locale en_US to your flex compiler line (if it is not already present). Let me know the result, and if it doesn’t work, can you give me the options you use with the flex compiler ?

    Comment by yoyoann — September 26, 2007 @ 8:30 am

  7. Thanks for an article, very interesting approach to the dynamic locale switching.
    Any ideas on dates and (possibly) number conversion?

    Comment by Ruslan N. Balkin — October 4, 2007 @ 7:18 am

  8. It’s been around 2 months I have not used Flex, and since I don’t use the sources, I don’t have an example with me, but I will try to remember how I managed dates.

    The w

    Comment by yoyoann — October 5, 2007 @ 6:46 am

  9. If I remember correclty what I did to handle dates (and I dunno if it is considered as a clean way to do this, maybe checking some java versions you can find some clues on better architecture) :

    In each .property, I had various entries for dates, for example :
    date.long=dd mmmm yyyy (not sure about the codes I should use, check on the doc)
    date.short=dd/mm/yy

    along with this, I had the lettered version of days and months :
    date.monday=monday
    date.january=janvier

    Then I had various getDate functions such as getShortDate(year,month,day) that would fetch the correct format in the .property. However I cannot remember how I was dealing with long days and months, I think a Flex built-in function allow you to change the default version for days and months … I don’t use Flex anymore (job is over) and I don’t have the sources of the old project so I can’t check, sorry.

    If you have some luck with this, do not hesitate to post some suggestions. Also if someone want to host this example (and/or to modify it and enhance it) on its own blog, go ahead : not using Flex anymore, this article seems to drain some people in there, but I am unable to provide some good answers, and it would be more useful in an active blog.

    Comment by yoyoann — October 5, 2007 @ 6:55 am

  10. Hi Yoann,

    It works fine for translating word without space but then when I tried on two words (e.g. send feedback) it throws some error saying “the word was not found in resource bundle eng”. I use Flex 3 beta 2. It works fine in Flex 3 beta 1 though.

    Any ideas?

    Comment by Mellisa — November 1, 2007 @ 7:10 am

  11. Great posinting thanks…

    Comment by Posin — November 30, 2007 @ 6:28 am

  12. Great postings thanks

    http://flex.posintech.com

    Comment by Flex Development India — December 17, 2007 @ 11:47 am

  13. Thanks good coding using flex.
    thanks

    Comment by Flex Development India — December 17, 2007 @ 11:48 am

  14. Thanks yoyoann. Nice post. Thanks for sharing.

    Comment by Tarandeep — January 16, 2008 @ 6:17 pm

  15. No matter how many tutorials I read about translating my website, I never got it. After months of researching I found a site called conversisglobal.com. There work in a fast past manner and are affordable.

    (comment from yoyoann: This message has been published by someone that has an email adress at conversisglobal.com, I keep it there because there may be some interesting options on this website -I have absolutely no time to check it- but I want people to know about this)

    Comment by Ginger Sullivan — January 18, 2008 @ 1:40 am


RSS feed for comments on this post. TrackBack URI

Leave a comment

Blog at WordPress.com.