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.
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)
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)
Comments
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();
Saved me a lot of time...
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/
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;
}
}
}
Thanks Ang & Thanks Duckduckgo.com :P
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
}