Customizing TextFlow Hyperlinks Appearance

There are three states of TLF LinkElements (“hyperlinks” or “anchors”) that may be customized:

• Normal: When the LinkElement is in both its non-hover and non-active state (or when ROLL_OUT is dispatched)
• Hover: When the LinkElement dispatches a ROLL_OVER event and the primary mouse button is not pressed.
• Active: When the LinkElement dispatches a MOUSE_DOWN, MOUSE_CLICK, or MOUSE_MOVE and the primary mouse button is pressed (MouseEvent.buttonDown).

LinkElements must be children of RichEditableText in order to function. If the “editable” property is set to “true” (which it is by default), the control key must be pressed concurrently with the LinkElement mouse activity. This is the special nature of FlowElementMouseEvent

Below is an MXML example using an inline TextFlow declaration which styles the LinkElement as so: normal, hover, & active. However, keep in mind TextLayoutFormat supports many other properties for styling.

<s:RichEditableText editable="false">
 <s:textFlow>
   <s:TextFlow>
     <s:linkNormalFormat>
          <s:TextLayoutFormat color="#FF0000" textDecoration="underline"/>
     </s:linkNormalFormat>
     <s:linkHoverFormat>
          <s:TextLayoutFormat color="#0066FF" fontStyle="italic"/>
     </s:linkHoverFormat>
     <s:linkActiveFormat>
          <s:TextLayoutFormat color="#00FF00" fontWeight="bold"/>
     </s:linkActiveFormat>
     <s:p>Hello <s:a href="http://www.adobe.com/">Adobe</s:a></s:p>
   </s:TextFlow>
 </s:textFlow>
</s:RichEditableText>

A few things to note:

• The linkNormalFormat is blue (#0000FF) and underlined by default.
• Both linkHoverFormat and linkActiveFormat reference the linkNormalFormat unless specified otherwise.
• LinkElements may contain any of the following elements:
  • linkNormalFormat
  • linkHoverFormat
  • linkActiveFormat
  • tcy
  • img
  • span
  • br
  • tab
• Link format elements must contain only one <TextLayoutFormat> child element which formats any LinkElement within the parent of that link format element
• Link formats may be inherited from parent elements or you may override them in child elements.
• Link format elements are not supported with TextConverter.TEXT_FIELD_HTML_FORMAT
• FlowElementMouseEvent listeners may be added to LinkElements and the CLICK event handler may prevent the default navigateToURL behavior:

private function mouseClickHandler(e:FlowElementMouseEvent):void
{
     e.stopImmediatePropagation();
     e.preventDefault();
     trace("LinkElement clicked");
}

All of the preceding Text Layout Framework markup has been tested and proven functional with the following Flex SDKs:

• Flex 4.0.0.14159 with its included TLF 1.0
• Flex 4.1.0.16076 with its included  TLF 1.1
• Flex 4.5.0.20967 with its included TLF 2.0