flex Spark Tab bar rollover index

Question

I am using a the spark tabbar and gave a view stack as dataprovider.....in the view stack there are n elements ...and each element has a panel....

my code would be some thing like this....

<s:tabbar dataprovider = {viewstck-id}  height="100%" width="100%"/>
<viewstack id="viewstck-id">
<navigatorContent >
     <s:panel title="title - 1"/>
 </navigatorContent >
 <navigatorContent >
     <s:panel title="title - 2"/>
 </navigatorContent >\ 
 <navigatorContent >
     <s:panel title="title - 3"/>
 </navigatorContent >

My requirement is something like this......initially the panel of the select tab should show its own title..suppose if we are on tab-1 the title should be title-1 ...but when we roll over our mouse on tab-2 the title of the panel in tab-1 should be changed to tittle-2 and if the mouse is on tab3 the title of the panel in tab-1 should be changed to tittle-3 and on roll out it should be changed to selected tab's panel's title , i.e. title-1....and in similar way it should work for all the tabs.....

So is there any way to get the get the rollOverIndex of the tab Or some one please provide me a solution.

-- Thanks Red

Answer 1

With a Spark TabBar, you could try adding an event listener on MouseEvent.MOUSE_OVER and then checking event.target.label to get the tab name and event.target.itemIndex for the index of the tab that the mouse is hovering over.

Answer 2

Well, my Idea is to use ItemRenderer subclass to handle roll_over event and get item index. By default, TabBar item renderer is ButtonBarButton class with TabBarButtonSkin skin. and ButtonBarButton class has itemIndex property. Let's do it:

---> code for MyButtonBarItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ButtonBarButton xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx"
                creationComplete="creationCompleteHandler(event)"
                skinClass="spark.skins.spark.TabBarButtonSkin"
                >
    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                this.addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
            }

            private function rollOverHandler(e:MouseEvent) : void
            {
                var tbe:MyTabBarEvent = new MyTabBarEvent(MyTabBarEvent.ITEM_ROLL_OVER, true);
                tbe.itemIndex = this.itemIndex;
                dispatchEvent(tbe);
            }
        ]]>
    </fx:Script>
</s:ButtonBarButton>

Here we are using custom event with itemIndex property:

---> code for MyTabBarEvent.as placed in 'events' package

package events
{
    import flash.events.Event;

    public class MyTabBarEvent extends Event
    {
        public static const ITEM_ROLL_OVER:String = "MyTabBarEvent.ItemRollOver";

        public var itemIndex:int;

        public function MyTabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

All we have to do now is handle our custom event in our application:

---> code for application

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="creationCompleteHandler(event)"
               >

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <fx:Script>
        <![CDATA[
            import events.MyTabBarEvent;

            import mx.events.FlexEvent;

            protected function creationCompleteHandler(event:FlexEvent):void
            {
                tabBar.addEventListener(MyTabBarEvent.ITEM_ROLL_OVER, itemRollOverHandler);
            }

            protected function itemRollOverHandler(e:MyTabBarEvent) : void
            {
                trace ("Item " + e.itemIndex + " roll over event handled");
                tabBar.selectedIndex = e.itemIndex;
            }

        ]]>
    </fx:Script>


    <s:VGroup>
        <s:TabBar id="tabBar" dataProvider="{viewstckId}" width="100%" itemRenderer="MyButtonBarItemRenderer"/>
        <mx:ViewStack id="viewstckId">
            <s:NavigatorContent label="Title 1">
                <s:Panel title="title - 1"/>
            </s:NavigatorContent >
            <s:NavigatorContent label="Title 2">
                <s:Panel title="title - 2"/>
            </s:NavigatorContent> 
            <s:NavigatorContent label="Title 3">
                <s:Panel title="title - 3"/>
            </s:NavigatorContent>
        </mx:ViewStack>
    </s:VGroup>
</s:Application>