Flex 4: Determining the index (not the selectedIndex) for a TabBar mouseOver

Question

I have an application where I'm trying to update the String for a Label's text property, based on the tab which user has the mouse over. I've constructed a simple example displaying how I would process the eventHandler function if I was going to use the selectedIndex property, however it's the tab that has mouse focus, which may or may not be the selectedItem, that I'd like to reference and I haven't been able to figure out a way to do it.

So here is the example:

<s:Label 
    id="descriptionLabel"
    />
<s:TabBar 
    id="audioTB"
    dataProvider="{audioVS}"
    mouseOver="audioTB_mouseOverHandler(event)"
    rollOut="audioTB_rollOutHandler(event)"
    />
<mx:ViewStack 
    id="audioVS"
    >
    <!--- Menu1 -->
    <s:NavigatorContent
        id="audioNC1"
        label="Audio Menu 1"
        >
        <mx:DataGrid
            id="audioDG1"
            />
    </s:NavigatorContent>
    <!--- Menu2 -->
    <s:NavigatorContent
        id="audioNC2"
        label="Audio Menu 2"
        >
        <mx:DataGrid
            id="audioDG2"
            />
    </s:NavigatorContent>
    <!--- Menu3 -->
    <s:NavigatorContent
        id="audioNC3"
        label="Audio Menu 3"
        >
        <mx:DataGrid
            id="audioDG3"
            />
    </s:NavigatorContent>
</mx:ViewStack>
</s:Application>

Any suggestions would be greatly appreciated.

Thanks, ~Benny

Answer 1

I can suggest you to solve this problem using custom event for tab bar buttons:

package 
{
    import flash.events.Event;

    public class TabButtonEvent extends Event
    {
        public static const TAB_IS_OVER:String = "tabIsOver";

        private var _tabLabel:String;

        public function TabButtonEvent(type:String, tabLabel:String)
        {
            super(type,true,false);
            this._tabLabel = tabLabel;
        }

        public function get tabLabel():String
        {
            return _tabLabel;
        }

        public override function clone():Event
        {
            return new TabButtonEvent(type,tabLabel);
        }
    }
}

Then you should create your custom tab bar button skin. Good news are you can use inheritance:

package
{
import spark.skins.spark.TabBarButtonSkin;
import mx.events.StateChangeEvent;

public class TabBarButtonSkinExt extends TabBarButtonSkin
{
    public function TabBarButtonSkinExt()
    {
        super();
        addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE, currentStateChangeHandler);
    }

    private function currentStateChangeHandler(event:StateChangeEvent):void
    {
        if (event.newState.toLowerCase().indexOf("over") > -1)
        {
            dispatchEvent(new TabButtonEvent(TabButtonEvent.TAB_IS_OVER, hostComponent.label));
        }
    }
}
}

And include this button in tab bar skin (no inheritance, sorry):

<?xml version="1.0" encoding="utf-8"?>
<!-- TabBarSkinExt.mxml -->
<s:Skin alpha.disabled="0.5" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.TabBar")]
        ]]>
    </fx:Metadata>
    <fx:Script fb:purpose="styling">
    <![CDATA[
        import mx.core.UIComponent;

        /**
         *  @private
         *  Push the cornerRadius style to the item renderers.
         */
        override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
        {
            const numElements:int = dataGroup.numElements;
            const cornerRadius:int = hostComponent.getStyle("cornerRadius");
            for (var i:int = 0; i < numElements; i++)
            {
                var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
                if (elt)
                    elt.setStyle("cornerRadius", cornerRadius);
            }

            super.updateDisplayList(unscaledWidth, unscaledHeight);
        }
    ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
    <s:DataGroup height="100%" id="dataGroup" width="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1" />
        </s:layout>
        <s:itemRenderer>
            <fx:Component>
                <s:ButtonBarButton skinClass="TabBarButtonSkinExt" />
            </fx:Component>
        </s:itemRenderer>
    </s:DataGroup>
</s:Skin>

And now your application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        protected function audioTB_rollOutHandler(event:MouseEvent):void
        {
            descriptionLabel.text = " ";
        }

        protected function audioTB_initializeHandler(event:FlexEvent):void
        {
            audioTB.addEventListener(TabButtonEvent.TAB_IS_OVER, audioTB_tabIsOverHandler);
        }

        private function audioTB_tabIsOverHandler(event:TabButtonEvent):void
        {
            descriptionLabel.text = event.tabLabel;
            event.stopImmediatePropagation();
        }
    ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Label id="descriptionLabel" />
    <s:TabBar dataProvider="{audioVS}" id="audioTB"
        rollOut="audioTB_rollOutHandler(event)" skinClass="TabBarSkinExt" initialize="audioTB_initializeHandler(event)" />
    <mx:ViewStack id="audioVS">
        <!--- Menu1 -->
        <s:NavigatorContent id="audioNC1" label="Audio Menu 1">
            <mx:DataGrid id="audioDG1" />
        </s:NavigatorContent>
        <!--- Menu2 -->
        <s:NavigatorContent id="audioNC2" label="Audio Menu 2">
            <mx:DataGrid id="audioDG2" />
        </s:NavigatorContent>
        <!--- Menu3 -->
        <s:NavigatorContent id="audioNC3" label="Audio Menu 3">
            <mx:DataGrid id="audioDG3" />
        </s:NavigatorContent>
    </mx:ViewStack>
</s:Application>

Hope this helps!