Here is a sample demonstrating how to dynamically create tabs but maintain the currently selected tab.
Application:
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
xmlns:tabNavigatorTest="tabNavigatorTest.*">
<mx:script>
<!–[CDATA[
import mx.core.Container;
private function setTabSelectedIndex(selectedIndex:Number = 0):void{
trace("before selected index = " + myTab.selectedIndex);
myTab.selectedIndex = selectedIndex;
trace("after selected index = " + myTab.selectedIndex);
}
private function resetTabChildren():void{
myTab.removeAllChildren();
addIndex.maximum=0;
addChildToTabAtIndex(0,0);
addChildToTabAtIndex(1,1);
addChildToTabAtIndex(2,2);
}
private function addChildToTabAtIndex(childType:int,index:int):void{
var childToAdd:Object;
switch(childType){
case 0 : childToAdd = new Page1();
break;
case 1 : childToAdd = new Page2();
break;
case 2 : childToAdd = new Page3();
break;
}
myTab.addChildAt(childToAdd as DisplayObject,index);
addIndex.maximum++;;
}
]]–>
</mx:script>
<mx:vbox width="100%" height="100%">
<mx:hbox>
<!– adjust selectedindex.value – 1 to account for 0 based index –>
<mx:button click="setTabSelectedIndex(tabSelectedIndex.value-1)" label="Set tab selected index">
<mx:numericstepper id="tabSelectedIndex" minimum="1" maximum="3" value="1">
<!– adjust selectedindex.value – 1 to account for 0 based index –>
<mx:button click="addChildToTabAtIndex(tabSelectedIndex.value-1,addIndex.value-1 )">
<mx:label><!–[CDATA[<-add tab child Page Type – at position->]]–></mx:label>
</mx:button>
<mx:numericstepper id="addIndex" minimum="1" maximum="1" value="1">
</mx:numericstepper>
<mx:tabnavigator id="myTab" creationcomplete="resetTabChildren()">
width="100%" height="100%" creationPolicy="all" backgroundColor="#FFFFFF"
borderThickness="1" borderStyle="solid" minHeight="0" minWidth="0"
selectedTabTextStyleName="selectdTab"
>
</mx:tabnavigator>
<mx:button click="setTabSelectedIndex(0);callLater(resetTabChildren)" label="reset tab children">
</mx:button>
</mx:numericstepper>
</mx:button></mx:hbox></mx:vbox></mx:application>
Here is 1 of three similar children:
<mx:canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" label="First Page">
<mx:label text="first page">
</mx:label>
</mx:canvas>
Browse the source of this example.
Download a zipfile containing the source to this sample.
This movie requires Flash Player 9
No Comments »
Recent Comments