Search Flex Samples

Applying a cascading style sheet to a TextArea control in Flex

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.





<?xml version="1.0" encoding="utf-8"?>


<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;

}

0 comments:

Related Flex Samples

Learn Flex: Flex Samples | Flex Video Tutorials Flex Examples