Окна.

Для открытия обычного окна мы используем функцию window.open, о которой я вкратце упоминал в Первой главе. Вернемся к ней ещё раз и подобнее:

Формат функции прост - дескриптор=window.open(ссылка, имя окна, опции);, где:

• ссылка - правильный URL окна (для создания пустого, используем about:blank)
• имя окна - строка
• А вот с опциями следует разобраться подробнее. Это обычная строка, в которой содержится список опций разделённых запятыми. Каждая опция может быть установлена в своё значение, для опций булевого типа значениями могут выступать "yes", "true", "no", "false".

Типичная строка опций представляет собой что-то в таком роде: "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() в таблицу:

window - не единственный вариант окна, который существует в XUL. Другие элементы это dialog, page, и wizard.

Окно диалога - dialog

Окна диалога служат для специальных функций, в стиле отображение сообщений или ввода дополнительной информации. Обычно, они запускаются не сами по себе, а в контексте других, главных, окон.
Для создания диалоговых окон и служит специальный тег <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>

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

var obj = new Object()
obj.name = 'NoName'
obj.arr = [1,2,3]
...   
var newDialog = window.openDialog(,,,obj)

page

Тэг page является другим примером корневого тэга. Он также похож по использованию на window и вы можете использовать его вместо window, но это будет крайне нежелательно :). Основное назначение page - подгружать документы внутри iframe. При помощи него, создаются такие панели настройки, как "Options.." у Mozilla. Никаких дополнительных атрибутов не имеет.

iframe

Хотя iframe сам не является "корневым элементом", он служит для того, чтобы в нём отображали другие "корневые элементы", поэтому мы рассмотрим его в этой главе.

Использование iframe очень похоже на iframe в HTML

Чаще всего 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>

Существует вариант iframe, специально "заточенный" для просмотра web-документов - это <bowser>. В дополнение к возможностям iframe в нём реализованы функциональность браузера, такие как: работа с историей посещения страниц ( goBack(), goForward() ), домашняя страница ( homePage, goHome()) и тд. Если заинтересовались - подробности на xulplanet. Также рекоммендую присмотреться к tabbrowser

Вариант iframe, предназначенный для создания визуального редактора, называется <editor>. editor, например, является "сердцем" Mozilla Composer. Позволяет редактировать как текст, так и HTML. Документация »

wizard

Рассмотрим ещё один элемент, отвечающий за рисования окна - 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>

Мы можем динамично, на лету, проверять и менять порядок смены страниц при помощи JavaScript. Например, повесим обработчик на <wizardpage onpageshow= или <wizardpage onpageadvanced= и внутри него, проверив некие вводимые значения, сменим next таким образом:

 document.getElementById('Wizardpage3').next="Wizardpage17";

 document.getElementById('Wizardpage3').canAdvance=0;

• Продолжение следует.

Хотите помочь? Вы нашли ошибку или хотите сделать комментарий - пишите. Я рад любой помощи.