Flex Examples

5 Responses to “Disabling keyboard navigation on the Accordion container in Flex”

1. 1 Nick Jun 16th, 2008 at 2:01 pm

   Hey Peter,

   Just wanted to say thank you again! This worked out perfectly for what I needed it for.

   Thanks,

   - Nick

2. 2 Yon Oct 8th, 2008 at 2:17 pm

   I made an accordion some time ago on kind of this line, I extended the accordion, however i didnt wanted to disable keyboard, just wanted to disable navigation to disabled headers, but still be able to use both mouse and keyboard to navigate.

   I use a recursive function to achieve this, however it acts funny if u disable all headers (but why disable all headers anyways..)

   package renders {
   	import mx.events.IndexChangedEvent;
   	import flash.events.KeyboardEvent;
   	import mx.containers.Accordion;
   	import mx.core.mx_internal;
   	import flash.events.Event;
   	import flash.ui.Keyboard;
   
   	public class PracticalAccordion extends Accordion {
   		private var _focusedIndex:int = -1;
   
   		public function PracticalAccordion() {
   			super();
   		}
   
   	    private function drawHeaderFocus(headerIndex:int, isFocused:Boolean):void {
   	        if (headerIndex != -1)
   	            getHeaderAt(headerIndex).drawFocus(isFocused);
   	    }
   
           override protected function keyDownHandler(event:KeyboardEvent):void {
   	        if (event.target != this)
   	            return;
   
   	        var prevValue:int = selectedIndex;
   	        if(event.keyCode != Keyboard.SPACE && event.keyCode != Keyboard.ENTER)
   	        	drawHeaderFocus(_focusedIndex, false);
   	        getIndexPlus(event, 0, prevValue);
   	        if(event.keyCode != Keyboard.SPACE && event.keyCode != Keyboard.ENTER)
                   drawHeaderFocus(_focusedIndex, true);
               event.stopPropagation();
               if(event.keyCode != Keyboard.DOWN && event.keyCode != Keyboard.UP && event.keyCode != Keyboard.LEFT && event.keyCode != Keyboard.RIGHT)
               	dispatchChangeEvent(prevValue, selectedIndex, event);
           }
   
           private function getIndexPlus (event:KeyboardEvent, loop:int, prevValue:int):void {
   	        switch (event.keyCode) {
   	            case Keyboard.PAGE_DOWN: {
   	                _focusedIndex = selectedIndex = (selectedIndex  0 ? selectedIndex - 1 : numChildren - 1);
   	                break;
   	            }
   	            case Keyboard.HOME: {
   	                _focusedIndex = selectedIndex = 0;
   	                break;
   	            }
   	            case Keyboard.END: {
   	                _focusedIndex = selectedIndex = numChildren - 1;
   	                break;
   	            }
   	            case Keyboard.DOWN:
   	            case Keyboard.RIGHT: {
   	                _focusedIndex = (_focusedIndex  0 ? _focusedIndex - 1 : numChildren - 1);
   	                break;
   	            }
   	            case Keyboard.SPACE:
   	            case Keyboard.ENTER: {
   	                if (_focusedIndex != selectedIndex) {
   	                    selectedIndex = _focusedIndex;
   	                }
   	                break;
   	            }
   	        }
   
             if (_focusedIndex != selectedIndex) {
               	if(!getHeaderAt(selectedIndex).enabled || !getHeaderAt(_focusedIndex).enabled)
               		if(loop <= numChildren)
               			getIndexPlus(event, loop + 1, prevValue);
   /*             		else {
               			_focusedIndex = prevValue;
               			set selectedIndex(prevValue);
               		} */
              	} else
   	           	if(!getHeaderAt(selectedIndex).enabled)
   	           		if(loop <= numChildren)
   	            		getIndexPlus(event, loop + 1, prevValue);
   /* 					else {
               			_focusedIndex = prevValue;
               			set selectedIndex(prevValue)
        				} */
           }
   
   	    private function dispatchChangeEvent(oldIndex:int,
   	                                         newIndex:int,
   	                                         cause:Event = null):void {
   	        var indexChangeEvent:IndexChangedEvent =
   	            new IndexChangedEvent(IndexChangedEvent.CHANGE);
   	        indexChangeEvent.oldIndex = oldIndex;
   	        indexChangeEvent.newIndex = newIndex;
   	        indexChangeEvent.relatedObject = getChildAt(newIndex);
   	        indexChangeEvent.triggerEvent = cause;
   	        dispatchEvent(indexChangeEvent);
   	    }
   	}
   }
   

3. 3 thomary Nov 7th, 2008 at 8:03 am

   I was looking for code to open myform with the accordion totally collapsed. In other words, all accordion pages are not open. The default is to have the first page opened.

   I looked through Adobe forums, adobe class for accordion and around the internet.
   I think I need something like:
   my_acc.getChildAt(my_acc.numChildren -1);

   I tried:

   cfformitem type=”script”
   function formOnLoad(){
   var theChild_obj:Object = {};
   var theChild_obj:Object = info.getChildAt(info.numChildren -1);
   }
   /cfformitem
   But this did not work.
   I am using CFusion MX 7 with cfform format=”Flash”
   Any help would be greatly appreciated.
   Thanks, Thomary

4. 4 thomary Nov 7th, 2008 at 9:56 am

   I used a work around. added a blank page and defaulted to that one.

   Thanks for all these pages.
   I found a lot of useful pages here.

5. 5 yon Dec 1st, 2008 at 11:54 am

   I created a blog, i plan to post articles about flex and coding as soon as i have some free time
   By now i have the code i posted above (without errors, since i didnt parsed it to be digested by the postin machine in here..) with a working example.
   You can read it here
   http://faithoncode.wordpress.com/2008/11/11/flex-accordionheaders/

   Regards

Leave a Reply