Знакомимся с очередным языком XML-семейства
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
<?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
<?xml version="1.0" encoding="windows-1251"?>
— заголовок любого XML-файла, с указанием кодировки.
• Код XML
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
— указание на файл стилей, применяемый к данному документу. В данном случае это стили базового скина вашего браузера.
• Код XML
<window title="Simple XUL page" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
— открываем первый контейнер, создаюший окно документа. Значение атрибута title появится в заголовке окна браузера. Обязательно указывается пространство имен, имеено оно сообщает браузеру, что все элементы принадлежат XUL.
• Код XML
<description></description>
— контейнер для тектового блока.
• Код XML
<groupbox></groupbox>
— контейнер, группирующий элементы в единую область. Область может выделяться визуально, например рамкой.
• Код XML
<tabbox></tabbox>
<tabs></tabs>
<tabpanels></tabpanels>
<label></label>
— набор элементов для создания закладок. Хотя элемент label используется и в других случаях. Какой элемент чем занимается думаю ясно из их имен и структуры. Аналогично с деревом.
XUL & JavaScript
Конечно то, что закладки сами переключаются, а списки раскрываются - это замечательно. Однако, необходим язык программирования, способный реагировать на действия пользователя в приложении и обрабатывать данные. Таким языком будет старый удобный
JavaScript. В данном примере клик по второй закладке приведет к появлению алерта.
Итого
В дальнейшем описании XUL-элементов смысла нет. Для этого есть
емкое описание от разработчиков.
Надеюсь, краткое знакомство с XUL у вас состоялось. За более подробным ознакомлением вам сюда:
http://developer.mozilla.org/en/docs/XUL_Tutorial
Удачи в создании приложений с
XUL!
