<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    viewSourceURL="srcview/index.html"
    backgroundColor="#FFFFF"
    backgroundGradientColors="[#FFFFFF,#FFFFFF]"
    >
    <mx:Script>
        <![CDATA[
            import mx.containers.Canvas;
            import mx.events.IndexChangedEvent;
            
            [Bindable]
            public var selectedIndex:Number = 0;
            
            private function handleCreateTabsClick():void
            {
                tabNav.removeAllChildren();
                
                selectedIndex = 0;
                
                for( var i:int = 0; i < 4; i++ )
                {
                    var canvas:Canvas = new Canvas();
                    canvas.label = "Canvas " + i;
                    
                    tabNav.addChild( canvas );
                }
            }
            
            private var _tabNavChanged:Boolean = false;
            private function handleCreateTabsNewClick():void
            {
                selectedIndex = 0;
                
                _tabNavChanged = true;
                callLater( commitProperties );
                
            }
            
            override protected function commitProperties():void
            {
                super.commitProperties();
                
                if( _tabNavChanged )
                {
                    tabNav.removeAllChildren();
                    
                    for( var i:int = 0; i < 4; i++ )
                    {
                        var canvas:Canvas = new Canvas();
                        canvas.label = "Canvas " + i;
                        
                        tabNav.addChild( canvas );
                    }
                    
                    _tabNavChanged = false;
                }
            }
            
            private function handleTabChange( event:IndexChangedEvent ):void
            {
                selectedIndex = event.newIndex;
            }
        ]]>
    </mx:Script>
    <mx:VBox width="100%">
        <mx:HBox>
            <mx:Button label="create tabs (bad - doesnt reselect 1st index)" click="handleCreateTabsClick()"/>
            <mx:Label text="Change the tabs and then click this button... the tab WONT reset to the first index, BUT SHOOOUUULLDD" />
        </mx:HBox>
        <mx:HBox>
            <mx:Button label="create tabs (good - uses commit properties and resets index)" click="handleCreateTabsNewClick()"/>
            <mx:Label text="Change the tabs and then click this button... the tab will reset to the first index" />
        </mx:HBox>
    </mx:VBox>
    
    
    <mx:TabNavigator
        id="tabNav"
        top="60"
        bottom="0"
        left="0"
        right="0"
        selectedIndex="{selectedIndex}"
        change="handleTabChange( event )"
        >
        <mx:Canvas
            label="Canvas 0"
            />
        <mx:Canvas
            label="Canvas 1"
            />
        <mx:Canvas
            label="Canvas 2"
            />
    </mx:TabNavigator>
</mx:Application>