Навигация

8.2.4. Строки состояния

XUL в Mozilla поддерживает строки состояния. Такая строка обычно появляется в нижней части XUL-окна, где выдается информация о состоянии и сообщения об изменениях. Там также могут находиться кнопки-пиктограммы. Действительно ли строки состояния отличаются от панелей инструментов - спорный вопрос. В Mozilla строки состояний образуют отдельную систему.

XBL-определения тегов, поддерживающих строки состояний, хранятся в файле chrome general.xml архива toolkit.jar.

8.2.4.1. <statusbar>

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

Возвращаясь к рисунку 8.3, <statusbar> появляется как "вдавленная" область окна, в которую может добавляться содержимое. Внешний вид этой области есть результат примененных стилей. Если вы хотите, чтобы размеры XUL-окна можно было менять на Macintosh, тогда добавление тега <statusbar> в низ документа - простейший способ гарантировать это, потому что в правом конце строки состояния находится тег <resizer>.

Соблазн использовать сразу несколько тегов <statusbar> один за другим достаточно велик, но на Macintosh это будет выглядеть странно. В таком случает появится несколько пиктограмм <resizer>, так что не стоит этого делать.

8.2.4.2. <statusbarpanel>

Внутри <statusbar> может появляться любое содержимое, но лучше сгруппировать это содержимое в набор тегов <statusbarpanel>. Этот тег копирует внешний вид тега <button>, но это не кнопка и обычно он не нажимается. Этот тег просто разделяет строку состояния в нижней части любого окна браузера Mozilla на визуальные отделения. Все это делается с помощью стилей; у <statusbarpanel> нет специального поведения элементов управления, он ведет себя как <hbox>.

Внутри <statusbarpanel> может быть любое содержимое XUL. С другой стороны, его внешний вид может определяться атрибутами. Вот особые атрибуты <statusbarpanel>:

src label crop

Существует два варианта этого тега. Если задан атрибут class="statusbarpaneliconic", тогда его содержимое - одно-единственное изображение, задаваемое атрибутом src. Иначе содержимое - единственная надпись, к которой относятся атрибуты label и crop. Если <statusbarpanel> содержит что-то нестандартное, определенное пользователем, тогда такое содержимое может замещать эти атрибуты.

Пользуйтесь <statusbarpanel>, чтобы выделить управляющую область в отображаемом XUL-документе. Этот тег может появляться вне тега <statusbar>, но результат такого применения не определен.

8.2.5. Строки заголовков

В XUL Mozilla предусмотрена некоторая поддержка строк заголовков. В большинстве случаев строка заголовка - это часть окна, добавляемая, как и другие обрамления окна, менеджером окон графической среды. В XUL реализована лишь частичная поддержка работы с такими строками. Строке заголовка не соответствует фрейм.

Простейший способ задать содержимое строки состояния - использовать свойство window.title. Каким бы ни было его значение, оно появится в основной части строки заголовка. Другие элементы строки заголовка недоступны, хотя в окне, основанном на теге <dialog>, можно удалить некоторые элементы управления. Окно можно открыть и без строки заголовка вообще, передавая параметры функции window.open() (см. подробнее в "Окна и панели" , "Окна и панели").

В chrome Mozilla содержится XBL-определение тега <titlebar>. Он иногда встречается в других XBL-определениях, но у него нет статуса настоящего XUL-тега. Это не более чем <hbox>, содержащий <label> и <image>. Он должен моделировать строку состояния, добавляемую к окну менеджером окон графической среды. Это составная часть тега <floatingview>, описываемого далее. При желании можно изучить его применение подробнее.

Тег <dialogheader> не имеет ничего общего со строками заголовков, это просто контейнер для некоторого содержимого.

window.open(), <dialog>, <dialogheader> и <page> описываются в "Окна и панели" , "Окна и панели".

8.2.6. Отображение окон с несколькими секциями

Что делать, если все XUL-содержимое не помещается на площадь одного экрана целиком? XUL предоставляет несколько методов для решения этой задачи, основанных на идее "заталкивания" большего содержимого в одно окно. Каждая составная часть окна называется панелью, хотя этот термин и не совсем технически точен. Некоторые особенности панелей рассматриваются в лекции 10, "Окна и панели". Простейший способ отобразить дополнительное содержимое - пользоваться полосами прокрутки, но это упрощенное решение. Лучшим решением будет проверить дизайн окна вашего приложения. У большинства окон должны быть простые цели или цель, и пользователям не нужно много перемещаться по ним. Никто никогда не должен прокручивать содержимое окна приложения вниз, чтобы обнаружить "дополнительные" элементы формы. Это может быть уместно на web-страницах, но, в конце концов, это признак плохого проектирования. Формы всегда должны умещаться в изначально отображаемое окно.

Некоторые приложения ориентированы на работу с объектами, как рабочие столы. Обычно опытные пользователи таких приложений не нуждаются в упрощенном дизайне. Если дизайн упростить невозможно, XUL предоставляет разделители и вкладки для разделения содержимого на части. И те, и другие разбивают содержимое окна на секции, возлагая на пользователя ответственность за переход между этими секциями вручную. Преимущество такого разделения - более корректное упорядочивание содержимого; цена - появление дополнительных элементов управления навигацией, которые не связаны с основной целью приложения.

Другие приложения совсем не похожи на рабочие столы. В случае часто используемых приложений, например, форм ввода данных, введение разделителей и вкладок может заметно ухудшить производительность. Пользуйтесь этими методами, только если ожидаете, что пользователи обдумают свои действия, упорядочивая содержимое окна. Не пользуйтесь ими в уже устоявшихся приложениях и пилотных демонстрациях приложений. Это не заменит хорошего проектирования. Лучше сделать действительной целью поддержку приложения, а не создавать "швейцарский нож", подходящий для любых целей. Однако этот совет не относится к области конкурентоспособных продаж. В области продаж важнее поразить аудиторию "спецэффектами", чем произвести что-то действительно надежное и удобное в использовании. Такова жизнь.

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

В "Окна и панели" , "Окна и панели", мы продолжим тему упорядочивании содержимого, которое нельзя уместить в одно окно. Другая методика многопанельного отображения в XUL - тег <wizard>, рассматриваемый в "Система распространения и установки - XPInstall" , "Система распространения и установки - XPInstall".

8.2.6.1. Тег <splitter>

Тег <splitter> ведет себя как смесь тегов <button>, <resizer> и <spacer>. Пример на рисунке 8.3 несколько нетипичен, потому что разделители обычно довольно узки, так что могут занимать минимальную площадь на экране.

В одном XUL-документе может быть несколько тегов <splitter>. Разделители обширно используются в отладчике JavaScript Mozilla и отделяют боковую панель от содержимого web-страницы в окне навигатора. Цель разделителя - разбивать содержимое на две панели, по одной с каждой стороны.

Тег <splitter> обычно содержит один тег <grippy>. Как говорилось в "Первые элементы управления и темы" , "Первые элементы управления и темы", на тег <splitter> можно нажимать и его можно перетаскивать с помощью тега <grippy>. Тег <grippy> предоставляет область для хранения обработчиков событий и стилей; вот и все, что он делает. Использовать его очень просто:

<splitter><grippy/></splitter>

При необходимости тег <grippy> можно опустить.

Тег <splitter> работает следующим образом: он и другие теги на одном с ним уровне содержатся в <vbox>, <hbox> или теге, похожем на блочный. Когда пользователь щелкает по разделителю и перетаскивает его, разделитель пересчитывает свое положение, основываясь на каждом малейшем смещении при движении. Затем он отдает команду своим "соседям" сжаться или растянуться. Сам разделитель не меняет размера, и в обычном случае родительский <vbox> или <hbox> также остается того же размера. Как будут сжиматься или растягиваться "соседи", зависит от атрибутов тега <splitter>. Если в родительском теге несколько разделителей, тогда каждый действует независимо от других, считая остальные обычным содержимым.

Вот атрибуты с особым значением в сочетании с тегом <splitter>:

orient disabled collapse state resizebefore resizeafter fixed

Атрибут orient определяет, будет разделитель вертикальным ( vertical ) или горизонтальным ( horizontal ). disabled со значением true заставляет разделитель перестать реагировать на действия пользователя. collapse определяет, какой "сосед" разделителя ( before или after ) должен исчезнуть, если разделитель свернут. Значением state может быть open, dragging или collapsed. open означает, что содержимое обоих "соседей" разделителя видимо. dragging означает, что пользователь производит жест мышью, начавшийся с разделителя, а collapsed значит, что содержимое одного из "соседей" разделителя полностью скрыто, а все доступное место занимает другая панель.

Чтобы сворачивание разделителя работало, у <splitter> должен быть "сосед" с той стороны, куда будет производиться сворачивание. Простейший способ сделать это - использовать на этой стороне тег <box>. Сворачивание происходит, только если задан атрибут state - это делается с помощью JavaScript в реализации <grippy>. Обратите внимание, что state="collapsed" и collapse="..."[/ отличаются от стандартного атрибута [mllapsed="true", доступного во всех XUL-тегах. collapsed="true" в сочетании со <splitter> спрячет сам разделитель.

Оставшиеся атрибуты определяют, как будут меняться размеры прилегающего к разделителю содержимого. Если значение resizebefore или resizeafter - farthest, тогда сужающаяся панель будет сначала отбирать место у самого дальнего "соседа" тега <splitter>. Если значение - closest, тогда она будет начинать с ближайшего "соседа". Если сужающаяся панель содержит единственный <box>, тогда его содержимое будет сужаться равномерно, не обращая внимания на атрибуты resizebefore или resizeafter. Значением resizeafter также может быть grow. В этом случае содержимое после разделителя не будет уменьшаться, когда разделитель будет перетаскиваться в его сторону. Вместо этого оно будет перенесено в сторону так, что выйдет за пределы блока-контейнера или границ окна и будет усечено. Задание атрибуту fixed значения true перекрывает другие параметры и не дает перемещать grippy. Тем не менее, разделитель по-прежнему можно будет сворачивать.

Этот набор параметров означает, что атрибуты state и resizebefore/resizeafter не могут использоваться все сразу, так как они требуют различного размещения прилегающего содержимого. Смешивание правил изменения размеров с атрибутом flex и изменением размеров окна может произвести целый ряд слегка отличающихся друг от друга эффектов.

У <splitter> есть один вариант: он также отвечает за изменение размеров столбцов в теге <tree>. В этом случае у него есть атрибут class="tree-splitter" и отсутствует видимое представление. См. "Списки и Деревья" , "Списки и Деревья".