Flex : Creating a partial link label using HTML Text

Sometimes, we may need to make some part of a label as a link, which will navigate to some url. This can be easily achieved by using HTMLText property of either Label or Text(which is a sub class of Label itself). Below is a sample code.

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
backgroundGradientColors=”[#FFFFFF, #FFFFFF]”>

import flash.events.TextEvent;

public function linkHandler(event:TextEvent):void {
myTA.text=”The link was clicked.”;

// Open the link in a new browser window.
navigateToURL(new URLRequest(event.text), ‘_blank’)

<mx:Label selectable=”true” link=”linkHandler(event);”>
<![CDATA[No reports attatched. You can attach one <a href=’event:http://www.adobe.com’><u><font style=’color:red;’>here</font></u></a>]]>

<mx:TextArea id=”myTA”/>

View Example

Some points for the usage as above :

  • This will work only if the selectable property is set to true. Thanks to the restrictions by the framework 😛
  • You can directly call the link by just giving the href property of the anchor tag. In case you need to call a flex method before redirecting to the link, you can follow the approach in my example. For this just append the url of the anchor tag with ‘event:’. This will create an event of type TextEvent, with the url stored in the ‘text’ property of the event.
  • You can right click the link and the flash player will give three optiong : Open, Open in New Window and Copy Link Location. But the point to note here is that, if you are using the url as ‘event:’ as used by me, then all these above said options will give the url starting with ‘event:’ and will break.

That’s it guys. Enjoy and happy coding. 🙂


Tags: , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: