Text Controls htmlText Property
Flex's Text Controls (e.g. Text, Label, TextInput, TextArea) all support an htmlText property.
<!-- Set TextArea htmlText property using MXML. --> <mx:TextArea width="200" height="100"> <mx:htmlText> This is an example of setting a <B>TextArea</B> control's <I>htmlText<I> property. </mx:htmlText> </mx:TextArea>
TODO... embed example
Supported Tags
The htmlText property supports the following tags, a subset of HTML that supported by Flash and AIR:
- <b> - Bold tag for text
- <i> - Italic tag for text
- <u> - Underline tag for text
- <a> - Anchor tag for links (more information below)
- <br> - Break tag for text
- <font> - Font tag for text
- <img> - Image tag for embedding inline images
- <li> - List item tag
- <p> - Paragraph tag
- <textformat> - Text format tag (more information below)
Using the <a> tag for linking
The anchor <a> tag creates a hyperlink and supports the href and target attributes.
<a href="http://www.flexafterdark.com" target="_blank">Flex After Dark</a>
You must apply formatting tags to change the text format of an <a> tag (i.e. to show as underlined). You can also define a:link, a:hover, and a:active styles for anchor tags by using style sheets.
Link Event Handling
The Label, Text, and TextArea controls can dispatch a link event when the user selects a
hyperlink in the htmlText property.
The event is of type link and is an instance of mx.events.TextEvent.
To generate the link event, prefix the hyperlink destination (href) with event:
as below:
<a href="event:http://www.flexafterdark.com" target="_blank">Flex After Dark</a>
Note that the href attribute value is prefixed with event:
(href="event:http://www.flexafterdark.com").
The below example demonstrates how to setup a Label for link event handling:
<!-- Clicking the link will dispatch a 'link' event to be handled by linkHandler(). --> <mx:Label selectable="true" link="linkHandler(event);"> <mx:htmlText> <![CDATA[<a href='event:http://www.flexafterdark.com' target='_blank'>Flex After Dark</a>]]> </mx:htmlText> </mx:Label>
Clicking the link text causes an event to be handled by the linkHandler() function
registered for the Label's link event.
public function linkHandler( linkEvent:TextEvent ):void { // Open the link in a new browser window. navigateToURL( new URLRequest(linkEvent.text), "_blank" ); }
Text format tag (<textformat>)
The text format <textformat> allows a subset of paragraph formatting properties
of the TextFormat class in HTML text fields, including line leading, indentation, margins, and tab stops.
You can combine text format tags with the built-in HTML tags.
The <textformat> tag supports the following attributes:
- blockindent - specifies indentation, in points, from the left margin to the text in the <textformat> tag body
- indent - specifies indentation, in points, from the left margin or the block indent, if any, to the first character in the <textformat> tag body
- leading - specifies the amount of vertical space (leading) between lines
- leftmargin - specifies the left margin of the paragraph, in points
- rightmargin - specifies the right margin of the paragraph, in points
- tabstops - specifies custom tab stops as an array of non-negative integers