Setting text in a Spark RichText control in Flex 4

By Peter deHaan On August 11, 2009 · 14 Comments

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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.


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.

 
Tagged with: • • • • • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

14 Responses to Setting text in a Spark RichText control in Flex 4

  1. lee probert says:
    August 11, 2009 at 9:21 am

    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?

    Reply
  2. Peter deHaan says:
    August 11, 2009 at 6:01 pm

    Added HTTPService and URLLoader examples.

    Reply
  3. philip adnrew says:
    August 11, 2009 at 9:47 pm

    Since you know a lot about flex 4 textarea etc, could you comment on this?
    I have a related question.

    http://forums.adobe.com/thread/474696

    Reply
  4. Lior says:
    August 11, 2009 at 11:51 pm

    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

    Reply
    • Greg says:
      August 12, 2009 at 5:09 am

      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.

      Reply
  5. Peter deHaan says:
    August 13, 2009 at 7:26 pm

    Added example #11 (which isn’t in the source view or source ZIP).

    Reply
  6. Paul Chavaux says:
    October 19, 2009 at 9:12 pm

    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

    Reply
  7. Sam Farmer says:
    February 5, 2010 at 10:52 am

    Thanks. This is very helpful.

    Reply
  8. Thijs says:
    March 3, 2011 at 12:36 am

    fwiw: the example in 8 uses an old constant name, it’s now TextConverter.TEXT_FIELD_HTML_FORMAT.

    Reply
  9. kleelof says:
    April 26, 2011 at 5:25 pm

    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

    Reply
  10. Hadi says:
    August 19, 2011 at 12:39 am

    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

    Reply

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree