Automatic Tab Focus Ordering

The Aspire UI Framework implements its own TAB key navigation system, overriding the native behavior of the Flash Player. This implementation is based on the opinion that a logical tab focus order should flow in the same way the UI controls are added to the container, which normally coincides with the way they are laid out, normally from left-to-right, top-to-bottom.

Using the Aspire UI library, the tab focus chain is automatically set up based on the containment hierarchy (ie, the child index order is the tab focus chain order) - you do not need to set up tabIndex manually in your application code. In fact, you do not need to do anything to implement tab focus management - it is done automatically by the framework. All you need to do is plan your UI layout (child containment order), which you must do anyway.

Let's take the example shown in the tutorial Using uiBox:

The buttons in that example are arranged left-to-right using a uiBox container. The tab focus order follows that same order:

It must also be noted that, as expected, the tab focus order loops - after the last control in the focus order, the next TAB will bring the focus back to the first control in the focus order. And of course, SHIFT-TAB navigates through the controls in reversed order.

When the vertical property of the uiBox container is switched to true, the buttons are re-arranged into a column top-to-bottom:

The tab focus order follows that same order:

The focus manager is also intelligent enough to take into account nested containers and child controls, automatically setting up the correct (nested) tab focus order. In the example shown below, “Button 4” and “Button 5” are contained in a nested uiBox container which is a sibling of “Button 1”, “Button 2” and “Button 3”.

The tab focus order is as shown below:

Note that if you set the reversed property of the uiBox container to true, the tab focus order will be reversed too, as shown below:

In other words, regardless of the on-screen position of the controls, the tab focus order always follow the child containment order.

IMPORTANT If you decide to use absolute positioning instead of layout container(s), you must take care to addChild and/or addChildAt the correct order - it is important to remember that the tab focus order will follow the child containment order.