UIComponent and focus tabbing on children

When coding composite components for a Flex application you usually extend a Container subclass and get focus tabbing for free on the children.

However when creating a reusable component, you sometimes want to avoid extending Container so that users are well aware your component is not meant to be a generic container, but a truly sealed component (even if made of children). When you want this you then extend UIComponent. The problem with that is that you then loose the ability to get focus tabbing between the children of your component. The solution to this is just a single line of code, but as this line is not necessarily obvious (at least it was not to me before finding it ;) ) I thought it might help some readers to provide it. Basically you just need to enable children tabbing in the UIComponent subclass constructor:

public function MyComponent() {
  super();
  tabChildren = true;
}

That’s what, for example, the Flex NumericStepper is doing to ensure that one can use tab to focus either on the input field or on the buttons of the stepper.

Hope this helps!

Bookmark: These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • del.icio.us
  • Furl
  • Slashdot
  • StumbleUpon
  • Technorati

Tags: ,

Leave a Reply