Setting text in a Spark RichText control in Flex 4

by Peter deHaan on August 11, 2009

in RichText (Spark), beta1

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 as: , , , , , , , ,

{ 11 comments… read them below or add one }

1 lee probert 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 August 11, 2009 at 10:09 am

@lee probert,

Is this roughly what you’re looking for: “Setting vertical spacing between paragraphs on the Spark TextArea control in Flex 4″?

Peter

Reply

3 Peter deHaan August 11, 2009 at 10:11 am

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

Reply

4 Peter deHaan August 11, 2009 at 6:01 pm

Added HTTPService and URLLoader examples.

Reply

5 philip adnrew 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

6 Peter deHaan August 12, 2009 at 7:04 am

@philip adnrew

I’m not sure, but the best place to ask would probably be on the Text Layout Format (TLF) forums at http://forums.adobe.com/community/opensource/tlf

I *think* they have some examples of adding custom shapes around text (similar to the underlines on a spell checker).

Sorry,
Peter

Reply

7 Lior 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

8 Greg 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

9 Peter deHaan August 13, 2009 at 7:26 pm

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

Reply

10 Paul Chavaux 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

11 Sam Farmer February 5, 2010 at 10:52 am

Thanks. This is very helpful.

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: