Editing XUL (section)

== Usage ==
XUL can only be used with the [[Mozilla]] [[codebase]] (or a [[Fork (software development)|fork]] of it) because the [[Gecko (software)|Gecko]] (or [[Goanna (software)|Goanna]]) [[browser engine|engine]] does the XUL rendering.<ref>{{Cite web|title=Gecko FAQ {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Gecko/FAQ|access-date=2021-01-05|website=developer.mozilla.org|archive-date=2019-10-08|archive-url=https://web.archive.org/web/20191008071852/https://developer.mozilla.org/en-US/docs/Gecko/FAQ|url-status=dead}}</ref>

Application programmers need to define a XUL interface as three discrete sets of components:
# Content: the XUL document(s), whose elements define the layout of the [[user interface]]
# Skin: the CSS and image files, which define the appearance of an application
# Locale: the files containing user-visible strings for easy [[software localization]]

XUL defines a wide range of elements, which roughly belong to the following types:
* Top-level elements: [[window (computing)|window]], page, [[dialog box|dialog]], [[wizard (software)|wizard]], etc.
* [[widget (computing)|Widgets]]: label, [[button (computing)|button]], [[text box]], list box, [[combo box]], [[radio button]], [[check box]], [[Tree view|tree]], [[menu (computing)|menu]], [[toolbar]], group box, [[tab (GUI)|tab box]], color-picker, spacer, splitter, etc.
* Box model: box, grid, stack, deck, etc.
* Events and scripts: script, command, key, broadcaster, observer, etc.
* Data source: template, rule, etc.
* Others: overlay, iframe, browser, editor, etc.

The default behavior of XUL widgets can be altered with [[XBL]] bindings.

===XBL===
{{main|XBL}}
XML Binding Language ([[XBL]]) is an [[XML]]-based [[markup language]] for altering the behavior of a XUL [[Graphical widget|widget]], such as a [[scroll bar]].<ref>{{cite web|author=Castro|first=Jorge O.|date=2004-06-15|title=Ars Technica sits down with Scott Collins from Mozilla.org|url=https://arstechnica.com/information-technology/2004/06/collins-interview/2/|url-status=live|archive-url=https://web.archive.org/web/20180222104837/https://arstechnica.com/information-technology/2004/06/collins-interview/2/|archive-date=2018-02-22|access-date=2018-11-28|website=[[Ars Technica]]|page=2}}</ref><ref>{{cite web|title=XBL 2.0 Acknowledgments|url=http://www.w3.org/TR/xbl/#acknowledgments|website=www.w3.org}}</ref> An XBL file contains [[data binding|bindings]], each of which describes the behavior of a XUL widget. The root element of an XBL file is the <code><nowiki><bindings></nowiki></code> element, which contains one or more <code><nowiki><binding></nowiki></code> elements. Each <code><nowiki><binding></nowiki></code> element declares one binding, which can be attached to any XUL element. It may also possess an <code><nowiki>id</nowiki></code> attribute. A binding is assigned to an element by setting the CSS property <code><nowiki>-moz-binding</nowiki></code> to the [[URL]] of the binding's file.<ref>{{cite web|title=XBL 2.0|url=http://www.w3.org/TR/xbl/|website=www.w3.org}}</ref> For example:
<syntaxhighlight lang="css">
scrollbar {
  -moz-binding: url('somefile.xml#binding1');
}
</syntaxhighlight>

=== Example ===

This example shows three buttons stacked on top of each other in a vertical box container:<ref>{{Cite web|date=2017-12-09|title=The Box Model - Mozilla {{!}} MDN|url=https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Box_Model|access-date=2021-01-05|archive-url=https://web.archive.org/web/20171209141220/https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Tutorial/The_Box_Model|archive-date=2017-12-09}}</ref>
[[File:Boxes-ex1.png|right]]

<syntaxhighlight lang="xul+mozpreproc">
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window id="vbox example" title="Example 3...."
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <layout>
    <button id="yes1" label="Yes"/>
    <button id="no1" label="No"/>
    <button id="maybe1" label="Maybe"/>
  </layout>
</window>
</syntaxhighlight>