Using a timer to change the selected index of a ViewStack container in Flex

The following example shows how you can use a timer to change the selected index in a Flex ViewStack container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/04/using-a-timer-to-change-the-selected-index-of-a-viewstack-container-in-flex/ -->
<mx:Application 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(1000); /* 1000ms == 1second */
                timer.addEventListener(TimerEvent.TIMER, onTimer);
            }

            private function onTimer(evt:TimerEvent):void {
                var idx:uint = viewStack.selectedIndex;
                var max:uint = viewStack.numChildren;

                var newIdx:uint = ++idx % max;
                viewStack.selectedIndex = newIdx;
            }

            private function startTimer():void {
                if (!timer.running) {
                    timer.start();
                }
            }

            private function stopTimer():void {
                if (timer.running) {
                    timer.stop();
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Start timer" click="startTimer();" />
        <mx:Button label="Stop timer" click="stopTimer();" />

        <mx:Spacer width="100%" />

        <mx:Label text="selectedIndex:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="3"
                liveDragging="true"
                snapInterval="1"
                tickInterval="1"
                change="viewStack.selectedIndex = event.value;" />
    </mx:ApplicationControlBar>

    <mx:ViewStack id="viewStack" width="100%" height="100%">
        <mx:VBox backgroundColor="haloBlue"
                width="100%"
                height="100%">
            <mx:Label text="VBox 1" />
        </mx:VBox>
        <mx:VBox backgroundColor="haloGreen"
                width="100%"
                height="100%">
            <mx:Label text="VBox 2" />
        </mx:VBox>
        <mx:VBox backgroundColor="haloOrange"
                width="100%"
                height="100%">
            <mx:Label text="VBox 3" />
        </mx:VBox>
        <mx:VBox backgroundColor="haloSilver"
                width="100%"
                height="100%">
            <mx:Label text="VBox 4" />
        </mx:VBox>
    </mx:ViewStack>

</mx:Application>

View source is enabled in the following example.

2 thoughts on “Using a timer to change the selected index of a ViewStack container in Flex

  1. Hi peter,

    i want to do the same color change to text change and from the data parse from xml how can we do that please let me know on this please

  2. Hi!

    And what’s the difference if I’d use the “Timer” in a List, or DataGrid?

    Thanks!

Comments are closed.