如何更改Tab键排序的Flex（ActionScript中，SDK 3.5） [英] How to change tab ordering in Flex (Actionscript, SDK 3.5)

问题描述

柔性标签顺序很重要，无论是易用性（显着）和可访问性（它定义了屏幕阅读器读取顺序）。但是，Flex的3.5似乎已经旁边没有支持它的影响更复杂的应用程序。

The flex tab ordering is important both for usability (obvious) and accessibility (it defines the screen readers read ordering). However, Flex 3.5 seems to have next to no support to influence it for more complicated applications.

据我所知，到目前为止：

From what I know so far:

• 的标签排序由mx.managers.FocusManager，它负责1标签周期的整个应用程序的计算（即没有一个对于每个容器，但一对整个应用程序）。唯一的例外被嵌入的.swf文件，并弹出窗口，每个都有自己的FocusManager。

• the tab ordering is calculated by the mx.managers.FocusManager, which takes care of one "tab cycle" for the entire application (i.e. there is not one for each container, but one for the whole app). The exception being embedded .swf files and popups, each of which have their own FocusManager.

FocusManager将里面的逻辑被标记为私有，并且该类被实例化在Application.Initialize（），所以它是不容易改变的行为（短的SDK重写部分，这可能会带来麻烦牌照）

the logic inside the FocusManager is marked as private, and the class is instantiated in Application.initialize(), so it's not easy to change the behaviour (short of rewriting parts of the SDK, which might pose license trouble)

Tab键排序查找每个组件的tabIndex（INT）属性。所有组件有该属性集（> 0）被它的值是有序的，否则视觉层次被使用（它使用容器嵌套和子顺序的容器内）。

The tab ordering looks for each components tabIndex (int) property. All components which have this property set (>0) are ordered by its value, otherwise the visual hierarchy is used (which uses container nesting and child order inside the containers).

没有的tabIndex所有组件进行排序是具有其设置的组件后（在内部，的tabIndex未设定被映射为的tabIndex = int.MAX_VALUE的）

All components without tabIndex are sorted to be after the components which have it set (internally, "tabIndex not set" is mapped to "tabIndex = int.MAX_VALUE)

两个组件具有相同的tabIndex通过视觉层次有序。

two components with the same tabIndex are ordered by visual hierarchy.

这意味着，你可以使用自动排序由视觉层次（您想主要是什么），也可以使用直接指定tabIndexes - 但如果你这样做，你完全螺丝自动排序。这是特别不好，如果你的自定义组件工作，并想改变里面的Tab键排序：一旦你这样做，你毁了使用组件中的所有屏幕上的选项卡顺序。你也不能只设置选项卡仅在最高级别的MXML文件排序，因为往往你没有访问到您使用的组件的内部工作。

This means that you can either use the automatic ordering by visual hierarchy (mostly what you want) OR you can use specifying tabIndexes directly - BUT if you do this you completely screw the automatic ordering. This is especially bad if you work with custom components and want to change the tab ordering inside those: once you do this, you ruined the tab order for all screens using your component. Also you cannot just set the tab ordering only on the highest level mxml file, as often you don't have access to the inner workings of the components you use.

accVerticalStuff.mxml

accVerticalStuff.mxml

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Label text="One"/>
    <mx:TextInput tabIndex="1" id="One" />

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

    <mx:Label text="Three" />
    <mx:TextInput tabIndex="3" id="Three"/>

</mx:VBox>

Application.mxml                                 

Application.mxml

预期成果：标签顺序将是左边第一个三纵项，然后在右侧的三个垂直项目，即由容器进行分组。该TopLevelElement是第一个在Tab键顺序。 （它的工作原理完全在没有指定的tabIndex是这样，但是我们没能在实际工作改变的tabIndex到如开关一和三不管是什么原因，我们可能会想这样做）

Expected Result: the tab order would be first the three vertical items on the left, then the three vertical items on the right, i.e. grouped by the containers. The TopLevelElement is the first in the tab order. (it works exactly in this way if no tabIndex is specified, however then we're not able to actuall change the tabIndex to e.g. switch One and Three for whatever reasons we might want to do so)

实际结果：标签排序是水平的，即两个输入形式之间跳跃。该TopLevelElement（W / O型的tabIndex指定）是最后的选项卡顺序。

Actual Result: the tab ordering is horizontal, i.e. jumping between the two input forms. The TopLevelElement (w/o tabIndex specified) is last in the tab order.

更改容器的嵌套不会模块化项目的工作，改变孩子的的顺序会影响它们的显示位置（而持续了Canvas容器失去的自动版式）。

Changing the nesting of containers will not work in modularized projects, and changing the ordering of childs would affect their display position (whereas going for Canvas container looses the AutoLayout).

有没有一种方法（可能是复杂的，但preferably短重写的SDK）来指定Tab键顺序排列的单个组件，独立于其它组件？

Is there a way (possibly complicated, but preferably short of rewriting the SDK) to specify the tab ordering for single components, independently of other components?

如果一切都失败了，将升级到FLEX4帮助解决这个问题？

if all else fails, would upgrading to Flex4 help in solving this issue?

推荐答案

经过一段时间的研究，我发现了以下工作：

after a little research i found out the following:

• 如果（甚至一个）的DisplayObject 的的tabIndex＆GT; 0 这意味着从现在开始pressing 设置页只会实例之间switcth重点与的tabIndex＆GT; 0
  
• 如果有只有一个实例的tabIndex＆GT; 0 将重点永远
  
• 如果 current.tabIndex - next.tabIndex＆GT; 1 没关系，的tabIndex将增加至下一现有值
  

• 如果多个实例有相同的tabIndex值，他们将收到的重点在原生的顺序（好像的tabIndex从未定义）
  -------------------------------------------------- -----------------------------
  
  因此：

• if (even a single) DisplayObject has tabIndex > 0 it means that from now pressing TAB will only switcth focus between instances with tabIndex > 0
  
• if there's only one instance with tabIndex > 0 it will be focused forever
  
• if current.tabIndex - next.tabIndex > 1 it doesn't matter, tabIndex will increase to the next existing value
  

• if several instances have equal tabIndex values they will recieve focus in a native order (as if tabIndex is never defined)
  -------------------------------------------------------------------------------
  
  so:

对于一些的DisplayObject之间建立标签导航（无论他们哪儿位于显示列表中） - 刚刚成立的tabIndex＆GT; 0 为每个人。

for setting up TAB navigation between some DisplayObjects (no matter where're they located in the display list) - just set tabIndex > 0 for every of them.

和code一点点（根据你的例子）：
showclasses.NewFile.mxml：

and a little bit of code (based on your example):
showclasses.NewFile.mxml:

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

Main.mxml：

Main.mxml:

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:th="showclasses.*">
    <mx:HBox>
        <th:NewFile data="1,2,3" />
        <th:NewFile data="1,2,3" />
        <th:NewFile data="1,2,3" />
    </mx:HBox>
</mx:Application>

如果数据的值是1,2,3; 1,2,3; 1,2,3 - 焦点水平移动由左到右（自然，因为的tabIndex是每一行内不变），然后切换到下一行的左边元素下来
。 如果他们是2;空，3; 0，空，1（空== 0的tabIndex） - 焦点将出现在右下角然后在左上角，最后在中心
希望这将是有益的。

if data values are 1,2,3; 1,2,3; 1,2,3 - focus moves horizontally from left to right (naturally because tabIndex is constant inside each row) and then switches to the left element of the next row down.
if they are 2; null,3; 0,null,1 (null == 0 for tabIndex) - focus will appear in the lower-right corner then in the upper-left and at last in the center.
hope this'll be useful

这篇关于如何更改Tab键排序的Flex（ActionScript中，SDK 3.5）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！