Quick Tip (Flex 4): Using asfunction in TLF (Text Layout Framework)

Posted on February 25, 2010

Do you remember the very old school global function called asfunction? It was used to call custom ActionScript methods clicking an HTML link. The definition in HTML was something like this: <a href='asfunction:myFunction'>my link</a>.

Since ActionScript 3 asfunction has been deprecated and it was replaced with a new event handling using TextEvent.LINK and event:myEventType defined at the HTML link. For example <a href='event:myEventType'>my link</a>. In this case you have to add just one event listener to handle all (!!) events.

Flex 4 + Text Layout Framework + asfunction?

But what happens if you want to call an ActionScript method clicking an HTML link and using the Text Layout Framework (TLF) in Flex 4?

RichEditableText is the TLF component to embed a clickable HTML text, but it does not support an event handler for a TextEvent.LINK event. Today I ran into this issue and I couldn't find any solution (either at official Flex doc or not at Google).

Anyway, the solution it is pretty easy. Just define your HTML links as before in Flex 3 and add an event listener for every (!!) event to a TextFlow of a RichEditableText

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <s:VGroup
 3     xmlns:fx="http://ns.adobe.com/mxml/2009"
 4     xmlns:s="library://ns.adobe.com/flex/spark"
 5     xmlns:mx="library://ns.adobe.com/flex/halo"
 6     >
 7   <fx:Script>
 8     <![CDATA[
 9     import flashx.textLayout.conversion.TextConverter;
10     import flashx.textLayout.events.FlowElementMouseEvent;
11 
12     import mx.events.FlexEvent;
13 
14     /**
15     * HTML string
16     * Note the anchor using 'event:myEventType' to call an ActionScript method
17     */
18     protected static const HTML: String =   "<p>Hello, here is a link to "
19     + "<a href='event:myEventType'>run my custom method</a>"
20     + "</p>";
21 
22     /**
23     * Adding listener to for event:myEventType defined in HTML
24     * at a TextFlow of RichEditableText
25     *
26     */
27     protected function richtext1_initializeHandler(event:FlexEvent):void
28     {
29       myText.textFlow.addEventListener( 'myEventType', customMethodHandler );
30     }
31 
32     /**
33     * Custom event handler for event:customMethod defined in HTML
34     *
35     */
36     protected function customMethodHandler( event:FlowElementMouseEvent ):void
37     {
38       result.text += "run custom method\n";
39     }
40 
41     ]]>
42   </fx:Script>
43 
44 
45   <s:RichEditableText
46       id="myText"
47       width="100%"
48       selectable="false"
49       editable="false"
50       initialize="richtext1_initializeHandler(event)"
51       textFlow="{ TextConverter.importToFlow( HTML, TextConverter.TEXT_FIELD_HTML_FORMAT ) }"
52       />
53 
54   <s:TextArea
55       id="result"
56       />
57 
58 
59 </s:VGroup>

Some notes:

• To have an clickable HTML link using RichEditableText, its property selectable and editable has to be false
• Anchors defined in HTML will be a LinkElements at the TLF
• All events will be dispatched from this LinkElement as a FlowElementMouseEvent. Its type is a 'custom' type and will be the same as defined in HTML.
• Any asfunction call has to be defined in HTML using event:myEventType. The LinkElement will check itself if the link includes an url or just an `asfunction call.
• To listen all events you have to add different listeners for each event type to a TextFlow of a RichEditableText.

-Jens

Any feedback?