Создаем Окно

« Предыдущая статья Следующая статья »

На страницах этого руководства мы постепенно соберем диалоговое окошко поиска файлов. Сперва познакомимся с базовым синтаксисом XUL файла.

Создаем XUL файл

Файлу можно дать любое имя, однако, оно долно иметь расширение «.xul». Структура простейшего XUL файла может быть такой:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
    id="findfile-window"
    title="Find Files"
    orient="horizontal"
    xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Тут будут другие элементы --> 
</window>

Это окно не выполняет никаких действий, так как в нем нет ни одного элемента (их мы добавим в следующем разделе руководства). Рассмотрим код строчка за строчкой:

<?xml version="1.0"?>
Это строка просто показывает, что файл целиком состоит из XML-данных. Такая прагма должна быть первым элементом в каждом XUL-файле, так же как и в каждом XHTML файле.
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
Здесь задается стиль, который будет применен к элементам текущего документа (в этом примере — CSS-файл). Это стандартный способ задать стилевой файл для XML-документа. В этом случае мы импортируем стили из глобальной части пакета офорления (скина). Здесь не указан конкретный файл, поэтому Mozilla сама решит, какие файлы в директории использовать. А именно будет выбран и подгружен основополагающий файл «global.css». Этот файл содержит описание внешнего вида по умолчанию всех элементов XUL. Так сделано потому, что XML никак не определяет внешний вид своих элементов. Чаще всего системный стиль подключают первым в большинстве XUL-документов. Используя инструкцию <?xml-stylesheet ... ?>, вы можете подключать собственные стилевые файлы, другие системные стили, а так же стили любых расширений Мозилы. Подключить CSS-файл можно так же внутри вашего файла с помощью директивы @import. Это позволит уменьшить количество директив в заголовке XUL-документа.
<window
Эта строка указывает, что вы описываете элемент window(окно). Каждое окно описывается в отдельном файле. Этот тэг очень похож на тэг BODY в HTML. Внутри тэга window можно разместить множество атрибутов -- в данном случае четыре. В данном примере каждый атрибут размещён в отдельной строке, однако, это не обязательно.
id="findfile-window"
Атрибут id используется как идентификатор, чтобы мы могли получить доступ к окну из наших скриптов. Атрибут id применим к любому элементу. В качестве значения идентификатора, вы можете указать любую строку (разумеется, лучше, если она что-то значит).
title="Find Files"
Атрибут title определяет текст, содержащийся в заголовке окна, когда оно отображено. В данном примере это будет 'Find Files'.
orient="horizontal"
Атрибут orient Определяет расположение элементов в окне. Значение horizontal указывает, что объекты должны размещаться в окне по горизонтали. Вы так-же можете использовать значение vertical, которое означает, что объекты будут выстраиваться в колонки. Это значение принимается по умолчанию, так-что, если вы хотите, чтобы элементы были расположены вертикально, просто не определяйте этот атрибут.
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
Эта строка определяет пространство имён XUL. Вы должны указать эту строку в элементе window, чтобы указать, что все потомки этого окна являются потомками XUL. Обратите внимание, что никаких данных с этого URL никогда не будет запрошено или получено, поскольку Mozilla способна самостоятельно распознать данный URL.

Блок с комментариями. Можете заменить его чем нибудь полезным(кнопками, меню или другими компонентами интерфейса). Мы сделаем это в следующих разделах.
</window>
Закрывающий тэг window. Это конец файла.

Открытие окна

Существует несколько способов открытия окна XUL. Если Вы только на стадии разработки, то можете просто ввести URL (chrome:, file: либо другой тип URL) в адресной строке браузера Mozilla. Также следует сделать так, чтобы XUL файлы в проводнике ассоциировались с Mozilla и запускались двойным кликом. Окно XUL появится в окне браузера, а не в новом окне, но этого обычно бывает достаточно на ранних стадиях разработки.

Правильнее, конечно, открыть окно при помощи JavaScript. Новый код для этого не нужен, Вы можете пользоваться функцией window.open(). Но один дополнительный флаг, называемый 'chrome' необходимо указать браузеру, чтобы он знал, что это chrome документ. При этом окно откроется без панелей инструментов, меню и т.д. Код представлен ниже:

window.open(url,windowname,flags);

где среди флагов есть флаг "chrome" в этом примере

window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");

Пример findfile.xul

Начнем с создания базового файла для диалога поиска файлов. Создайте файл с именем findfile.xul и переместите его в папку content, которая была указана в файле findfile.manifest (мы его создали ранее). Вставьте шаблон XUL, показанный вверху страницы и сохраните файл.

Вы можете использовать параметр командной строки '-chrome' чтобы задать XUL файл, который будет открываться при запуске Mozilla. Если он не задан, то откроется окно по умолчанию. Обычно это окно браузера. Например, мы можем открыть диалог поиска файлов следующим образом:

mozilla -chrome chrome://findfile/content/findfile.xul 
 
mozilla -chrome resource:/chrome/findfile/content/findfile.xul

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

Для того, чтобы увидеть результат, следующий код откроет окно закладок:

mozilla -chrome chrome://communicator/content/bookma...rksManager.xul

Если Вы пользуетесь Firefox, попробуйте это:

firefox -chrome chrome://browser/content/bookmarks/b...rksManager.xul

Аргумент '-chrome' не дает файлу никаких повышенных привилегий, а вызывает указанный файл и открывает его поверх всех окон. Только URL типа chrome имеют дополнительные привилегии.

Extension Developer's Extension содержит XUL редактор, который позволяет вводить XUL код и видеть результат в реальном времени!

Устранение неполадок

Если окно XUL не показывается на рабочем столе, но есть значок на панели задач, проверьте xml-stylesheet. Убедитесь, что Вы указали стили правильно:

 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

В следующей статье мы будем добавлять кнопки.