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.

Tagged as: selectedIndex