I had a customer who asked for help in modifying the Accordion component to change panes when a user moused over a pane header rather than when clicked upon. It turns out that this was a fairly straight forward modification.
In my extension to accordion upon child add, I merely add an eventlistenr to each child’s header, listening for mouseOver events and responding to them by dispatching a click event. Everything else just fall into place, since things are already wired to respond to the click event.

Here is my extension to accordion:

<mx:accordion xmlns:mx="http://www.adobe.com/2006/mxml">
childAdd="onChildAdd(event)">

    <mx:script>
        <!–[CDATA[
            import mx.containers.accordionClasses.AccordionHeader;
            import mx.containers.Accordion;

            private function onChildAdd(e:Event):void{
                var a:Accordion = e.target as Accordion;
                var header:AccordionHeader=a.getHeaderAt(acc.numChildren-1) as AccordionHeader;
                header.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);
            }

            private function onMouseOver(e:MouseEvent):void{
                (e.target as AccordionHeader).dispatchEvent(new MouseEvent(MouseEvent.CLICK));
            }

        ]]–>
    </mx:script>
</mx:accordion>

Read the rest of this post»




3 Comments »