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>


Here is the simple app that demonstrates this functionality:

<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">

    <myaccordion id="accordion1" height="450">

        <mx:form id="shippingAddress" label="1. Shipping Address">

            <mx:formitem id="sfirstNameItem" label="First Name">
                <mx:textinput id="sfirstName">
            </mx:textinput>

            <!– Additional contents goes here. –>

        </mx:formitem>

        <mx:form id="billingAddress" label="2. Billing Address">
            <!– Form contents goes here. –>
        </mx:form>

        <mx:form id="creditCardInfo" label="3. Credit Card Information">
            <!– Form contents goes here. –>
        </mx:form>

        <mx:form id="submitOrder" label="4. Submit Order">
            <!– Form contents goes here. –>
        </mx:form>

    </mx:form>
</myaccordion>
</mx:application>


Here is a link to a Flex Builder 2.0.1 project (compiled with SDK hotfix2) containing a sample demonstrating the solution described above.

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Slashdot
  • StumbleUpon
  • Technorati
  • TwitThis



3 Comments »