I had figured out a simple solution for changing the colors of your hyperlinks in a body text a few weeks ago. Hence I decided to share it in the post. On top of that, the demos that I had shown in this post also demonstrate the use of the TextEvent.LINK Event which can be very useful also. :D
Here's a simple AS3 Actionscript Class file that contains a simple Stylesheet for setting the properties of the default and the hover state of the hyperlinks. I have created this file so that I can reuse it in Flex and Flash.package
{
import flash.text.StyleSheet;
public class SimpleStylingClass
{
private var _ss:StyleSheet = new StyleSheet();
public function get ss():StyleSheet
{
return _ss;
}
public function set ss(value:StyleSheet):void
{
_ss = value;
}
public function SimpleStylingClass()
{
var aHover:Object = new Object();
aHover.color = '#FF0000';
aHover.fontWeight = 'bold';
aHover.textDecoration = 'none';
var aNorm:Object = new Object();
aNorm.color = '#0000FF';
aNorm.textDecoration = 'underline';
ss.setStyle("a", aNorm);
ss.setStyle("a:hover", aHover);
}
}
}
The following would be the source file for the flex file.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="100%" height="100%" >
<mx:Style>
HBox{
paddingLeft: 10;
paddingRight:10;
paddingTop:10;
paddingBottom:10;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
//Bindable String to be used by the text area below.
[Bindable]
private var _bodyText:String = "I have some body text here. It " +
"contains a few clickable URLs. For example: <a href='" +
"event:http://www.google.com' target='_blank'>Google.com" +
"</a>, <a href='event:http://www.msn.com' " +
"target='_blank'>msn.com</a> and <a target='_blank' " +
"href='http://nekyouto-tech.blogspot.com'>My Tech Blog</a>.";
/*
When the user clicks on such a link (href='event:...',
I will show a Alert box indicating the URL that the
user have click and a simple message.
*/
protected function txtAreaBody_linkHandler(event:TextEvent):void
{
// TODO Auto-generated method stub
Alert.show(event.text + " have been block by this site"
, "Alert",Alert.OK);
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<!--
I have pointed the htmlText value to the Bindable String in the
above.I have also added the Stylesheet for the text area and
also theListener for hyperlinks in the body text. It will keep
a lookout for href='event:..... pattern in a hyperlink text.
-->
<mx:TextArea id="txtAreaBody" width="100%" height="100%"
htmlText="{_bodyText}" link="txtAreaBody_linkHandler(event)"
styleSheet="{new SimpleStylingClass().ss}" fontSize="24" />
</mx:HBox>
</mx:Application>
And the following would be the main class for the Flash file
package
{
import flash.display.Sprite;
import flash.events.TextEvent;
import flash.text.TextField;
import flash.external.ExternalInterface;
public class StylingHyperlinksMainClass extends Sprite
{
//Text to be displayed in the textfield
private var _bodyText:String = "I have some body text here. It " +
"contains a few clickable URLs. For example: Google.com" +
", " +
"msn.com and My Tech Blog.";
private var _txtBodyText:TextField;
public function StylingHyperlinksMainClass()
{
super();
_txtBodyText = this.getChildByName("txtBodyText") as TextField;
_txtBodyText.htmlText = _bodyText;
//Setting the stylesheet of the Textfield
_txtBodyText.styleSheet = new SimpleStylingClass().ss;
//Adding the listener for href that starts with event:...
_txtBodyText.addEventListener(TextEvent.LINK, textLinkEvent);
}
/*
Shows a Javascript Alert box when the user clicks on the
URL that starts with event:...
*/
private function textLinkEvent(event:TextEvent):void
{
ExternalInterface.call("alert", event.text + " have been block" +
" by this site.");
}
}
}
* Click here to view the Flex demo.
# Click here to view the Flash demo.
^ Click here to download the source file of the above demos.
