0

I have a flex application that currently supports english , now my task is to translate it to different languages, that requires support for different parameters for the styles, for example , some buttons need to be wider and some font sizes need to change.

At first I tryed to add a css file at runtime, that was ignored (I guess because of the skin file attached to the component)

My question is what is the recomended way to support multy-language/styled flex application (css or skin) , and how is it done with skinning ?

Thanks!!

zero323
  • 322,348
  • 103
  • 959
  • 935
Eran
  • 1,628
  • 16
  • 31
  • http://www.w3.org/International/questions/qa-css-lang – cimmanon Apr 17 '13 at 14:08
  • @cimmanon I seriously doubt that is supported in Flex' CSS dialect. – RIAstar Apr 17 '13 at 14:13
  • 2
    I guess you should be able to do something like `s|Button.en_US { skinClass: ClassReference("skins.en_US.ButtonSkin") }`, where you use the selected locale as a styleName on any Button that needs this (``). – RIAstar Apr 17 '13 at 14:18

1 Answers1

0

One way to

support multy-language/styled flex application

is manually - have one Flex Application project per language, each containing the appropriate styles and resource files. You can move the common code into library projects that each Application has dependency upon... but this won't scale well past > 3 languages.

Better, but more complicated, is to have just one Application, that loads at runtime a language ResourceBundle, and a language specific CSS file.

First your application needs to "know" which language it is displaying. Perhaps you authenticate the user, learn their locale from the server, then you load ResourceBundle for that locale.

Second you load locale specific CSS to suit the language loaded. I suggest you split your stylesheet into "main" (compiled into Application, has all styles that don't change) and "locale" (contains just styles that do change based on language).

As early as possible in your application start up process, load your language .css file (for example, from a server URL), something like

var cssLoader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest("path_to_server_side_css_file");
cssLoader.addEventListener(Event.COMPLETE, cssLoadCompleteHandler);
cssLoader.addEventListener(IOErrorEvent.IO_ERROR, someErrorHandler);
cssLoader.load(req);

in cssLoadCompleteHandler() the magic happens. You want to strip anything that might trip up your parsing like comments, blank lines, maybe namespaces. Then iterate over the file extracting each style, selector etc. Basically you are string hacking here, which is never the most fun code to write :/ This is a non trivial block of code, and you will want to have the cleanest, most disciplined CSS files you can have to make it work. Its not unlike trying to parse HTML for it's complexity, except that hopefully you can have control over the quality of CSS input. (and you are going to want some tests on this, trust me)

Anyway... once you have each style e.g. .foo{} or #bar {} etc, then call

FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration(...) ;

for each one in turn. Lastly call

FlexGlobals.topLevelApplication.styleManager.styleDeclarationsChanged();

Now you can use the styles (via styleManager.getStyleDeclaration("") )in your Skin classes to get the style you need, either from the baked in styles or the dynamically loaded styles.

Hope that helps a little. It can be done, but it isn't trivial to implement. Good luck.

Adrian Parker
  • 441
  • 3
  • 7