Flex Development

Posts Tagged ‘text’

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

I was looking to keep a particular file’s size at a bare minimum, yet I needed to be able to utilize alpha values on text and it was my understanding, before having read a couple of posts on some Actionscript forums, that in order to use alpha values on text, the font used for that text must be embedded in the swf.

The corresponding Actionscript forums dealt, of course, with Actionscript and not Flex. So, I wanted to see, first off, if the same method would work in Flex as in Actionscript. Second, I wanted to create a sample so that anyone could actually see it done and have the relevant mxml file to work with.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init()" viewSourceURL="srcview/index.html">
 
	<mx:Style>
		TextArea
		{
			cornerRadius: 5;
		}
		Application
		{
			backgroundColor: #FFFFFF;
		}
	</mx:Style>
 
	<mx:Script>
		<![CDATA[
 
            public function init():void {
                mainPanel.blendMode = BlendMode.LAYER;
            }
 
		]]>
	</mx:Script>
 
	<mx:Panel id="mainPanel" x="10" y="10" width="363" height="310"
		layout="absolute" title="Text with alpha without embedding font">
		<mx:Label x="10" y="10"
			text="This Label has an alpha value of .25" alpha=".25"/>
		<mx:Text x="15" y="67" text="This Text field has an alpha value of .5"
			width="195" height="66" alpha=".5"/>
		<mx:TextArea x="10" y="141"
			text="This Text Area has an alpha value of .75" alpha=".75"/>
	</mx:Panel>
 
</mx:Application>

Notice the line in the init() function “mainPanel.blendMode = BlendMode.LAYER;”. This line is what enables the alpha values on the whatever text components are added as children to that mainPanel without having to embed the font. That single line is all that is required.

Example: dm_alpha_test.swf
Flex Project: dm_alpha_text.zip