Back to XUL: The Interface

So now we have the menubar; the main container for our menus; and a menu, the File menu.  Now we have to add the sub-menu that expands when the file menu is selected.  To do this, simply add a menupopup element and list the menuitems:

There are several things to note here. The menuseperator simply renders a horizontal line across the menu to visually separate menu items. We have again  specified accesskey attributes on these two menuitems, but the key attribute has also been used.  This means that in addition to using the ALT + underlined-letter short-cut, you can also specify a further keyboard shortcut to bypass the menu system altogether.  The key attribute links the menu item with an element declared outside of code for the menu itself: a keyset.

Defining the keyset and its children separate from the menu code helps ensure your programming retains a modular formation, and for ease of reading, it is a good idea to add this near the top of the application code:

The ID attribute links the key to the element it is to be used with.  The modifiers and key attributes specify which special key, such as the shift or Ctrl key, and which other key combination is to be used.  As you can see, this means that when someone presses CTRL + O in this example, the Open action will be initiated.

You may at this point be wondering how to add a second-level sub-menu to the existing menu structure.  This is very easy; you just nest in another menu element, complete with its own menupopup and menuitems:

This will allow the user to specify which simple template to use.  To complete the File menu, we will provide a means for closing the editor:

To complete the menubar, add the following code:

This will give the application standard Edit and Help menus.  Don’t forget to update the keyset element with the appropriate shortcut key syntax.