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

Навигация

8.2.2. Панели инструментов

Панель - это прямоугольная область окна, заполненная элементами управления. Панели инструментов и строки меню обычно появляются вдоль краев окна приложения, чаще всего вдоль верхнего края. Они предоставляют место для удобного запуска команд пользователем. Чтобы увидеть панели инструментов в Mozilla, нужно просто открыть окно классического браузера и взглянуть на его верхнюю часть. В классическом браузере есть дополнительная функциональность, позволяющая сворачивать и снова разворачивать панели инструментов. Попробуйте поэкспериментировать с подменю Вид | Показать/скрыть (View | Show/Hide).

Система панелей инструментов в Mozilla, включающая в себя и строки меню, проста, но может стать и сложной, более развитой, если использовать ее с умом. Эта сложность - результат использования оверлеев и шаблонов для построения одной панели инструментов из нескольких различных документов. Здесь мы рассмотрим только основные теги панелей инструментов; оверлеи и шаблоны будут представлены позже.

Панели инструментов Mozilla просты. По умолчанию их нельзя перетаскивать и закреплять у края, как панели инструментов в Netscape 4.x или в приложениях Microsoft. Их также нельзя прикреплять друг к другу или отделять от них части. К тому же панели инструментов Mozilla нельзя располагать вертикально. Они не предоставляют пиктограмму ("Больше"), которая появляется на панелях инструментов Internet Explorer [прим. пер.: уже предоставляют, например, в закладках на Личной панели]. Почти все эти функции при желании можно добавить к предоставленным базовым панелям инструментов.

У панелей Mozilla есть несколько преимуществ. Доступны grippys для сворачивания панелей инструментов из Netscape 4.x (но не в версии 1.2). Если они есть, панели инструментов могут быть закреплены на одном месте путем скрытия grippys с помощью стилей. Когда grippys панелей инструментов не поддерживаются, панели инструментов всегда закреплены на одном месте. Закрепленные панели инструментов - идея, заимствованная из Internet Explorer 6. Панели инструментов Mozilla также могут появляться в любом месте окна приложения, а так как для их создания используется XUL, организовать это очень просто.

На рисунке 8.3 показан снимок окна компоновщика Mozilla с примененной темой Modern. Обратите внимание на горизонтальную линию, отделяющую текст от пиктограмм на основной панели инструментов. Эта линия появляется на всех таких панелях при использовании темы Modern, но она не имеет ничего общего с функциональностью панели инструментов. Это просто фоновое изображение.

Особенности панелей инструментов в теме Modern

Рис. 8.3. Особенности панелей инструментов в теме Modern

Кроме панелей инструментов и строк меню, Mozilla также поддерживает строки состояния.

8.2.2.1. Тег <toolbox>

Тег <toolbox> - это контейнер для набора панелей инструментов. Его XBL-связка находится в файле toolbar.xml в chrome. Если grippys панелей инструментов отсутствуют (как в Mozilla 1.2.1), он ведет себя как <vbox>. И в ранних, и в последних версиях, где grippys снова поддерживаются, содержимое тега соответствует структурной схеме, показанной в листинге 8.4.

<toolbox> <vbox> <toolbar или menubar> <toolbar> 
... еще панели инструментов ... <hbox> <hbox> <spacer>
Листинг 8.4. Схема тега <toolbox>

Хотя в данном <toolbox> может быть несколько тегов <menubar>, это не очень хорошая практика, так как при навигации с клавиатуры возникает неопределенность.

Программист приложения указывает только тег <toolbox> и содержащиеся в нем <toolbar> и <menubar> ; все остальное создается автоматически. <vbox> содержит панели инструментов; <hbox> содержит пустой <hbox> и <spacer> с атрибутом flex. Этот пустой <hbox> нужен для хранения изображений, представляющих свернутые панели инструментов. Теги изображений не создаются заранее и скрываются с помощью стилей CSS 2, так как число панелей инструментов изначально неизвестно. Вместо этого они создаются динамически JavaScript-обработчиками onclick в XBL-определении.

Там, где нет grippys, <toolbox> - не более чем объект для применения стилей. Внутри него может находиться любой тег, но <toolbar> и <menubar> должны быть его непосредственными потомками.

8.2.2.2. Тег <toolbar>

Тег <toolbar> - первый из двух вариантов содержимого <toolbox>. Он представляет собой одну горизонтальную панель управления, которая ведет себя как <hbox> и ничем не примечательна. Эта панель может включать в себя любой тип содержимого. Единственные особо интересные XML-атрибуты:

collapsed grippyhidden grippytooltiptext

collapsed со значением true свернет панель инструментов, как и любой другой тег, grippyhidden со значением true закрепит панель на одном месте, скрывая <toolbargrippy>, который по умолчанию есть у каждой панели. grippytooltiptext задает текст всплывающей подсказки для grippy. Этот текст появляется, когда панель свернута, а указатель мыши находится над оставшейся видимой grippy.

Задание атрибута collapse и нажатие на grippy - не одно и то же. Чтобы эмулировать последнее действие, нужно вызвать метод collapseToolbar() родительского тега <toolbox>, передав как единственный аргумент DOM-объект <toolbar>.

Ранние версии Mozilla включали начальное изображение или пиктограмму для всей панели инструментов, но в последних версиях это было убрано. Тем не менее, такое изображение по-прежнему можно добавить с помощью свойства CSS 2 list-style-image.

Недостаток тега <toolbar> заключается в том, что он не всегда размещается правильно. Проблемы могут возникать, если он занимает меньше полной ширины XUL-окна. Если тег появляется в правой части внешнего <toolbox>, а окно узкое, содержимое <toolbar> может быть усечено некорректно. Иногда это работает, иногда нет. Чтобы достичь наилучшего результата, следует просто сделать <toolbar> шириной во все окно приложения.

В "Скрипты" , "Скрипты", рассматривается grippy панели инструментов, реализуемой с помощью <toolbargrippy>. grippy представляет собой простое изображение; идея этого элемента управления была позаимствована из графической среды OpenLook от Sun Microsystem.

Так как панели инструментов можно создавать динамически, лучше всего задавать простую структуру их содержимого. Сделайте все элементы на панели инструментов непосредственными потомками тега <toolbar>.

8.2.2.3. Теги <toolbaritem>, <toolbarbutton> и <toolbarseparator>

Теги <toolbaritem>, <toolbarbutton> и <toolbarseparator> используются как содержимое <toolbar>. <toolbaritem> - анонимный тег. <toolbarseparator> - анонимный тег со стилями, предоставляющими дополнительное место и возможность применения стилей далее. <toolbarbutton> - кнопка. Последние два описаны в "Первые элементы управления и темы" , "Первые элементы управления и темы".

Хотя у двух из этих тегов нет особых свойств, у них есть цель. Когда для создания панелей инструментов используются шаблоны, система шаблонов определяет, как создавать содержимое, основываясь на имени тегов. Хотя у <toolbaritem> нет собственного особого значения, система шаблонов может распознать имя и пропустить его. Это позволяет использовать тег в качестве контейнера для какого-то содержимого, которое не должно обрабатываться.

Всплывающие подсказки для кнопок и других тегов описываются в "Окна и панели" , "Окна и панели".

8.2.3. Строки меню

XUL в Mozilla поддерживает строки меню, которые являются особой формой панелей инструментов. Общепринято, что строка меню должна быть первой панелью инструментов в <toolbox>, так чтобы она появлялась в верхней части группы панелей.

8.2.3.1. <menubar>

Этот тег ведет себя как обычный <hbox> и может появляться внутри тега <toolbox> или вне его. Внутри <toolbox> может быть несколько <menubar>. Это общий случай.

Платформа Macintosh, и MacOS 9, и X, - особый случай. На этой платформе существует единственная строка меню, которая динамически разделяется между всеми запущенными приложениями. Эта особая строка меню существует вне основной системы управления окнами. Содержимое тега <menubar> применяется к такой строке меню в Macintosh, и это содержимое появляется только в данной строке. При этом считывается только один тег <menubar>, а в строку меню попадают только его потомки <menu>. Эти меню появляются на строке меню, когда окно Mozilla получает фокус. Они не появляются внутри окна Mozilla.

На других платформах <menubar> можно заполнять любым содержимым.

Тег <menubar> поддерживает специальные возможности Mozilla. Особые атрибуты <menubar> такие же, как и у <toolbar>:

collapsed grippyhidden grippytooltiptext

В Macintosh эти атрибуты не делают ничего. XBL-определение Mozilla для <menubar> находится в файле chrome toolbar.xml.

8.2.3.2. <menu>

Тег <menu> - единственный тег, который должен появляться внутри <menubar>. Он реализует метки, которые ведут себя как кнопки и при нажатии отображают выпадающие меню. Это интерфейс для тега <menupopup>, похожий на другие теги-интерфейсы, описанные в "События" , "События". Тег <menu> также может использоваться вне <menubar> как элемент формы (хотя для этого лучше применять <menulist> ) или как меню, вложенное в другое. Если у тега <menu>, непосредственного потомка <menubar>, нет содержимого, он будет во многом похож на <toolbarbutton> ; в таком случае следует использовать вместо него <toolbarbutton>.

Тег <menu> поддерживает специальные возможности Mozilla и допускает следующие особые атрибуты:

disabled _moz-menuactive open label accesskey crop acceltext image

disabled со значением true делает меню недоступным. _moz-menuactive со значением true применяет стиль, который выделяет заголовок меню, как если бы это была кнопка. open со значением true может применять к заголовку меню и другие стили, а также указывает на то, что выпадающее меню отображено. Другие атрибуты относятся к вложенным тегам <label>, кроме image, который относится к необязательной, но иногда доступной пиктограмме. Все теги с содержимым, создающиеся автоматически, описываются в разделе "Варианты меню".

Атрибут _moz-menuactive передается через тег <menu> от родительского тега <menubar> дальше до тегов <menuitem>, которые составляют содержимое меню. На этом атрибуте основаны многие стили. Эти стили предоставляют визуальную реакцию на действия пользователя при навигации по структуре меню. Атрибут _moz-menuactive мог бы называться -moz-menuactive, но имена XML-атрибутов не могут начинаться со знака "-". Имя этого атрибута еще может измениться, так что проверьте XBL-файлы в своей версии платформы, чтобы узнать, осталось ли оно прежним.

<menupopup> и <template> - единственные теги, которые могут быть содержимым тега <menu>. Как и панели инструментов, содержимое меню может создаваться системой шаблонов XUL или системой оверлеев. Таким же образом могут создаваться и отдельные меню, а не вся система меню.

<menu> также может использоваться внутри тега <toolbar>, но это делать не рекомендуется.

8.2.3.3. Варианты меню

У различных XUL-тегов, элементов форм, например, <button> и <textbox>, есть разные варианты, определяющиеся атрибутом type. У тега <menu> также есть варианты, но они определяются атрибутом class. Значение этого атрибута соответствует стандартным правилами стиля, задающим XBL-связку, которая будет применена к тегу <menu>. Доступны несколько связок, и каждая из них предоставляет свое содержимое по умолчанию.

В сумме существует пять незначительно отличающихся друг от друга вариантов меню. Эти варианты влияют только на исходное представление тега <menu>, но не на последующий открывающийся тег <menupopup>. Атрибут class может быть не задан; его значением может быть menu или menu-iconic (три варианта). Тег <menu> может находиться внутри или снаружи тега <menubar> (два варианта). 2x3=6 вариантов, но два из них идентичны. На рисунке 8.4 показаны эти варианты с отладочными стилями.

Варианты тега <menu>

Рис. 8.4. Варианты тега <menu>

Верхняя строка на этом снимке - <menubar>. Нижняя - <hbox>. Атрибуты accesskey и acceltext меняются, просто чтобы проиллюстрировать некоторые сочетания. Стоит обратить внимание на наличие и отсутствие тегов содержимого <label> и <image>, которое отмечено на рисунке черной прерывистой и тонкой черной сплошной линиями соответственно.

В этом примере у всех тегов меню есть атрибут maxwidth="150px", используемый для демонстрации выравнивания. Теги внутри строки меню ( <menubar> ) выровнены влево, а теги вне ее - вправо. Слова "no class" (класс не задан), "menu" и "menu-iconic" - заголовки каждого из шести отображаемых меню - соответствуют значению атрибута class тега <menu>. Любой второй <label> справа содержит текст атрибута acceltext.

Добавление пиктограмм в меню <menubar> - не очень сложная задача. Для начала следует задать атрибут class="menu-iconic". Если <menu> находится вне строки меню, можно использовать атрибут image, но если меню находится внутри строки, никакого эффекта от этого атрибута не будет. Чтобы пиктограмма появилась, нужно определить свой класс для тега <menu> (или использовать любой другой) и добавить в документ следующий собственный стиль:

.menubar-left#X {list-style-image: url("icon.png");}

X - идентификатор тега <menu>, которому нужна пиктограмма. Добавляйте по одному правилу для каждого меню, где должна появляться пиктограмма. Это не лучшее решение, но пока оно работает.