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

      Hello

      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?

      Thanks

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

          Hi,

           

          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.

             

            http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Text_15.html

             

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

            package
            {
                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;
                        addChild(field);
                        
                        var req:URLRequest = new URLRequest("example.css");
                        
                        loader = new URLLoader();
                        loader.addEventListener(Event.COMPLETE, onCSSFileLoaded);
                        loader.load(req);
                    }
                    
                    public function onCSSFileLoaded(event:Event):void
                    {
                        var sheet:StyleSheet = new StyleSheet();
                        sheet.parseCSS(loader.data);
                        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.