Опубликован: 10.12.2007 | Доступ: свободный | Студентов: 822 / 20 | Оценка: 5.00 / 5.00 | Длительность: 58:33:00
Лекция 4:

Первые элементы управления и темы

4.3.1.2 Тег <toolbarbutton>

<toolbarbutton> - это альтернатива <button>. Следующие атрибуты имеют особое значение внутри <toolbarbutton>:

disabled checked group command tabindex image label accesskey crop 
toolbarmode buttonstyle

Почти все они - те же, что и для <button>, так зачем же нужен <toolbarbutton>? Происхождение этого тега - еще одна история о системах с графическим интерфейсом. Самый распространенный способ добавить команды в графическое окно - создать систему меню. Меню часто разрастаются и становятся медленными, потому и возникла идея панели инструментов. Панель инструментов представляет собой набор часто используемых команд, легко доступный пользователю. Самый простой способ добавить команду к панели инструментов - использовать кнопку. Выстраивание кнопок в ряд друг за другом выглядит неаккуратно с точки зрения пользователя, поэтому у кнопок на панелях инструментов нет границ, пока на них не будет наведен курсор мыши. В XUL есть тег <toolbar>, а в него для каждой команды можно разместить <toolbarbutton>. Если нужны примеры, взгляните на окно классического браузера.

Тег <toolbarbutton> может использоваться и вне <toolbar>, они не прикованы друг к другу чугунной цепью. Они полностью независимы.

Тег <toolbarbutton> - модификация тега <button>, у него такое же содержимое по умолчанию, но оно всегда идет после любого содержимого, предоставленного пользователем тега. В отличие от <button>, содержимое по умолчанию присутствует всегда.

На рисунке 4.7 показано использование атрибутов checked и disabled вместе с <toolbarbutton>.

Альтернативные представления <toolbarbutton> в теме Classic

Рис. 4.7. Альтернативные представления <toolbarbutton> в теме Classic

XML-атрибуты toolbarmode и buttonstyle специально созданы для классического браузера. Они используются в его скинах (таблицах стилей) и недоступны глобально. Если атрибуту toolbarmode присвоить значение small, кнопки навигации браузера уменьшатся в размере. Если присвоить значение pictures атрибуту buttonstyle, то та часть содержимого по умолчанию, которая содержит <label>, будет скрыта; если присвоить значение text, скроется та часть, которая содержит <image>.

В классическом браузере <toolbarbutton> используется для элементов всех возможных панелей инструментов, в том числе закладок на личной панели. Такие закладки - первый пример сложности, вводимой при чрезмерном использовании таблиц стилей: закладка сама по себе не выглядит как кнопка, она выглядит как гиперссылка в HTML. Другой пример творческого подхода к использованию стилей - тема Modern. В ней у элементов <toolbarbutton> границы кнопок убираются вообще. Если по имени <toolbarbutton> можно понять, что этот тег имеет какое-то отношение к кнопке, то по внешнему виду сориентироваться уже нельзя.

Суть <toolbarbutton> в следующем: это точно такой же тег, что и <button>, но визуально он больше подходит для панели инструментов, его содержимое не заключается в <hbox> и для него добавлена собственная поддержка контекстных меню. Обычно такие меню появляются, когда мы щелкаем по какому-либо элементу интерфейса правой кнопкой мыши. Теги <toolbarbutton> могут содержать и собственные меню. Только для кнопок браузера "Вперед" и "Назад" специальный код внутри Mozilla гарантирует, что их нажатие и правой и левой кнопкой мыши приведет к открытию их меню.

4.3.1.3 Тег <autorepeatbutton>

Это кнопка, чье действие выполняется несколько раз. От нее самой мало пользы, но это важная составляющая при создании других, более сложных элементов графического интерфейса. Она основывается на теге <button>, но у нее нет содержимого по умолчанию и особых XML-атрибутов.

Если пользователь наведет на такую кнопку указатель мыши, 20 раз в секунду начнет выполняться событие oncommand. На такие события могут реагировать соответствующие обработчики. Все другие события аналогичны событиям для любого тега, определенного пользователем.

<autorepeatbutton> используется для создания тега <arrowscrollbox>, где такая кнопка нужна, чтобы реализовать непрерывную прокрутку. Кроме того, эта кнопка используется в выпадающих меню, когда они настолько длинные, что все элементы за раз не могут быть отображены. При удерживании кнопки <arrowscrollbox> нажатой, соответствующий блок прокручивается. Этот тег подробнее обсуждается в "Навигация" , "Навигация".

Если <autorepeatbutton> появляется как часть большего тега, тогда его содержимое - одно только изображение, предоставляемое таблицей стилей. Изображение соответствует направлению прокрутки. При каждом запуске события <autorepeatbutton> выполняется поиск родительского тега, чье содержимое можно прокручивать, и для него выполняются необходимые для прокрутки действия.

Кнопка <autorepeatbutton> интересна потому, что она еще несамостоятельна. Если она появляется вне тега <arrowscrollbox>, она будет работать некорректно. Если родительский тег несоответствующего типа, <autorepeatbutton> сделает то, что от нее требуется, но при этом накидает кучу ошибок в консоль JavaScript, что неприятно. Единственный способ избавиться от этих сообщений и сделать <autorepeatbutton> более независимой - отредактировать ее XBL-определение в chrome. Такие изменения могут предоставляться любым приложением Mozilla.

4.3.1.4 Тег <thumb>

Тег <thumb> - это тег <button>, единственным содержимым которого является тег <gripper>. <gripper> - тег, определенный пользователем. Тег <thumb> используется для реализации ползунка, появляющегося в центре полосы прокрутки.

<thumb> интересен потому, что он отображается как графический элемент операционной системы. Комбинация <thumb>, <gripper> и расширений стилей Mozilla (см. раздел "Альтернатива: таблицы стилей" этой лекции) позволяют <thumb> легко отображать ползунок, использующийся стандартной графической оболочкой ОС, а не ползунок Mozilla.

<thumb> может выполнять часть своих функций вне полосы прокрутки, но он не создавался как общая desktop-specific кнопка. Он не отображает текст или другое содержимое, у него есть только внешние границы и текстура кнопки. Это простой пример создания кнопок, выглядящих как стандартные кнопки графической оболочки ОС. Стили <thumb>, выполняющие эту работу, можно найти в файле chrome xul.css, в toolkit.jar.

4.3.1.5 Тег <scrollbarbutton>

<scrollbarbutton> - это тег, предоставляющий кнопки для каждого конца полосы прокрутки. В XUL полосы прокруток реализуются с помощью тега <scrollbar>. Если вместо него применяется <nativescrollbar>, тогда не используются и теги <scrollbarbutton>. Стрелка на <scrollbarbutton> предоставляется таблицей стилей.

<scrollbarbutton> - это измененный тег <button>, и в нем можно задействовать XML-атрибуты <button>. Кроме того, этот тег поддерживает атрибут type. Его значением могут быть increment и decrement, и он преследует две цели. Во-первых, он используется для выбора из таблицы стилей нужной пиктограммы, а во-вторых, он определяет, в какую сторону будет совершаться прокрутка. Increment означает прокрутку в прямом направлении, а decrement - в обратном.

Тег <scrollbarbutton> похож на <autorepeatbutton> тем, что он работает надлежащим образом только внутри какого-либо объемлющего тега. Отличие заключается в том, что <scrollbarbutton> реализован без XBL-кода, так что автору приложения нечего редактировать, чтобы упростить использование этого тега. Но данный тег хотя бы не генерирует сообщений об ошибках.

В целом, все части, составляющие XUL-тег <scrollbar>, довольно тесно связаны. Сами по себе <thumb>, <scrollbarbutton> и <slider> работают не очень. Так что лучше оставить их внутри <scrollbar>.