actionscript-3apache-flexflex4.6

TabBar current button click


I have a TabbedViewNavigatorApplication with three tabs.

I want to call a function when the current active button tab is clicked again.

How can it be done?


Solution

  • Here is several ways to resolve this task, on of them please see below:

    <?xml version="1.0" encoding="utf-8"?>
    <s:TabbedViewNavigatorApplication 
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        creationComplete="handler_creationCompleteHandler(event)"
        xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
    
            import spark.components.ButtonBarButton;
    
            protected function handler_creationCompleteHandler(event:FlexEvent):void
            {
                var lastTabbedButtonIdex:uint = this.tabbedNavigator.tabBar.selectedIndex;
    
                this.tabbedNavigator.tabBar.addEventListener(MouseEvent.CLICK, handler_onTabBarClick);
    
                function handler_onTabBarClick(event:MouseEvent):void
                {
                    if(lastTabbedButtonIdex == (event.target as ButtonBarButton).itemIndex)
                    {
                        trace("Click on selected button");
                    }
                    else
                    {
                        trace("Select other button");
                    }
    
                    lastTabbedButtonIdex = (event.target as ButtonBarButton).itemIndex;
                }
    
                this.removeEventListener(FlexEvent.CREATION_COMPLETE, handler_creationCompleteHandler);
            }
    
        ]]>
    </fx:Script>
    <s:ViewNavigator label="About" width="100%" height="100%" firstView="views.AboutView"/>
    <s:ViewNavigator label="Test" width="100%" height="100%" firstView="views.TestView"/>
    <s:ViewNavigator label="Feed" width="100%" height="100%" firstView="views.FeedView"/>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    </s:TabbedViewNavigatorApplication>