83. [junior] Табуляция во Flash-приложении. tabIndex, tabEnabled, tabChildren

junior – серия статей для начинающих ActionScript-разработчиков.
Все статьи серии:
http://flashpress.ru/blog/category/junior/

Вы используете для навигации клавишу Tab? Лично я стараюсь не использовать мышку, там где можно обойтись без неё, и конечно же клавиша Tab очень помогает в этом. Терпеть не могу сайты в которых нет нормальной tab-навигации. Что бы вы лучше понимали о чем мы будем говорить в статье, заполнить форму эти двух флешек, используя клавишу tab, для перехода в следующее поле ввода:

Здесь должна быть флешка. Установите Flash Player

Здесь должна быть флешка. Установите Flash Player

Флешка слева использует стандартный механизм табуляции, справа – то что мы попытаемся реализовать в данной статье. Во флешке слева 3 проблемы:

  1. При нажатии клавиши tab, поля выделяются не по очереди
  2. Выделяется кнопка “Перейти на FlashPress.ru”, которую можно было не выделять клавишей табуляции
  3. Кнопка Зарегистрироваться обрамляется не очень красивой желтой рамкой

Первая проблема решается с помощью свойства tabIndex, которое задает порядок обхода элементов клавишей tab. Вторую проблему легко можно обойти, задав свойство tabEnabled объекту, который не должно получать фокус при табуляции. Ну последнюю проблему мы решим, задав свойства focusRect значение false, что бы стандартная рамка не отображалась вовсе. Собственную подсветку мы реализуем слушая события FocusEvent.FOCUS_IN и FocusEvent.FOCUS_OUT.

Для сравнения посмотрите на код флешки слева, которая не реализует функционал корректной табуляции(кликните что бы раскрыть)

Класс Form.as:

Класс MyButton.as:


Закрыть Код с неправильной табуляцией


Решение проблемы. Вариант 1

Дальше предлагаю ознакомиться с кодом, с правильной tab-навигацией.

Класс Form.as:

Класс MyButton.as:

Класс MyInput.as:


Решение проблемы. Вариант 2

Как видите из предыдущего примера, классы MyButton и MyInput имеют очень похожих код для создания подсветки, которая отображается при tab-навигации. Писать дублирующий код это не очень профессионально. Поэтому давайте напишем дополнительный класс TabManager, который будет содержать весь необходимы код, и который мы будет подключать к необходимым объектам.

Класс Form.as:

Обратите внимание на строки 82-85, здесь мы сообщаем классу TabManager, какие элементы надо подсвечивать. Вот как выглядит сам класс TabManager.as:

Класс TabManager имеет один публичный static метод Register, в который вы передаем ссылку на объект, который необходимо подсветить. Соответственно из классов MyButton и MyInput мы убираем код, отвечающий за подсветку:

Класс MyButton.as:

Класс MyInput:


Скачать исходники в трех вариантах.

Да прeбудет с вами Flash.
Serious Sam
Эту статью прочитали 1056 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress:


  1. i

    Давно хотел спросить (чтобы самому в будущем знать решение этой проблемы) – почему у вас весь флеш в опере вот так отображается?