From CDOT Wiki
Revision as of 11:23, 6 October 2006 by Dwwoodsi (talk | contribs)
Jump to: navigation, search


XUL which is pronounced zool stands for XML User Interface Language is a Mark-up language used primarily in Mozilla applications. XUL is used to define what the user interface will look like such as buttons and other widgets but it is not used to define how those item will look.


XUL is an XML language and thus has the advantages of being cross-platform also allows for the insertion of other XML languages into it such as XHTML, MathML and SVG. Also because of its localized structure it can be easily translated into other languages.

Currently, an application named XULRunner is being developed that will offer a runtime environment for XUL applications.

Common Usages

  • Textboxes and inputs
  • Toolbars and buttons
  • Navigation menus
  • Tabbed windowing systems
  • Keyboard Mnemonics and input handling

Supported Technologies

  • HTML 4.0 and XHTML
  • CSS2 and some of CSS3
  • DOM2 and some of DOM3
  • XML
  • MathML
  • RDF
  • XSLT
  • XPath
  • Simple XLinks
  • XPointer
  • XML Base
  • FIXPtr
  • SOAP (Simple Object Access Protocol)
  • WSDL (Web Services Description Language)
  • ECMAScript/Javascript
  • XBL (eXtensible Bindings Language)
  • GIF, JPG, PNG, BMP, ICO images
  • HTTP 1.1

Sample Code

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin" type="text/css" ?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        align="center" pack="center">
  <description>Is XUL cool or what?</description>
    <radio id="yes" selected="true" label="Yes!"/>
    <radio id="no" label="No wai"/>
  <button id="dpsbutton" label="DPS909 is fun" />

Paste the above sample code inside your favourite editor and save it with a file extension of .XUL. Open the file in a Mozilla-based browser to view it.

  • Line 1: Declares that it is an XML file
  • Line 2: Used to reference the stylesheets. In this case, the global/skin chrome directories' default global.css file is used. global.css is used to declare all of the XUL elements.
  • Line 3: Describes a new window to be drawn, using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul. All children of this window are XUL.
  • Line 5: Description tag is like a label, but can wrap many lines.
  • Lines 6-9: Describes a radio button group.
  • Line 10: Draws a button.

Example Applications

  • Mozilla Amazon Browser (MAB) - Rich web application that allows for searching of Amazon's content across their 6 websites (US, Canada, UK, Japan, Germany and France). Can be used through the web or downloaded to the desktop.
  • XUL Periodic Table - Demonstrates many of the visual capabilities of XUL.

Newsgroups, Mailinglists, IRC Channels