Styling hyperlinks in a TextFlow object in Flex 4

By Peter deHaan On June 28, 2009 · 10 Comments

The following example shows how you can style links in a TextFlow object in Flex 4 by specifying the linkNormalFormat, linkHoverFormat, and linkActiveFormat properties.

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ -->
<s:Application name="Spark_TextArea_textFlow_linkHoverFormat_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.formats.WhiteSpaceCollapse;
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:String id="markup" source="teaserTextFlow.xml" />
    </fx:Declarations>
 
    <s:TextArea id="txtArea"
            textFlow="{TextFlowUtil.importFromString(markup, WhiteSpaceCollapse.PRESERVE)}"
            editable="false"
            width="400"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

And the TextFlow markup is as follows:

View teaserTextFlowxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve" fontSize="16" paragraphSpaceAfter="15" paddingTop="4" paddingLeft="4">
    <linkNormalFormat color="#0000ff" textDecoration="underline" />
    <linkHoverFormat color="#ff0000" textDecoration="underline" />
    <linkActiveFormat color="#ff00ff" textDecoration="underline" />
    <format id="code" backgroundColor="#000000" backgroundAlpha="0.1" fontFamily="_typewriter" />
    <p fontWeight="bold">The following excerpt is from <a href="http://blog.flexexamples.com/" target="_self">Flex Examples</a>:</p>
    <p>The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static <span format="code">TextFlowUtil.importFromXML()</span> method.</p>
    <p>For more information, see <a href="http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/">"Importing a text flow from an XML object in Flex 4"</a>.</p>
</TextFlow>

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 Styling hyperlinks in a TextFlow object in Flex 4

Razvan says:

July 24, 2009 at 12:12 am

hei,
can anybody tell me when i copy paste the code i get :
Cannot resolve attribute ‘textFlow’ for component type spark.components.TextArea.
and if i remove the textFlow attribute i get :
1172: Definition spark.utils:TextFlowUtil could not be found.
Peter deHaan says:

July 24, 2009 at 8:19 am

Razvan,

Try downloading a newer Flex 4 SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4

Peter
rootsical says:

October 1, 2009 at 7:53 am

hi there. when i try this i get no whitespace before the a tags and span tags. any idea why? thanks for the great info.

lee probert says:

March 18, 2010 at 7:05 am

I think the format attribute of the span tag might be deprecated. Certainly didn’t work for me. Also, if you chain A links together it converts them all into one link.

Peter deHaan says:

March 18, 2010 at 1:18 pm

@lee probert,

Do you have an example of something chaining a bunch of hyperlinks together? If so, can you file it in the bug base (http://bugs.adobe.com/flex/) and post the bug number here and I can investigate ASAP.
I tried with this test case in a recent Flex 4 SDK and was not able to repro the behavior you were describing:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.ConversionType;
            import flashx.textLayout.conversion.TextConverter;
 
            private const someString:String = '<a href="http://adobe.com/" rel="nofollow">Adobe.com</a><a href="http://flexexamples.com/" rel="nofollow">FlexExamples.com</a><a href="http://airexamples.com/" rel="nofollow">AIRExamples.com</a><a href="http://actionscriptexamples.com" rel="nofollow">ActionScriptExamples.com</a>';
        ]]>
    </fx:Script>
 
    <s:RichEditableText id="ret"
            editable="false"
            textFlow="{TextConverter.importToFlow(someString, TextConverter.TEXT_FIELD_HTML_FORMAT)}" />
 
    <s:Button click="debug.text = TextConverter.export(ret.textFlow, TextConverter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE).toXMLString();" />
    <s:TextArea id="debug" width="400" height="200" />
 
</s:Application>

Peter

krishna says:

June 3, 2010 at 3:29 am

I am facing the same issue with TextLayout Logged issue in (http://bugs.adobe.com/flex/) Id : SDK-26612.

One more thing I found in your code TextConverter.TEXT_FIELD_HTML_FORMAT, But in my build i am not able to get this option.

Thanks in advance.
Peter deHaan says:

June 3, 2010 at 8:27 am

@krishna,

All of my examples used the Flex 4.0 SDK and the TLF that came with that particular build.
I’d start by making sure that you have the latest available TLF build, as I believe that the TextConverter.TEXT_FIELD_HTML_FORMAT was an API change, so you may be using a slightly older TLF build.

Peter

Elle says:

September 3, 2010 at 11:31 am

I’m just learning Flex and am struggling with showing a dynamic hyperlink with a dynamic title. For some reason, this post was the closest thing I could find to what I need. Do you have any resources to point me towards? Any help would be a relief..
daslicht says:

May 10, 2011 at 12:41 am

Here is anothe approch without the need of manipulationg the markup:

http://help.adobe.com/en_US/flex/using/WS02f7d8d4857b1677-165a04e1126951a2d98-7fef.html
Simion Ploscariu says:

September 29, 2011 at 7:15 am

How can i change the colors of links using AS3 not mxml?