XUL Tutorial - More Menu Features

You can create submenus inside other menus (nested menus) using the existing elements. Remember that you can put any element inside a menupopup. We've looked at placing menuitems and menuseparators in menupopups. However, you can create submenus by simply placing the menu element inside the menupopup element. This works because the menu element is valid even when it isn't directly placed inside a menu bar.

Adding a Find Files Menu

Let's quickly add a menu to the find files dialog. We'll just add a few simple commands to a File menu and an Edit menu. This is similar to one of the examples above.

<toolbox>

 <menubar>
  <menu id="file-menu" value="File" accesskey="f">
    <menupopup id="file-popup">
      <menuitem value="Open Search..." accesskey="o"/>
      <menuitem value="Save Search..." accesskey="s"/>  
      <menuseparator/>
      <menuitem value="Close" accesskey="c"/>
    </menupopup>
  </menu>
  <menu id="edit-menu" value="Edit" accesskey="e">
    <menupopup id="edit-popup">
      <menuitem value="Cut" accesskey="t"/>
      <menuitem value="Copy" accesskey="c"/>
      <menuitem value="Paste" accesskey="p" disabled="true"/>
    </menupopup>
  </menu>
 </menubar>

<toolbar>

[Image of find files menu]

Here we have added two menus with various commands on them. Notice how the menu bar was added inside the toolbox. In the image, you can see the grippy on the menu bar that can be used to collapse the menu bar. The three dots after Open Search and Save Search are the usual way that you indicate to the user that a window will open when selecting the command. Access keys have been added for each menu and menu item. You will see in the image that this letter has been underlined on the menu. Also, the Paste command has been disabled. We'll assume that there's nothing to paste.

Adding Checkmarks to Menus

Many applications have menu items that have checks on them. For example, a feature that is enabled has check placed beside the command and one that is disabled has no check. When the user selects the menu, the check state is switched. There are several ways of creating this effect in XUL.

The first is to add a checked attribute to the menu item that you want checked. This will place a check next to the item. An example is shown below:

Although this will work, you can only change this state with a script. The check will not change by itself. Another way to create the checks is in a similar way to the HTML checkbox and radio input elements. This involves the use of two attributes, type to indicate the type of check and name to group commands together. The example below creates a menu with a checked item.

The type attribute has been added which is used to make the menu item checkable. By setting its value to checkbox, the menu item can be checked on and off by selecting the menu item. You do not need to add a script to do this as the check is modified automatically. This works by changing the value of the checked attribute, which was discussed earlier.

In addition to standard checks, you can create the radio style of checks by setting the type to a value of radio. A radio check is used when you want a group of menu items where only one item can be checked at once. An example might be a font menu where only one font can be selected at a time. When another item is selected, the previously selected item is unchecked.

In order to group a set of menu items together you need to put a name attribute on each one to group. Set the value to the same string. The example below demonstrates this:

If you try this example, you'll find that of the first three menu items, only one can be checked. They are grouped together because they all have the same name. The last menu item, Earth, is not part of the group because it has a different name. However, it is a radio button.

Of course, the grouped items all have to be with-in the same menu. They don't have to be placed next to each other in the menu, although it doesn't make as much sense if they don't. Checked items may also be placed in submenus.