How do you dynamically load a CSS file into a Flex application?

Question

I know that you can apply CSS in order to style objects in Flex using the StyleManager:
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_07.html

You can also load compiled CSS files (SWFs) dynamically:
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html

However, I'm dynamically creating my CSS files using a web GUI and a server-side script. If the CSS is changed, then the script would also need to compile the CSS into an SWF (which is not a viable option). Is there any way around this?

Answer 1

The application of CSS in Flex is handled on the server side at compilation and not on the client side at run time.

I would see two options then for you (I'm not sure how practical either are):

1. Use a server side script to compile your CSS as a SWF then load them dynamically.
2. Parse a CSS Style sheet and use the setStyle functions in flex to apply the styles. An similar example to this approach is the Flex Style Explorer where you can check out the source.

Good luck.

Answer 2

In this comment to an issue related to this in the Adobe bug tracker T. Busser is describing what might be a viable solution for you:

"I've created a small class that will 'parse' a CSS file read with an HTTPService object. It takes apart the string that is returned by the HTTPService object, break it down into selectors, and create a new CSSStyleDeclaration object for each selector that is found. Once all the properties are assigned to the CSSStyleDeclaration object it's added to the StyleManager. It doesn't perform any checks, you should make sure the CSS file is well formed, but it will be sufficient 99% of the time. Stuff like @font, Embed() and ClassReference() will hardly be used by my customers. They do need the ability to change colors and stuff like that so they can easily theme the Flex application to their house style."

You could either try to contact this person for their solution or alternatively maybe use the code from this as3csslib project as a basis for writing something like what they're describing.

Answer 3

You can also implement dynamic stylesheet in flex like this . Here i found this article : http://askmeflash.com/article_m.php?p=article&id=6

Answer 4

Edit: This solution does not work. All selectors that are taken out of the parser are converted to lowercase. This may work for your application but it will probably not...

I am leaving this answer here because it may help some people looking for a solution and warn others of the limitations of this method.

---

See my question: "Looking for CSS parser written in AS3" for a complete discussion but I found a CSS parser hidden inside the standard libraries. Here is how you can use it:

public function extractFromStyleSheet(css:String):void {

    // Create a StyleSheet Object
    var styleSheet:StyleSheet = new StyleSheet();
    styleSheet.parseCSS(css);

    // Iterate through the selector objects
    var selectorNames:Array = styleSheet.styleNames;
    for(var i:int=0; i<selectorNames.length; i++){

        // Do something with each selector
        trace("Selector: "+selelectorNames[i];

        var properties:Object = styleSheet.getStyle(selectorNames[i]);
        for (var property:String in properties){

            // Do something with each property in the selector
            trace("\t"+property+" -> "+properties[property]+"\n");
        }
    }
}

You can then apply the styles using:

cssStyle = new CSSStyleDeclaration();
cssStyle.setStyle("color", "<valid color>);
FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("Button", cssStyle, true);