Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Displaying HTML Text Inside Flex Labels

DZone's Guide to

Displaying HTML Text Inside Flex Labels

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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>

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Chris Callendar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}