Displaying HTML Text Inside Flex Labels
DZone's Guide to
Displaying HTML Text Inside Flex Labels
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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:
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
Or an absolute one like
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 :
- 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>
<a href="http://google.com" target="_blank">google</a>
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>
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Topics:
Published at DZone with permission of Chris Callendar , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}