Runtime CSS load in Adobe AS3 (Flash)

[lucidlook]

Let's say someone like you would like to create a resource file for flash applet (or application) to store the locale names of options, menus, buttons etc. But there is one little problem -- by default CSS linked into the code at the moment of compilation. Sure thing someone like you can create a separate SWF and use it as resource file, but in this case someone like user can't edit it in case they need to fix a typo or change the locale etc.
There is a trick.

Someone like me would suggest to save all such values in CSS and load it into the applet/application at runtime.

The idea is following: the records from CSS can be parsed by the StyleManager, and then applied as values in XML, which linked to the menubar.
The format is:
label =
So, for menu item "Admin" (which has label=Admin), the record in CSS will be adminlabel=Adminio; So, the application will load the CSS, parse it, load into StyleManager, go through the menubarXML, locate all menuitems and then for the one which has label "Admin" will apply the value from the option "adminlabel" as defined in CSS, which is "Adminio":Step 0: Prepare Desktop.css file:
-----------------8<---------------------------
topmenu
{
adminlabel: Adminio;
loginlabel: Loginio;
}
------------------8<--------------------------

Step 1: Define the menubar and XML for it's menuitems:
-------------------8<-------------------------
  [Bindable]
  public var menuBarCollection:XMLListCollection;
  private var menubarXML:XMLList =
      <>

;
...


--------------------------------------------

Step 2: Apply defaults from menubarXML and then load the CSS:
--------------------------------------------
      this.menuBarCollection = new XMLListCollection(menubarXML);
var req:URLRequest = new URLRequest("Desktop.css");
var loader:URLLoader = new URLLoader();
      loader.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
      loader.addEventListener(Event.COMPLETE, loaderCompleteHandler);
      loader.load(req);
--------------------------------------------

Step 3: Process the events.
There are two possible cases:

3.a. In case of Error: Just inform the user that there is something wrong with CSS
-----------------8<---------------------------
private function errorHandler(e:IOErrorEvent):void
{
(e.target as URLLoader).removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);
(e.target as URLLoader).removeEventListener(Event.COMPLETE, loaderCompleteHandler);
Alert.show("Can't load CSS file\n"+e.text);
}
----------------8<----------------------------

3.b. In case of Success: Apply the CSS values
---------------8<-----------------------------
private function loaderCompleteHandler(e:Event):void
{
 (e.target as URLLoader).removeEventListener(IOErrorEvent.IO_ERROR, errorHandler);
 (e.target as URLLoader).removeEventListener(Event.COMPLETE, loaderCompleteHandler);

style.parseCSS((e.target as URLLoader).data);
 for each(var s:String in style.styleNames)
 {
   processCSS(style, s);
 }

for each(var x:XML in this.menubarXML) // top level of the menu
 {
   if( StyleManager.getStyleDeclaration((this.menuBar.styleName as String).toLowerCase()).getStyle((x.@label+"label").toLocaleLowerCase()) != null)
   {                                                      
     this.menubarXML.(attribute("label") == x.@label).@label = StyleManager.getStyleDeclaration((this.menuBar.styleName as String).toLowerCase()).getStyle((x.@label+"label").toLocaleLowerCase());
          }
        }

for each(var x:XML in this.menubarXML.menuitem) // all the submenus
 {
   if( StyleManager.getStyleDeclaration((this.menuBar.styleName as String).toLowerCase()).getStyle((x.@label+"label").toLocaleLowerCase()) != null)
          {                                                      
       this.menubarXML.menuitem.(attribute("label") == x.@label).@label = StyleManager.getStyleDeclaration((this.menuBar.styleName as String).toLowerCase()).getStyle((x.@label+"label").toLocaleLowerCase());
          }                                                        
        }
}

private function processCSS(css:StyleSheet, section:String):void
{
var newCSS:CSSStyleDeclaration;
newCSS = StyleManager.getStyleDeclaration(section);
if(newCSS == null)
  newCSS = new CSSStyleDeclaration();
for(var s:String in css.getStyle(section))
{
  newCSS.setStyle(s, css.getStyle(section)[s]);
}
StyleManager.setStyleDeclaration(section, newCSS, true);
}
-----------------8<---------------------------
Simple ;-)

Enjoy!