files/bn/archive/mozilla/xul/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

---
title: XUL Tutorial
slug: Archive/Mozilla/XUL/Tutorial
tags:
  - NeedsTranslation
  - TopicStub
  - Tutorials
  - XUL
  - XUL_Tutorial
translation_of: Archive/Mozilla/XUL/Tutorial
---
<p>This tutorial describes <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, the <a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a> User-interface Language. This language was created for the Mozilla application and is used to describe its user interface.</p>
<h2 id="Introduction" name="Introduction">Introduction</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Introduction" title="/en-US/docs/XUL/Tutorial/Introduction">Introduction</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/XUL_Structure" title="/en-US/docs/XUL/Tutorial/XUL_Structure">XUL Structure</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/The_Chrome_URL" title="/en-US/docs/XUL/Tutorial/The_Chrome_URL">The Chrome URL</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Manifest_Files" title="/en-US/docs/XUL/Tutorial/Manifest_Files">Manifest Files</a></li>
</ul>
<h2 id="Simple_Elements" name="Simple_Elements">Simple Elements</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Window" title="/en-US/docs/XUL/Tutorial/Creating_a_Window">Creating a Window</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Buttons" title="/en-US/docs/XUL/Tutorial/Adding_Buttons">Adding Buttons</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Labels_and_Images" title="/en-US/docs/XUL/Tutorial/Adding_Labels_and_Images">Adding Labels and Images</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Input_Controls" title="/en-US/docs/XUL/Tutorial/Input_Controls">Input Controls</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Numeric_Controls" title="/en-US/docs/XUL/Tutorial/Numeric_Controls">Numeric Controls</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/List_Controls" title="/en-US/docs/XUL/Tutorial/List_Controls">List Controls</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Progress_Meters" title="/en-US/docs/XUL/Tutorial/Progress_Meters">Progress Meters</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements" title="/en-US/docs/XUL/Tutorial/Adding_HTML_Elements">Adding HTML Elements</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Using_Spacers" title="/en-US/docs/XUL/Tutorial/Using_Spacers">Using Spacers</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/More_Button_Features" title="/en-US/docs/XUL/Tutorial/More_Button_Features">More Button Features</a></li>
</ul>
<h2 id="The_Box_Model" name="The_Box_Model">The Box Model</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/The_Box_Model" title="/en-US/docs/XUL/Tutorial/The_Box_Model">The Box Model</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Element_Positioning" title="/en-US/docs/XUL/Tutorial/Element_Positioning">Element Positioning</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Box_Model_Details" title="/en-US/docs/XUL/Tutorial/Box_Model_Details">Box Model Details</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Groupboxes" title="/en-US/docs/XUL/Tutorial/Groupboxes">Groupboxes</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_More_Elements" title="/en-US/docs/XUL/Tutorial/Adding_More_Elements">Adding More Elements</a></li>
</ul>
<h2 id="More_Layout_Elements" name="More_Layout_Elements">More Layout Elements</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Stacks_and_Decks" title="/en-US/docs/XUL/Tutorial/Stacks_and_Decks">Stacks and Decks</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Stack_Positioning" title="/en-US/docs/XUL/Tutorial/Stack_Positioning">Stack Positioning</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Tabboxes" title="/en-US/docs/XUL/Tutorial/Tabboxes">Tabboxes</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Grids" title="/en-US/docs/XUL/Tutorial/Grids">Grids</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Content_Panels" title="/en-US/docs/XUL/Tutorial/Content_Panels">Content Panels</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Splitters" title="/en-US/docs/XUL/Tutorial/Splitters">Splitters</a></li>
</ul>
<h2 id="Toolbars_and_Menus" name="Toolbars_and_Menus">Toolbars and Menus</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Toolbars" title="/en-US/docs/XUL/Tutorial/Toolbars">Toolbars</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Simple_Menu_Bars" title="/en-US/docs/XUL/Tutorial/Simple_Menu_Bars">Simple Menu Bars</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/More_Menu_Features" title="/en-US/docs/XUL/Tutorial/More_Menu_Features">More Menu Features</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Popup_Menus" title="/en-US/docs/XUL/Tutorial/Popup_Menus">Popup Menus</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Scrolling_Menus" title="/en-US/docs/XUL/Tutorial/Scrolling_Menus">Scrolling Menus</a></li>
</ul>
<h2 id="Events_and_Scripts" name="Events_and_Scripts">Events and Scripts</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers" title="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers">Adding Event Handlers</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/More_Event_Handlers" title="/en-US/docs/XUL/Tutorial/More_Event_Handlers">More Event Handlers</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Keyboard_Shortcuts" title="/en-US/docs/XUL/Tutorial/Keyboard_Shortcuts">Keyboard Shortcuts</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Focus_and_Selection" title="/en-US/docs/XUL/Tutorial/Focus_and_Selection">Focus and Selection</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Commands" title="/en-US/docs/XUL/Tutorial/Commands">Commands</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Updating_Commands" title="/en-US/docs/XUL/Tutorial/Updating_Commands">Updating Commands</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers" title="/en-US/docs/XUL/Tutorial/Broadcasters_and_Observers">Broadcasters and Observers</a></li>
</ul>
<h2 id="Document_Object_Model" name="Document_Object_Model">Document Object Model</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Document_Object_Model" title="/en-US/docs/XUL/Tutorial/Document_Object_Model">Document Object Model</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Modifying_a_XUL_Interface" title="/en-US/docs/XUL/Tutorial/Modifying_a_XUL_Interface">Modifying a XUL Interface</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Manipulating_Lists" title="/en-US/docs/XUL/Tutorial/Manipulating_Lists">Manipulating Lists</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Box_Objects" title="/en-US/docs/XUL/Tutorial/Box_Objects">Box Objects</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/XPCOM_Interfaces" title="/en-US/docs/XUL/Tutorial/XPCOM_Interfaces">XPCOM Interfaces</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/XPCOM_Examples" title="/en-US/docs/XUL/Tutorial/XPCOM_Examples">XPCOM Examples</a></li>
</ul>
<h2 id="Trees" name="Trees">Trees</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Trees" title="/en-US/docs/XUL/Tutorial/Trees">Trees</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/More_Tree_Features" title="/en-US/docs/XUL/Tutorial/More_Tree_Features">More Tree Features</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Tree_Selection" title="/en-US/docs/XUL/Tutorial/Tree_Selection">Tree Selection</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Custom_Tree_Views" title="/en-US/docs/XUL/Tutorial/Custom_Tree_Views">Custom Tree Views</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Tree_View_Details" title="/en-US/docs/XUL/Tutorial/Tree_View_Details">Tree View Details</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Tree_Box_Objects" title="/en-US/docs/XUL/Tutorial/Tree_Box_Objects">Tree Box Objects</a></li>
</ul>
<h2 id="RDF_and_Templates" name="RDF_and_Templates">RDF and Templates</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Introduction_to_RDF" title="/en-US/docs/XUL/Tutorial/Introduction_to_RDF">Introduction to RDF</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Templates" title="/en-US/docs/XUL/Tutorial/Templates">Templates</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Trees_and_Templates" title="/en-US/docs/XUL/Tutorial/Trees_and_Templates">Trees and Templates</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/RDF_Datasources" title="/en-US/docs/XUL/Tutorial/RDF_Datasources">RDF Datasources</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Advanced_Rules" title="/en-US/docs/XUL/Tutorial/Advanced_Rules">Advanced Rules</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Persistent_Data" title="/en-US/docs/XUL/Tutorial/Persistent_Data">Persistent Data</a></li>
</ul>
<h2 id="Skins_and_Locales" name="Skins_and_Locales">Skins and Locales</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Style_Sheets" title="/en-US/docs/XUL/Tutorial/Adding_Style_Sheets">Adding Style Sheets</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Styling_a_Tree" title="/en-US/docs/XUL/Tutorial/Styling_a_Tree">Styling a Tree</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Modifying_the_Default_Skin" title="/en-US/docs/XUL/Tutorial/Modifying_the_Default_Skin">Modifying the Default Skin</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Skin" title="/en-US/docs/XUL/Tutorial/Creating_a_Skin">Creating a Skin</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Localization" title="/en-US/docs/XUL/Tutorial/Localization">Localization</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Property_Files" title="/en-US/docs/XUL/Tutorial/Property_Files">Property Files</a></li>
</ul>
<h2 id="Bindings" name="Bindings">Bindings</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Introduction_to_XBL" title="/en-US/docs/XUL/Tutorial/Introduction_to_XBL">Introduction to XBL</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Anonymous_Content" title="/en-US/docs/XUL/Tutorial/Anonymous_Content">Anonymous Content</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/XBL_Attribute_Inheritance" title="/en-US/docs/XUL/Tutorial/XBL_Attribute_Inheritance">XBL Attribute Inheritance</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Properties_to_XBL-defined_Elements">Adding Properties</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Methods_to_XBL-defined_Elements">Adding Methods</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements" title="/en-US/docs/XUL/Tutorial/Adding_Event_Handlers_to_XBL-defined_Elements">Adding Event Handlers</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/XBL_Inheritance" title="/en-US/docs/XUL/Tutorial/XBL_Inheritance">XBL Inheritance</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/XBL_Example" title="/en-US/docs/XUL/Tutorial/XBL_Example">XBL Example</a></li>
</ul>
<h2 id="Specialized_Window_Types" name="Specialized_Window_Types">Specialized Window Types</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Features_of_a_Window" title="/en-US/docs/XUL/Tutorial/Features_of_a_Window">Features of a Window</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Creating_Dialogs" title="/en-US/docs/XUL/Tutorial/Creating_Dialogs">Creating Dialogs</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Open_and_Save_Dialogs" title="/en-US/docs/XUL/Tutorial/Open_and_Save_Dialogs">Open and Save Dialogs</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Creating_a_Wizard" title="/en-US/docs/XUL/Tutorial/Creating_a_Wizard">Creating a Wizard</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/More_Wizards" title="/en-US/docs/XUL/Tutorial/More_Wizards">More Wizards</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Overlays" title="/en-US/docs/XUL/Tutorial/Overlays">Overlays</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Cross_Package_Overlays" title="/en-US/docs/XUL/Tutorial/Cross_Package_Overlays">Cross Package Overlays</a></li>
</ul>
<h2 id="Installation" name="Installation">Installation</h2>
<ul>
 <li><a href="/en-US/docs/XUL/Tutorial/Creating_an_Installer" title="/en-US/docs/XUL/Tutorial/Creating_an_Installer">Creating an Installer</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Install_Scripts" title="/en-US/docs/XUL/Tutorial/Install_Scripts">Install Scripts</a></li>
 <li><a href="/en-US/docs/XUL/Tutorial/Additional_Install_Features" title="/en-US/docs/XUL/Tutorial/Additional_Install_Features">Additional Install Features</a></li>
</ul>
<div class="note">
 <p>This XUL tutorial was originally created by <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a>. He has graciously given us permission to use it as part of the <a href="/en-US/docs/Project:About" title="Project:About">MDN</a>.</p>
</div>
<div class="originaldocinfo">
 <h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2>
 <ul>
  <li>Author: <a class="external" href="http://www.xulplanet.com/ndeakin/">Neil Deakin</a></li>
  <li>Copyright Information: © 1999-2005 XULPlanet.com</li>
 </ul>
</div>
<p> </p>