Flex: Clickable Text Links
Here's an example of creating clickable links within your Flex Text controls. A couple of things to note:
- You cannot set the selectable attribute to "false". Only "true", the default, will work. The Text control extends Label, which has this odd condition placed on it.
- I've found that when there are multiple links within one Text control, you sometimes need to click twice for the link click to be broadcast. See www.torontoflex.com for an example.
- Note that you need a link event handler on the Text control.
- The href attribute in your anchor tag must be prefixed with "event:"
- Right-clicking the link gives you options on how to open the link, but this functionality is broken (at least in FireFox) because Flash player does not strip the "event:" prefix before sending the URL to the browser (geez!)
Here's a fully working sample:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application width="100" height="100" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" styleName="plain">
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
private function onLinkClick( event:TextEvent ):void {
var url:URLRequest = new URLRequest( event.text );
navigateToURL( url, '_blank' );
}
]]>
</mx:Script>
<mx:Text id="myText" link="onLinkClick( event )" selectable="true" fontSize="14" condenseWhite="true">
<mx:htmlText>
<![CDATA[
<a href='event:http://www.adobe.com/'><u><font color='Blue'>Try this link!</font></u></a>
]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
<mx:Application width="100" height="100" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" styleName="plain">
<mx:Script>
<![CDATA[
import flash.net.navigateToURL;
private function onLinkClick( event:TextEvent ):void {
var url:URLRequest = new URLRequest( event.text );
navigateToURL( url, '_blank' );
}
]]>
</mx:Script>
<mx:Text id="myText" link="onLinkClick( event )" selectable="true" fontSize="14" condenseWhite="true">
<mx:htmlText>
<![CDATA[
<a href='event:http://www.adobe.com/'><u><font color='Blue'>Try this link!</font></u></a>
]]>
</mx:htmlText>
</mx:Text>
</mx:Application>
You need not dispatch/listen to a link event (TextEvent.LINK) to launch URL links. a href='http://www.adobe.com/' is a simpler implementation.
However, the link event is handy for triggering actions in the flex application though, like in-app navigation, printing, etc.
-ekz