Auto-scrolling a TextArea control in Flex

The following example shows how you can auto-scroll a Flex TextArea control when new content is added by setting the verticalScrollPosition property to the value of the maxVerticalScrollPosition property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx: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.text += str + "\\n";
                textArea.validateNow();
                textArea.verticalScrollPosition = textArea.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea"
            width="200"
            height="160" />

</mx:Application>

View source is enabled in the following example.

Or, instead of calling the validateNow() method before using the verticalScrollPosition and maxVerticalScrollPosition properties, you could use the callLater() method to handle the scrolling, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/27/auto-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_maxVerticalScrollPosition_text"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx: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.text += str + "\\n";
                callLater(autoScrollTextArea, [textArea]);
            }

            private function autoScrollTextArea(target:TextArea):void {
                target.verticalScrollPosition = target.maxVerticalScrollPosition;
            }
        ]]>
    </mx:Script>

    <mx:TextArea id="textArea"
            width="200"
            height="160" />

</mx:Application>

Tagged as: callLater(), maxVerticalScrollPosition, validateNow(), verticalScrollPosition