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/
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