Flex Examples

The following example shows how you can dynamically load a CSS file and apply the style sheet to a Flex TextArea control by setting the styleSheet property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/22/applying-a-cascading-style-sheet-to-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var styleSheet:StyleSheet;
            private var urlLoader:URLLoader;

            private function init():void {
                urlLoader = new URLLoader();
                urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);
                urlLoader.load(new URLRequest("styles.css"));
            }

            private function urlLoader_complete(evt:Event):void {
                var css:String = URLLoader(evt.currentTarget).data;
                // Convert text to style sheet.
                styleSheet = new StyleSheet();
                styleSheet.parseCSS(css);
                // Set the style sheet.
                textArea.styleSheet = styleSheet;
            }

            private function textArea_link(evt:TextEvent):void {
                Alert.show("text: " + evt.text, "Panel");
            }
        ]]>
    </mx:Script>

    <mx:String id="txt" source="text.html" />

    <mx:TextArea id="textArea"
            htmlText="{txt}"
            editable="false"
            condenseWhite="true"
            width="100%"
            height="100%"
            link="textArea_link(event);" />

</mx:Application>

/src/styles.css

h1 {
    font-size: 24;
}

p {
    font-size: 10;
}

a {
    text-decoration: underline;
}

a:hover {
    color: #FF0000;
}

View source is enabled in the following example.

You can also dynamically load the external .CSS file using the <mx:HTTPService /> tag, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/22/applying-a-cascading-style-sheet-to-a-textarea-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.controls.Alert;

            private var styleSheet:StyleSheet;

            private function init():void {
                httpService.send();
            }

            private function httpService_result(evt:ResultEvent):void {
                var css:String = evt.result as String;
                // Convert text to style sheet.
                styleSheet = new StyleSheet();
                styleSheet.parseCSS(css);
                // Set the style sheet.
                textArea.styleSheet = styleSheet;
            }

            private function textArea_link(evt:TextEvent):void {
                Alert.show("text: " + evt.text, "Panel");
            }
        ]]>
    </mx:Script>

    <mx:HTTPService id="httpService"
            url="styles.css"
            resultFormat="text"
            result="httpService_result(event);" />
    <mx:String id="txt" source="text.html" />

    <mx:TextArea id="textArea"
            htmlText="{txt}"
            editable="false"
            condenseWhite="true"
            width="100%"
            height="100%"
            link="textArea_link(event);" />

</mx:Application>

/src/styles.css

h1 {
    font-size: 24;
}

p {
    font-size: 10;
    text-align: justify;
}

a {
    text-decoration: underline;
    color: #0000FF;
}

a:hover {
    color: #FF0000;
}

View source is enabled in the following example.