Flex Examples » TextFlowUtil http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting text in a Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/#comments Tue, 11 Aug 2009 14:35:04 +0000 Peter deHaan http://blog.flexexamples.com/?p=1551 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.

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"> [...]]]> 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.

 
]]> http://blog.flexexamples.com/2009/08/11/setting-text-in-a-spark-richtext-control-in-flex-4/feed/ 14 Styling hyperlinks in a TextFlow object in Flex 4 http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/#comments Mon, 29 Jun 2009 06:59:25 +0000 Peter deHaan http://blog.flexexamples.com/?p=1220 The following example shows how you can style links in a TextFlow object in Flex 4 by specifying the linkNormalFormat, linkHoverFormat, and linkActiveFormat properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ --> <s:Application name="Spark_TextArea_textFlow_linkHoverFormat_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 = [...]]]> The following example shows how you can style links in a TextFlow object in Flex 4 by specifying the linkNormalFormat, linkHoverFormat, and linkActiveFormat properties.

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.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ -->
<s:Application name="Spark_TextArea_textFlow_linkHoverFormat_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;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:String id="markup" source="teaserTextFlow.xml" />
    </fx:Declarations>
 
    <s:TextArea id="txtArea"
            textFlow="{TextFlowUtil.importFromString(markup, WhiteSpaceCollapse.PRESERVE)}"
            editable="false"
            width="400"
            horizontalCenter="0"
            verticalCenter="0" />
 
</s:Application>

And the TextFlow markup is as follows:

View teaserTextFlowxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/ -->
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008" whiteSpaceCollapse="preserve" fontSize="16" paragraphSpaceAfter="15" paddingTop="4" paddingLeft="4">
    <linkNormalFormat color="#0000ff" textDecoration="underline" />
    <linkHoverFormat color="#ff0000" textDecoration="underline" />
    <linkActiveFormat color="#ff00ff" textDecoration="underline" />
    <format id="code" backgroundColor="#000000" backgroundAlpha="0.1" fontFamily="_typewriter" />
    <p fontWeight="bold">The following excerpt is from <a href="http://blog.flexexamples.com/" target="_self">Flex Examples</a>:</p>
    <p>The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static <span format="code">TextFlowUtil.importFromXML()</span> method.</p>
    <p>For more information, see <a href="http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/">"Importing a text flow from an XML object in Flex 4"</a>.</p>
</TextFlow>

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.

 
]]> http://blog.flexexamples.com/2009/06/28/styling-hyperlinks-in-a-textflow-object-in-flex-4/feed/ 10