Create a focusable component

In a Flex application a focusable component implements the IFocusManagerComponent interface. UIComponent implements the methods of this interface, so your work is mostly done! However, since not all UIComponent's are intended to be focusable (containers, labels, etc.) UIComponent's class declaration does not state that it implements the interface.

Step 1: implement this interface by adding "implements IFocusManagerComponent" to your class definition

Note: in an MXML component you could do this w/the 'implements' attribute.

Step 2: set the appropriate values on the tab & focus related properties

This all depends on what your component does. The interesting properties are tabEnabled and tabChildren. Here some examples of how you might use them:

• Your component gets focus, but not it's child objects: use tabEnabled=true, tabChildren=false
• Your component does not get focused, some of it's child objects do: use tabEnabled=false, tabChildren=true
• Your component gets focus, and so do some of it's children: tabEnabled=true, tabChildren=true

Property	Class	Notes
tabEnabled	InteractiveObject	Whether the user can tab navigate to this component. UIComponent sets this to 'true' if the component implements IFocusManagerComponent
tabIndex	InterativeObject	Optional, specifies the index of this component in the tab order. After all I've learned, I say avoid using this. More on this later!
tabChildren	DisplayObjectContainer	Whether or not child objects of your component are able to be tabbed to. The default is true.
focusEnabled	UIComponent	Whether the component can receive focus when tabbed to. The default is 'true'.
hasFocusableChildren	UIComponent	Flex 4 only! Similar to the tabChildren property, docs say that Flex apps should not use tabChildren.
mouseFocusEnabled	UIComponent	Whether or not the component can be focused with the mouse. This is a strange property b/c somewhere else some other class seems to decide whether or not to honor it. Default is 'true'.
tabFocusEnabled	UIComponent	Flex 4 only! Similar to tabEnabled property. Default is 'true'.

Step 3: Implement keyboard support

Making something focusable means that keystrokes will be sent to your component when it has focus. So go the distance and add sensible keyboard support to your component.

When your component has focus, it's keyDownHandler() and keyUpHandler() methods will be called as the user is typing. Override the keyDownHandler() method and you're off to the races.

override protected function keyDownHandler(event:KeyboardEvent):void
{
    switch(event.keyCode)
    {
        case Keyboard.ENTER:
            dispatchEvent( new MouseEvent(MouseEvent.CLICK) );
            break;
  // and so on
    }
}