10/03/2008

Getting the links from a TextArea

This is a very basic trick to get a link url from a TextArea control.

To do this we are going to use the "link" event.

There are just two simple rules to follow:

1- The format of the htmlText has to be as following:
<a href='event:http://www.theriadeveloper.com'>nice Flex blog!</a>

The text after "event:" will be the text sent on he TextEvent (the link event).

2- The TextArea must have the "selectable" property set to TRUE (the default value), otherways the "link" event will not be dispatched (even if you see the handCursor when you roll over the link).

Here you can see a very basic Applcation using this feature:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
height="100"
width="400"
>
<mx:Script>
<![CDATA[
import mx.controls.Alert;

[Bindable]
private var htmlText : String = "Ey mate! Yo should check out this really" +
" <u><a href='event:http://www.theriadeveloper.com'>nice Flex blog!</a></u>"

private function onLink( event : TextEvent ) : void
{
Alert.show(event.text);
}
]]>
</mx:Script>

<mx:VBox
width="100%"
paddingTop="15"
paddingRight="10"
paddingLeft="10">

<mx:Label text="Click on the link to see the URL:"/>

<mx:TextArea
id="txtLinkText"
height="100%"
width="100%"
htmlText="{ htmlText }"
link="onLink( event )"/>
</mx:VBox>
</mx:Application>


And the result of the code above:




5 comments:

  1. Is there any way to get the event to send on rollover instead of on click?

    ReplyDelete
  2. Hello Anonymous, thak you for your comment.

    I have been looking a bit deeper on this matter and unfortunately the Link event you need is implemented in the TextItem inside the TextArea and its not accessible from outside, so unfortunately you will need to create your own custom component for this.

    You can find some tips on making custom components here:

    http://www.theriadeveloper.com/2008/03/creating-custom-flex-components-from.html

    Best

    ReplyDelete
  3. Thanks for the reply. I will look into this.

    ReplyDelete
  4. Thanks for your help! I spent at least 2 hours trying to find a way to allow my link to dispatch an event and all what I had to do was set the selectable property to true.

    Saludos desde Argentina

    ReplyDelete
  5. Hi juanargento! Glad it helped! I have to try and update my blog a bit more often :-S I have lots of things about Flex 4 to talk about, but I just don´t have much time :(

    Thank you very much for your comment!

    Un saludo para todo Argentina! :)

    ReplyDelete