Programmatically scrolling the Spark TextArea control in Flex 4

The following example shows how you can programmatically scroll the Spark TextArea control in Flex 4 by setting the vertical scroll position on the horizontal and vertical scroll bars in the scroller, horizontalScrollBar, and verticalScrollBar skin parts.

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/2010/02/18/programmatically-scrolling-the-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_verticalScrollBar_value_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="scroll horizontally:">
                <s:HSlider id="hSl" minimum="0" change="hSl_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="scroll vertically:">
                <s:HSlider id="vSl" minimum="0" change="vSl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected function ta_updateCompleteHandler(evt:FlexEvent):void {
                hSl.maximum = ta.scroller.horizontalScrollBar.maximum;
                vSl.maximum = ta.scroller.verticalScrollBar.maximum;
            }
 
            protected function hSl_changeHandler(evt:Event):void {
                ta.scroller.horizontalScrollBar.value = hSl.value;
            }
 
            protected function vSl_changeHandler(evt:Event):void {
                ta.scroller.verticalScrollBar.value = vSl.value;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
                widthInChars="20" heightInLines="5"
                lineBreak="explicit"
                horizontalCenter="0" verticalCenter="0"
                updateComplete="ta_updateCompleteHandler(event)">
        <s:textFlow>
            <s:TextFlow>
                <s:p>1234567890123456789012345678901234567890</s:p>
                <s:p>2345678901234567890123456789012345678901</s:p>
                <s:p>3456789012345678901234567890123456789012</s:p>
                <s:p>4567890123456789012345678901234567890123</s:p>
                <s:p>5678901234567890123456789012345678901234</s:p>
                <s:p>6789012345678901234567890123456789012345</s:p>
                <s:p>7890123456789012345678901234567890123456</s:p>
                <s:p>8901234567890123456789012345678901234567</s:p>
                <s:p>9012345678901234567890123456789012345678</s:p>
                <s:p>0123456789012345678901234567890123456789</s:p>
            </s:TextFlow>
        </s:textFlow>
    </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.

2 thoughts on “Programmatically scrolling the Spark TextArea control in Flex 4

  1. I want to know why when using a richTextEditor the following code doesn’t move the scrollbar to the new position:

    this.textArea.verticalScrollPosition = newNumber;

Comments are closed.