Wednesday, July 14, 2010

Internationalization in Flex

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.

SOURCE:http://flexme.wordpress.com/2007/07/11/internationalization-in-flex/

No comments:

Post a Comment