Главная » XML » Введение в XUL
Введение в 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>Рекомендуем почитать
