Проблемы с порядком табуляции с компонентом на основе RadioButton

Question

У меня проблема со следующим примером кода на flex:

Test.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:local="*">
    <s:VGroup>
        <s:TextInput id="text1"/>
        <local:TestComponent id="tc1" />
        <local:TestComponent id="tc2" />
        <local:TestComponent id="tc3" />
        <s:TextInput id="text2"/>
    </s:VGroup>
</s:WindowedApplication>

TestComponent.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Declarations>
        <s:RadioButtonGroup id="grp"/>
    </fx:Declarations>
    <s:RadioButton id="redRadio" groupName="grp"/>
    <s:RadioButton id="yellowRadio" groupName="grp"/>
    <s:RadioButton id="greenRadio" groupName="grp"/>    
</s:Group>

Когда я запускаю приложение и нажимаю клавишу Tab для циклического перемещения по элементам управления, фокус переходит к первому текстовому полю, затем к первой радиокнопке первого TestComponent, а затем непосредственно к последнему текстовому полю, пропускающему второй и третий TestComponents. , Такое поведение мне кажется неправильным. Может кто-нибудь помочь мне это исправить?

UPD: явная настройка tabIndex также не работает:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:local="*">
    <s:VGroup>
        <s:TextInput id="text1" tabIndex="1"/>
        <local:TestComponent id="tc1" tabIndex="2"/>
        <local:TestComponent id="tc2" tabIndex="3"/>
        <local:TestComponent id="tc3" tabIndex="4"/>
        <s:TextInput id="text2" tabIndex="5"/>
    </s:VGroup>
</s:WindowedApplication>

Answer 1

Когда дело касается радиокнопок, кажется, что Flex устанавливает фокус не на отдельные радиокнопки, а на группы радиокнопок.Вы перемещаетесь между переключателями с помощью клавиш влево / вправо или вверх / вниз.Это имеет смысл для переключателей, потому что навигация по клавишам является однонаправленной.

На вашем примере я создал новый компонент TestComponent2.mxml и изменил идентификатор группы радиостанций.:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:mx="library://ns.adobe.com/flex/mx">

    <s:layout>
        <s:HorizontalLayout />
    </s:layout>

    <fx:Declarations>
        <s:RadioButtonGroup id="grp2" />
    </fx:Declarations>

    <s:RadioButton id="redRadio" groupName="grp2" />
    <s:RadioButton id="yellowRadio" groupName="grp2" />
    <s:RadioButton id="greenRadio" groupName="grp2" />
</s:Group>

Также я заменил 7-ю строку в вашем Test.mxml файле следующим образом:

<local:TestComponent2 id="tc2" />

Таким образом, он работал правильно.Используя клавишу табуляции, фокусировка циклически выполняется следующим образом:

1. Первый ввод текста

2. Первая группа переключателей (левая / правая клавишанавигация)

3. Вторая группа переключателей (то же самое здесь)

4. Второй ввод текста

Похоже, вам необходимо назначить разные имена группам переключателей.

Надеюсь, это поможет, удачного дня!

Answer 2

После некоторых исследований и отладки исходного кода Flex я нашел решение.Моя ошибка заключалась в том, что я предположил, что атрибуты group и groupName должны соответствовать одному и тому же элементу управления RadioButtonGroup.Но они не должны!Атрибут group может указывать на реальный элемент управления RadioButtonGroup, а для groupName (который используется FocusManager для определения, принадлежит ли RadioButton к группе), мы можем использовать какое-то случайно сгенерированное имя.Итак, рабочий код выглядит так:

TestComponent.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         initialize="init()">
    <fx:Script>
        <![CDATA[
            protected function init():void {
                var groupName:String = Math.random().toString();
                redRadio.groupName = groupName;
                yellowRadio.groupName = groupName;
                greenRadio.groupName = groupName;
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Declarations>
        <s:RadioButtonGroup id="grp"/>
    </fx:Declarations>
    <s:RadioButton id="redRadio" group="{grp}"/>
    <s:RadioButton id="yellowRadio" group="{grp}"/>
    <s:RadioButton id="greenRadio" group="{grp}"/>  
</s:Group>

Answer 3

Вы можете использовать свойство tabIndex, чтобы вручную установить элемент управления для кнопки табуляции.