XUL Tutorial - Simple Menu Bars

In this section, we'll see how to create a menu bar with menus on it.

Creating a Menu

XUL has a number of different ways of creating menus. The most basic way is to add a menu bar with a row of menus on it like many applications have. You can also create popup menus. The menu features of XUL consist of a number of different elements which allow you to create menu bars or popup menus. The items on the menus can be customized quite easily. We've already seen part of how to make menus using the menulist. This section will build on that.

Menu bars are usually created much like a toolbar. The menu bar can be placed inside a toolbox and a grippy will appear on its left side so that it can be collapsed. The menu would work just like any other toolbar. XUL does have some special menu elements which provide special functionality typical of menus.

There are five elements associated with creating a menu bar and its menus, which are explained briefly here and in detail afterwards:

• menubar
  The container for the row of menus.
• menu
  Despite the name, this is actually only the title of the menu on the menubar. This element can be placed on a menubar or can be placed separately.
• menupopup
  The popup box that appears when you click on the menu title. This box contains the list of menu commands.
• menuitem
  An individual command on a menu. This would be placed on a menupopup.
• menuseparator
  A separator bar on a menu. This would be placed on a menupopup.

You can place these elements outside of where they would naturally go if you want. Although they will still function, they may differ in appearance. For example, you could place a menu outside of a menubar and it will still function as a menu.

You can customize the menus to have whatever you want on them on all platforms except the Macintosh. This is because the Macintosh has its own special menu along the top of the screen controlled by the system. Although you can create custom menus, any special style rules or non-menu elements that you place on a menu may not be applied. You should keep this is mind when creating menus.

The Mozilla browser interface puts the menus inside a toolbox. This is a good convention to follow although you don't have to.

Here is an example of a simple menu bar:

<menubar>
  <menu id="file-menu" value="File">
     <menupopup id="file-popup">
      <menuitem value="New"/>
      <menuitem value="Open"/>
      <menuitem value="Save"/>
      <menuseparator/>
      <menuitem value="Exit"/>
     </menupopup>
    </menu>
    <menu id="edit-menu" value="Edit">
     <menupopup id="edit-popup">
      <menuitem value="Undo"/>
      <menuitem value="Redo"/>
     </menupopup>
    </menu>
  </menubar>

Here, a simple menu bar is created using the menubar element. It will create a row for menus to be placed on. Two menus, File and Edit have been created here. The menu element creates the title at the top of the menu, which appears on the menu bar. However, this does not create the popup.

The popups are created using the menupoup element. It will pop up when the user clicks on the parent menu title. The popup will size to fit the commands inside it. The commands themselves are created using the menuitem element. Each one represents a single command on the menu popup.

You can also create separators on the menus using the menuseparator element. This is used to separate groups of menuitems.

The menubar is a box containing menus. As stated earlier, you might put this in a toolbox. The menubar has no special attributes but it is a type of box. This means that you could create a vertical menubar by setting the orient attribute to vertical. You can also put the orientation on the toolbox.

The menu element is normally placed on a menubar, although it does not have to be. However, it will be given a different look. The image here shows what the earlier example would look like without the menu bar.

The menu element works much like the button element. It accepts some of the same attributes plus some additional ones:

• id
  The unique identifier of the menu title button.
• value
  The text to appear on the menu, such as File or Edit.
• disabled
  This boolean attribute determines whether the menu is disabled. Although you can, there's rarely a need to disable an entire menu. Most user interfaces just remove the menu entirely instead if the functionality is not available. This attribute can be set to either true or false. Of course, the latter is the default.
• accesskey
  This is the key that the user can press to activate the menu item. This letter is typically shown underlined on the menu title. Mozilla will look at the value attribute and add an underline character to the character specified here. For that reason, you should specify a character that exists in the text (although the key will still work if it doesn't).
• open
  This indicates whether the menu is open or not. You would not normally set this yourself, but a script could check the value to determine whether the menu is open.
• menuactive
  This indicates whether the menu is active, generally meaning that the menu has the focus. You would not normally set this yourself, but a script could check the value to determine whether the menu is focused.

The menupopup element creates the popup window containing the menu commands. It is a type of box which defaults to a vertical orientation. You could change it to horozontal if you wanted to and the menuitems would be placed in a row. Normally only menuitems and menuseparators would be placed on a menupopup. You can place any element on a menupopup, however they will be ignored on a Macintosh.

The menuitem element is much like the menu element in that it shares some of the same attributes.

• id
  The unique identifier of the menu title button.
• value
  The text to appear on the menu item, such as Open or Save.
• disabled
  This boolean attribute determines whether the menu item is disabled. This attribute can be set to either true or false where the latter is the default.
• accesskey
  This is the key that the user can press to activate the menu item. This letter is typically shown underlined on the menu title. Mozilla will look at the value attribute and add an underline character to the character specified here. For that reason, you should specify a character that exists in the text.
• acceltext
  This specifies the shortcut key text to appear next to the menu command text. It does not associate a key action with the menuitem however. We'll look at how to do this later.

The menuseparator has no special attributes. It just creates a horizontal split between the menuitems next to it.

You can also use the accesskey attribute on buttons. It works much like it does for menus. If the user presses the key specified by the accesskey, that element will receive the focus.

The currently highlighted or selected menuitem is given the attribute menuactive. This is a boolean value that identifies whether the menu item is highlighted or not. You could use this information in CSS to style the highlight.

Remember that the menu is not required to be on a menu bar. If it is placed separatly it will still work and you can still have a pop up list of items to select. Whatever you put inside the menu element is used as the menu's appearance, apart from the menupopup element which becomes the popup that is used. For example:

<menu>
  <button value="Click Me"/>
  <menupopup>
    <menuitem value="Choice 1"/>
    <menuitem value="Choice 2"/>
    <menuitem value="Choice 3"/>
  </menupopup>
</menu>

This will display a button labeled 'Click Me' with a pop up menu associated with it. This would typically be used to create the drop-down on the Navigator back button. Note that the menulist, used for creating drop-down lists, is really just a special type of menu element.

(Next) Next, we'll learn some more features of menus.

Examples: 5.1.1 5.1.2