Adding an onclick event to a TabNavigator

[venura23]

Hi there,

This is probably rather obvious but I havent been able to find a way of adding an onclick event to a TabNavigator component (I want to invoke a method when the user changes tabs). The documentation for TabNavigator(http://livedocs.adobe.com/flex/2/langref/mx/containers/TabNavigator.html) implies that it contains a TabBar object(You can add a onclick event to this) However as this is a protected property in the TabNavigator you cant get access to it.
any ideas? any help much appreciated.

Thanks,
Venura

[batmitra]

Hi

like you've said and i quote
(I want to invoke a method when the user changes tabs)

so what you have to use is tabindexchanged event , you can see its use on the docs.

[Can I]

if you need to handle click it looks like you will have to extend TabNavigator - that's rubish

it not, follow batmitra's advise

[venura23]

Thanks for your advice guys.

Sorry, I should have mentioned I tried using tabchangeIndex event, both in action script like

nav.addEventListener(flash.events.Event.TAB_INDEX_ CHANGE ,clicked);

And as a an attribute in the mxml file, the event doesnt seem to be getting dispatched. I think I might end up using TabBar and hiding components instead of using seperate views.

Thanks,
Venura

[dr_zeus]

Did you try Event.CHANGE? That's the standard event for changing the selected index on a component or container.

[venura23]

yup tried it. I ended up using a Tabbar and a ViewStack, this seems to work fine and looks very similar to the TabNavigator and offers the same functionality (as far as my requirements are concerned).

I'm using the itemClick() event on the TabBar.

[stburns]

var tab:Button = myTabNavigator.getTabAt(..);
tab.addEventListener(FlexEvent.BUTTON_DOWN, myTabClickHandler);

[theBeginnersMind]

For tabNavigator, I tried tabIndexChange event , and it doesn't work.
I use change event instead :


<mx:Script>
<![CDATA[[
private function onTabClick(e:Event):void{
trace("whichTab||"+e.currentTarget.selectedIndex);
}


]]>
</mx:Script>



<mx:TabNavigator change="onTabClick(event);" >

</mx:TabNavigator>

[bshirley]

I believe the TabIndexChanged is invoked when the tabs within the TabNavigator are rearranged, not when the tab selection is changed.

Stoopid. No event to inform when tabs have changed.

[hangalot]

we extended to achieve this

[ElenaA]

You can use the following:

import mx.events.IndexChangedEvent;

private function onTabIndexChanged(event:IndexChangedEvent):void
{
Alert.show("Index changed");
}

<mx:TabNavigator id="tbSettings" x="0" y="0" width="100%" height="90%" change="onTabIndexChanged(event);">
</mx:TabNavigator>

It works.

[nexus6]

Did you try Event.CHANGE? That's the standard event for changing the selected index on a component or container.

That did it for me! :-)