Setting text in a Spark RichText control in Flex 4

The following example shows a few ways you can display text in a Spark RichText control in Flex 4 using the TextFlowUtil and TextConverter classes.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

1) You can set the text property, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:RichText id="richTxt"
            text="The quick brown fox jumps over the lazy dogg."
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

[GoogleAdsWide]

2) You can set the content property, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_test_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:RichText id="richTxt"
            horizontalCenter="0" verticalCenter="0">
        <s:content>
            <s:p>The quick brown <s:span fontWeight="bold">fox jumps over</s:span> the lazy dogg.</s:p>
        </s:content>
    </s:RichText>
 
</s:Application>

3) You can set the textFlow property to a nested TextFlow object, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:RichText id="richTxt"
            horizontalCenter="0" verticalCenter="0">
        <s:textFlow>
            <s:TextFlow>
                <s:p>The quick brown <s:span fontWeight="bold">fox jumps over</s:span> the lazy dogg.</s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:RichText>
 
</s:Application>

4) You can data-binding to the textFlow property, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Declarations>
        <s:TextFlow id="txtFlow1">
            <s:p>The quick brown <s:span fontWeight="bold">fox jumps over</s:span> the lazy dogg.</s:p>
        </s:TextFlow>
    </fx:Declarations>
 
    <s:RichText id="richTxt"
            textFlow="{txtFlow1}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

5) You can load a TextFlow object from an external file and use the static TextFlowUtil.importFromXML() method:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:XML id="textFlowAsXML" source="externalTextFlow1.xml" />
    </fx:Declarations>
 
    <s:RichText id="richTxt"
            textFlow="{TextFlowUtil.importFromXML(textFlowAsXML)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the external TextFlow file, externalTextFlow1.xml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve">
    <p><span>The quick brown </span> <span fontWeight="bold">fox jumps over</span> <span> the lazy dogg.</span></p>
</TextFlow>

6) You can store the HTML markup in a string and use the static TextFlowUtil.importFromString() method:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import spark.utils.TextFlowUtil;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:String id="htmlTextAsMarkup"><![CDATA[<p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>]]></fx:String>
    </fx:Declarations>
 
    <s:RichText id="richTxt"
            textFlow="{TextFlowUtil.importFromString(htmlTextAsMarkup)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

7) You can store the HTML markup as XML and use the static TextFlowUtil.importFromXML() method:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.WhiteSpaceCollapse;
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
 
            [Bindable]
            private var htmlTextAsXML:XML = <div>
                    <p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>
                </div>;
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            textFlow="{TextFlowUtil.importFromXML(htmlTextAsXML, WhiteSpaceCollapse.PRESERVE)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

8) Convert HTML formatted text to a TextFlow object using the static TextConverter.importToFlow() method:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.conversion.TextConverter;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:String id="htmlTextAsHTML"><![CDATA[<p>The quick brown <b>fox jumps over</b> the lazy dogg.</p>]]></fx:String>
    </fx:Declarations>
 
    <s:RichText id="richTxt"
            textFlow="{TextConverter.importToFlow(htmlTextAsHTML, TextConverter.HTML_FORMAT)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

9) Dynamically load an external TextFlow XML object at runtime using the HTTPService tag:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.WhiteSpaceCollapse;
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
 
            protected function init():void {
                httpServ.send();
            }
 
            protected function httpServ_result(evt:ResultEvent):void {
                richTxt.textFlow = TextFlowUtil.importFromXML(evt.result as XML, WhiteSpaceCollapse.PRESERVE);
            }
 
            protected function httpServ_fault(evt:FaultEvent):void {
                Alert.show(evt.fault.message);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <mx:HTTPService id="httpServ"
                url="externalTextFlow2.xml"
                resultFormat="e4x"
                result="httpServ_result(event);"
                fault="httpServ_fault(event);" />
    </fx:Declarations>
 
    <s:RichText id="richTxt"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the external TextFlow file, externalTextFlow2.xml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve">
    <p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>
</TextFlow>

10) Dynamically load an external TextFlow XML object at runtime using the URLLoader class:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init()">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.formats.WhiteSpaceCollapse;
            import spark.utils.TextFlowUtil;
 
            XML.ignoreWhitespace = false;
 
            protected var ldr:URLLoader;
 
            protected function init():void {
                ldr = new URLLoader();
                ldr.dataFormat = URLLoaderDataFormat.TEXT;
                ldr.addEventListener(Event.COMPLETE, ldr_complete);
                ldr.load(new URLRequest("externalTextFlow2.xml"));
            }
 
            protected function ldr_complete(evt:Event):void {
                richTxt.textFlow = TextFlowUtil.importFromString(ldr.data);
            }
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

And the external TextFlow file, externalTextFlow2.xml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve">
    <p>The quick brown <span fontWeight="bold">fox jumps over</span> the lazy dogg.</p>
</TextFlow>

NOTE: If you wanted to convert the TextFlow from a String to an XML object, replace the ldr_complete() method with the following code:

protected function ldr_complete(evt:Event):void {
    var theXML:XML = new XML(ldr.data);
    richTxt.textFlow = TextFlowUtil.importFromXML(theXML);
}

11) You can also embed an external file inline and set the text property, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_text_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:RichText id="richTxt"
            horizontalCenter="0" verticalCenter="0">
        <s:text>
            <fx:String source="externalTextFile1.txt" />
        </s:text>
    </s:RichText>
 
</s:Application>

And the external text file, externalTextFile1.txt, is as follows:

The quick brown fox jumps over the lazy dogg.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

14 thoughts on “Setting text in a Spark RichText control in Flex 4

  1. Damn that tag muncher!!! Here it is again … sorry folks …

    Wow … that’s a great post Peter. One for the bookmarks.
    Something to ask you … whenever I’ve used HTML formatted text in Flex I’ve never been able to get my Stylesheet to change the font for certain tags. For example, if I use <h1>, <h2> and <p> tags in my text; I can use a Stylesheet to change the font size and colour for the different tags to make my headings but if I try and set different fonts for each tag it wont render. I used to be able to do this in Flash without a problem. Also, there was never a way to adjust paragraph spacing between tags. Do you (or can you) provide an example of this?

    1. Sorry, as for your first question. I’m not sure. In the Halo TextArea, you could try forcing a StyleSheet object to apply some formatting. My suggestion would be to file a bug at http://bugs.adobe.com/flex/ and myself or somebody else can take a look. (And please attach a simple test case, if possible.)

      Peter

  2. Hi Peter,

    My flash builder does not recognize ‘s:textFlow’, do you know why?

    (i get error: “1178: Attempted access of inaccessible property textFlow through a reference with static type spark.primitives:RichText. TestWeb.mxml TestWeb/src Unknown Flex Problem”)

    Lior

    1. Lior – If you’re using the beta SDK, textFlow didn’t exist at that point in time. Update to a nightly SDK to expose that.

  3. thank you! thank you! thank you! bless the day your mother gave birth to you!
    I have looked for days for SOMEONE who has mastered text i/o in Flex.
    this has solved a big problem for me. thanks again for your hard work and diligence.
    Paul Chavaux
    yeswedoservers.com
    stopwastingmytime.org
    tweensteeples.com

  4. Hello,

    I’ve just started working with TLF. I am trying to make a TextArea or RichText that autosizes to the content I put in using textFlow = TextConverter.importToFlow (S, TextConverter .TEXT_FIELD_HTML_FORMAT);

    This works fine. The only problem is I can’t figure out how to determine the size of the textArea after adding the text. Any ideas?

    lee

  5. Hi
    I have a xml file and i want to show the specific tag content in rich text(not the whole xml entire) how can i do that?
    thanks

Comments are closed.