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>

10 thoughts on “Auto-scrolling a TextArea control in Flex

  1. Thanks for this USEFULL site Peter !!!

    Do you have a way to show the first or last position on a text that is larger than a ?
    When the user/an AS script set a text longer than a InputText, the cursor stay on the last position.
    In the most case, users want to see the begening of the text, but when I set the cursor position, this does not make the InpuText control to show the beginning of the text.

    Thanks

  2. I found that using Binding is much better than using the timer to continuously check for the scroll position

    something like…

    BindingUtils.bindProperty(inputBox,"verticalScrollPosition",inputBox,"maxVerticalScrollPosition");
    

    yeah .. thats it. Just one line ..

  3. hello sir
    My name is sachin n i am trying to make VBox container which ll store all news came from XML File, and that container should scroll automatically and smoothly also (i tried by timer but its not smoothly) and when user will click on any news heading, that specific news should open in another popup, simultaniasly if user only moves cursor on any news scrolling should stop automatically, n on mouseout then it should resume the scrolling .. pls help me

Comments are closed.