如何在 Flex 中更改选项卡顺序(Actionscript，SDK 3.5) [英] How to change tab ordering in Flex (Actionscript, SDK 3.5)

问题描述

Flex 选项卡顺序对于可用性(显而易见)和可访问性(它定义屏幕阅读器阅读顺序)都很重要.然而，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.

据我目前所知:

• 选项卡顺序由 mx.managers.FocusManager 计算，它负责整个应用程序的一个选项卡循环"(即不是每个容器都有一个，而是整个应用程序一个).嵌入的 .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内部的逻辑被标记为private，类在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)

选项卡顺序查找每个组件的 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 not set"映射到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 键顺序，这尤其糟糕:一旦您这样做，就会破坏使用您的组件的所有屏幕的 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>

应用程序.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(未指定 tabIndex)在 Tab 键顺序中排在最后.

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 容器会丢失 AutoLayout).

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).

有没有一种方法(可能很复杂，但最好不要重写 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 >0 表示从现在开始按 TAB 只会在 tabIndex > 的实例之间切换焦点.0
  
• 如果只有一个带有 tabIndex > 的实例；0 它将永远聚焦
  
• if current.tabIndex - next.tabIndex >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:

用于在某些 DisplayObjects 之间设置 TAB 导航(无论它们位于显示列表中的哪个位置) - 只需设置 tabIndex >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.

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

<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) - 焦点将出现在右下角，然后出现在左上角，最后出现在中心.
希望这会很有用

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

这篇关于如何在 Flex 中更改选项卡顺序(Actionscript，SDK 3.5)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！