Formatting selected text using the Spark TextArea control in Flex 4

The following example shows how you can format the selected text in the Spark TextArea control in Flex 4 by creating a style object and calling the setSelectionFormat() 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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/05/19/formatting-selected-text-using-the-spark-textarea-control-in-flex-gumbo/ -->
<s:Application name="Spark_TextArea_setSelectionFormat_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 flash.text.engine.FontWeight;
            import flashx.textLayout.formats.TextLayoutFormat;
 
            private function btn_click(evt:MouseEvent):void {
                var styleObj:TextLayoutFormat = new TextLayoutFormat();
                styleObj.fontWeight = FontWeight.BOLD;
                styleObj.color = 0xFF0000; // red
                textArea.setFormatOfRange(styleObj);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Style selected text"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <s:TextArea id="textArea"
            horizontalCenter="0"
            verticalCenter="0">
        <s:content>
            <s:p>Select some text and click the button to apply a bold/red style.</s:p>
        </s:content>
    </s:TextArea>
 
</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.

6 thoughts on “Formatting selected text using the Spark TextArea control in Flex 4

  1. Nice example, setSelectionFormat(styleObj) works just out of the box.

    I have another question about TextArea scrolling properties. In Flex 3 “Halo”, mx.controls.TextArea has scroll properties: verticalScrollPosition and maxVerticalScrollPosition, which makes autoscrolling possible:

    myTextArea.verticalScrollPosition = myTextArea.maxVerticalScrollPosition;

    (Oh, I’ve just recalled you wrote about it already!)

    So, my question is:
    Are there such properties in Spark TextArea and how to use them? I’ve tried quickly today but failed to. I’m feeling like I’ve missed something very simple.

    1. @Rostislav Siryk,

      This is a bit trickier in Flex 4, and I don’t think I have a specific example for it yet, but this may give you some ideas; “http://blog.flexexamples.com/2008/12/09/determining-the-current-scroll-position-on-an-fxtextarea-control-in-flex-gumbo/” (Disclaimer: that example uses some old APIs and won’t work without a bit of code tweaking).

      The general gist of it is, you may need to access the Spark TextArea control’s inner scrollbars and get the VScrollBar control’s value and maximum properties.

      Peter

      1. Actually, looking at the Spark TextArea class, the appendText() method should add the new string and scroll to the end of the TextArea for you, making this a lot easier in Flex 4:

        <?xml version="1.0" encoding="utf-8"?>
        <s:Application name="Spark_TextArea_appendText_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"
                       creationComplete="init();">
         
            <fx:Script>
                <![CDATA[
                    private var timer:Timer;
         
                    private function init():void {
                        timer = new Timer(500);
                        timer.addEventListener(TimerEvent.TIMER, onTimer);
                        timer.start();
                    }
         
                    private function onTimer(evt:TimerEvent):void {
                        var now:String = new Date().toTimeString();
                        var str:String = "[" + timer.currentCount + "] " + now;
                        textArea.appendText(str + "n");
                    }
                ]]>
            </fx:Script>
         
            <s:TextArea id="textArea"
                    verticalScrollPolicy="on"
                    horizontalCenter="0"
                    verticalCenter="0" />
         
        </s:Application>

        Peter

  2. Ha!
    Updated the example to work with Flex SDK 4.0.0.8811+. The setSelectionFormat() method was renamed to setFormatOfRange() and the API changed slightly.

    So now it won’t work with the default SDK that shipped with Flash Builder 4 beta 1, but will work with the newer Nightly Builds of the Flex 4 SDK.

    Peter

Comments are closed.