Styling hyperlinks in a TextFlow object in Flex 4

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

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.

10 thoughts on “Styling hyperlinks in a TextFlow object in Flex 4

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

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

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

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

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

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

Comments are closed.