Окна и панели

10.1. Обычные окна. Тег <window>

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

sizemode windowtype screenX screenY width height

Атрибут sizemode применим только к тегам <window> (или <dialog> ), описывающим окна верхнего уровня. Он отражает состояние окна на рабочем столе и может принимать значения normal, minimized или maximized (нормальное, свернутое, развернутое на весь экран).

Атрибут windowtype позволяет задавать группы однотипных окон. Значением этого атрибута может быть любая строка, определенная программистом. Атрибут имеет смысл, если одновременно открыто два или более окон одного и того же типа. При открытии второго и последующих окон, Mozilla пытается сместить их относительно существующих окон данного типа. Это сделано для того, чтобы пользователь не "потерял" однотипные окна из-за их полного перекрытия.

Атрибуты screenX screenY определяют смещение окна в пикселах относительно левого верхнего угла экрана.

Атрибуты width и height задают высоту и ширину окна в пикселах.

Ни один из атрибутов screenX, screenY, width, height не может быть изменен после того, как окно отображено на экране.

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

10.2 Всплывающие окна

Окно XUL может перекрываться другим содержимым, заданным в том же документе, ("всплывающим содержимым") при использовании следующих тегов:

<tooltip> <menupopup> <popup> <popupgroup> <popupset>

Однако не все эти теги рекомендованы к использованию, и не все они применимы в любом месте документа. Так, <menupopup> следует использовать только внутри тегов <menu> или <menulist>. Следующие атрибуты других тегов XUL, определяющих элементы интерфейса, также могут определять различные виды всплывающего содержимого для этих элементов:

tooltiptext grippytooltiptext popup menu context contextmenu 
contentcontextmenu

Некоторые из перечисленных атрибутов также объявлены устаревшими. Тег <menupopup> рассматривается в "Формы и меню" "Формы и меню". Прочие теги и атрибуты описываются в этой лекции.

Для создания некоторых визуальных эффектов может использоваться тег <deck>, представленный в "Верстка с XUL" "Управление геометрией XUL".

10.2.1 Задание всплывающего содержимого

Система тегов и атрибутов, используемая для всплывающего содержимого, несет на себе отпечаток долгой истории развития Mozilla. Безусловно, лучше использовать современные теги, чем те, которые объявлены устаревшими. Однако и устаревшие теги сейчас корректно обрабатываются, и их поддержка вряд ли прекратится в версиях Mozilla 1.x.

Существует три основных типа всплывающих окон: всплывающие подсказки, контекстные меню и обычные меню.

При использовании большинства современных тегов содержимое, описывающее всплывающие подсказки и контекстные меню, следует помещать внутрь тега <popupset>. Это тег, который не имеет собственного визуального отображения и используется для организации других тегов, подобно тегу <keyset>. При необходимости в документе XUL может быть несколько тегов <menupopup>.

Всплывающая подсказка определяется при помощи тега <tooltip>, а контекстные меню – посредством тега <menupopup>. Обычные меню также могут быть описаны внутри тега <popupset> при помощи <menupopup>, однако рекомендуется использовать для создания обычных меню другие средства – теги <menu> и <menulist>.

Традиционной, но устаревшей практикой является описание контекстных меню при помощи тега <popup>. Редко встречающиеся теги <context> и <popupset> еще более архаичны. Эти и другие теги могут быть заключены в очень старый тег <popupgroup>. Этот тег может использоваться в пределах документа только один раз. Не стоит задействовать ни один из этих трех тегов, хотя <popup> все еще широко применяется при описании интерфейса Mozilla. Они объявлены устаревшими, и для них существуют современные альтернативы.

10.2.2 Всплывающая подсказка

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

Тег <tooltip> поддерживает следующие атрибуты:

label crop default titletip

Если <tooltip> не имеет содержимого, его текст определяется значением атрибута label. Атрибут crop определяет, каким образом подсказка может быть сокращена, если на экране недостаточно места.

Если значение атрибута default - true, данная подсказка является всплывающей подсказкой по умолчанию для всего документа. Если атрибут titletip имеет значение true, всплывающая подсказка отображается для элемента интерфейса в том случае, если он частично скрыт. Оба эти атрибута имеют смысл только для подсказок к заголовкам столбцов тега <tree>.

Тег <tooltip> может иметь любое содержимое – он функционирует подобно тегу <vbox>. Однако большое количество содержимого для данного тега не имеет смысла, поскольку пользователь не может пролистывать это содержимое при помощи мыши или иным способом. Размерами всплывающей подсказки можно управлять при помощи атрибутов minwidth и minheight, однако это может вызывать проблемы при размещении элементов в родительском окне, так что использовать эти атрибуты не рекомендуется.

Чтобы связать всплывающую подсказку с каким-либо элементом интерфейса, нужно присвоить атрибуту tooltip нужного тега значение id тега <tooltip>, определяющего подсказку. Сокращенная нотация позволяет обойтись без специального тега <tooltip>, задав текст подсказки в качестве значения атрибута tooltip нужного элемента интерфейса. Еще один вариант – включить тег <tooltip> в содержимое тега, описывающего элемент интерфейса, для которого создается подсказка. В этом случае следует указать для родительского тега атрибут tooltip="child".

Атрибут contenttooltip, который может использоваться только с тегом <tabbrowser>, определяет подсказку для содержимого этого тега.

Кроме того, всплывающая подсказка появляется над заголовком окна, если текст заголовка не помещается в него целиком.

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

10.2.3. Контекстные меню

Контекстное меню – один из видов раскрывающихся меню. Оно выглядит так же, как и прочие меню, но появляется в ответ на "контекстный" щелчок мыши (щелчок правой кнопкой на большинстве платформ, щелчок с удержанием клавиши "Яблоко" на Macintosh). При этом меню появляется в том месте, где находится курсор мыши, а не каком-либо заранее определенном месте документа.

Для создания контекстного меню используется тег <menupopup>, описанный в "Формы и меню" "Формы и меню". Чтобы связать меню с элементом интерфейса, необходимо установить значение атрибута contextmenu этого тега равным значению атрибута id тега <menupopup>. Исключение составляет тег <tabbrowser> - у него следует устанавливать атрибут contentcontextmenu.

В прошлом для указания контекстного меню различных элементов интерфейса применялись атрибуты popup, menu и context. Сейчас они объявлены устаревшими, и их использования следует избегать, хотя атрибут context поддерживается до сих пор.

Атрибуты popupanchor и popupalign применимы к контекстным меню так же, как и к обычным меню, созданным при помощи тега <menupopoup>.

Ссылка на элемент интерфейса, к которому относится контекстное меню, видимое в настоящий момент, может быть получена при помощи свойства window.popupNode.