Customizing the appearance or a hyperlink in a TextFlow object in Flex 4

By Peter deHaan On October 21, 2009 · 10 Comments

In a previous example, “Globally styling anchor tags on a Spark RichEditableText control in Flex 4″, we saw how you could globally style the normal and hover states of a hyperlink on a Flex 4 Spark RichEditableText control by setting the static TextFlow.defaultConfiguration object.

The following example shows how you can use a custom link formats to a TextFlow object in Flex 4 by padding a Configuration object to the static TextConverter.importToFlow() method.

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/10/21/customizing-the-appearance-or-a-hyperlink-in-a-textflow-object-in-flex-4/ -->
<s:Application name="Spark_TextConverter_importToFlow_config_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        creationComplete="init();"> 
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
            import flashx.textLayout.elements.Configuration;
            import flashx.textLayout.elements.TextFlow;
            import flashx.textLayout.formats.TextDecoration;
            import flashx.textLayout.formats.TextLayoutFormat;
 
            private function init():void {
                var txt:String = "Check out our website at <a href='http://blog.flexexamples.com/' target='_top'>flexexamples.com</a>.";
 
                var cfg:Configuration = TextFlow.defaultConfiguration;
 
                var normalFmt:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkNormalFormat);
                normalFmt.color = 0xFF0000; // red
                normalFmt.textDecoration = TextDecoration.NONE;
 
                var hoverFmt:TextLayoutFormat = new TextLayoutFormat(cfg.defaultLinkHoverFormat);
                hoverFmt.color = 0xFF00FF; // purple
                hoverFmt.textDecoration = TextDecoration.UNDERLINE;
 
                cfg.defaultLinkNormalFormat = normalFmt;
                cfg.defaultLinkHoverFormat = hoverFmt;
 
                ret.textFlow = TextConverter.importToFlow(txt, TextConverter.TEXT_FIELD_HTML_FORMAT, cfg);
            }
        ]]>
    </fx:Script>
 
    <s:RichEditableText id="ret"
            editable="false"
            selectable="false"
            fontSize="32"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

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.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

10 Responses to Customizing the appearance or a hyperlink in a TextFlow object in Flex 4

Boris Kiriako says:

October 22, 2009 at 11:40 am

Hi Peter

I’m sure you hear this a lot but thanks for all your excellent work in the trenches. This is the kind of stuff people like myself stumble over when trying to learn a new programming language. Thanks for the sturdy bridges.

A minor note: I did run into an error in Flex 4 with TEXT_FIELD_HTML_FORMAT above. I couldn’t find it as a public constant in the help. So I just used HTML_FORMAT and that seemed to work.
- Peter deHaan says:
  
  October 22, 2009 at 12:52 pm
  
  @Boris Kiriako,
  
  The TextConverter.HTML_FORMAT constant is the old value. It was changed in more recent TLF/Flex builds to TextConverter.TEXT_FIELD_HTML_FORMAT. So although TextConverter.HTML_FORMAT works for you now, it ~~may~~ will no longer work if you update your Flex SDK to the latest Flex 4 nightly build (just a heads up).
  
  Peter
Tom says:

October 25, 2009 at 11:40 am

Hi,
I really appreciate the work by you,People like me really like these kind of work..I got some error in TEXT_FIELD_HTML_FORMAT when i updated my Flex SDK.Can any one solve this problem then tell me………
- Peter deHaan says:
  
  October 25, 2009 at 4:45 pm
  
  @Tom,
  
  Which version of the Flex SDK did you update to? It should be TextConverter.TEXT_FIELD_HTML_FORMAT in the latest version of the Flex 4 SDK. But if you’re seeing errors, you could try using the older TextConverter.HTML_FORMAT constant instead.
  
  Peter
Colin Harwood says:

July 19, 2010 at 12:33 am

Hi, I have copied and sucessfully run this code and used this as a template for work I am carrying out. Recently Flex4.1 was released and this code no longer works, not for me anyway. Any Ideas? All I get is a blank screen.

if I comment out
//cfg.defaultLinkNormalFormat = normalFmt;
//cfg.defaultLinkHoverFormat = hoverFmt;

It runs but I get the default colours.

Colin.
Wade says:

October 5, 2010 at 11:02 am

I’m having the same issue as Colin with SDK 4.1. Is there a new/different way to programmatically set link colors?
Balazs Sebesteny says:

October 15, 2010 at 6:16 pm

ditto, @Colin, @Wade – but the help still contains this example – it would be good to know, how to do this with the current SDK (4.1)

Cheers, Sebi
Gabor says:

October 25, 2010 at 5:42 am

same issue here wit 4.1. Any updates on how to fix this?

Cheers, Gabor
Thijs says:

March 23, 2011 at 6:48 am

Same issue here as reported by the last 4 commenters: the content in the RichEditableText component is empty. The only workaround I found is specifying the properties in the textlayout format manually like:

_text = "The example on this page does not work."; var msg:String = '' + '' + '' + '' + _text + "";
_output.textFlow = TextConverter.importToFlow( msg, TextConverter.TEXT_LAYOUT_FORMAT );
Mike Wach says:

May 12, 2011 at 5:43 pm

I wrote a detailed blog entry explaining LinkElements and how to stylize them in Flex 4 through 4.5:
http://www.mikewach.com/index.php/customizing-textflow-hyperlinks-appearance/