Now, no interface would be complete without the menu bar at the top of the window that had the usual File, Edit, View, etc menus on it.  Windows applications that don’t have these just don’t feel right.  Fortunately, the required code to add these is very straightforward and leads on from the interface objects we have created so far.  XUL makes so much sense that you could probably code this yourself without me telling you how.  Nevertheless, the below section of code will add a very simple File menu to the top of your window.  Make sure you place it above the first buttons you created so that it appears in the right place:

<menubar>
  <menu id=”fileMenu” label="File" accesskey="F">
    <menupopup>
      <menuitem label="Open"/>
      <menuitem label="Close"/>
      <menuitem label="New"/>
    </menupopup>
  </menu>
</menubar>

As you can see, the menu element is a child element of the menubar element and the menu element draws on syntax we have already looked at, namely the <menupopup> and <menuitem> elements, which themselves are children and grand-children respectively of the aptly named <menu> element.  The acceskey specifies the shortcut letter that can be used in conjunction with the Alt key to open the menu, and underlines the proposed letter all by itself.  You’ll notice that clicking on the grippy does nothing at this stage.  You can add to the functionality of the grippy by placing the menubar in a toolbox, similar to the toolbar element looked at previously.  Add the <toolbox> and </toolbox> tags so that they encapsulate the menubar and then execute the file again.

Now when you click on the grippy, the menubar is collapsed, however, clicking it again does not expand the menu once more.  When opened from within Mozilla using a chrome URL, the grippy will work as it should, but you can get rid of the grippy altogether by using the grippyhidden=”true” attribute of the menubar (note that this attribute is also available to the toolbar element).  Additionally, the menulist items can be separated using the <menuseparator> tag placed between the items that should be separated.  This draws a line between the separated items. 

Images are also very easy to add:

<image source="xul.jpg"/>

The image is stretched to fit the width of the window; this can be adjusted obviously using attributes of the image element.  Note that source is the name of the attribute that specifies the path and name of the image instead of src.

Another interface feature available to you is a tabbed window area; this is easily coded using <tab> elements nested within a <tabs> element.  Add the following block of code beneath the bottom textbox:

<tabs>
  <tab label="Tab One"/>
  <tab label="Tab Two"/>
  <tab label="Tab Three"/>
</tabs>

Take a look at the effect it gives you; it’s surprisingly easy to create these different interface controls and elements, a feature of XUL that has made it a popular choice for open source programmers as something to get stuck into.  To add content to the individual tabbed sections, you need to place the above code into a <tabbox> container and use <tabpanels>:

<tabbox>
  <tabs>
    <tab label="Tab One"/>
    <tab label="Tab Two" value="2"/>
    <tab label="Tab Three" value="3"/>
  </tabs>
  <tabpanels>
    <description value="This is tab 1"/>
    <description value="This is tab 2"/>
    <description value="This is tab 3"/>
  </tabpanels>
</tabbox>

Looking at your window now, you’ll probably agree that it’s looking a little bit untidy; you’ve basically got a long list of menus, buttons and controls.