Заметки за январь 2010 года

Навигация с помощью клавиатуры

Часто Web-приложения используют Javascript для того, чтобы подражать обычным программам и использовать элементы управления, такие как деревья, закладки и т.п. Важную часть взаимодействия пользователя и интерфейса при таком подражании составляет навигация по элементам управления с помощью клавиатуры.

Любой элемент в документе может получить фокус, если у него указан атрибут tabindex. Он не является частью спецификации HTML 4.01, но фактически реализован во всех современных браузерах.

Значение атрибута tabindex

Атрибут может принимать любые числовые значения. Явное указание атрибута позволяет получить фокус с помощью указателя мыши или программно через метод focus(). Отсутствие атрибута устанавливает обычную реакцию элемента. В этом случае фокус могут получить только элементы формы, ссылки и некоторые другие.

Поведение при навигации с помощью клавиши «Tab»

  • Отрицательное

    Элемент игнорируется

  • Нулевое

    Последовательность задается положением элемента в документе

  • Положительное

    Значение явно задает порядок элементов при перемещении фокуса

Отслеживание сфокусированного элемента

События focus и blur могут быть использованы для любого элемента. Но так как нет стандартного интерфейса, для определения получил элемент фокус или нет, то нужно будет самостоятельно обрабатывать и запоминать это состояние.

Не следует предполагать, что фокус может меняться только с помощью клавиатуры или мышки, потому что вспомогательные технологии, такие как «чтение с экрана» могут самостоятельно устанавливать фокус на элементы.

Динамическое изменение атрибута tabIndex

Изменение атрибута может использоваться в случае, когда элемент управления может отключаться, и его следует пропускать при перемещении между элементам.

Отслеживание фокуса у элемента document

Что касается событий focus и blur, то их может генерировать не только конкретный элемент, но и весь документ в целом. В jQuery 1.4 разработчики добавили синтетические события focusin и focusout для корректной делегации родительским элементам DOM-событий focus и blur соответственно. Прикрепив обработчик этих событий к документу, можно отслеживать активность окна браузера.

Оставте свой комментарий

Инфраструктура виджетов в YUI3

Интересную инфраструктуру для создания виджетов предоставляет фреймворк YUI3. В заметке я хочу кратко описать шаблон для создания и назначение методов жизненного цикла.

Пример минимального виджета:

YUI.add("mywidget", function (Y) {

    var App = Y.namespace("App");

    /* MyWidget конструктор */
    function MyWidget(config) {
        MyWidget.superclass.constructor.apply(this, arguments);
    }

    /* Имя виджета, которое будет использоваться для генерации названий классов и т.п. */
    MyWidget.NAME = "mywidget";

    Y.extend(MyWidget, Y.Widget, {
        initializer: function (config) {},
        destructor: function () {},
        renderUI: function () {},
        bindUI: function () {},
        syncUI: function () {}
    });

    App.MyWidget = Y.Base.build(MyWidget.NAME, MyWidget, []);

}, "0.1", {use: ["widget"]});

Важными методами жизненного цикла виджета являются:

  • initializer

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

  • destructor

    Метод вызывается во время удаления виджета и используется для очистки экземпляра от созданных DOM-элементов и обработчиков событий. Если все DOM-элементы создавались внутри «bounding box», то нужно будет только «занулить» ссылки на них. Сами элементы и обработчики событий будут удалены автоматически.

  • renderUI

    Часть реализации «renderer», ответственная за создание представления виджета. Метод добавляет DOM-элементы, которые необходимы виджету, или изменяет существующие.

  • bindUI

    Часть реализации «renderer», ответственная за подключение обработчиков событий изменения атрибутов или DOM-событий.

  • syncUI

    Часть реализации «renderer», ответственная за обновление интерфейса виджета на основании его текущего состояния.

Получение данных о состоянии виджета в методах renderUI, bindUI, syncUI выполняется с помощью метода get, наследованного у класса Attribute. Следует отметить, что если используется статическое поле ATTRS у виджета, которое определяет начальное состояние, то в нем следует описать все используемые атрибуты. Если какой-то из них не будет описан, то получить доступ к нему не будет возможности.

Наиболее часто используемыми атрибутами, пожалуй, являются boundingBox и contentBox. Первый содержит ссылку на объект типа Node, который служит контейнером для виджета, а второй — ссылку на контейнер содержимого. Задать разметку для этих контейнеров можно через конфигурационные свойства BOUNDING_TEMPLATE и CONTENT_TEMPLATE соответственно. По умолчанию для них используется просто элемент DIV.

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

YUI().use("mywidget", function (Y) {
    var widget = new Y.App.MyWidget({
        a: 10,
        title: "Sample widget"
    });
    widget.render();
});

В конструкторе указываются, если это необходимо, конфигурационные параметры виджета. Метод render может быть вызван с параметром, определяющий DOM-элемент, где будет отображен виджет. Если он вызван без параметров, как в примере, то виджет отображается в элементе BODY.

Оставте свой комментарий