The following example shows how you can create a clickable link which pops up an Alert control in a Spark RichEditableText object’s text flow by using the <a /> tag and defining a click handler to the LinkElement.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/27/creating-a-linkelement-in-a-spark-richeditabletext-control-in-flex-4/ --> <s:Application name="Spark_RichEditableText_textFlow_LinkElement_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Script> <![CDATA[ import flashx.textLayout.elements.LinkElement; import flashx.textLayout.events.FlowElementMouseEvent; import mx.controls.Alert; protected function linkelement1_clickHandler(evt:FlowElementMouseEvent):void { var linkEl:LinkElement = evt.flowElement as LinkElement; Alert.show("The '" + linkEl.getFirstLeaf().text + "' link would have gone to " + linkEl.href + " in a " + linkEl.target + " window, but it was cancelled.", "Fun with hyperlinks"); evt.stopImmediatePropagation(); evt.preventDefault(); } ]]> </fx:Script> <s:RichEditableText id="richEdTxt" editable="false" focusEnabled="false" horizontalCenter="0" verticalCenter="0"> <s:textFlow> <s:TextFlow> <s:p>I am a paragraph that happens to have a <s:a href="http://adobe.com/" target="_blank" click="linkelement1_clickHandler(event);">hyperlink</s:a>.</s:p> </s:TextFlow> </s:textFlow> </s:RichEditableText> </s:Application>
View source is enabled in the following example.
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
{ 9 comments… read them below or add one }
Hello Peter, i’m trying to install the last and earlier sdk nightly build for flash builder but when i run my project (build with latest stable sdk version), flex give me an error : can’t find the IVIsualElement class. But, this class is steal in the sdk folder !!
I was really enjoy to use the textFlow but i’m little confused now.. do you have any idea ?
Thanks for your help and your amazing blog.
(sorry for my english)
valery,
I’ve never seen that. Which build of the Flex 4 SDK are you using?
Peter
This is great!
Any ideas how to add a LinkElement dynamically, like in the Text Editor? Are we going to have to just add in the Element to the TextFlow at the selected index, or is it a bit more complicated?
Best,
Lance
public static function applyLink(editor:RichEditableText, link:String, title:String = null):void
{
// call first
var editManager:EditManager = editor.mx_internal::getEditManager() as EditManager;
editManager.applyLink(link, title);
// clean up
editor.mx_internal::releaseEditManager(editManager);
}
You could do it easier, but this allows you use the advanced features of the RichEditableText’s EditManager. I had to change those two mx_internal methods from “private” to “mx_internal”, so I didn’t have to copy-paste.
Best,
Lance
I have the same question as Lance:
How can i add a link programatically?
Lance’s solution does not work in beta 2, cause getEditManager() is a private function.
(Why dont you make funcitons like this protected??)
The way you apply a link has changed. Here is what worked for me.
private function createLink(link:String=”http://www.google.com”,title:String=null):void
{
var editManager:IEditManager = editor.textFlow.interactionManager as IEditManager;
editManager.applyLink(link, title);
}
This is how I do dynamic links :
protected function button1_clickHandler(e:MouseEvent):void
{
var textFlow : TextFlow = textArea.textFlow;
var p:ParagraphElement = new ParagraphElement();
var span:SpanElement = new SpanElement();
span.text = “>Test Message”;
var link : LinkElement = new LinkElement();
link.addEventListener( FlowElementMouseEvent.CLICK, onLinkClick );
var linkSpan : SpanElement = new SpanElement();
linkSpan.text = “dynamicLink”;
link.addChild( linkSpan );
p.addChild( link );
p.addChild( span );
textFlow.addChild( p );
}
But it works when:
1. editable=”false” for text control(RET or TextArea)
2. There is
I cant bypass 2. position – it is ugly, so if you know how to do this – wright please…
Thx.
Andrew.
2. There is
<s:textFlow>
<s:TextFlow>
<s:p><s:a href=”http://tut.ua” target=”_blank” ></s:a></s:p>
</s:TextFlow>
</s:textFlow>
Oh My God
What with this blog!
Ok. My 2. point is that you have to have textFlow tags with emply params….