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”
borderStyle=”solid”
backgroundGradientColors=”[#FFFFFF, #FFFFFF]“>

<mx:Script>
<![CDATA[
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:Script>

<mx:Label selectable=”true” link=”linkHandler(event);”>
<mx:htmlText>
<![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:htmlText>
</mx:Label>

<mx:TextArea id=”myTA”/>
</mx:Application>

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.

Advertisement

Tags: actionscript, flex, label, link, links in text, partial link to labels