Flex TabNavigator Tab Buttons not firing Click Event

Question

I have a TabNavigator that i'm trying to make work like Firefox in that the last tab is a special "+" tab that adds a new tab to the control. To do this I add an event handler to the very first tab's button which I get using tabNavigator.getTabAt(0).addEventListener(MouseEvent.CLICK, clickFunction, false, int.MAX_VALUE, false). I set the priority to int.MAX_VALUE so my method should be the very first one called and then can stop other handlers from being called using stopImmediatePropagation().

My problem is that every now and then my click handler isn't called and instead the normal logic runs and the "+" tab is switched to.

Code for CustomTab (I've removed a lot of proprietary code):

private var addTab:Function = null;
private var tabCreationAllowed:Boolean = true;

private function onCreationCompleted():void {
    var tabButton:Button = getTab(0);
    Container(getChildAt(0)).setStyle("closable", false);
    tabButton.addEventListener(MouseEvent.CLICK, clickFunction, false, int.MAX_VALUE, false);
    tabButton.addEventListener(MouseEvent.DOUBLE_CLICK, function(event:MouseEvent):void {event.stopImmediatePropagation(); }, false, int.MAX_VALUE, false);
}

private function clickFunction(event:MouseEvent):void {
    event.stopImmediatePropagation();
    if (this.tabCreationAllowed && (this.addTab != null) && (event.eventPhase == EventPhase.AT_TARGET)) {
        this.tabCreationAllowed = false;
        this.addTab();
        var $this:CustomTab = this;
        setTimeout(function ():void {
            $this.tabCreationAllowed = true;
        }, 1500);
    }
}

If it works like in Firefox, then the tabs would be added to the left (before) the "+" tab, which might increment that tab's index in the tabNavigator. So now, to get the "+" tab, you'd have to use tabNavigator.getTabAt(1). Is it possible that's what's happening? If not, can you post some source code? — Travesty3
My code shouldn't have that problem though that is an idea I've had. Problem is if that was it then this would never work, right now it some times works. I've posted more complete code. — shmuelie
How do you add the "switch to" event listener to the tabs? Instead of relying on stopping the event, perhaps just don't add that event listener to the "+" tab. — Travesty3
The "switch to" event is part of the TabNavgator so it adds it, not me (and TabNavigator is part of the mx library that comes with Flex). — shmuelie
Oh, duh. Sorry. Try adding event.preventDefault(); after event.stopImmediatePropagation();. — Travesty3

shmuelie shmuelie · Accepted Answer · 2012-05-02T14:22:31

After trying many different things, best I can tell the problem is that the TabBar that the TabNavigator uses to create the tab buttons can switch around what button does what (possibly even removing and adding) but only when adding or removing tabs. To solve this problem I store the "+" button in a class variable. I then override all the add and remove methods. On each of them I call a method that removes all event listeners from the button, if I have one, set the variable to the last tab's button (which is the "+" tab) and then re-adds the listeners.

A cut down version of the final code:

private var addTab:Function = null;  
private var tabCreationAllowed:Boolean = true;  
private var addTabButton:Button = null;

private function prerAddTabButton():void {
    if (addTabButton != null) {
        addTabButton.removeEventListener(MouseEvent.CLICK, clickFunction);
        addTabButton.removeEventListener(MouseEvent.DOUBLE_CLICK, doubleClickFunction);
    }
    addTabButton = getTabAt(numChildren - 1);
    addTabButton.addEventListener(MouseEvent.CLICK, clickFunction, false, int.MAX_VALUE, false);  
    addTabButton.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickFunction, false, int.MAX_VALUE, false);  
}

private function onCreationCompleted():void {  
    var tabButton:Button = getTab(0);  
    Container(getChildAt(0)).setStyle("closable", false);
    prerAddTabButton();
}  

private function doubleClickFunction(event:MouseEvent):void {
    event.stopImmediatePropagation(); 
}

private function clickFunction(event:MouseEvent):void {  
    event.stopImmediatePropagation();  
    if (this.tabCreationAllowed && (this.addTab != null) && (event.eventPhase == EventPhase.AT_TARGET)) {  
        this.tabCreationAllowed = false;  
        this.addTab();  
        var $this:CustomTab = this;  
        setTimeout(function ():void {  
            $this.tabCreationAllowed = true;  
        }, 1500);  
    }  
}

Flex TabNavigator Tab Buttons not firing Click Event

1 Answers