Tuesday, March 10, 2009

Flex TabNavigator - tab click event?

So there doesn't seem to be any item click or tab click event on the tab navigator in Flex. I find this sort of annoying, I mean surely this would be useful and should be included? When searching all I could find was people saying to either use the change event on the tab navigator, (which didn't help me because I wanted my method to run even if you clicked on the currently selected tab) or to use a tab bar instead (which also didn't help me because I am using the SuperTabNavigator from flexlib).

What I am doing is basically maximizing the tab when it is clicked, and minimizing it if it is clicked again.

I found a solution.
http://www.actionscript.org/forums/showthread.php3?t=135539 (post by stburns).

You basically get the tab's button. It sounds weird, here's the code to how it works.


private function creationComplete():void
{
for (var i:int=0; i<myTabNav.getChildren().length; i++)
{
var tab:Button = myTabNav.getTabAt(i);
tab.addEventListener(FlexEvent.BUTTON_DOWN,tabClickHandler);
}
}

private function tabClickHandler(event):void
{
if (myTabNav.height <= 25)
{
maxTabNav();
} else {
restoreTabNav();
}
}



I really need to start serving these little examples somewhere, it would be way easier for people to understand if they could see it working. I will, I promise. I have just finished the NS SPCA website redesign, so I should have some time.

Also, if you have any worthy causes that need help with their website let me know! I like to keep one charity project on the go.

**EDIT**
Here we go... my first sample with view source!
See sample (right click to view source)

12 comments:

Jamie McDaniel said...

Thanks. I was looking for this.

One question I had was why the need to use FlexEvent.BUTTON_DOWN instead of the usual MouseEvent.CLICK. Turns out the clickHandler function in TabBar.as in the Flex framework has an event.stopImmediatePropagation();

jbob said...

hey nice! thanks ;)

Anonymous said...

I was having a tough time figuring out why there was no click event on the tab itself. Your code saved the day.

Dipanjan said...

Hey, Thanks a lot...
Saved me a lot of time...

Anonymous said...

Excellent Detective work :) You saved me hours of frustration. Cheers

鄧風鈴 a.k.a langxangvn said...

Very useful, thank you.

Sam said...

The solution presented at the link I have below was incredibly useful for me.

You directly place a listener on the tabnavigator, but specify onCapture=true. This way, you get the event BEFORE the underlying navbar has a chance to stopImmediatePropagation. If you want to wait until after the switch, you can use callLater, but this allows you to grab that silly cancelled mouse click event. (Even works on disabled tabs, this was an advantage for me, may be an unwanted side-effect for you)

http://natescodevault.com/2008/09/30/preventing-the-tabnavigator-from-changing-tabs-when-one-is-clicked/

Anonymous said...

you can use, TabNavigator's change event

Anonymous said...

Thanks for the hint. I would like to share test example that I have been working with. I hope that it fills in the gaps that others may have.

Anonymous said...

import mx.controls.Button;
import mx.events.FlexEvent;
private function init():void {
for (var i:int=0; i<tabNav.getChildren().length; i++)
{
var tab:Button = tabNav.getTabAt(i);
tab.addEventListener(FlexEvent.BUTTON_DOWN,tabClickHandler);
}
}
private function onClickTab(event:Event):void {
tw.title="onClickTab:"+event.target;
}
private function tabClickHandler(event:FlexEvent):void {
for (var i:int=0; i<tabNav.getChildren().length; i++)
{
if (event.target == tabNav.getTabAt(i)) {
var child:Object = tabNav.getChildAt(i);
child.dispatchEvent(new MouseEvent(MouseEvent.CLICK));
break;
}
}
}

ProperTroy said...

This post is still relevant in 2014!

Thanks Ang & Thanks Duckduckgo.com :P

George L said...

To find out which tab was clicked, add an ID to each button:

for (var i:int=0; i<tabNav.getChildren().length; i++)
{
var tb:Button = tabNav.getTabAt(i);
tb.id = "tb" + i.toString();
tb.addEventListener(FlexEvent.BUTTON_DOWN, OnTabClick);
}

and then

private function OnTabClick(e:FlexEvent):void
{

var s:String = e.currentTarget.toString();
var lastPoint:int = s.lastIndexOf(".");
var tabId:String = s.substr(lastPoint + 1);
Alert.show(tabId + " Click!!"); // or whatever you want

}