To localize styles, you can bind the value of the style property to a value from the resource bundle. For example, if the resource property file defines the value of a FONTCOLOR key (FONTCOLOR=0xFF0000), you can use it by binding its value to the style property in your application, as the following examples show:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" themeColor="{resourceManager.getUint('MyStyles', 'color')}">
If you are using the ResourceManager to reference the value in the resource bundle, then be sure to use the appropriate method. For example, if the value is a color like 0xFF0000, use the ResourceManager's getUint() method. If the value is a class, like a programmatic skin, then use the getClass() method.
For color styles, you must use hex notation (such as 0xFF0000) rather than the VGA color names (such as red, blue, or fuchsia) in the resource properties files when binding a color style to a resource.
You can also localize the fonts that an application uses. For example, if the locale is ja_JP, then you would want to use a font that supports Japanese characters, but if the locale is en_US, then a font that supports the much smaller English character set would be adequate.
One approach to localizing fonts in your applications is to embed all the fonts and then get the name of the font's class selector from the resource bundle. In the resource properties file, you could set the values of the font, as the following example shows:
# /locale/en_US/FontProps.properties TEXTSTYLE=myENFont # /locale/ja_JP/FontProps.properties TEXTSTYLE=myJAFont
In your application's style sheet, you embed both fonts, as the following example shows:
<mx:Style>
@font-face {
src: url("ENFont.ttf");
fontFamily: EmbeddedENFont;
}
@font-face {
src: url("JAFont.ttf");
fontFamily: EmbeddedJAFont;
}
.myENFont{
fontFamily: EmbeddedENFont;
}
.myJAFont{
fontFamily: EmbeddedJAFont;
}
</mx:Style>
In your MXML tags, you can use the styleName property to apply the appropriate class selector, as the following example shows:
<mx:Text styleName="{resourceManager.getString('FontProps', 'TEXTSTYLE')}"/>
Another approach to localizing fonts is to use style modules, and load them at run time based on which locale is selected. To do this, for each font/locale combination, you compile a style module that embeds the font and sets any necessary selectors. The style module could be as simple as the following:
@font-face {
src:url("../assets/MyENFont.ttf");
fontFamily: myFontFamily;
advancedAntiAliasing: true;
}
.global {
fontFamily: myFontFamily;
}
When you compile the style module's SWF file, you can name it anything you want, but if you give it a name that contains the locale, you can then use that name programatically in your application. For example, name the style module MyStyleSheet_en_US.swf for the en_US locale and MyStyleSheet_ja_JP.swf for the ja_JP locale.
In your application, where you handle the resource bundle update logic, you can include logic that unloads the existing style module and loads a new one based on the current locale. You could also add the name of the style sheet to your resource bundle and extract it from that when the locale changes.
For more information on using style modules, see Loading style sheets at run time.