MyMans

Вместо старого и доброго onclick в HTML, XUL использует более продвинутый атрибут, предназначеный специально на обработку событий при клике, oncomand.

<button label="Click me" oncommand="alert('Hi')"/>

<menulist oncommand="alert('Hi')">
  <menupopup>
    <menuitem label="Mozilla" value="http://mozilla.org"/>
    <menuitem label="Slashdot" value="http://slashdot.org"/>
    <menuitem label="Sourceforge" value="http://sf.net"/>
    <menuitem label="Freshmeat" value="http://freshmeat.net"/>
  </menupopup>
</menulist>

По началу tree воспринимается просто за таблицу, но на самом деле его способы применения и работы очень широки. Но в начале о его табличной ипостаси

<tree
    flex="1"
    rows="2"
    editable="true"
    enableColumnDrag="true"
    hidecolumnpicker="true" 
    onselect="selecting(currentIndex);"
        >
  <treecols>
    <treecol id="sender" label="Sender" flex="1"/>
    <splitter class="tree-splitter"/>
    <treecol id="subject" label="Subject" flex="2"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="joe@somewhere.com"/>
        <treecell label="Top secret plans"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="mel@whereever.com"/>
        <treecell label="Let's do lunch"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

<script>
function selecting(idx){
    alert("Selected " + idx);
}
</script>

Надо знать что:
rows="2" - количество строк которые будет видно, по умолчанию 1
editable="true" - ячейки можно изменять двойным кликом
enableColumnDrag="true" - можно перетягивать колонки мышкой меняя их расположение
hidecolumnpicker="true" - убрать с боку инструмет для спрятывания колонок
onselect="selecting(currentIndex);" - показывает номер выделенной ячейки

<splitter class="tree-splitter"/> - благодаря ему можно именять размер колонок
Пример

Вообще то xul это xml css и javascript, и html как бы здесь делать нечего, в xul есть свои таблицы, с сортировкой и возможностью убирать колонки, есть много другое. Но! Порой вот очень хочется вставить туда таблицу, простую из html, а вернее из xhtml, надо понимать, что здесь ошибки в виде незакрытых тегов будут фатальны. Так вот, сделаем вставку

<html:p>html inside xul</html:p>
<html:table class="mytable"
   width="200" border="0" cellspacing="0" cellpadding="3">
    <html:tr>
        <html:th>Jan 2008</html:th>
        <html:th>Feb 2008</html:th>
    </html:tr>
    <html:tr>
        <html:td>2799</html:td>
        <html:td>2932</html:td>
    </html:tr>
</html:table>

Надо отметить что xul не приветствует использование css внутри xul и предпочитает загружать его из внешнего файла, но воспользовавшись хитростью несколькими строчками выше это тоже можно обойти

<html:style type="text/css">
vbox {
    background-color:white;
    padding: 10px;
}
.mytable{
    border: 0px solid;
}
.mytable th{
    border-bottom: 2px solid #0AA84B;
}
</html:style>

Обратите внимание что внутри css префикс html для указания узла не нужен.

Пример

Темплейты в XUL могут принимать разные данные: xml, rdf и даже могут на прямую работать с sqlight (в версии 3). У нас есть xml файл с даными, data.xml.

<?xml version="1.0" encoding="utf-8"?>
<know>
  <person name="php" type="lang"/>
  <person name="perl" type="lang"/>
  <person name="apache" type="server"/>
  <person name="unix" type="system"/>
</know>

теперь загрузим его список

<radiogroup datasources="data.xml" ref="*" querytype="xml">
  <template>
    <query expr="know" />
    <action>
      <radio uri="?" label="?name" />
    </action>
  </template>
</radiogroup>

результат будет таким ->

Надо заметить что удалять uri=”?” из кода не стоит, он генерирует некий код по которому можно будет работать с xml далее, впрочем если удалить то работать не будет )

Кроме того xml не обязательно длжен содержаться в отдельном файле, его можно поместить и внутри кода

<know id="mylist" xmlns="">
.......
</know>
<radiogroup datasources="#mylist" ref="*" querytype="xml">
.......
</radiogroup>

Разработчики из Mozilla внедрили в третью верию FireFox тег datepicker который по идеи должен облехчить и кодерам жизнь избавившись от грамозких js календарей.

<datepicker value="2007/03/26"/>

От атрибута type зависит состояние календаря. Без этого атрибута, просто текстовое поле куда надо вводить дату рукой или использовать бегунки.
type = 'popup' - с боку от поля появляется кнопка, нажав на которую выскакивет календарик
type = 'grid' - полный развернутый календарь
Из других интересных на мой взгляд атрибутов
value="2007/03/26" - дата по умолчанию
firstdayofweek="1" - с какого дня начинается неделя. 1 - понедельник. По умолчанию с воскресенья
Еще одна особенность, это получать не только целиком введеную пользователем дату, а и по отдельности год месяц или день

<datepicker
 type="popup" value="2007/03/26"
 onchange="alert(this.month)" />

По прежнему нет возможности локализации, для русского языка нужно использовать русский же движок.
Как всегда Пример

Для того, что-бы плагины для мозилы не открывались как текстовый документ, а устанавливались сразу, надо в конфигурационный файл добавить строку.

AddType application/x-xpinstall .xpi

Простейший, ну просто очень простейший colorpicker в XUL приложениях

<colorpicker type="button" color="#FFFFFF"/>

Думаете я что-то забыл? Ну да, забыл показать как извлекать данные

<colorpicker type="button" color="#FFFFFF"
   onchange="javascript:
   document.getElementById('colorlabel').value=this.color"/>
<label id="colorlabel" value="#FFFFFF" />

Теперь надпись рядом с нашим colorpicker будет отображать выбранный цвет
Пример

Надо начать с простых и понятных вещей прежде, чем идти дальше.

<vbox flex="1"><label value="FeedbacksTab" /></vbox>

Аналог div в html. Атрибут flex от слова flexibility, будет ли бокс растягиваться по высоте на высоту окна или только на высоту элементов внутри.

Его брат hbox делает тоже только формирует элементы по горизонтали. Вот пример их совместной работы.

<vbox>
  <hbox>
    <label control="login" value="Login:"/>
    <textbox id="login"/>
  </hbox>
  <hbox>
    <label control="pass" value="Password:"/>
    <textbox id="pass"/>
  </hbox>
  <button id="ok" label="OK"/>
  <button id="cancel" label="Cancel"/>
</vbox>

Простое окно

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="theWindow"
    title="Simple Window"
    orient="horizontal"
    width = "400"
    height = "300"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml"
    onload = "somescript();"
    >
</window>

можно сохранить файл на локальной машине и открывать его как написано здесь, или на сервере, но фишка в том, что Apache не знает xul и передает его как text/plain, а в таком качестве FireFox открывает его как текст, а не как приложение. Для того, что бы исправить это надо сделать одно из двух.
Добавить в httpd.conf детективы на xul.

<Directory /somefolder>
AddType application/vnd.mozilla.xul+xml .xul
</Directory>

Или же сделать это через php,

header('Content-type: application/vnd.mozilla.xul+xml');

и конечно придется сменить разрешение на php.

PS. может возникнуть ошибка, в результирующем файле первая строка xul кода должна быть на первой строке.
Пример

Можно конечно сразу открыть xul файл в FireFox и отлаживать его. Но можно как бы симулировать работу с готовым пакетом. Для начала и в самом деле открывает файл в браузере только для того что бы узнать его адрес скажем

file:///Users/Rus/Documents/feedback.xul

теперь вырубаем Firefox и запускаем консоль и отправляемся по нужному адресу

rus:cd /Applications/Firefox3b.app/Contents/MacOS

У меня стоит третья бета и я сменил ее название на Firefox3b.app, но в стандарте это может быть просто Firefox.app и теперь делаем вот что.

rus:./firefox -chrome "file:///Users/Rus/Documents/feedback.xul"

Идея думаю ясна. Запуск происходит быстро, обидно только то, что нету кнопки Обновить и поэтому для этого в той же консоли убить с помощью ctrl-c и заново запустить.