如何更改Flex中的Tab键排序(Actionscript,SDK 3.5)

Question

flex选项卡的顺序对于可用性(显而易见)和可访问性(它定义了屏幕阅读器读取顺序)都很重要.但是,Flex 3.5似乎没有任何支持来影响更复杂的应用程序.

据我所知,到目前为止:

• 选项卡排序由mx.managers.FocusManager计算,它负责整个应用程序的一个"选项卡循环"(即每个容器没有一个,但整个应用程序只有一个).嵌入.swf文件和弹出窗口是个例外,每个文件和弹出窗口都有自己的FocusManager.

• FocusManager中的逻辑标记为私有,并且该类在Application.initialize()中实例化,因此更改行为并不容易(不能重写SDK的部分,这可能会造成许可证麻烦)

• Tab键顺序查找每个组件tabIndex(int)属性.具有此属性集(> 0)的所有组件按其值排序,否则使用可视层次结构(使用容器内的容器嵌套和子顺序).

• 没有tabIndex的所有组件都被排序为在它设置的组件之后(内部,"tabIndex not set"映射到"tabIndex = int.MAX_VALUE")

• 具有相同tabIndex的两个组件按可视层次结构排序.

这意味着您可以通过可视化层次结构使用自动排序(主要是您想要的)或者您可以直接使用指定tabIndexes - 但如果您这样做,则完全拧紧自动排序.如果您使用自定义组件并希望更改其中的选项卡顺序,则这一点尤其糟糕:一旦执行此操作,您就会破坏使用组件的所有屏幕的Tab键顺序.此外,您不能仅在最高级别的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

预期结果:选项卡顺序首先是左侧的三个垂直项目,然后是右侧的三个垂直项目,即按容器分组.TopLevelElement是Tab键顺序中的第一个.(如果没有指定tabIndex,它会以这种方式正常工作,但是我们无法将tabIndex更改为例如切换One和Three,无论出于何种原因我们可能会这样做)

实际结果:选项卡排序是水平的,即在两个输入表单之间跳转.TopLevelElement(未指定tabIndex)是Tab键顺序中的最后一个.

更改容器的嵌套在模块化项目中不起作用,更改子项的顺序会影响它们的显示位置(而使用Canvas容器会丢失AutoLayout).

有没有办法(可能很复杂,但最好不要重写SDK)来指定单个组件的标签排序,而与其他组件无关？

如果所有其他方法都失败了,升级到Flex4有助于解决这个问题吗？

Answer 1

经过一番研究后我发现了以下内容:

• 如果(甚至单个)DisplayObject具有tabIndex > 0它意味着从现在开始按下TAB只会在实例之间切换switcthtabIndex > 0
  
• 如果它只有一个实例tabIndex > 0将永远集中
  
• 如果current.tabIndex - next.tabIndex > 1无关紧要,tabIndex将增加到下一个现有值
  

• 如果多个实例具有相同的tabIndex值,它们将以本机顺序接收焦点(就好像tabIndex永远不会被定义)
  --------------------------- -------------------------------------------------- -
  
  所以:

• 用于在某些DisplayObject之间设置TAB导航(无论它们位于显示列表中的哪个位置) - 只tabIndex > 0为每个DisplayObject设置.
  

• 用于从TAB列表中删除实例 - 设置tabIndex = 0(但如果tabIndex == 0应用程序中只剩下DisplayObjects - TAB将在它们之间自然切换焦点).tabEnabled = false应该是一个更好的选择
  
• 用于在每个组中创建具有自然TAB顺序的几组DisplayObject,同时保持组之间的某些顺序 - 为每个组选择一个tabIndex(首先显示小值)并将您选择的tabIndex应用于组的每个成员.
  
  我认为TAB列表中的太多实例是无用且烦人的,因此管理它的最佳方法应该是使其等于当前app状态的10个最有用的UI元素列表.
  
  

和一些代码(基于你的例子):
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:

<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,null,1(对于tabIndex,null == 0) - 焦点将出现在右下角,然后出现在左上角,最后出现在中心.
希望这会有用