Accessing the view inside the tab navigator when clicking on a tab
I have a view in Flex 3 where I am using the tab navigator and multiple views in the tab navigator. I need to know what kind of click was triggered due to this one particular view, then I need to take action i.e. If you click the view with the id "secondTab" then do something.
I set it up for notification, my problem is I need to know what kind it is. The call tab.GetChildByName
or similar method seems to return an object to me TabSkin
.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
height="100%"
xmlns:local="*"
creationComplete="onCreationComplete(event)">
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Button;
protected function onCreationComplete(event:Event):void {
for(var i:int = 0; i < myTN.getChildren().length; i++) {
var tab:Button = myTN.getTabAt(i);
tab.addEventListener(FlexEvent.BUTTON_DOWN, tabClickHandler);
}
}
private function tabClickHandler(event:FlexEvent):void {
var tab:Button;
if(event.currentTarget is Button) {
tab = event.currentTarget as Button;
// how do I access the actual view hosted in a tab that was clicked?
}
}
]]>
</mx:Script>
<mx:TabNavigator id="myTN">
<local:ProductListView id="firstTab"
label="First Tab"
width="100%" height="100%" />
<local:ProductListView id="secondTab"
label="Second Tab"
width="100%" height="100%" />
</mx:TabNavigator>
</mx:VBox>
a source to share
TabNavigator
is a subclass ViewStack
and will fire when the tab is selected change
.
<mx:TabNavigator id="myTN" change="childChanged()">
<local:ProductListView id="firstTab"
label="First Tab"
width="100%" height="100%" />
<local:ProductListView id="secondTab"
label="Second Tab"
width="100%" height="100%" />
</mx:TabNavigator>
It's just as simple:
private function childChanged():void
{
if(myTN.selectedChild == this.firstTab) //or myTN.selectedIndex == 0
{
trace("selected the first one");
}
else if(myTN.selectedChild == this.secondTab) //or myTN.selectedIndex == 0
{
trace("selected the second one");
}
}
a source to share
Since it TabNavigator
is an extension ViewStack
, you can access the selected view using the property selectedChild
:
private function tabClickHandler(event:FlexEvent):void {
view = myTN.selectedChild;
// Do what you need to do with it here...
}
For more information on how TabNavigator works, check out the documentation:
http://livedocs.adobe.com/flex/3/html/help.html?content=navigators_4.html
a source to share