Styling hyperlinks in a TextFlow object in Flex 4

by Peter deHaan on June 28, 2009

in TextArea (Spark),TextFlow,TextFlowUtil,beta1

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.

Tagged as: , , , , , ,

{ 7 comments… read them below or add one }

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

Reply

2 Peter deHaan 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

Reply

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

Reply

4 lee probert 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.

Reply

5 Peter deHaan 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

Reply

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

7 Peter deHaan 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

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: