In working toward a simple, Flex-based CMS, I wanted to be able to load external html content without having to write numerous URLRequests in the main Flex project file, so I decided to just extend the TextArea component with a method for loading an external file.
Flex doesn’t handle html very well at all at this point, yet there are numerous ways to extend its capabilities and many others have already done just that. For sake of simplicity, I kept the functionality as it is and basically, whatever the Flex RichTextEditor component can output, this extendedTextArea can accept as input.
<?xml version="1.0" encoding="utf-8"?> <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ [Inspectable(defaultValue="")] private var _url:String = ""; public function set url (requestedURL:String):void { urlLoad(requestedURL); } public function get url ():String { return _url; } private function urlLoad(requestedURL:String):void { var request:URLRequest = new URLRequest(requestedURL); var loader:URLLoader = new URLLoader(); loader.load(request); loader.addEventListener(Event.COMPLETE, onComplete); } private function onComplete(event:Event):void { var loader:URLLoader = URLLoader(event.target); //replace linefeed characters since Flex displays them otherwise this.htmlText = loader.data.toString().replace(/\r|\n/gm,""); } ]]> </mx:Script> </mx:TextArea>
And here we have an example application of the above externalTextArea which loads a simple index.html file located in the same directory as the swf.
TextArea
{
cornerRadius: 5;
}
Application
{
backgroundColor: #FFFFFF;
}Example: dm_external_TextArea.swf
Flex Project: dm_external_TextArea.zip