Введение в XUL

Знакомимся с очередным языком 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-страницы? Тогда откройте этот пример и проверьте работоспособность давно знакомых элементов интерфейса: древовидных списков и закладок. Вот так эта страница выглядит у меня:
Простая страница, написанная на 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!

Александр Бурцев 31 августа 2008

© Все права на данную статью принадлежат порталу fastcoder.org. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.

и возник вопрос, а может ли это использоваться как полная альтернатива HTML (т.е. можно ли организовать вывод данных, запрос данных от пользователя, отправку данных на сервер по кнопке и т.д.)? например, я захочу сдружить это всё с серверными скриптами (будь то PHP или ASP[.NET]), смогу ли я на сервере всё также обрабатвать обычный возврат формы или не всё так просто?

Ответить

Комментарий удален

ammarty 24 октября 2008, 10:10 #

Использовать можно, но только в гекко браузерах
В зуле доступны все теги html, с нэймспейсом и синтаксисом xhtml, думаю вот такой пример все разъяснит:

<html:form xmlns:html="http://www.w3.org/1999/xhtml" method="post" action="http://www.example.com/handleForm">

    <html:select name="time">

      <html:option value="morning">Morning</html:option>

      <html:option value="noon">Noon</html:option>

      <html:option value="midnight">Midnight</html:option>

    </html:select>

  <html:input type="submit" value="Go"/>

</html:form>

Но, все-таки это уже приложение и предпочтительнее использовать аякс, он так же доступен в зуле