How to change the Tab key in Flex (ActionScript, SDK 3.5)

 xmlns:fx="http://ns.adobe.com/mxml/2009" data="1,2,3" creationComplete="addFocuses();">
 < fx:Script>
  private function addFocuses():void{
 var focs:Array = data.split(',');
 One.tabIndex = focs[0];
 Two.tabIndex = focs[1];
 Three.tabIndex = focs[2]; 
} 
 ]]>
 
 
 
 
 
 
 

 xmlns:s= "library://ns.adobe.com/flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx" 
 xmlns:th="showclasses.* ">
 
 
 < br /> 
 

The order of the flex tabs is for usability (obvious) and accessibility (It defines the screen reader reading order) are all important. However, Flex 3.5 does not seem to have any support to affect more complex applications.

As far as I know, so far:

>Label sorting is calculated by mx.managers.FocusManager, which is responsible for a “label cycle” of the entire application (that is, there is no one for each container, but there is not one for the entire application). Embedded .swf files and The exception is the pop-up window, each file and pop-up window has its own FocusManager.
> The logic in the FocusManager is marked as private, and the class is instantiated in Application.initialize(), so it is not easy to change the behavior (not Rewrite the part of the SDK, which may cause license troubles)
> Tab key order to find the tabIndex (int) attribute of each component. All components with this attribute set (> 0) are sorted by their value, otherwise use can Depending on the hierarchy (using container nesting and sub-order within the container).
>All components without tabIndex are sorted after the component that set it (internally, “tabIndex not set” maps to “tabIndex = int.MAX_VALUE ”)
>Two components with the same tabIndex are sorted by visual hierarchy.

This means that you can use automatic sorting through visual hierarchy (mainly what you want) or you can Use the specified tabIndexes directly-but if you do, the automatic sorting is completely tightened. This is especially bad if you use a custom component and want to change the order of the tabs in it: once you do this, you will destroy the use of the component Tab order for all screens. In addition, you can’t just set the tab ordering on the highest-level mxml file, because you usually don’t have access to the internal workings of the components used.

Example:

accVerticalStuff.mxml

 
 

 
 < mx:TextInput tabIndex="2" id="Two"/>

 
 

Application.mxml

Expected result: The tab order is first the three vertical items on the left, and then the three vertical items on the right, that is, grouped by container. TopLevelElement is the first in the tab order.
(If tabIndex is not specified , It will work in this way, but we can’t change the tabIndex to, for example, switch One and Three, for whatever reason we might do this)

The actual result: the tab ordering is horizontal , That is, jump between two input forms. TopLevelElement (tabIndex not specified) is the last one in the tab order.

Changing the nesting of the container does not work in a modular project, changing the sub The order of the items will affect their display position (while using the Canvas container will lose AutoLayout).

Is there a way (it may be complicated, but it is best not to rewrite the SDK) to specify the label ordering of a single component, And has nothing to do with other components?

If all other methods fail, will upgrading to Flex4 help solve this problem?

After some research, I found the following:

> if (even a single) DisplayObject has a tabIndex> 0 means that pressing TAB from now on will only switch the focus between instances using tabIndex>. 0
>if there is only one instance of tabIndex> 0 it will always focus
> if current.tabIndex – next.tabIndex> 1It doesn’t matter, tabIndex will increase to the next existing value
>If multiple instances have the same tabIndex value, they will receive the focus in the native order (as if tabIndex was never defined)
————— —————————————————————–
So:
> is used to set TAB navigation between certain DisplayObjects (regardless of whether they are in the display list Which position) – Just set tabIndex> each to 0.
> Used to delete instances from the TAB list – set tabIndex = 0 (but if only DisplayObjects with tabIndex == 0 are left in the application – TAB will naturally switch focus between them). tabEnabled = false should be a better choice
> used to create multiple groups of DisplayObjects with natural TAB order in each group while maintaining some order between groups – Choose a tabIndex for each group (show the small value first) and apply the tabIndex you choose to each member of the group.

I think too many instances in the TAB list are useless and annoying , So the best way to manage it should be to make it equal to the top list such as the 10 most useful UI elements of the current application state.

And some code (based on your example):
showclasses .NewFile.mxml:

 xmlns:fx= "http://ns.adobe.com/mxml/2009" data="1,2,3" creationComplete="addFocuses();">
 
  private function addFocuses( ):void{
 var focs:Array = data.split(',');
 One.tabIndex = focs[0];
 Two.tabIndex = focs[1];
 Three.tabIndex = focs[2]; 
} 
 ]]>
 
 
 
 
 
 
 

Main.mxml:

 xmlns:s="library://ns.adobe.com/ flex/spark" 
 xmlns:mx="library://ns.adobe.com/flex/mx" 
 xmlns:th="showclasses.*">
  
 
 
 
 

If the data value is 1,2,3; 1,2,3; 1,2,3-The focus moves horizontally from left to right (of course because tabIndex is constant in each row) and then switches to the left element of the next row. If they are 2; empty, 3; 0, null, 1 (null == 0 for tabIndex)-the focus will appear in the lower right corner, then in the upper left corner, and finally in center.hope This will be useful