Creating a LinkElement in a Spark RichEditableText control in Flex 4

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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.

10 thoughts on “Creating a LinkElement in a Spark RichEditableText control in Flex 4

  1. 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)

  2. 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

  3. 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

  4. 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??)

  5. 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);
    }

  6. 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.

    1. 2. There is
      &lts:textFlow&gt
      &lts:TextFlow&gt
      &lts:p&gt&lts:a href=”http://tut.ua” target=”_blank” &gt&lt/s:a&gt&lt/s:p&gt
      &lt/s:TextFlow&gt
      &lt/s:textFlow&gt

      1. Oh My God

        What with this blog!

        Ok. My 2. point is that you have to have textFlow tags with emply params….

Comments are closed.