Опубликован: 10.12.2007 | Уровень: специалист | Доступ: платный
Лекция 10:

Окна и панели

10.5. Панели для отображения документов

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

XUL позволяет отображать в определенной области окна документ, независимый от основного окна. Для этого предусмотрено несколько тегов.

10.5.1 <iframe>

Тег <iframe> лежит в основе механизма включения одних документов в другие на платформе Mozilla. Он во многом подобен тегу HTML <iframe>, однако менее гибок. Между открывающим и закрывающим тегами <iframe> не может находиться никакого содержимого. Элементом интерфейса, соответствующим тегу <iframe>, является фрейм, в который может быть загружен независимый документ. При этом фокус ввода может быть передан содержимому этого фрейма. Размеры последнего можно задавать и изменять так же, как и для любого элемента-контейнера:

<iframe minwidth="100px" flex="1" src="about:blank"/>

Специфичным для <iframe> является только атрибут src, который задает URL документа для отображения в <iframe>. Также полезно указать значение атрибута name, чтобы документ, загруженный во фрейм, мог обращаться к нему.

В "Навигация" "Навигация" было отмечено, что тег <scrollbox> является особой разновидностью контейнера, которой соответствует отдельный интерфейс XPCOM. То же самое справедливо и для тега <iframe>. Это единственная реализация компонента, называемого

@mozilla.org/layout/xul-boxobject-iframe;1

Объект AOM, соответствующий тегу <iframe>, имеет свойство boxObject, как и все остальные объекты – контейнеры XUL. Как и в случае с тегом <scrollbox>, при помощи метода boxObject.QueryInterface() можно получить специализированный интерфейс, который для тега <iframe> называется nsIIFrameBoxObject. Хотя этот тег имеет единственное свойство, docShell, оно, в свою очередь, обеспечивает доступ к интерфейсу nsIDocShell, который обладает богатой функциональностью.

DocShell означает "Document Shell", [командная] оболочка документа. DocShell является оболочкой для работы с документами подобно тому, как ksh, bash или командная строка DOS являются оболочками для доступа к командам операционной системы.

Многочисленные свойства и методы интерфейса nsIDocShell обеспечивают доступ к основным операциям, необходимым для загрузки документа и управления его отображением. Кроме того, этот документ предоставляет доступ к другим интерфейсам, также полезным для управления документами. В некотором смысле интерфейс nsIDocShell похож на водительское кресло автомобиля – большинство средств управления находятся в непосредственной досягаемости. Этот интерфейс хорошо документирован и заслуживает хотя бы беглого ознакомления. Информация о нем содержится в загружаемых файлах, упомянутых во "Введении".

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

Содержимое фрейма, заданного тегом <iframe>, должно иметь статус отдельного документа XML, в отличие от большинства тегов- контейнеров, содержимое которых определяется их потомками в исходном документе XUL. <iframe> является важнейшим тегом, лежащим в основе браузера Mozilla – именно с его помощью реализована панель, в которой отображаются загружаемые документы.

Таким образом, тег <scrollbox> дополняет обычный контейнер возможностью прокрутки содержимого (часть документа XML) в отображаемой области. Дополнительные возможности тега <iframe> гораздо шире – он предоставляет различные способы управления содержимым (отдельным документом XML) и его отображением. В обоих случаях сама отображаемая область представляет собой простой прямоугольник без какого-либо дополнительного оформления.

XBL-определение тега <iframe> содержится в файле general.xml архива toolkit.jar в chrome. Это определение задает следующие свойства для удобного доступа к часто используемым возможностям интерфейса nsIDocShell:

docShell contentWindow webNavigation contentDocument

docShell является отправной точкой для управления содержимым фрейма. Еще три свойства являются эквивалентами свойств JavaScript window, window.webNavigation и widow.document соответственно для содержимого фрейма.

Свойство commandDispatcher, которое есть у любого документа XUL, имеет метод advanceFocusIntoSubtree(), с помощью которого можно передать фокус ввода содержимому тега <iframe>, если оно способно получить фокус.

Если документ, содержащийся во фрейме, шире или выше, чем область отображения фрейма, будут показаны полосы прокрутки. У всякого документа XUL, отображаемого в <iframe>, корневым тегом должен быть <page>. Теги <iframe> могут быть вложенными, при условии, что каждый из них содержит самостоятельный XML-документ.

10.5.2. Тег <page>

Тег <page> (страница) следует использовать вместо тега <window> в том случае, когда документ XUL предназначен для отображения внутри <iframe>. Тег <page> не имеет специализированных атрибутов.

Хотя документ с тегом <page> может отображаться в виде отдельного окна, такая практика не рекомендуется. Этот тег предназначен для документов, отображаемых во фреймах.

10.5.3. Тег <editor>

Тег <editor>, подобно тегу <iframe>, представляет собой специализированный контейнер для отображения отдельного документа. Единственным специализированным атрибутом этого тега является src, который указывает на URL отображаемого документа. Некоторые версии Mozilla поддерживают также атрибут editortype, который может принимать значения "html" или "txt". Кроме того, существует атрибут type, который может принимать значения "content" или "content-primary". В последнем случае свойство window.content указывает на свойство contentWindow тега <editor>. Этому тегу соответствует следующая пара XPCOM:

@mozilla.org/layout/xul-boxobject-editor;1 nsIEditorBoxObject

Интерфейс nsIEditorBoxObject поддерживает всю ту же функциональность docShell, что и тег <iframe>, а также богатую функциональность интерфейса nsIEditor, доступную через свойство editor. Интерфейс nsIEditor предоставляет все возможности, необходимые для реализации визуального редактирования HTML-документов – выделение текста, копирование и т.д. Тег <editor> лежит в основе классического Компоновщика подобно тому, как тег <iframe> лежит в основе браузера.

Тег <editor> не предоставляет дополнительных элементов управления для редактирования документа.

10.5.4. Тег <browser>

<browser> – еще один специализированный тег, который, подобно тегу <iframe>, предназначен для отображения независимых документов и имеет атрибут src. <browser> является тегом-контейнером, ему соответствует следующий компонент XPCOM:

@mozilla.org/layout/xul-boxobject-browser;1

Этот компонент реализует интерфейс nsIBrowserBoxObject, во многом сходный с интерфейсом nsIIFrameBoxObject. Вообще, теги <browser> и <iframe> имеют много общего.

Тем не менее, тег <browser> имеет отдельное XBL-определение, которое содержится в файле browser.xml архива toolkit.jar в chrome. Это определение содержит множество полезных свойств и методов. Те типичные задачи, которые при использовании тега <iframe> решаются путем нескольких обращений к различным интерфейсам, свойствам и методам, в случае <browser> часто требуют вызова единственного метода. В XBL-определении метода <browser> также предусмотрены поддержка истории просмотра документов, средств защиты и перетаскивания при помощи мыши.

Кроме того, <browser> поддерживает режим каретки (текстового курсора), который активизируется нажатием клавиши F7. В этом режиме, как в текстовом редакторе, пользователь может перемещать по HTML- странице курсор.

Тег <iframe> лучше использовать в тех случаях, когда нужно загрузить во фрейм единственный документ, который затем не будет изменяться. <browesr> более удобен, если предполагается последовательно загружать во фрейм разные документы или необходимо обеспечить базовые функции навигации.

10.5.5 <tabbrowser>

Подобно тому, как <browser> является переработанным вариантом тега <iframe>, тег <tabbrowser> (браузер с вкладками) представляет собой усовершенствованный <browser>. В отличие от двух других тегов, <tabbrowser> не имеет соответствующего компонента XPCOM. Фактически, он представляет собой одно большое XBL- определение в файле tabbrowser.xml архива toolkit.jar в chrome.

<tabbrowser> является комбинацией тегов <tabbox> и <browser>. Каждая вкладка тега <tabbox> содержит отдельный <browser>, причем вкладки можно динамически добавлять и удалять. Именно <tabbrowser> лежит в основе области отображения web-документов в окне классического браузера.

Тег <tabbrowser> имеет следующие специализированные свойства:

onnewtab contenttooltip contentcontextmenu

Свойство onnewtab – обработчик событий, который запускается, когда пользователь создает новую вкладку при помощи меню или специальной кнопки. Значения двух других атрибутов передаются тегам <browser>, находящимся на вкладках в качестве атрибутов tooltip и contextmenu соответственно.

Хотя с помощью многочисленных методов можно автоматизировать работу с тегом <tabbrowser>, как правило, в этом нет практического смысла. Этот тег предназначен для пользователя, просматривающего несколько web-документов. Максимум того, что обычно бывает нужно разработчику – получить информацию о текущем состоянии системы вкладок.

10.5.6 Теги <IFRAME> и <FRAME>

Эти теги HTML или XHTML используются при создании web-страниц для помещения документов во фреймы. Внутри такого фрейма может отображаться и документ XUL.

10.5.7 Игнорируемые теги и атрибуты

Существует несколько комбинаций тегов, которые игнорируются при отображении документов во фреймах.

По умолчанию в документе XUL игнорируется тег <html>. Он обрабатывается так же, как любой тег, определенный пользователем. Некоторую пользу из этого тега можно извлечь, применяя пространства имен XML, как описано ниже в разделе "Составные документы".

Тег <window>, являющийся потомком другого тега XUL, также игнорируется. Теги верхнего уровня - <window>, <dialog>, <page> - не могут быть вложенными, за исключением того случая, когда они относятся к отдельным документам, отображаемым во фреймах <iframe>.

Атрибут chromehidden тега <window> не имеет практического значения для разработчика приложений. Он устанавливается из метода window.open() и используется внутренним механизмом работы с панелями инструментов в классическом браузере. Атрибут windowtype, которому может быть присвоено строковое значение, используется для управления окнами (см. раздел "Управление существующими окнами"). Он не влияет на отображение окна.

Тег <package>, который иногда упоминается в устаревшей документации, в настоящее время не используется.

Дмитрий Гуменюк
Дмитрий Гуменюк
Россия, Звенигород
Konstantin Grishko
Konstantin Grishko
Россия, Москва, Московский финансово-промышленный университет "Синергия", Москва