Для открытия обычного окна мы используем функцию window.open
, о которой я вкратце
упоминал в Первой главе.
Вернемся к ней ещё раз и подобнее:
Формат функции прост - дескриптор=window.open(ссылка, имя окна, опции);
, где:
about:blank
)Типичная строка опций представляет собой что-то в таком роде: "toolbar,location=yes, menubar=no,top=200px, left=100" - эта строка говорит открыть окно браузера, содержащее toolbar, строку адреса и без меню с расположением 200 пикселей от верхнего края экрана и 100 от левого. Данное окно запуститься в контексте браузера. Строка опций определяет - будет ли открытое окно обычным окном браузера(по умолчанию), со всей встроенной функциональностью (включая меню по правой клавише мыши), или "чистым" XUL окном. "Чистое" окно требует, чтобы была включена следующая опция: chrome. Когда chrome отключён, следующие атрибуты применимы к окну: toolbar location directories personalbar status menubar scrollbars extrachrome
Эти опции применимы и к обычному окну браузера и к окну chrome: resizable dependent modal dialog centerscreen top left height width innerHeight innerWidth outerHeight outerWidth screenX screenY.
Часть опций требует привилегий безопасности для использования. Это: titlebar close
alwaysLowered z-lock alwaysRaised minimizable . Привилегиями, по умолчанию, обладают
программы, запущенные из контекста crome://
Я попытался свести значения всех опций для window.open()
в таблицу:
Опция | Назначение (в скобках значение по умолчанию) | chrome | браузер | Требуют привил. |
height, width, innerHeight, innerWidth, outerHeight, outerWidth | размеры окна | + | + | |
top, left | позиция окна | + | + | |
resizable | разрешать ли изменение размеров окна(true) | + | + | |
dependent | закрывать, если закрывается родительское окно, новое окно всегда наверху(false) | + | + | |
modal | окно модальное(false), если текущее окно уже и так модально, то modal=true | + | + | |
dialog | остаётся только кнопка закрытия окна в titlebar(false) | + | + | |
centerscreen | вывести окно по центру экрана(false) | + | + | |
toolbar, personalbar | показывать панель инструментов(true) | + | ||
location | строка адреса(true) | + | ||
status | строка статуса(true) | + | ||
menubar | меню(true) | + | ||
scrollbars | прокрутка(true) | + | ||
extrachrome | загружать sidebar (true) | + | ||
titlebar | Включает декорацию окна назначаемую оконным менеджером(заголовок окна, бордюр вдоль окна)(true) | + | ||
close | кнопка закрытия окна в заголовке(true) | + | ||
alwaysLowered, z-lock | удерживают окна под другими окнами, когда они получают фокус(false) | + | ||
alwaysRaised | удерживают окна над другими окнами, когда они получают фокус(false) | + | ||
minimizable | ? | + |
Атрибуты window
:
height, width
- ширина и высота (по умолчанию, зависит от элементов
вгутри)orient
- ориентация элементов внутри по умолчанию, может принимать значение
horizontal и vertical(horizontal) screenX, screenY
- позиция окна на экране.sizemode
- состояние окна, может принимать значение: maximized, minimized, normal
(по умолчанию установлен normal).title
- заголовок окнаwindowtype
- обычная строка, которая может служить для индетификации типа окна.
Служит для того, чтобы Mozilla не открывала окна с одним типом точно одно поверх другого.
window - не единственный вариант окна, который существует в XUL.
Другие элементы это dialog
, page
, и wizard
.
Окна диалога служат для специальных функций, в стиле отображение сообщений или
ввода дополнительной информации.
Обычно, они запускаются не сами по себе, а в контексте других, главных, окон.
Для создания диалоговых окон и служит специальный тег <dialog>
. Внешне он очень сильно
похож window
. Вы можете просто поменять window
на dialog
во всех
предыдущих примерах. Возьмём самый первый пример этого руководства и произведём замену:
<?xml version="1.0" encoding="windows-1251"?> <dialog title="Здравствуй" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <description value="Take Back the Web!"/> </dialog>
chrome://
или быть подписанным и допущенным,
чтобы иметь доступ внутрь chrome.
Так как текущий пример запущен с сайта,
то мы не увидели никаких надписей на кнопках, а если вы загляните в JavaScript Console,
то увидите сообщение о нарушении прав доступа.
dialog
похож на window, с дополнительными атрибутами. Вот эти атрибуты:
buttonpack
- значение pack
атрибута коробки, в которую поместили все кнопки.buttondir
- соответственно, значение dir.buttonalign
- align.buttonorient
- orient.buttons
- представляет собой список кнопок, разделенных запятыми и пробелами.
Эта строка по принципу формирования похожа на строку опций в window.open().
Разрешенные значения: accept cancel extra1 extra2 help disclosure.
Пример использования:<?xml version="1.0" encoding="windows-1251"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog title="Кнопки" buttons="accept, help, disclosure" buttonorient="rtl" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <description value="Take Back the Web!"/> </dialog>
ondialogaccept
, ondialogcancel
, ondialogextra1
,
ondialogextra2
, ondialoghelp
, ondialogdisclosure
- обработчики событий на соответствующие кнопки. (пример: ondialogaccept="alert('yes');")Второй отличительной особенностью окон диалога, является то, что им можно передавать параметры при запуске. Для этого служит:
window.openDialog()
дескриптор окна = window.openDialog(ссылка, имя, опции, аргумент 1, аргумент 2, …);
window.arguments
. Первый
аргумент будет window.arguments[0].
Комментарий от Андрея Куликова:
В качестве аргументов, передаваемых в окно диалога могут быть объекты:
var obj = new Object() obj.name = 'NoName' obj.arr = [1,2,3] ... var newDialog = window.openDialog(,,,obj)Внутри окна диалога обращение к свойствам и методам как обычно:
...window.arguments[0].name
Тэг page
является другим примером корневого тэга. Он также похож по использованию
на window
и вы можете использовать его вместо window
,
но это будет крайне нежелательно :). Основное назначение page
-
подгружать документы внутри iframe
. При помощи него,
создаются такие панели настройки, как "Options.." у Mozilla.
Никаких дополнительных атрибутов не имеет.
Хотя iframe
сам не является "корневым элементом", он служит для того,
чтобы в нём отображали другие "корневые элементы", поэтому мы рассмотрим его в этой главе.
Использование iframe
очень похоже на iframe в HTML
iframe
позволяет включать внешние web-страницы и xul документы внутри xul. Любой XUL документ,
включаемый с помощью iframe обязан начинаться с тега page
.
iframe
обладает единственным специальным атрибутом:
src
- указывает на URL включаемого документаcontentDocument
- получить, в режиме только для чтения,
window.document фреймаcontentWindow
- доступ, только для чтения, к window фрейма.DocShell
- Расшифровывается как "Document Shell" - обеспечивает
доступ к интерфейсу nsIDocShell.webNavigation
- содержит ссылку на window.webNavigation
вложеного документа, с
помощью которого можно реализовать навигацию загруженым документом (такие как
goBack,goForward,reloadWithFlags, loadURIWithFlags)Чаще всего iframe применяют для создания сложных окон со сменяющейся частью (таких как окно настройки Mozilla), и для создания аналога браузера (окна предосмотра)
<?xml version="1.0" encoding="windows-1251"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="iframe" orient="vertical" width="400px" height="300px" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <description value="Это iframe"/> <iframe flex="1" src="http://xul.ru"/> </window>Посмотреть пример 8.3
Существует вариант iframe
, специально "заточенный" для просмотра web-документов
- это <bowser>
. В дополнение к возможностям iframe
в нём реализованы функциональность браузера,
такие как: работа с историей посещения страниц ( goBack(), goForward() ), домашняя страница
( homePage, goHome()) и тд. Если заинтересовались - подробности на
xulplanet.
Также рекоммендую присмотреться к
tabbrowser
Вариант iframe
, предназначенный для создания визуального редактора,
называется <editor>
.
editor
, например, является "сердцем" Mozilla Composer. Позволяет редактировать
как текст, так и HTML.
Документация »
Рассмотрим ещё один элемент, отвечающий за рисования окна - wizard
. В главе
"Поиграем в карты?" я высказывал сожаление, что для того,
чтобы переключаться между "картами" stack или
deck обязательно необходим JavaScript,
который осуществит это переключение. wizard
это некая комбинация между
dialog и deck. Предназначен
он для создания всем знакомых "Мастеров" (настройки/установки и тп),
ведущих пользователей шаг-за-шагом через некий процесс.
Внутри представляет из себя некую последовательность "карт", связанных между собой
последовательностью перехода по умолчанию.
wizard
состоит из двух частей: внешней, wizard
,
который и отвечает за создание окна и внутренней - коллекции wizardpage
служащей страницами диалога, и хранящей внутри себя XUL содержимое. Внизу каждого диалога
рассположены кнопки перехода между диалогами (следующий, предыдущий, отменить)
Следует помнить, что wizard
, как dialog
можно вызывать только
из защищённых мест, например, из chrome://
.
Типичный пример:
<?xml version="1.0" encoding="windows-1251"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="wizard" title="Вступаем в клан" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage description="Пол" pageid="sex" next="agr"> <description> Вам необходимо ответить на несколько вопросов, чтобы определить, достойны ли вы принятия в клан. </description> <label value="Какого вы пола?"/> <menulist> <menupopup> <menuitem label="Мужского"/> <menuitem label="Женского"/> </menupopup> </menulist> </wizardpage> <wizardpage description="Агрессия"> <description value="Вы агрессивны?"/> <radiogroup> <radio value="yes" label="Да"/> <radio value="now" label="Нет"/> </radiogroup> </wizardpage> </wizard>
wizard
описывает общее поведение мастера и поддерживает следующие специальные атрибуты:
title
заголовок мастера.firstpage
, lastpage
- устанавливается в истину,
когда достигается первая и последняя страница
pagestep
- на сколько страниц вперёд переходит мастер, в случае, когда
поведение мастера не описано в атрибутах wizardpage
(1)onwizardback
,onwizardnext
, onwizardcancel
,
onwizardfinish
- устанавливают обработчики на нажатие
клавишь мастера.window
,
наследником которого он является.
wizardpage
описывает одну из страничек Мастера, а также её поведение.
wizardpage
:
description
- подзаголовок окна (смотри рисунок выше)pageid
- строка-идентификатор страницы.next
указывает на pageid
, на который необходимо перейти,
при нажатию на клавишу Next. Если Мастер не встречает атрибута next,
он просто открывает следующую страницу, или "перепрыгивает" страницы
на основании значения wizard.pagestep рассмотренного выше.onpageadvanced
указание на функцию, которая вызывается при нажатии
на клавишу Next. Если функция возвращает false (например изза ошибки
введённой информации на странице), то переход на следующую страницу не производиться
.onpagehide
- указание на функцию, которая вызывается при скрытии страницы.
Отличие от предыдущего обработчика, что событие перехватывает не только Next.
onpageshow
- указатель на функцию, вызываемую при появлении страницы.
Мы можем динамично, на лету, проверять и менять порядок смены страниц при помощи JavaScript.
Например, повесим обработчик на <wizardpage onpageshow=
или
<wizardpage onpageadvanced=
и внутри него, проверив
некие вводимые значения, сменим next таким образом:
document.getElementById('Wizardpage3').next="Wizardpage17";или просто запретим переход к следующей странице
document.getElementById('Wizardpage3').canAdvance=0;Для понимания цепочки сообщений: обработчики, при нажатии на кнопку Next, вызываются в следующем порядке:
Атрибут | В каком тэге | Где вызывается |
onpagehide | wizardpage | Вызывается на странице, покидаемой пользователем |
onpageadvanced | wizardpage | Вызывается на странице, покидаемой пользователем |
onwizardnext | wizard | Вызывается в Мастере |
onpageshow | wizardpage | Вызывается на странице, в которую приходит пользователь |
Хотите помочь? Вы нашли ошибку или хотите сделать комментарий - пишите. Я рад любой помощи.
©Yegor Turin
(electroCat.ru) 2004 year. All Rights Reserved.