2 Replies Latest reply on Jul 1, 2009 9:30 PM by DM277

    Applying styles from external css to action script custom component

    iamfuric Level 2


      It's very simple to apply styles from external css to mxlm custom component: just  drop <mx:style source="file.css"> and it's done.

      My question is: how to apply styles from external css (packaged in the same swc) for custom action script component ,say CollapsiblePanel?


        • 1. Re: Applying styles from external css to action script custom component
          DM277 Level 2



          You can use style manager class to access the style.


          collapsiblepanel.styleName = StyleManager.getStyleDeclaration(".panelheader");

          • 2. Re: Applying styles from external css to action script custom component
            Gregory Lafrance Level 6

            The following link and code should answer your question.


            If this post answers your question or helps, please mark it as such.




            Next is the ActionScript code for a class that loads the example.css file and applies the styles to TextField content:

                import flash.display.Sprite;
                import flash.events.Event;
                import flash.net.URLLoader;
                import flash.net.URLRequest;
                import flash.text.StyleSheet;
                import flash.text.TextField;
                import flash.text.TextFieldAutoSize;
                public class CSSFormattingExample extends Sprite
                    var loader:URLLoader;
                    var field:TextField;
                    var exampleText:String = "<h1>This is a headline</h1>" + 
                        "<p>This is a line of text. <span class='bluetext'>" +
                        "This line of text is colored blue.</span></p>";
                    public function CSSFormattingExample():void
                        field = new TextField();
                        field.width = 300;
                        field.autoSize = TextFieldAutoSize.LEFT;
                        field.wordWrap = true;
                        var req:URLRequest = new URLRequest("example.css");
                        loader = new URLLoader();
                        loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
                    public function onCSSFileLoaded(event:Event):void
                        var sheet:StyleSheet = new StyleSheet();
                        field.styleSheet = sheet;
                        field.htmlText = exampleText;

            When the CSS data is loaded, the onCSSFileLoaded() method executes and calls the StyleSheet.parseCSS() method to transfer the style declarations to the StyleSheet object.