Flex Examples » RichText (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a rich text label on a Spark Button control in Flex 4 http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/#comments Fri, 22 Oct 2010 21:50:46 +0000 Peter deHaan http://blog.flexexamples.com/?p=3379 The following example shows how you can set a rich, multi-format text label on a Spark Button control by subclassing the Spark Button control and creating a custom Button skin which uses a RichText label display skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_textFlow_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comps="comps.*">   <fx:Style> @namespace comps [...]]]> The following example shows how you can set a rich, multi-format text label on a Spark Button control by subclassing the Spark Button control and creating a custom Button skin which uses a RichText label display skin part.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_textFlow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:comps="comps.*">
 
    <fx:Style>
        @namespace comps "comps.*";
 
        comps|RichButton {
            skinClass: ClassReference("skins.RichButtonSkin");
        }
    </fx:Style>
 
    <comps:RichButton horizontalCenter="0" verticalCenter="0">
        <comps:textFlow>
            <s:TextFlow>
                <s:p fontStyle="italic">The quick<s:br/>brown fox <s:span fontWeight="bold">jumps<s:br/>over the</s:span> lazy <s:span color="#FF0000" fontStyle="normal">dog</s:span>.</s:p>
                <s:p>And then some more stuff.</s:p>
            </s:TextFlow>
        </comps:textFlow>
    </comps:RichButton>
 
</s:Application>

The custom Spark Button control, comps/RichButton.as, is as follows:

/** http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ */
package comps {
    import flashx.textLayout.elements.TextFlow;
    import spark.components.Button;
 
    public class RichButton extends Button {
        public function RichButton() {
            super();
        }
 
        [Bindable]
        public var textFlow:TextFlow;
    }
}

And the custom RichButton skin, skins/RichButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/ -->
<s:SparkSkin name="RichButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("comps.RichButton")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            import spark.components.Group;
 
            /* Define the skin elements that should not be colorized.
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                var cr:Number = getStyle("cornerRadius");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
 
                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private var cornerRadius:Number = 2;
 
        ]]>
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.01" alpha.down="0" />
                <s:GradientEntry color="0x000000" color.down="0xFFFFFF" alpha="0.07" alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" color.over="0xBBBDBD" color.down="0xAAAAAA" alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" color.over="0x9FA0A1" color.down="0x929496" alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" ratio="0.0" alpha="0.33" alpha.over="0.22" alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF" ratio="0.48" alpha="0.33" alpha.over="0.22" alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.5625" alpha.down="0.6375" />
                <s:GradientEntry color="0x000000" alpha="0.75" alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: text -->
    <s:RichText id="rt"
            textFlow="{hostComponent.textFlow}"
            textAlign="center"
            verticalAlign="middle"
            horizontalCenter="0" verticalCenter="1"
            left="10" right="10" top="2" bottom="2" />
 
</s:SparkSkin>

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/2010/10/22/setting-a-rich-text-label-on-a-spark-button-control-in-flex-4/feed/ 1 Creating blinking text on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/#comments Fri, 13 Aug 2010 21:09:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=3239 The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog [...]]]> The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog (who may be the only people to want to bring back the old HTML blinking text effect).

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_blink_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Declarations>
        <s:Animate id="fader"
                duration="500"
                repeatBehavior="reverse"
                repeatCount="0"
                target="{lbl}">
            <s:SimpleMotionPath property="alpha"
                    valueFrom="1.0" valueTo="0.0" />
        </s:Animate>
    </fx:Declarations>
 
    <s:Label id="lbl"
            text="BLINKING TEXT, I HATE YOU!"
            color="red"
            fontSize="32"
            creationComplete="fader.play();" />
 
</s:Application>

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/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/feed/ 7 Setting the line height on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/#comments Thu, 18 Mar 2010 23:47:18 +0000 Peter deHaan http://blog.flexexamples.com/?p=2605 The following example shows how you can set the line height on a Spark RichText control in Flex 4 by setting the lineHeight style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ --> <s:Application name="Spark_RichText_lineHeight_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem label="lineHeight:"> <s:HSlider id="sl" minimum="10" maximum="24" value="14" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   <s:RichText id="richTxt" lineHeight="{sl.value}" textAlign="justify" left="20" [...]]]> The following example shows how you can set the line height on a Spark RichText control in Flex 4 by setting the lineHeight style.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_lineHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="lineHeight:">
                <s:HSlider id="sl" minimum="10" maximum="24" value="14" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:RichText id="richTxt"
            lineHeight="{sl.value}"
            textAlign="justify"
            left="20" right="20"
            top="20">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:RichText>
 
</s:Application>

You can also set the lineHeight style in an external .CSS file or <Style> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_lineHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|RichText {
            lineHeight: 24;
        }
    </fx:Style>
 
    <s:RichText id="richTxt"
            textAlign="justify"
            left="20" right="20"
            top="20">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:RichText>
 
</s:Application>

Or you can set the lineHeight style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_lineHeight_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="lineHeight:">
                <s:HSlider id="sl"
                        minimum="10" maximum="24"
                        value="14"
                        change="sl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sl_changeHandler(evt:Event):void {
                richTxt.setStyle("lineHeight", sl.value);
            }
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            textAlign="justify"
            left="20" right="20"
            top="20">
        <s:text><fx:String source="lorem.txt" /></s:text>
    </s:RichText>
 
</s:Application>

You can also set the lineHeight style to a percentage value, as seen in the following snippets.
MXML:

<s:RichText id="richTxt"
        lineHeight="200%">
    <s:text><fx:String source="lorem.txt" /></s:text>
</s:RichText>

CSS:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
 
    s|RichText {
        lineHeight: "200%";
    }
</fx:Style>

ActionScript:

<fx:Script>
    <![CDATA[
        protected function hslider1_changeHandler(evt:Event):void {
            richTxt.setStyle("lineHeight", "200%");
        }
    ]]>
</fx:Script>

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/2010/03/18/setting-the-line-height-on-a-spark-richtext-control-in-flex-4/feed/ 0 Setting a text indent on the Spark List control in Flex 4 http://blog.flexexamples.com/2010/02/19/setting-a-text-indent-on-the-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/02/19/setting-a-text-indent-on-the-spark-list-control-in-flex-4/#comments Sat, 20 Feb 2010 00:50:18 +0000 Peter deHaan http://blog.flexexamples.com/?p=2498 The following example shows how you can set the text indent on a Spark List control in Flex 4 by creating a custom item renderer using the RichText control and setting the textIndent style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/19/setting-a-text-indent-on-the-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_textIndent_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <fx:Declarations> <s:ArrayCollection id="arrColl"> <fx:String>Lorem ipsum dolor sit amet, [...]]]> The following example shows how you can set the text indent on a Spark List control in Flex 4 by creating a custom item renderer using the RichText control and setting the textIndent style.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/19/setting-a-text-indent-on-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_textIndent_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <fx:Declarations>
        <s:ArrayCollection id="arrColl">
            <fx:String>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae purus vel tellus sagittis feugiat.</fx:String>
            <fx:String>Sed tortor turpis, lacinia ac fringilla nec, bibendum id lorem. Nunc euismod malesuada tellus sit amet ultrices.</fx:String>
            <fx:String>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</fx:String>
            <fx:String>Aliquam erat volutpat. Cras pellentesque faucibus iaculis. Donec mi elit, lacinia sed eleifend at, vestibulum in enim.</fx:String>
            <fx:String>Donec lacinia libero tincidunt risus ultricies sit amet tristique ante suscipit. Sed risus lectus, rhoncus convallis posuere vitae, molestie sit amet tortor.</fx:String>
            <fx:String>Vestibulum arcu augue, congue dignissim ultrices eu, porta ac metus. Praesent fringilla, libero vel adipiscing vehicula, ipsum ante mattis leo, eu ornare libero massa at tellus.</fx:String>
            <fx:String>Morbi fermentum convallis erat. Donec a lacinia nisi. Curabitur vitae nibh ante, interdum rhoncus nisi.</fx:String>
            <fx:String>Sed id risus non risus lobortis aliquet. Nam iaculis, mi scelerisque tempor faucibus, justo leo dignissim erat, id elementum dolor tellus vitae metus.</fx:String>
            <fx:String>Ut a nisi at sapien pellentesque faucibus.</fx:String>
        </s:ArrayCollection>
    </fx:Declarations>
 
    <s:List id="lst1"
            dataProvider="{arrColl}"
            alternatingItemColors="[#FFFFFF, #EEEEEE]"
            textAlign="justify"
            width="200" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout horizontalAlign="justify"
                    gap="0"
                    requestedRowCount="4"
                    variableRowHeight="true" />
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>
                    <s:RichText text="{data}"
                            textIndent="20"
                            width="100%"
                            lineBreak="toFit"
                            paddingLeft="5" paddingRight="5"
                            paddingTop="5" paddingBottom="5" />
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>
    </s:List>
 
</s:Application>

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/2010/02/19/setting-a-text-indent-on-the-spark-list-control-in-flex-4/feed/ 3 Dynamically adding paragraphs to a Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/#comments Sat, 10 Oct 2009 06:59:06 +0000 Peter deHaan http://blog.flexexamples.com/?p=2107 The following example shows how you can dynamically add paragraphs to a TextFlow in a Spark RichText control by creating a new SpanElement (<span/>) and ParagraphElement (<p/>) object and then adding the spans and paragraphs to the textFlow object using the addChild() method.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/ --> [...]]]> The following example shows how you can dynamically add paragraphs to a TextFlow in a Spark RichText control by creating a new SpanElement (<span/>) and ParagraphElement (<p/>) object and then adding the spans and paragraphs to the textFlow object using the addChild() method.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_textFlow_addChild_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:controlBarContent>
        <s:Button id="btn"
                label="Add paragraph"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import flash.text.engine.FontWeight;
            import flashx.textLayout.elements.ParagraphElement;
            import flashx.textLayout.elements.SpanElement;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                var span1:SpanElement = new SpanElement();
                span1.fontWeight = FontWeight.BOLD;
                span1.text = new Date().toDateString() + ': ';
 
                var span2:SpanElement = new SpanElement();
                span2.text = new Date().toTimeString();
 
                var para:ParagraphElement = new ParagraphElement();
                para.addChild(span1);
                para.addChild(span2);
 
                rchTxt.textFlow.addChild(para);
            }
        ]]>
    </fx:Script>
 
    <s:Scroller height="100" horizontalCenter="0" verticalCenter="0">
        <s:Group width="100%" height="100%">
            <s:RichText id="rchTxt">
                <s:textFlow>
                    <s:TextFlow />
                </s:textFlow>
            </s:RichText>
        </s:Group>
    </s:Scroller>
 
</s:Application>

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/10/09/dynamically-adding-paragraphs-to-a-spark-richtext-control-in-flex-4/feed/ 0 Displaying HTML formatted text in a Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/#comments Wed, 07 Oct 2009 00:44:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=1978 The following example shows how you can set HTML text in a Spark RichText control in Flex 4 by converting the HTML string to a TextFlow object using the static TextConverter.importToFlow() method and setting the textFlow property.

Full code after the jump.

In build 4.0.0.10936 (checkin notes), the static TextConverter.TEXT_FIELD_HTML_FORMAT property changed [...]]]> The following example shows how you can set HTML text in a Spark RichText control in Flex 4 by converting the HTML string to a TextFlow object using the static TextConverter.importToFlow() method and setting the textFlow property.

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.

In build 4.0.0.10936 (checkin notes), the static TextConverter.TEXT_FIELD_HTML_FORMAT property changed to TextConverter.TEXT_FIELD_HTML_FORMAT.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_textFlow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <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.TEXT_FIELD_HTML_FORMAT)}"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

View source is enabled in the following example.

Or, you can set the textFlow property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_textFlow_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <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"
            horizontalCenter="0" verticalCenter="0"
            initialize="richTxt.textFlow = TextConverter.importToFlow(htmlTextAsHTML, TextConverter.TEXT_FIELD_HTML_FORMAT);"/>
 
</s:Application>

For more examples of setting text in the Spark RichText control, see “Setting text in a Spark RichText control in Flex 4″.

 
]]> http://blog.flexexamples.com/2009/10/06/displaying-html-formatted-text-in-a-spark-richtext-control-in-flex-4/feed/ 12 Setting tab stops on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/#comments Wed, 26 Aug 2009 18:53:10 +0000 Peter deHaan http://blog.flexexamples.com/?p=1754 The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the tabStops style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ --> <s:Application name="Spark_RichText_tabStops_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:controlBarContent> <mx:Form> <mx:FormItem label="direction:"> <s:DropDownList id="dropDownList" requireSelection="true"> <s:dataProvider> <s:ArrayList source="[ltr,rtl]" /> </s:dataProvider> </s:DropDownList> </mx:FormItem> </mx:Form> [...]]]> The following example shows how you can use tab stops on a Spark RichText primitive in Flex 4 by setting the tabStops style.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_tabStops_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="direction:">
                <s:DropDownList id="dropDownList" requireSelection="true">
                    <s:dataProvider>
                        <s:ArrayList source="[ltr,rtl]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel title="Spark RichText tabStops/tab test"
            horizontalCenter="0" verticalCenter="0">
        <mx:VRule x="100" />
        <mx:VRule x="200" />
        <mx:VRule x="300" />
 
        <s:RichText id="richTxt"
                direction="{dropDownList.selectedItem}"
                tabStops="100 200 300"
                paragraphSpaceAfter="20"
                width="400">
            <s:content>
                <s:p direction="ltr" fontWeight="bold">0px<s:tab/>100px<s:tab/>200px<s:tab/>300px</s:p>
                <s:p>Col 1<s:tab/>Col 2<s:tab/>Col 3<s:tab/>Col 4</s:p>
            </s:content>
        </s:RichText>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.


You can also set tabs in a RichText control by setting the text property and using \t, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_tabStops_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="direction:">
                <s:DropDownList id="dropDownList" requireSelection="true">
                    <s:dataProvider>
                        <s:ArrayList source="[ltr,rtl]" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel title="Spark RichText tabStops/tab test"
            horizontalCenter="0" verticalCenter="0">
        <mx:VRule x="100" />
        <mx:VRule x="200" />
        <mx:VRule x="300" />
 
        <s:RichText id="richTxt"
                text="Col 1{'\t'}Col 2{'\t'}Col 3{'\t'}Col 4"
                direction="{dropDownList.selectedItem}"
                tabStops="100 200 300"
                paragraphSpaceAfter="20"
                width="400" />
    </s:Panel>
 
</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/08/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_tabStops_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.Direction;
            import mx.collections.ArrayList;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.VRule;
            import mx.core.FlexGlobals;
            import spark.components.DropDownList;
            import spark.components.Panel;
            import spark.events.IndexChangeEvent;
            import spark.primitives.RichText;
 
            private var dropDownList:DropDownList;
            private var pnl:Panel;
            private var richTxt:RichText;
 
            private function init():void {
                dropDownList = new DropDownList();
                dropDownList.dataProvider = new ArrayList([Direction.LTR, Direction.RTL]);
                dropDownList.requireSelection = true;
                dropDownList.addEventListener(IndexChangeEvent.CHANGE, dropDownList_change);
 
                var formItem:FormItem = new FormItem();
                formItem.label = "direction:";
                formItem.addElement(dropDownList);
 
                var form:Form = new Form();
                form.addElement(formItem);
 
                Application(FlexGlobals.topLevelApplication).controlBarContent = [form];
 
                richTxt = new RichText();
                richTxt.text = "Col 1\tCol 2\tCol 3\tCol 4";
                richTxt.setStyle("tabStops", "100 200 300");
                richTxt.setStyle("paragraphSpaceAfter", 20);
                richTxt.width = 400;
 
                var vRule1:VRule = new VRule();
                vRule1.x = 100;
 
                var vRule2:VRule = new VRule();
                vRule2.x = 200;
 
                var vRule3:VRule = new VRule();
                vRule3.x = 300;
 
                pnl = new Panel();
                pnl.title = "Spark RichText tabStops/tab test";
                pnl.horizontalCenter = 0;
                pnl.verticalCenter = 0;
                pnl.addElement(vRule1);
                pnl.addElement(vRule2);
                pnl.addElement(vRule3);
                pnl.addElement(richTxt);
                addElement(pnl);
            }
 
            protected function dropDownList_change(evt:IndexChangeEvent):void {
                richTxt.setStyle("direction", dropDownList.selectedItem);
            }
        ]]>
    </fx:Script>
 
</s:Application>

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/26/setting-tab-stops-on-a-spark-richtext-control-in-flex-4/feed/ 4 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 Importing a text flow from an XML object in Flex 4 http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/#comments Fri, 26 Jun 2009 06:59:35 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static TextFlowUtil.importFromXML() method.

Full code after the jump.

View MXML

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ --> <s:Application name="TextFlowUtil_importFromXML_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;   [Bindable] [...]]]> The following example shows how you can import a TextFlow object from an XML object in Flex 4 by using the static TextFlowUtil.importFromXML() method.

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"?>
<!-- http://blog.flexexamples.com/2009/06/25/importing-a-text-flow-from-an-xml-object-in-flex-4/ -->
<s:Application name="TextFlowUtil_importFromXML_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;
 
            [Bindable]
            private var theXML:XML = <div textAlign="justify" paragraphSpaceBefore="20">
                    <p><span fontWeight="bold">Lorem ipsum dolor sit amet</span>, consectetur adipiscing elit. Sed vel lacus dignissim tellus lobortis pulvinar eget tempus dui. <span fontStyle="italic">Mauris et lacus velit, ac dictum augue.</span> Etiam non nisi eu nisl aliquet ullamcorper. Etiam pellentesque, purus vel pulvinar bibendum, libero orci pharetra erat, in dictum ipsum lacus in tortor. Suspendisse auctor, odio non ornare laoreet, diam dolor varius lacus, quis eleifend sem erat vel ipsum. Nunc tortor purus, suscipit eu semper ac, auctor nec lorem. Etiam tempor dignissim nisi, sed imperdiet quam dignissim et. In a neque mauris, at feugiat ante. Aliquam vel elit enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent hendrerit dapibus turpis, ut euismod metus venenatis eget. Maecenas in orci nunc, nec consequat augue. Vestibulum egestas lacus vel risus faucibus tempor. Pellentesque purus tortor, sodales id tempus et, aliquet vel libero. Morbi dolor justo, feugiat at facilisis eget, mollis vel sem. Cras ut mi dui. Cras fringilla, dui pellentesque congue vehicula, felis nisl molestie turpis, ut eleifend arcu augue in magna. Nunc adipiscing mi ac urna laoreet aliquam pretium mauris sagittis. Quisque eu mi sit amet sem mollis tincidunt.</p>
                    <p>Cras nec mi tortor, id pretium sem. <span lineThrough="true">In hendrerit viverra orci quis condimentum.</span> Maecenas et arcu quis arcu volutpat consectetur quis vel tellus. <span color="#FF0000">Donec dapibus, est cursus convallis porta, dolor enim ullamcorper neque, eu aliquet elit risus at neque.</span> Proin eget tortor non velit pretium mattis eget vitae neque. Fusce sollicitudin odio at neque molestie et tempus est condimentum. Proin dignissim egestas egestas. Proin luctus, velit at ultricies aliquam, leo sapien tempor purus, tristique semper mauris velit ut turpis. Donec vestibulum mattis tellus, at molestie massa luctus vitae. Donec auctor, mi quis commodo condimentum, nisl sapien pharetra lorem, id venenatis felis sapien quis lacus. Cras dapibus, tortor porttitor varius vulputate, lorem elit auctor turpis, a consectetur enim magna eget mi. Sed dapibus volutpat semper. Sed rhoncus pulvinar semper. Etiam in mi nec massa venenatis cursus quis in massa. Quisque pulvinar nulla quis neque lobortis molestie. Phasellus ullamcorper cursus volutpat. Mauris dictum felis at est sodales tincidunt. Aliquam congue nibh vitae dolor dignissim ut tincidunt sem commodo. Sed sit amet turpis ac lectus molestie facilisis vitae at neque. Phasellus nec justo tortor.</p>
                </div>;
        ]]>
    </fx:Script>
 
    <s:RichText id="richTxt"
            textFlow="{TextFlowUtil.importFromXML(theXML)}"
            left="20" right="20"
            verticalCenter="0" />
 
</s:Application>

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/25/importing-a-text-flow-from-an-xml-object-in-flex-4/feed/ 10 Truncating text with the Spark RichText control in Flex 4 http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/#comments Thu, 28 May 2009 05:30:30 +0000 Peter deHaan http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ The following example shows how you can truncate text in the Spark RichText control in Flex 4 by setting the maxDisplayedLines property and specifying the maximum number of visible lines.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ --> <s:Application name="Spark_RichText_maxDisplayedLines_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <mx:Form> <mx:FormItem label="truncation:"> <s:HSlider id="slider" minimum="-1" maximum="22" /> </mx:FormItem> </mx:Form> </s:controlBarContent>   [...]]]> The following example shows how you can truncate text in the Spark RichText control in Flex 4 by setting the maxDisplayedLines property and specifying the maximum number of visible lines.

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ -->
<s:Application name="Spark_RichText_maxDisplayedLines_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="truncation:">
                <s:HSlider id="slider"
                        minimum="-1"
                        maximum="22" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:RichText id="richText"
            maxDisplayedLines="{slider.value}"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:text><fx:String source="dummy.txt" /></s:text>
    </s:RichText>
 
</s:Application>

View source is enabled in the following example.

You can also set the maxDisplayedLines property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/ -->
<s:Application name="Spark_RichText_maxDisplayedLines_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="truncation:">
                <s:HSlider id="slider"
                        minimum="-1"
                        maximum="22"
                        change="slider_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function slider_changeHandler(evt:Event):void {
                richText.maxDisplayedLines = slider.value;
            }
        ]]>
    </fx:Script>
 
    <s:RichText id="richText"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        <s:text><fx:String source="dummy.txt" /></s:text>
    </s:RichText>
 
</s:Application>

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/05/27/truncating-text-with-the-spark-richtext-control-in-flex-gumbo/feed/ 7