Введение в XUL

XUL — XML User Interface Language, XML-совместимый язык создания пользовательских интерфейсов. Наверняка хорошо знакомый поклонникам браузеров на движке Gecko. К сожалению в WEB-программировании этот замечательный язык не получил широкого распространения, и на данный момент материалы данной статьи в web-контексте применимы к браузерам: Mozilla, Netscape, Firefox. Пользователям IE и Opera не удастся запустить приведенные ниже примеры. Что-то увидеть есть шансы у пользователей Gecko-совместимых браузеров, но моя попытка запустить xul-страницу в Safari(like Gecko)win успехом не увенчалась.
Не путать теплое с мягким

Для чего нужен HTML? Изначально, для создания гипертекстовых страниц. То бишь обычного текста с некоторым количством media-контента, сдобренного ссылками, ведущими на другие страницы или куда-либо еще. Позднее появились приблуды типа CSS, JavaScript, которые повысили "интерактивность" html-страниц, выталкивая оные на уровень полноценных приложений. Однако, HTML попросту не предназначен для создания приложений. Попробуйте с помощью HTML-CSS-JavaScript создать приложение уровня Excel? Скорее всего получится, но сил и времени на это уйдет уйма.

Самое сложное в данном процессе — создать привычный пользовательский интефейс. Все эти кнопочки, менюбары, закладки, выпадающие списки… Жизнь разработчиков web-приложений была бы гораздо проще, имейся в наличии уже готовый инструментарий для создания этой лабуды. И такой инстумент есть — XUL.
От слов к делу

Вы уже поняли в каких браузерах запускаются xul-страницы? Тогда откройте этот пример и проверьте работоспособность давно знакомых элементов интерфейса: древовидных списков и закладок.

Всё это работает, переключается и раскрывается без километров JavaScript-сценариев, а с помощью следующего XML-кода:

<?xml version="1.0" encoding="windows-1251"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
<window title="Simple XUL page" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="text/javascript">
<![CDATA[
function tabClick() {
 alert("АГА!");
}
]]>
</script>
<groupbox>
 <description>Это простой текстовый блок</description>
</groupbox>
<groupbox>
 <description>А это готовые закладки:</description>
 <tabbox>
 <tabs>
 <tab label="Первая закладка"/>
 <tab onclick="tabClick()" label="Вторая"/>
 <tab label="Последняя"/>
 </tabs>
 <tabpanels>
 <label value="Текст первой закладки"/> 
 <label value="О_о"/> 
 <label value="Buy"/>
 </tabpanels>
 </tabbox>
</groupbox>

<groupbox flex="2">
 <groupbox>
 <description>А как насчет постройки древовидного списка?</description>
 </groupbox>
 <tree flex="1" id="tree1">
 <treecols>
 <treecol flex="1" label="Имя" primary="true" />

 <treecol flex="1" label="Фамилия" />
 <treecol flex="1" label="Возраст" />
 </treecols>
 <treechildren>
 <treeitem container="true" open="true">
 <treerow>
 <treecell label="Мужчины" />
 </treerow>
 <treechildren>
 <treeitem>
 <treerow>
 <treecell label="Иван" />
 <treecell label="Иванов" />
 <treecell label="33" />
 </treerow>
 </treeitem>
 <treeitem>
 <treerow>
 <treecell label="Петр" />
 <treecell label="Петров" />
 <treecell label="48" />
 </treerow>
 </treeitem>
 <treeitem>
 <treerow>
 <treecell label="Сидор" />
 <treecell label="Сидоров" />
 <treecell label="18" />
 </treerow>
 </treeitem>
 </treechildren>
 </treeitem>
 <treeitem container="true" open="true">
 <treerow>
 <treecell label="Женщины" />
 </treerow>
 <treechildren>
 <treeitem>
 <treerow>
 <treecell label="Лидия" />
 <treecell label="Иванова" />
 <treecell label="32" />
 </treerow>
 </treeitem>
 <treeitem>
 <treerow>
 <treecell label="Ольга" />
 <treecell label="Петрова" />
 <treecell label="51" />
 </treerow>
 </treeitem>
 <treeitem>
 <treerow>
 <treecell label="Анастасия" />

 <treecell label="Сидорова" />
 <treecell label="17" />
 </treerow>
 </treeitem>
 </treechildren>
 </treeitem>
 </treechildren>
 </tree>
</groupbox>
</window>

Небольшой разбор

Следуюшие строки рекомендуются к прочтению разработчикам, которые познакомились с синтаксисом XML.

<?xml version="1.0" encoding="windows-1251"?> — заголовок любого XML-файла, с указанием кодировки.

<?xml-stylesheet href="chrome://global/skin" type="text/css"?> — указание на файл стилей, применяемый к данному документу. В данном случае это стили базового скина вашего браузера.

<window title="Simple XUL page" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">— открываем первый контейнер, создаюший окно документа. Значение атрибута title появится в заголовке окна браузера. Обязательно указывается пространство имен, имеено оно сообщает браузеру, что все элементы принадлежат XUL.

<description></description> — контейнер для тектового блока.

<groupbox></groupbox> — контейнер, группирующий элементы в единую область. Область может выделяться визуально, например рамкой.

<tabbox></tabbox>
<tabs></tabs>
<tabpanels></tabpanels>
<label></label>
— набор элементов для создания закладок. Хотя элемент label используется и в других случаях. Какой элемент чем занимается думаю ясно из их имен и структуры. Аналогично с деревом.
XUL & JavaScript

Конечно то, что закладки сами переключаются, а списки раскрываются — это замечательно. Однако, необходим язык программирования, способный реагировать на действия пользователя в приложении и обрабатывать данные. Таким языком будет старый удобный JavaScript. В данном примере клик по второй закладке приведет к появлению алерта.

Итого

В дальнейшем описании XUL-элементов смысла нет. Для этого есть емкое описание от разработчиков. Надеюсь, краткое знакомство с XUL у вас состоялось. За более подробным ознакомлением вам сюда: http://developer.mozilla.org/en/docs/XUL_Tutorial

Удачи в создании приложений с XUL!