Thanks Beau!! That's exactly what I needed. Really appreciate your help. You are a lifesaver. I had played around with copying the Accordion code and trying to customize it - but couldn't get it to display correctly. Also tried some custom events etc but to no avail. Your suggested solution works great.
Cheers! --- In [email protected], "Beau Scott" <[EMAIL PROTECTED]> wrote: > > Doesn't work. If you look at the code for accordion you'll notice that this > event is dispatched as a result of a previous event that sets the > selectedIndex prior to the change event being dispatched, rather than > selectedIndex being set as a result of the change event. So even if you > could capture the event in capture phase (which doesn't seem to work > either), cancelling it wouldn't have any effect on the accordion changing > the selected child, it would just prevent any other listeners from > responding. > > > > Here's some code for a simple test to illustrate the problem. As it is, you > can see that it listens for the change event in both the capture and target > phases of the event. If the newIndex specified == 2 (the third tab), you > would expect the 3rd tab's navigation to cancel, but since the event is not > cancelable, it behaves as it normally would. > > ----------------------------------------------------- > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" > creationComplete="onCreationComplete(event)"> > > <mx:Script> > > <![CDATA[ > > import mx.controls.Alert; > > import mx.events.IndexChangedEvent; > > > > protected function onCreationComplete(event:Event) : void > > { > > accord.addEventListener(IndexChangedEvent.CHANGE, > onAccordionChange, true); > > accord.addEventListener(IndexChangedEvent.CHANGE, > onAccordionChange); > > } > > > > protected function onAccordionChange (event:IndexChangedEvent) : > void > > { > > if(event.newIndex == 2) > > { > > event.stopImmediatePropagation(); > > event.stopPropagation(); > > event.preventDefault(); > > } > > } > > > > ]]> > > </mx:Script> > > <mx:Accordion id="accord" width="640" height="480"> > > <mx:VBox backgroundColor="black" label="Tab 1" width="100%" > height="100%" /> > > <mx:VBox backgroundColor="red" label="Tab 2" width="100%" > height="100%" /> > > <mx:VBox backgroundColor="green" label="Tab 3" width="100%" > height="100%" /> > > <mx:VBox backgroundColor="yellow" label="Tab 4" width="100%" > height="100%" /> > > </mx:Accordion> > > </mx:Application> > > ---------------------------------------------------- > > > > One thing that you can do is register event handlers for the capture phase > on mouse clicking the headers and KeyboardEvent.KEY_DOWN to intercept those > events before they trigger the accordion change. Here's some working code: > > > > ----------------------------------------------------- > > > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" > creationComplete="onCreationComplete(event)"> > > <mx:Script> > > <![CDATA[ > > import mx.containers.accordionClasses.AccordionHeader; > > import mx.controls.Alert; > > import mx.events.IndexChangedEvent; > > > > protected function onCreationComplete(event:Event) : void > > { > > accord.addEventListener(MouseEvent.CLICK, > onAccordionClick, true); > > addEventListener(KeyboardEvent.KEY_DOWN, > onAccordionKeyDown, true); > > } > > > > protected function onAccordionKeyDown (event:KeyboardEvent) : > void > > { > > // Determine what the next index will be from a keyboard > interaction (page up = --, page down = ++) > > // There are many other interacting keys (space, left, > right, home, end, etc..., see Accordion.keyDownHandler for all of them > > // Cancel the event if the next index == 2 > > if(event.target != accord) return; > > if(event.keyCode == Keyboard.PAGE_DOWN || event.keyCode == > Keyboard.PAGE_UP) > > { > > var ind:int = accord.selectedIndex; > > if(event.keyCode == Keyboard.PAGE_DOWN) > > ind++; > > if(event.keyCode == Keyboard.PAGE_UP) > > ind--; > > if(ind < 0) > > ind = accord.numChildren - 1; > > if(ind >= accord.numChildren) > > ind = 0; > > if(ind != accord.selectedIndex) > > doChangeValidation(ind, event); > > } > > } > > > > protected function onAccordionClick(event:MouseEvent) : void > > { > > // Figure out what the current selected index is, or what > the clicked index is > > // then determine what index it's going to. If 2, cancel > the event, otherwise > > // let it slide. > > if(!(event.target is AccordionHeader)) return; > > var ind:int = accord.getChildIndex (event.target.data as > DisplayObject); > > doChangeValidation(ind, event); > > } > > > > protected function doChangeValidation(index:int, event:Event) : > void > > { > > if(index == 2) > > { > > event.stopImmediatePropagation(); > > event.stopPropagation(); > > event.preventDefault(); > > } > > } > > > > ]]> > > </mx:Script> > > <mx:Accordion id="accord" width="640" height="480"> > > <mx:VBox backgroundColor="black" label="Tab 1" width="100%" > height="100%" /> > > <mx:VBox backgroundColor="red" label="Tab 2" width="100%" > height="100%" /> > > <mx:VBox backgroundColor="green" label="Tab 3" width="100%" > height="100%" /> > > <mx:VBox backgroundColor="yellow" label="Tab 4" width="100%" > height="100%" /> > > </mx:Accordion> > > </mx:Application> > > -------------------------------------------------- > > > > > > Hope this helps! > > > > Beau > > > > From: [email protected] [mailto:[EMAIL PROTECTED] On > Behalf Of Sherif Abdou > Sent: Thursday, February 21, 2008 9:13 PM > To: [email protected] > Subject: Re: [flexcoders] Cancelling Accordion change > > > > u need to do stopImmedatePropagation > > ----- Original Message ---- > From: guitarguy555 <[EMAIL PROTECTED]> > To: [email protected] > Sent: Thursday, February 21, 2008 2:42:46 PM > Subject: [flexcoders] Cancelling Accordion change > > I have an accordion control and I want to cancel moving to the next > accordion pane if my controls on the currently selected pane are in an > invalid state. > > The Accordion container uses the IndexChangedEvent which does not have > it's cancelable property set to true, so I cannot call .preventDefault > to stop this. > > Has anybody else out there attempted something like this? > > Thanks > > > > > > _____ > > Looking for last minute shopping deals? HYPERLINK > "http://us.rd.yahoo.com/evt=51734/*http:/tools.search.yahoo.com/news earch/ca > tegory.php?category=shopping"Find them fast with Yahoo! Search. > > > > > > No virus found in this incoming message. > Checked by AVG Free Edition. > Version: 7.5.516 / Virus Database: 269.20.9/1291 - Release Date: 2/21/2008 > 11:05 AM > > > No virus found in this outgoing message. > Checked by AVG Free Edition. > Version: 7.5.516 / Virus Database: 269.20.9/1291 - Release Date: 2/21/2008 > 11:05 AM >
