How to get tabnavigator's selected viewstack

trudyhlittle
trudyhlittle used Ask the Experts™
on
I am trying to implement a event listener when the user selects a tab on a tabnavigator that will change information elsewhere in the application depending what is currently selected.  The tab navigator contains 4 VBoxes.  Each VBox contains a linkBar that selects the appropriate viewstack item on the tab.  When the user selects a tab, I need to know which viewstack item is selected in the corresponding tab's Vbox.  I can get down as far as the selected VBox, but I can't seem to figure out how to get the label of the selected viewStack within the box.  Thanks.
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  creationComplete="init()" width="100%" >

	<mx:Style source="assets/skins/skins.css"/>

	<mx:Script>
		<![CDATA[
		
			import mx.controls.Alert;
			import events.*;
			import mx.events.ItemClickEvent;

			
			private function init():void {
			      tabNavigator.addEventListener(Event.CHANGE, tabChangedHander);
            }
            
		   
		     private function tabChangedHander(event:Event):void  
		   {  
		   	 	//need to get the label of the selected tab's current viewstack item.
		  		
		  		var temp:String = tabNavigator.getChildAt(event.currentTarget.selectedIndex).name;
		  		Alert.show("Changed: " +temp, "Changed "+ temp);
		   }
			
			private function handleTabLinkBarClickEvent(event:ItemClickEvent):void
			{
				var eNoBubble:ViewChangeEvent = new ViewChangeEvent(ViewChangeEvent.VIEWCHANGE,ViewChangeEvent.MAINTENANCE, false, event.label);
				handleViewChangeEvent(eNoBubble);
			}
			
			public function handleViewChangeEvent(event:ViewChangeEvent):void {  
				var subView:String = event.subView;
				if (subView == 'Log') {
					tabNavigator.selectedIndex = 2;
					transactionsViewStack.selectedChild = viewTranLog;
					
				} else if (subView == 'Queue') {
					tabNavigator.selectedIndex = 2;
					transactionsViewStack.selectedChild = viewQueue;
					
				}
				else if (subView == 'Errors') {
					tabNavigator.selectedIndex = 2;
					transactionsViewStack.selectedChild = viewErrors;
					
				}
				else if (subView == 'Mappings') {
					tabNavigator.selectedIndex = 0;
				} 
				else if (subView =='Connections') {
					tabNavigator.selectedIndex = 0;
					maintenanceViewStack.selectedIndex = 2;
				} 
				else if (subView =='Upload') {
					tabNavigator.selectedIndex = 1;
					processingViewStack.selectedChild = upload;
					
				} 
				else if (subView =='Download') {
					tabNavigator.selectedIndex = 1;
					processingViewStack.selectedChild = download;
					
				} 
				else if (subView =='Simulation') {
					tabNavigator.selectedIndex = 1;
					processingViewStack.selectedChild = simulation;
					
				}
			}

		]]>
	</mx:Script>

<mx:Canvas  width="100%" height="100%"  >
		<mx:TabNavigator x="248" y="65" width="78%" height="90%" 
			paddingTop="0" horizontalGap="0" tabHeight="30" id="tabNavigator" creationPolicy="all">
			<mx:VBox label="Maintenance" backgroundColor="#2D5986" backgroundAlpha="1" 
				borderStyle="solid" borderThickness="0" id="maintVbox">
					<mx:LinkBar id="maintBar"
					            dataProvider="{maintenanceViewStack}"
					            iconField="ico" 
					            linkButtonStyleName="subMenuLinkBarStyle"
					            maxHeight="28" itemClick="handleTabLinkBarClickEvent(event)"/>
					<mx:ViewStack id="maintenanceViewStack" width="100%" height="100%"  >
						<mx:Canvas id="viewMappings" label="Mappings" icon="@Embed('assets/images/MappingsSmall.png')"/>
						<mx:Canvas id="viewXref" label="X-Reference" icon="@Embed('assets/images/XreferenceSmall.png')"/>
						<mx:Canvas id="viewConn" label="Connections" icon="@Embed('assets/images/ConnectionsSmall.png')"/>
						<mx:Canvas id="viewSecurity" label="Security" icon="@Embed('assets/images/SecuritySmall.png')"/>
					</mx:ViewStack>
					
			
			</mx:VBox>
			<mx:VBox label="Processing" backgroundColor="#2D5986" backgroundAlpha="1"
				 borderStyle="solid" borderThickness="0" id="procVBox">
				<mx:LinkBar id="processBar"
					            dataProvider="{processingViewStack}"
					            iconField="ico" 
					            linkButtonStyleName="subMenuLinkBarStyle"
					            maxHeight="28" itemClick="handleTabLinkBarClickEvent(event)" />
						<mx:ViewStack id="processingViewStack" width="100%" height="100%">
							<mx:Canvas id="simulation" label="Simulation" icon="@Embed('assets/images/SimulationSmall.png')" />
							<mx:Canvas id="upload" label="Upload" icon="@Embed('assets/images/UploadSmall.png')" />
							<mx:Canvas id="download" label="Download" icon="@Embed('assets/images/DownloadSmall.png')" />
						</mx:ViewStack>
			</mx:VBox>
			<mx:VBox label="Transactions" backgroundColor="#2D5986" backgroundAlpha="1" 
				borderStyle="solid" borderThickness="0" verticalScrollPolicy="off" id="tranVbox"
				horizontalScrollPolicy="off">
				<mx:LinkBar id="transBar"
					            dataProvider="{transactionsViewStack}"
					            iconField="ico" 
					            linkButtonStyleName="subMenuLinkBarStyle"
					            maxHeight="28" itemClick="handleTabLinkBarClickEvent(event)"   />
					<mx:ViewStack id="transactionsViewStack" width="100%" height="100%"  >
						<mx:Canvas id="viewQueue" label="Queue" icon="@Embed('assets/images/QueueSmall.png')" />
						<mx:Canvas id="viewTranLog" label="Log" icon="@Embed('assets/images/LogSmall.png')" />
						<mx:Canvas id="viewErrors" label="Errors" icon="@Embed('assets/images/ErrorsSmall.png')" />
					</mx:ViewStack>
					
			</mx:VBox>
			<mx:VBox label="Reports" backgroundColor="#2D5986" backgroundAlpha="1" 
				borderStyle="solid" borderThickness="0" id="repVbox">
				<mx:LinkBar id="reportsBar"
					            dataProvider="{reportViewStack}"
					            iconField="ico" 
					            linkButtonStyleName="subMenuLinkBarStyle"
					            maxHeight="28" itemClick="handleTabLinkBarClickEvent(event)"/>
					<mx:ViewStack id="reportViewStack" width="100%" height="100%"  >
						<mx:Canvas id="report1" label="Report 1" icon="@Embed('assets/images/QueueSmall.png')" />
						<mx:Canvas id="report2" label="Report 2" icon="@Embed('assets/images/LogSmall.png')" />
						<mx:Canvas id="report3" label="Report 3" icon="@Embed('assets/images/ErrorsSmall.png')" />
					</mx:ViewStack>
			</mx:VBox>
		</mx:TabNavigator>
</mx:Canvas>
</mx:Application>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
As per your current view hierarchy you could use switch case as per selected tab index to execute specific action.
Following could help, as tabChangeHandler

private function tabChangedHander(event:Event):void  
{
       // get selected tab index
        var selectedTabIndex:int = event.currentTarget.selectedIndex;
        
        var selectedSubChild:Container; //it will hold selected child from child view
        
        // apply switch case as per tab index to get reference of child viewStack's selected child
        switch(selectedTabIndex)
        {
              case 0:
                    selectedSubChild = maintenanceViewStack.selectedChild;
              break;
              
              case 1:
                    selectedSubChild = processingViewStack.selectedChild;
              break;
              
              case 2:
                    selectedSubChild = transactionsViewStack.selectedChild;
              break;
              
              case 3:
                    selectedSubChild = reportViewStack.selectedChild;
              break;
        }
        
        // utilize selectedSubChild
        Alert.show(selectedSubChild.label);
}

Hope this will help.

Author

Commented:
I was hoping for something a little more generic, but it works.  Thanks a bunch.
This could be more generic, if you'll have the hierarchy of viewstakes as you have now only:

In current hierarchy you are having internal viewstack at 2nd depth (1st is linkbar, and 2nd is viewstack for every tab)

so this could be generic like:


               private function tabChangedHander(event:Event):void  
               {
                                // every 2nd child (index 1) is view stack in your code, so access them directly
                          var selectedSubChild:Container = (tabNavigator.selectedChild.getChildAt(1) as ViewStack).selectedChild as Container;
                          // utilize selectedSubChild
                    Alert.show(selectedSubChild.label);
               }

But this will only work for the current hierarchy you are maintaining.


Best way could be to use separate mxml component for every tab content (i.e. place link bar and internal viewstack in separate MXML)
Create such components for all 4 tabs, and implement an interface (say named "ITabChild") which will have a function say named "getSelectedChild()" in all these custom components.

and in this function you'll write

// this function will reside in every custom component, for tab views
public function getSelectedChild():Container
{
return viewStack.selectedChild;
}

And in your tabChangeHandler will change as below:

               private function tabChangedHander(event:Event):void  
               {  
                                // type tabs selected child as ITabChild (custom interface) to getSelectedChild
                          var selectedSubChild:Container = (tabNavigator.selectedChild as ITabChild).getSelectedChild() as Container;
                          // utilize selectedSubChild
                    Alert.show(selectedSubChild.label);
               }

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial