flex spark buttonbar : how to determine which button in mouseOver event

Question

re: spark.components.ButtonBar

In the spark ButtonBar's mouseOver event, how do you determine which of the several buttons the mouse is hovering over? There is, of course, no selected index at this juncture. If it makes a difference, my ButtonBar is not defined in MXML but is instantiated in ActionScript and an ArrayList is assigned to the dataProvider property of my ButtonBar instance.

Thanks for the help.

Answer 1

There's no real easy/built-in way to do this if Flex 4, and I think that's a good thing. Instead, they give you access to the renderers via ElementExistenceEvent.RENDERER_ADD and ElementExistenceEvent.RENDERER_REMOVE, so you can look for all kinds of events on the children. Try this out:

<?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">

    <fx:Script>
        <![CDATA[

            import mx.core.IVisualElement;
            import spark.events.RendererExistenceEvent;

            protected function rendererAddHandler(event:RendererExistenceEvent):void
            {
                var element:IVisualElement = event.renderer;
                element.addEventListener(MouseEvent.MOUSE_MOVE, renderer_mouseMoveHandler);
            }

            protected function rendererRemoveHandler(event:RendererExistenceEvent):void
            {
                var element:IVisualElement = event.renderer;
                element.removeEventListener(MouseEvent.MOUSE_MOVE, renderer_mouseMoveHandler);
            }

            protected function renderer_mouseMoveHandler(event:MouseEvent):void
            {
                trace(event.currentTarget.label);
            }

        ]]>
    </fx:Script>

    <s:ButtonBar id="buttonBar"
        rendererAdd="rendererAddHandler(event)"
        rendererRemove="rendererRemoveHandler(event)">
        <s:dataProvider>
            <mx:ArrayList source="[one, two, three, four]"/>
        </s:dataProvider>
    </s:ButtonBar>
</s:Application>

Hope that helps, Lance