RichText control

The RichText control is a middleweight Spark text control. It can display richly-formatted text, with multiple character and paragraph formats. However, it is non-interactive: it does not support hyperlinks, scrolling, selection, or editing. If you want a control that supports formatted text plus scrolling, selection, and editing, you can use the RichEditableText control.

For specifying the text, the RichText control supports the textFlow, text, and content properties. If you set the text property, the contents are read in as a String; tags such as <p> and <img> are ignored. If you set the textFlow or content properties, then the contents are parsed by TLF and stored as a TextFlow object. Tags such as <p> and <img> are mapped to instances of the ParagraphElement and InlineGraphicElement classes.

To create a RichText control, you use the <s:RichText> tag in MXML, as the following example shows:
<?xml version="1.0"?>
<!-- sparktextcontrols/RichTextExample.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"    
    xmlns:mx="library://ns.adobe.com/flex/mx"     
    xmlns:s="library://ns.adobe.com/flex/spark">
  
    <s:layout> 
        <s:VerticalLayout/> 
    </s:layout>
  
    <!-- You can display simple text with the text property. -->  
    <s:RichText text="Hello World!"/>

    <!-- Or the text child tag. -->  
    <s:RichText>
        <s:text>
            Hello World!
        </s:text>        
    </s:RichText>

    <!-- You can display formatted text with the default property. -->  
    <s:RichText>
        Hello <s:span fontSize='16'>BIG NEW</s:span> World!
    </s:RichText>

    <!-- Or the TextFlow child tag. -->  
    <s:RichText>
        <s:textFlow>
            <s:TextFlow>
                Hello <s:span fontSize='16'>BIG NEW</s:span> World!
            </s:TextFlow>
        </s:textFlow>
    </s:RichText>

</s:Application>
The executing SWF file for the previous example is shown below:

The text in a RichText control can be horizontally and vertically aligned but it cannot be scrolled. The contents of the control wraps at the right edge of the control’s bounds. If the content extends below the bottom, it is clipped. It is also clipped if you turn off wrapping by setting the lineBreak style property to explicit and add content that extends past the right edge of the control.

The contents of a RichText control can be exported to XML using the export() method, which produces XML. For an example of using the export() method, see http://blog.flexexamples.com/2009/07/25/exporting-a-textflow-object-in-flex-4/.

For more information about using TLF with Spark text controls, see Using Text Layout Framework.