XUL structure

A XUL script is an XML file containing:

• The declaration of the UI using XUL controls
• The declaration of the XUL scripts used to interact with the controls. As for HTML files, these scripts can refer to external script files, or be embedded in the XUL file

The root of the XUL file must be a window element.

Scripts declaration

Declaring a XUL script is done through a script element. The script can be either an external script of an embdeed script. Note that you can define as many scripts as you need. For example:

      <window id="Test" title="Test XULScripts" orient="horizontal"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <script>
      function clicked() {
      alert('button clicked()');
      }
         </script>
         <script type="text/javascript" src="myScript.js" />  
      ... 
      </window>

UI declaration

The UI tree is defined through XUL controls declared under the window element which is the root of the XUL file.

The UI declaration can contain:

• A list of XUL toolbars which must be under a toolbox element
• A menubar which must be defined by a menubar element
• The rest of the UI tree. Each XUL file correspond to a XULDocument element which maintains the tree of XUL widgets

Toolbars

The toolbars are optional and will directly affect the parent window of the XUL content.

For example:

    <window id="Test" title="My Window" orient="horizontal"
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
      <toolbox>        
        <toolbar id="nav-toolbar">
          <toolbarbutton id="nav-users"  label="Users"/>
          <toolbarbutton id="nav-groups" label="Groups"/>
          <toolbarbutton id="nav-events" label="Events" disabled="true"/>
        </toolbar>  
      </toolbox>    
   </window>

Menubar

The Menubar is optional and will directly affect the parent window of the XUL content.

For example:

    <menubar>      
      <menu label="Colors">
         <menupopup>
            <menuitem label="Red"/>
            <menuitem label="Blue"/>
            <menuitem label="Yellow"/>
         </menupopup>
      </menu>
    </menubar>

Example

      <window title="Example 3...." width="400" height="200" 
      xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
         <script>
      function checked() {
      document.getElementById('spacer').height = 30;
      }
         </script>    
         <script src="myScript.js" />
         <toolbox>        
            <toolbar>
               <toolbarbutton id="nav-users"  label="Users"/>
               <toolbarbutton id="nav-events" label="Events"/>
            </toolbar>  
         </toolbox> 
         <menubar>      
            <menu label="File">
               <menupopup>
                  <menuitem label="Open"/>
                  <menuitem label="Save"/>
                  <menuitem label="Exit"/>
               </menupopup>
            </menu>
         </menubar> 
         <vbox>
            <button label="button1" oncommand="checked()" />      
            <spacer id="spacer" height="10px" />     
            <button label="button2" />        
         </vbox>           
      </window>

The result will be: