webew
Войти » Регистрация
 
JavaScript
XML :: XUL

Введение в XUL

10 апреля 2008, 20:06

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!


// Все права на статью XML::Введение в XUL принадлежат сайту 2007.fastcoder.ru
Добавить комментарий
NO USERPIC

rgbeast

Как обращаться к элементам XML из Javascript, если потребуется, например, поменять содержимое дерева? Работает ли при этом модель DOM?

Где применяется XUL на практике?
02.05.2008, 02:40
Ответить

bur

DOM — это API для XML-документов. А т.к. XUL представляет собой поджножество XML, то к XUL-документам применима таже реализация DOM
http://developer.mozilla.org/en/docs/Dynamically_modifying_XUL-based_user_interface#Introduction
Самое известное применение XUL на практике — это браузер Firefox :-)
Он представляет собой набор XUL-документов, управляемых с помощью JavaScript (в реализации SpiderMonkey), стили которых задаются c пом. СSS.

Можно даже напрямую обратиться к xul-страницам этого браузера, с помощью chrome://
Например, страница JavaScript-консоли:
chrome://global/content/console.xul
или хистори:
chrome://browser/content/history/history-panel.xul
04.05.2008, 12:51
Ответить

alik

Более того, в Firefox можно открыть даже сам браузер: chrome://browser/content/browser.xul
18.04.2009, 03:13
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100