beta
Click here to ask Question Now
Its free No registration required. Flash, Flex, Flash
Media Server, ActionScript,Adobe Air. Most questions receive a response in an hour.
Answered
6/1/2010 10:28:32 PM
Title: how to switch the tabs
hi all,
i have two tab bars, whenever i click the 1st tabbar tab the label of that should reflect in the second tabbar in 2nd position. how can i swap this tabs,plz help,refer http://www.ylysnetwork.com/testpec/ tabs as eg.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0xFFFFFF,0xFFFFFF]"
layout="absolute" creationComplete="initApp()" xmlns:containers="flexlib.containers.*" xmlns:comps="comps.*">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.ArrayCollection;
import com.pec.components.Tab;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
[Bindable]
private var categoriesList:XMLList;
[Bindable]
private var spotsXML:XML;
[Bindable]
private var firstTabsCollection:ArrayCollection = new ArrayCollection();
[Bindable]
private var lastTabsCollection:ArrayCollection = new ArrayCollection();
[Bindable]
private var secondTabVisible:Boolean = true;
[Bindable]
private var spotsListCollection:XMLListCollection;
[Bindable]
private var totalSpotsList:XMLList;
private function initApp():void{
categoryService.send();
}
private function resultHandler(event:ResultEvent):void{
//categoriesXML = event.result as XML;
categoriesList = (event.result as XML).pectab;
secondTabVisible = categoriesList.length()>4;
var arr:Array = new Array();
var arr2:Array = new Array();
for(var i:int=0; i<4; i++){
arr.push(categoriesList[i].@pectabname.toString());
}
for(var j:int=4; j<categoriesList.length(); j++){
arr2.push(categoriesList[j].@pectabname.toString());
}
firstTabsCollection = new ArrayCollection(arr);
lastTabsCollection = new ArrayCollection(arr2);
initialTabBar.selectedIndex = 0;
loadSpots(firstTabsCollection.getItemAt(0).toString())
}
private function loadSpots(catName:String):void{
for(var i:int = 0; i<categoriesList.length(); i++){
if(catName == categoriesList[i].@pectabname.toString()){
spotsListCollection = new XMLListCollection(categoriesList[i].spotdetails);
}
}
}
private function handleItemClick(event:Event):void{
//here i am swapping the tab names
if(initialTabBar.selectedIndex ==0){
secondTabBar.label = initialTabBar.label;
}
}
private function faultHandler(event:FaultEvent):void{
}
]]>
</mx:Script>
<mx:HTTPService id="categoryService" url="data/content.xml" resultFormat="e4x" result="resultHandler(event)" fault="faultHandler(event)"/>
<mx:Box width="400" x="590" y="{(secondTabVisible) ? 40 : 10}" horizontalAlign="center">
<mx:TabBar id="initialTabBar" dataProvider="{firstTabsCollection}" tabHeight="30" tabWidth="100" dropShadowEnabled="true"
dropShadowColor="0x999999" shadowDirection="right" itemClick="handleItemClick(event)"/>
</mx:Box>
<mx:Box width="400" x="590" y="10" horizontalAlign="center" includeInLayout="{secondTabVisible}" visible="{secondTabVisible}">
<mx:TabBar id="secondTabBar" dataProvider="{lastTabsCollection}" tabHeight="30" tabWidth="100" dropShadowEnabled="true"
dropShadowColor="0x999999" shadowDirection="right" itemClick="handleItemClick(event)"/>
</mx:Box>
<mx:Box id="spotsContainer" horizontalScrollPolicy="off" width="400" x="590" paddingBottom="5" paddingTop="5"
height="{(secondTabVisible) ? 250 : 280}" y="{(secondTabVisible) ? 70 : 40}" borderColor="0xCCCCCC" borderStyle="solid"
borderThickness="1" dropShadowEnabled="true" dropShadowColor="0x999999" shadowDirection="right">
<mx:Repeater id="spotsRepeater" dataProvider="{spotsListCollection}">
<comps:Spot imagePath="{(spotsRepeater.currentItem).@mediahubthumbnail}" description="{(spotsRepeater.currentItem).@description}"/>
</mx:Repeater>
</mx:Box>
</mx:Application>
1
Accepted Answer
check this code sample to see how the tabs can be swapped between the tabar components in flex actionscript 3.0
here is is source code of the example
here is is source code of the example
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="1024" minHeight="768">
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
protected function tabbar1_childIndexChangeHandler(event:Event):void
{
var currentIndex:int=event.target.selectedIndex;
var Obj1=tab1.dataProvider.getItemAt(currentIndex)
var Obj2=tab2.dataProvider.getItemAt(currentIndex)
tab2.dataProvider.removeItemAt(currentIndex)
tab1.dataProvider.removeItemAt(currentIndex)
tab1.dataProvider.addItemAt(Obj2, currentIndex)
tab2.dataProvider.addItemAt(Obj1, currentIndex)
}
]]>
</mx:Script>
<mx:TabBar id="tab1" x="0" y="72" >
<mx:dataProvider>
<mx:String>Page1</mx:String>
<mx:String>Page2</mx:String>
<mx:String>Page3</mx:String>
</mx:dataProvider>
</mx:TabBar>
<mx:TabBar id="tab2" x="40" y="20" itemClick="tabbar1_childIndexChangeHandler(event)" childIndexChange="tabbar1_childIndexChangeHandler(event)">
<mx:dataProvider>
<mx:String>abc</mx:String>
<mx:String>def</mx:String>
<mx:String>hij</mx:String>
</mx:dataProvider>
</mx:TabBar>
</mx:Application>
Post your Reply