August 30th, 2007 by Kyle
Posted in: Flex
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:FormItem>
<!– Additional contents goes here. –>
</mx:Form>
<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>
</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.
September 9th, 2007 at 6:38 pm
I had the same need, but did it differently. I added a mouseover event listener to each accordion header:
var navPaneCount:int = accNav.numChildren;
for (var i:int = 0; i