CINXE.COM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://www.xulplanet.com:80/tutorials/xultu/","20071207230044","https://web.archive.org/","web","/_static/", "1197068444"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="/web/20071207230044cs_/http://www.xulplanet.com/styles/default/main.css" type="text/css" media="screen, projection"/> <link rel="stylesheet" href="/web/20071207230044cs_/http://www.xulplanet.com/styles/default/print.css" type="text/css" media="print"/> <link rel="stylesheet" href="/web/20071207230044cs_/http://www.xulplanet.com/styles/default/xultu.css" type="text/css"/> <link rel="home" href="http://www.xulplanet.com/"/> <link rel="search" href="/web/20071207230044/http://www.xulplanet.com/search/"/> <link rel="icon" href="/web/20071207230044im_/http://www.xulplanet.com/images/xulplanet_tiny.png"/> <title>XUL Tutorial</title> </head> <body> <div id="header" class="html"> <div id="skiptocontent"><a href="#content">skip to content</a></div> <h1> <a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/"><img id="logo" src="/web/20071207230044im_/http://www.xulplanet.com/images/xulplanet.png" alt="XUL Planet" height="65" width="215"/></a> </h1> <div id="locationlinks"> <a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/">Home</a> > <a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/tutorials/">Tutorials</a> > XUL Tutorial </div> </div> <hr class="edgesplit"/> <div id="sidebar"> <h2 id="sidebar-label">Contents</h2> <div id="search">  <form method="get" action="https://web.archive.org/web/20071207230044/http://www.google.com/custom"> <div> <label id="search-label" for="q">Search:</label><br/> <input type="text" id="q" name="q" maxlength="255" value=""/> <input type="hidden" name="cof" value="S:http://www.xulplanet.com;AH:left;LH:65;LC:4682B4;L:http://www.xulplanet.com/images/xulplanet.png;ALC:blue;LW:215;AWFID:0979f384d5181409;"/> <input type="hidden" name="domains" value="xulplanet.com"/> <input type="hidden" name="sitesearch" value="xulplanet.com" checked="checked"/> <input type="submit" name="sa" value="Go"/> </div> </form> </div> <hr/> <ul class="sidebar-section-links"> <li><a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/tutorials/xultu/allofit.zip">Single Document Version</a></li> <li><a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/tutorials/xultu/xultu.zip">Download the XUL Tutorial</a><br></li> <li><a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/references/elemref/">Element Reference</a></li> <li><a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/references/elemref/quickref.html">Quick Reference</a><br></li> <li><a href="keyref.html">Key Code Reference</a></li> <li><a href="templateex.html">Template Syntax Examples</a></li> </ul> <hr> <a name="apps">Utilities</a> <ul class="sidebar-section-links"> <li><a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/tutorials/xultu/xpimaker/">XPI Maker</a><br> A visual utility to help in building in chrome packages. </li> <li><a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/tutorials/xultu/rdfds/">RDF Library</a><br> A library for manipulating RDF datasources. </li> <li><a href="examples/allelem/allelem.xul" onclick="window.open('examples/allelem/allelem.xul','allelem','chrome,resizeable'); return false;">All Elements Example</a> (<a href="examples/allelem/">Source Files</a>)<br> An example demonstrating all of the XUL elements. </li> <li><a href="examples/aligner.xul" onclick="window.open('examples/aligner.xul','aligner','chrome,resizeable'); return false;">Box Alignment Example</a><br> An example to test the box alignment properties. </li> </ul> <hr> <div id="categories"> <div class="category"> <h3><a href="/web/20071207230044/http://www.xulplanet.com/tutorials/">Tutorials</a></h3>  <ul> <li><a href="/web/20071207230044/http://www.xulplanet.com/tutorials/xultu/">Main Tutorial</a></li> <li><a href="/web/20071207230044/http://www.xulplanet.com/tutorials/mozsdk/">Developer Guide</a></li> <li><a href="/web/20071207230044/http://www.xulplanet.com/tutorials/xulqa/">XUL Questions</a></li> </ul> </div> <div class="category"> <h3><a href="/web/20071207230044/http://www.xulplanet.com/references/">References</a></h3>  <ul> <li><a href="/web/20071207230044/http://www.xulplanet.com/references/elemref/">XUL Reference</a></li> <li><a href="/web/20071207230044/http://www.xulplanet.com/references/objref/">Object Reference</a></li> <li><a href="/web/20071207230044/http://www.xulplanet.com/references/xpcomref/">XPCOM Reference</a></li> </ul> </div> <div class="category"> <h3><a href="/web/20071207230044/http://www.xulplanet.com/forum/">XUL Forum</a></h3>  </div> <div class="category"> <h3><a href="/web/20071207230044/http://www.xulplanet.com/downloads/">Downloads</a></h3>  </div> <div class="category"> <h3><a href="/web/20071207230044/http://www.xulplanet.com/about/">About XULPlanet</a></h3>  </div>  </div> </div> <div id="content"> <h1>XUL Tutorial</h1> <p> The XUL Tutorial was created by <a href="https://web.archive.org/web/20071207230044/http://www.xulplanet.com/ndeakin/">Neil Deakin</a> </p> <p> Last updated on February 19, 2006 </p> <p> Welcome to the XUL tutorial. This tutorial describes XUL, the XML User-interface Language. This language was created for the Mozilla application and is used to define its user interface. </p> <p> This tutorial describes XUL as it is used in Mozilla 1.7 and Firefox 1.0 and later. </p> <div id="contentsblock"> <ul> <li><strong>1.</strong> Introduction <ul> <li><strong>1.1</strong> <a href="intro.html">Introduction</a></li> <li><strong>1.2</strong> <a href="xulfile.html">XUL Structure</a></li> <li><strong>1.3</strong> <a href="chromeurl.html">The Chrome URL</a></li> <li><strong>1.4</strong> <a href="packaging.html">Contents.rdf Files</a></li> </ul> </li> <li><strong>2.</strong> Simple Elements <ul> <li><strong>2.1</strong> <a href="window.html">Creating a Window</a></li> <li><strong>2.2</strong> <a href="buttons.html">Adding Buttons</a></li> <li><strong>2.3</strong> <a href="textimage.html">Adding Labels and Images</a></li> <li><strong>2.4</strong> <a href="inputs.html">Input Controls</a></li> <li><strong>2.5</strong> <a href="lists.html">List Controls</a></li> <li><strong>2.6</strong> <a href="progress.html">Progress Meters</a></li> <li><strong>2.7</strong> <a href="htmlelem.html">Adding HTML Elements</a></li> <li><strong>2.8</strong> <a href="springs.html">Using Spacers</a></li> <li><strong>2.9</strong> <a href="advbtns.html">More Button Features</a></li> </ul> </li> <li><strong>3.</strong> The Box Model <ul> <li><strong>3.1</strong> <a href="boxes.html">The Box Model</a></li> <li><strong>3.2</strong> <a href="boxstyle.html">Element Positioning</a></li> <li><strong>3.3</strong> <a href="boxdet.html">Box Model Details</a></li> <li><strong>3.4</strong> <a href="titledbox.html">Groupboxes</a></li> <li><strong>3.5</strong> <a href="boxfinal.html">Adding More Elements</a></li> </ul> </li> <li><strong>4.</strong> More Layout Elements <ul> <li><strong>4.1</strong> <a href="stacks.html">Stacks and Decks</a></li> <li><strong>4.2</strong> <a href="bulletins.html">Stack Positioning</a></li> <li><strong>4.3</strong> <a href="tabpanel.html">Tabboxes</a></li> <li><strong>4.4</strong> <a href="grids.html">Grids</a></li> <li><strong>4.5</strong> <a href="cpanels.html">Content Panels</a></li> <li><strong>4.6</strong> <a href="splitter.html">Splitters</a></li> <li><strong>4.7</strong> <a href="scroll.html">Scroll Bars</a></li> </ul> </li> <li><strong>5.</strong> Toolbars and Menus <ul> <li><strong>5.1</strong> <a href="toolbar.html">Toolbars</a></li> <li><strong>5.2</strong> <a href="menubar.html">Simple Menu Bars</a></li> <li><strong>5.3</strong> <a href="advmenu.html">More Menu Features</a></li> <li><strong>5.4</strong> <a href="popups.html">Popup Menus</a></li> <li><strong>5.5</strong> <a href="menuscroll.html">Scrolling Menus</a></li> </ul> </li> <li><strong>6.</strong> Events and Scripts <ul> <li><strong>6.1</strong> <a href="events.html">Adding Event Handlers</a></li> <li><strong>6.2</strong> <a href="advevents.html">More Event Handlers</a></li> <li><strong>6.3</strong> <a href="keyshort.html">Keyboard Shortcuts</a></li> <li><strong>6.4</strong> <a href="focus.html">Focus and Selection</a></li> <li><strong>6.5</strong> <a href="commands.html">Commands</a></li> <li><strong>6.6</strong> <a href="commandupdate.html">Updating Commands</a></li> <li><strong>6.7</strong> <a href="broadob.html">Broadcasters and Observers</a></li> </ul> </li> <li><strong>7.</strong> Document Object Model <ul> <li><strong>7.1</strong> <a href="dom.html">Document Object Model</a></li> <li><strong>7.2</strong> <a href="dommodify.html">Modifying a XUL Interface</a></li> <li><strong>7.3</strong> <a href="domlists.html">Manipulating Lists</a></li> <li><strong>7.4</strong> <a href="boxobject.html">Box Objects</a></li> <li><strong>7.5</strong> <a href="xpcom.html">XPCOM Interfaces</a></li> <li><strong>7.6</strong> <a href="xpcomex.html">XPCOM Examples</a></li> </ul> </li> <li><strong>8.</strong> Trees <ul> <li><strong>8.1</strong> <a href="trees.html">Trees</a></li> <li><strong>8.2</strong> <a href="advtrees.html">More Tree Features</a></li> <li><strong>8.3</strong> <a href="seltree.html">Tree Selection</a></li> <li><strong>8.4</strong> <a href="treeview.html">Custom Tree Views</a></li> <li><strong>8.5</strong> <a href="treeviewdet.html">Tree View Details</a></li> <li><strong>8.6</strong> <a href="treeboxobject.html">Tree Box Objects</a></li> </ul> </li> <li><strong>9.</strong> RDF and Templates <ul> <li><strong>9.1</strong> <a href="intrordf.html">Introduction to RDF</a></li> <li><strong>9.2</strong> <a href="templates.html">Templates</a></li> <li><strong>9.3</strong> <a href="treetempl.html">Trees and Templates</a></li> <li><strong>9.4</strong> <a href="datasrc.html">RDF Datasources</a></li> <li><strong>9.5</strong> <a href="advrules.html">Advanced Rules</a></li> <li><strong>9.6</strong> <a href="persist.html">Persistent Data</a></li> </ul> </li> <li><strong>10.</strong> Skins and Locales <ul> <li><strong>10.1</strong> <a href="style.html">Adding Style Sheets</a></li> <li><strong>10.2</strong> <a href="treestyle.html">Styling a Tree</a></li> <li><strong>10.3</strong> <a href="defskin.html">Modifying the Default Skin</a></li> <li><strong>10.4</strong> <a href="cskin.html">Creating a Skin</a></li> <li><strong>10.5</strong> <a href="locale.html">Localization</a></li> <li><strong>10.6</strong> <a href="locprops.html">Property Files</a></li> </ul> </li> <li><strong>11.</strong> Bindings <ul> <li><strong>11.1</strong> <a href="introxbl.html">Introduction to XBL</a></li> <li><strong>11.2</strong> <a href="xblcontent.html">Anonymous Content</a></li> <li><strong>11.3</strong> <a href="xblatin.html">XBL Attribute Inheritance</a></li> <li><strong>11.4</strong> <a href="xblprops.html">Adding Properties</a></li> <li><strong>11.5</strong> <a href="xblmethods.html">Adding Methods</a></li> <li><strong>11.6</strong> <a href="xblevents.html">Adding Event Handlers</a></li> <li><strong>11.7</strong> <a href="xblinherit.html">XBL Inheritance</a></li> <li><strong>11.8</strong> <a href="xblex.html">XBL Example</a></li> </ul> </li> <li><strong>12.</strong> Specialized Window Types <ul> <li><strong>12.1</strong> <a href="featwin.html">Features of a Window</a></li> <li><strong>12.2</strong> <a href="dialogs.html">Creating Dialogs</a></li> <li><strong>12.3</strong> <a href="filedialog.html">Open and Save Dialogs</a></li> <li><strong>12.4</strong> <a href="wizard.html">Creating a Wizard</a></li> <li><strong>12.5</strong> <a href="advwiz.html">More Wizards</a></li> <li><strong>12.6</strong> <a href="overlay.html">Overlays</a></li> <li><strong>12.7</strong> <a href="crosspov.html">Cross Package Overlays</a></li> </ul> </li> <li><strong>13.</strong> Installation <ul> <li><strong>13.1</strong> <a href="xpinstall.html">Creating an Installer</a></li> <li><strong>13.2</strong> <a href="xpiscript.html">Install Scripts</a></li> <li><strong>13.3</strong> <a href="xpiadv.html">Additional Install Features</a></li> </ul> </ul> </div> </div> <div id="navbar"> <span id="navbar_left"> <a href="/web/20071207230044/http://www.xulplanet.com/about/">About XULPlanet</a> <a href="/web/20071207230044/http://www.xulplanet.com/about/contact/">Contact Us</a> </span> <span id="navbar_center"> <a href="https://web.archive.org/web/20071207230044/http://www.mozilla.org/">mozilla.org</a> <a href="https://web.archive.org/web/20071207230044/http://www.mozdev.org/">mozdev.org</a> <a href="https://web.archive.org/web/20071207230044/http://www.mozillazine.org/">MozillaZine.org</a> </span> <span id="navbar_right"> Hosted by: <a href="https://web.archive.org/web/20071207230044/http://www.webaim.org/">WebAIM.org</a> </span> </div> <div id="copyblock"> Copyright © 1999-2006 XULPlanet.com </div> </body> </html>