Home
Categories
Dictionnary
Download
Project Details
Changes Log
FAQ
License

XUL controls overview

    1  Top-Level window
    2  Containers
    3  Controls
    4  Utility elements
    5  See also

This article presents an overview of XUL controls.

Top-Level window

Top-Level window
Element Usage Example
window Describes the top-level window 
<window id="Test" title="Test XULScripts" orient="horizontal"
               xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
               ...
</window>

Containers

Containers
Element Usage Example
vbox Vertical box 
<vbox>
   <button id="yes" label="Yes"/>
   <button id="no" label="No"/>
</vbox>
hbox Horizontal box 
<hbox>
   <button id="yes" label="Yes"/>
   <button id="no" label="No"/>
</hbox>
bbox Horizontal box (same as hbox element) 
<bbox>
   <button id="yes" label="Yes"/>
   <button id="no" label="No"/>
</bbox>
box Horizontal or vertical box 
<box orient="vertical">
   <button id="yes" label="Yes"/>
   <button id="no" label="No"/>
</box>
groupbox Displays a labelled box around other user interface controls 
<groupbox orient="vertical">
   <caption label="The options" />
   <button id="yes" label="Yes"/>
   <button id="no" label="No"/>
</groupbox>
stack Displays interface controls at specified positions 
<stack>
   <button id="yes" label="Yes" top="50" left="50"/>
   <button id="no" label="No" top="50" left="150" />
</stack>
tabbox Displays a tabbed pane 
<tabbox id="myTabList" selectedIndex="2">
   <tabs>
      <tab label="A First tab"/>
      <tab label="Another tab"/>
   </tabs>
   <tabpanels>
      <tabpanel>
               ...
      </tabpanel>
      <tabpanel>    
               ...
      </tabpanel>
   </tabpanels>
</tabbox>
tabpanel Displaysthe content of a tab under a tabbed pane 
<tabbox id="myTabList" selectedIndex="2">
   <tabs>
      <tab label="A First tab"/>
      <tab label="Another tab"/>
   </tabs>
   <tabpanels>
      <tabpanel>
               ...
      </tabpanel>
      <tabpanel>    
               ...
      </tabpanel>
   </tabpanels>
</tabbox>
toolbox The container element holding toolbars 
 <toolbox;
    <toolbar>      
      <toolbarbutton label="Users"/>
      <toolbarbutton label="Groups"/>
   </toolbar>
<toolbox;
toolbar Used to declare a toolbar 
 <toolbar>      
     <toolbarbutton label="Users"/>
     <toolbarbutton label="Groups"/>
 </toolbar>
toolbaritem A wrapper which must be used on a toolbar for elements different from toolbarbutton 
<toolbaritem>
   <textbox value="The text" cols="10"/>
</toolbaritem>
menubar Used to declare the menus which will be presented at the top of the window 
 <menubar>      
   <menu label="File">
               ...
   </menu>
 </menubar>
menu A menu presented at the top of the window 
<menu label="Colors">
   <menupopup>
      <menuitem label="Red"/>
      <menuitem label="Blue"/>
      <menuitem label="Yellow" selected="true"/>
   </menupopup>
</menu>
menulist A combobox 
<menulist label="Blue" >
   <menupopup>
      <menuitem label="Red"/>
      <menuitem label="Blue"/>
      <menuitem label="Yellow" selected="true"/>
   </menupopup>
</menulist>
radiogroup Used when only one of a set of options may be selected at a time 
<radiogroup>
   <radio label="first" />
   <radio label="second" />
   <radio label="third" />
</radiogroup>

Controls

Controls
Element Usage Example
label A label 
<label id="mylabel" value="This is some text"/>
button A button 
<button label="Push Me!"/>
radio A radio button 
<radio label="Push Me!"/>
checkbox A checkbox 
<checkbox label="Compress Files"/>
textbox An editable textbox 
<textbox value="This is some editable text" cols="20"/>
progressmeter A progress bar 
<progressmeter value="50" />
listbox A list or table with one or more columns 
<listbox">
   <listitem label="Ruby"/>
   <listitem label="Emerald"/>
   <listitem label="Sapphire" selected="true"/>
   <listitem label="Diamond"/>
</listbox>
tree A table with one or more columns. Contrary to the listbox element, the cells can be edited. 
<tree>
   <treecols>
      <treecol label="First" />
      <treecol label="Last" />
   </treecols>
   <treechildren>
      <treeitem>
         <treerow>
            <treecell label="Sandra" />
            <treecell label="Bullock" />
         </treerow>
      </treeitem>  
   </treechildren>
</tree>
scale A slider 
<scale max="100" min="0" width="200" pageincrement="20"/>
scrollbar A scrollbar 
<scale max="100" min="0" width="200" pageincrement="20"/>
tab Specified the text and/or icon of a tab under a tabbox element 
<tabbox id="myTabList" selectedIndex="2">
   <tabs>
      <tab label="A First tab"/>
      <tab label="Another tab"/>
   </tabs>
   <tabpanels>
               ...
   </tabpanels>
</tabbox>
menuitem A menu item in a menu or a menulist 
<menu>
   <menupopup>
      <menuitem label="Red"/>
      <menuitem label="Blue"/>
      <menuitem label="Yellow" selected="true"/>
   </menupopup>
</menu>
menuseparator A separator in a menu 
<menu>
   <menupopup>
      <menuitem label="Red"/>
      <menuseparator/>      
      <menuitem label="Blue"/>
      <menuitem label="Yellow" selected="true"/>
   </menupopup>
</menu>
toolbarbutton A button that is displayed on a toolbar 
<toolbarbutton image="play.gif" />
image An image 
<image src="hellfire.jpg" width="50" height="50" />
filefield A file selector 
<filefield extensions="xul" type="file" />

Utility elements

Utility elements
Element Usage Example
spacer An invisible element setting a specified space between two controls 
<spacer height="5px" />
toolbarspacer An invisible element setting a specified space between two controls in a toolbar 
<toolbarspacer width="5px" />
caption Used to set a label for the parent element 
<caption label="Answer"/>

See also

Categories: general

Copyright 2008-2020 Herve Girod. All Rights Reserved. Documentation and source under the LGPL licence