This article, the second in a series about the XML variant called XUL, gets you started on creating the main interface for an application. Among other things, it covers sub-menus, toolbars, and the main content window.
Back to XUL: The Interface - Adding the sub-menu (Page 2 of 4 )
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:
<key id="openKey" modifiers="control" key="O"/>
<key id="closeKey" modifiers="control" key="X"/>
<key id="saveKey" modifiers="control" key="S"/>
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: