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

Question

I know that you can apply CSS 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 (SWF) files dynamically:
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html

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

Answer 1

The CSS application in Flex is processed on the server side at compilation, and not on the client side at runtime.

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

• Use the server side of the script to compile your CSS as SWF, then load them dynamically.
• Parse the CSS stylesheet and use the setStyle functions in flex to apply styles. A similar example of this approach is Flex Style Explorer , where you can check the source .

Good luck.

Answer 2

In this commentary to the problem associated with this in the Adobe error debugger. T. Busser describes what could be a viable solution for you

"I created a small class that will" parse "the CSS file read using the HTTPService Object. It splits the string returned by the HTTPService Object, break it into selectors and create a new CSSStyleDeclaration Object for each selector that is found. Once all properties are assigned to the Object CSSStyleDeclaration is added for StyleManager. It doesn’t do any checking, you have to make sure that the CSS file is well-formed, but it will be sufficient in 99% of cases. Things like @font, Embed () and ClassReference () are unlikely to be used by my customers. flax need the ability to change color and so on so that they can easily Flex Application to their house style. "

You can either try to contact this person for your solution, or perhaps use the code of this as3csslib project as a basis for writing something as they describe.

Answer 3

You can also implement a dynamic stylesheet in flex. 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 output from the analyzer are converted to lowercase. This may work for your application, but it probably won't ...

I leave this answer here because it can help some people find a solution and warn others about the limitations of this method.

---

See my question: “ Finding a CSS parser written in AS3 ” for a full discussion, but I found a CSS parser hidden inside 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"); } } } 

Then you can apply the styles using:

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