November 15th, 2007 by Kyle
Posted in: Flex
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:HBox>
<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: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:Canvas>
Browse the source of this example.
Download a zipfile containing the source to this sample.
Recent Comments