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

This will work in either Flash or Flex. (this is non-working psuedo-code for demo purposes only)

1. Load the text of the CSS file with an URLLoader, something like:

var cssLdr : URLLoader = new URLLoader();
cssLdr.addEventListener (Event.COMPLETE, handleCSSLoadComplete);
cssLdr.load ();

1. Parse the CSS into a StyleSheet object.

function handleCSSLoadComplete (evt:Event) : void {
  var sSheet : StyleSheet = new StyleSheet();
  sSheet.parseCSS (evt.target.data);
}

1. Apply that style sheet where you need it

Application.styleSheet = sSheet.

Here is the Docs for StyleSheet.parseCSS:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html#parseCSS()

Answer 4

@RickDT:

This does not work....

1. Apply that style sheet where you need it

   Application.styleSheet = sSheet.

Does anyone know how I can use this to apply a Style sheet to the application?

Answer 5

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 6

@RickDT

I think you have never compiled your example in Flex, because you can only use the *.styleSheet poperty for TextArea and not for the Application or any other component. So Eric Belair is right with saying: This does not work!

Also I think you have never read your own posted link: http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/StyleSheet.html#parseCSS()

Every thing is explained and you will see it's working only for TextArea(Flex) or TextField(AS). And then only if you are using *.htmlText