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:
<menupopup>
<menuitem id="menuOpen" label="&openLabel;"
accesskey="O" key="openKey"/>
<menuitem id="menuClose" label="&closeLabel;"
accesskey="C" key="closeKey"/>
<menuitem id="menuSave" label="&saveLabel;"
accesskey="S" key="saveKey"/>
<menuseparator/>
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:
<keyset>
<key id="openKey" modifiers="control" key="O"/>
<key id="closeKey" modifiers="control" key="X"/>
<key id="saveKey" modifiers="control" key="S"/>
</keyset>
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:
<menu id="menuNew" label="&newLabel;" accesskey="N">
<menupopup>
<menuitem id="menuXUL" label="&xulLabel;"
accesskey="X"/>
<menuitem id="menuHTM" label="&htmLabel;"
accesskey="H"/>
<menuitem id="menuXML" label="&xmlLabel;"
accesskey="M"/>
</menupopup>
</menu>
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:
<menuseparator/>
<menuitem id="menuExit" label="&exitLabel;"
accesskey="E" key="exitKey"/>
</menupopup>
</menu>
To complete the menubar, add the following code:
<menu id="menuEdit" label="&editLabel;" accesskey="E">
<menupopup>
<menuitem id="menuCopy" label="©Label;"
accesskey="C" key="copyKey"/>
<menuitem id="menuPaste" label="&pasteLabel;"
accesskey="P" key="pasteKey"/>
<menuitem id="menuCut" label="&cutLabel;" accesskey="U"
key="cutKey"/>
</menupopup>
</menu>
<menu id="menuHelp" label="&helpLabel;" accesskey="H">
<menupopup>
<menuitem id="menuContents" label="&helpContentsLabel;"
accesskey="C" key="contentsKey"/>
<menuitem id="menuAbout" label="&aboutLabel;"
accesskey="A" key="aboutKey"/>
</menupopup>
</menu>
</menubar>
</toolbox>
This will give the application standard Edit and Help menus. Don’t forget to update the keyset element with the appropriate shortcut key syntax.
Next: Don't forget the toolbar >>
More XML Articles
More By Dan Wellman
