Find     Softwares Questions Affiliate
 
1907
10/15/2008 09:27:58
6 votes

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?

1739
10/15/2008 09:48:12
0 votes

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.

2069
09/23/2011 15:42:54
1 votes

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);
" Why are you posting at an answered question which has an age of over 2 years?     -- Rob W "
" @Rob I found this question by searching in Google and thought that the answer was incomplete. My answer completes the question and will be helpful for people finding the question (like I did) from Google.     -- sixtyfootersdude "
0
04/01/2009 04:38:50
2 votes

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

" This worked well for me - instead of using parseCSS I ended up parsing the string myself and setting each property using : StyleManager.getStyleDeclaration("Component").setStyle("property",value); Kind of a hack but oh well...     -- onekidney "
684
10/17/2008 06:04:06
2 votes

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()

" This does NOT work. Stop voting this up guys. See @CopyAndPaste and @Eric Belair's answer for an explanation.     -- davr "
" @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?     -- Eric Belair "
" @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: livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/text/…() 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     -- CopyAndPaste "
" This answer is incomplete and step 3 is wrong however you can leverage the StyleSheet class to parse the CSS. See my answer for full details.     -- sixtyfootersdude "
3824
10/15/2008 10:19:47
3 votes

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.