Displaying HTML Text Inside Flex Labels
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.
- 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.
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 }}