Displaying Html text in Labels

Displaying html content inside Flex labels is not as straight forward as it was in Flex 3 by simply setting the htmlText property. Here are the 3 Spark controls used for displaying text:

• Label - lightweight plain text only
• RichText - as the name says it provides support for rich text.
  Also allows html content to be imported (anchor tags <a> don't work)
• RichEditableText - provides the same rich text support as the RichText control.
  Allows editing and anchor html tags work properly

Here is a list of the supported HTML tags: <div>, <p>, <a>, <span>, <img>, <br>.

As noted above, if you want to use anchor <a> tags, you must use a RichEditableText control. In this case you'd most likely want to also set the editable="false" property.
The anchor href property can be set to a relative path like

<a href="index.html">index</a>

Or an absolute one like

<a href="http://google.com" target="_blank">google</a>

Note that you can set the target property to control whether the link is opened in a new window or not.
If you want to listen for when the user clicks on an anchor it is possible, but involves a lot more work. Basically you import the html string into a TextFlow object. Then you iterate through all the child elements until you find the LinkElement (which represents the anchor tag), and then add a FlowElementMouseEvent.CLICK event listener.

Here is some sample code that I use to achieve this:

/**  * Converts the html string (from the resources) into a TextFlow object  * using the TextConverter class. Then it iterates through all the   * elements in the TextFlow until it finds a LinkElement, and adds a   * FlowElementMouseEvent.CLICK event handler to that Link Element.  */ public static function addLinkClickHandler(html:String,          linkClickedHandler:Function):TextFlow {   var textFlow:TextFlow = TextConverter.importToFlow(html,      TextConverter.TEXT_FIELD_HTML_FORMAT);   var link:LinkElement = findLinkElement(textFlow);   if (link != null) {     link.addEventListener(FlowElementMouseEvent.CLICK,            linkClickedHandler, false, 0, true);   } else {     trace("Warning - couldn't find link tag in: " + html);   }   return textFlow; } /**  * Finds the first LinkElement recursively and returns it.  */ private static function findLinkElement(group:FlowGroupElement):LinkElement {   var childGroups:Array = [];   // First check all the child elements of the current group,   // Also save any children that are FlowGroupElement   for (var i:int = 0; i < group.numChildren; i++) {     var element:FlowElement = group.getChildAt(i);     if (element is LinkElement) {       return (element as LinkElement);     } else if (element is FlowGroupElement) {       childGroups.push(element);     }   }   // Recursively check the child FlowGroupElements now   for (i = 0; i < childGroups.length; i++) {     var childGroup:FlowGroupElement = childGroups[i];     var link:LinkElement = findLinkElement(childGroup);     if (link != null) {       return link;     }   }   return null; }

A simple control that I've created and use frequently is called HtmlLabel which extends the RichEditableText class to provide simple support for html text:

<?xml version="1.0" encoding="utf-8"?> <s:RichEditableText xmlns:fx="http://ns.adobe.com/mxml/2009"   xmlns:s="library://ns.adobe.com/flex/spark"   xmlns:mx="library://ns.adobe.com/flex/mx"   focusEnabled="false"   selectable="false"   editable="false">   <fx:Script>     <![CDATA[       import flashx.textLayout.conversion.TextConverter;       override public function set text(value:String):void {         super.textFlow = TextConverter.importToFlow(value,            TextConverter.TEXT_FIELD_HTML_FORMAT);       }     ]]>   </fx:Script> </s:RichEditableText>