Creating and Using Menus

The main menu and the context menus are the most important parts of a user interface. Menus are centralized lists of options that enable the user to interact with the application. In VCL applications, menus are implemented using three components: TMainMenu, TPopupMenu, and TMenuItem.

The TMainMenu component is the main menu of a form, located below the caption bar. The TPopupMenu component is used to implement a pop-up (context) menu that appears when the user presses the right mouse button. Both the main menu and pop-up menus can contain multiple menu items. Each item in a menu is an actual TMenuItem instance.

The easiest way to add a main menu to an application is to drop a TMainMenu component on the Designer Surface and use the Menu Designer to add items to the menu at design time. To show the Menu Designer, simply double-click the TMainMenu component on the Designer Surface or right-click it and select the Menu Designer option from the context menu.

Figure 15-1: The Menu Designer

When we display it, the Menu Designer immediately creates an undefined TMenuItem instance and thus enables us to start building the menu in no time. This TMenuItem is also automatically selected and its properties and events are listed in the Object Inspector.

Figure 15-2: The undefined TMenuItem instance

The only thing that we have to do to create a valid menu item is type something in the Caption property of the selected TMenuItem instance and press Enter.

Figure 15-3: Adding a top-level menu

After we add a menu item to the selected menu, the Menu Designer automatically creates more undefined menu items and helps us quickly build a menu system for the application. The caption of the menu item we added is "&File". The optional ampersand character (&) is used to define the access (accelerator) key that enables the user to select the menu item with the keyboard using the Alt+access key combination. Access keys appear underlined in the menu. If you need to display the ampersand character in a menu item, you have to write the ampersand character twice.

Figure 15-4: Menu item that contains an ampersand character

Normally, menu items are used in a similar fashion as buttons, but they can also emulate radio button and check box behavior. The Checked property can be used when you want the menu item to work like a check box or a radio button. If the RadioItem property is set to True, the checked menu item displays a round dot; otherwise, the checked menu item displays a check mark.

Figure 15-5: Menu item variations

Notice the lines that separate various menu items in Figure 15-5. These separators are menu items used to logically group other menu items in the menu. To create a separator, you simply type a hyphen (-) in the Caption property of the menu item.

The TMenuItem component has two more pretty useful properties: AutoCheck and ShortCut. Set the AutoCheck property to True to enable the menu item to automatically toggle its Checked property. Use the ShortCut property to select a keyboard shortcut combination that can be used to fire the menu item's OnClick event without having to select the item from the menu. Shortcut combinations appear on the right side of the menu item.

Displaying Hints

Hints (also known as tooltips) are short strings that appear onscreen while the user moves the mouse cursor over controls on the form.

Figure 15-6: A hint

If you want to display hints in your application, you have to specify the hint text in the Hint property of all controls that should display the hint and then set the form's ShowHint property to True. When the ShowHint property of the form is set to True, the application displays hints for all child controls of the form. If the ShowHint property of the form is set to False (the default value), hints will only be displayed for specific controls whose ShowHint property is set to True.

In real-world applications, hints are also displayed in the status bar of the application, as shown in Figure 15-7.

Figure 15-7: Displaying hints in the status bar of the application

Now, let's design a user interface that is able to display application hints in the status bar. First, design a small menu with several items and assign some text to their Hint properties.

Figure 15-8: Assigning hints to menu items

In order to display hints in the status bar, we obviously need a status bar. The TStatusBar component is located in the Win32 category on the Tool Palette. Select the TStatusBar component and drop it anywhere on the Designer Surface. The component will automatically align itself to the bottom of the form.

There are actually two ways to make the TStatusBar component display application hints. The easier way simply requires you to set the AutoHint property of the TStatusBar component to True.

Figure 15-9: Showing hints in the status bar

If you want to control what happens when the application displays hints, you have to write a handler for the application's OnHint event. Drop the TApplicationEvents component on the form and write the following code in the OnHint event handler. The code displays the hint text in both the status bar and the title bar.

Listing 15-1: Displaying hints in the OnHint event

procedure TForm1.ApplicationEvents1Hint(Sender: TObject); begin   StatusBar1.SimpleText := Application.Hint;   Caption := Application.Hint; end;

The TPopupMenu Component

The only difference between building a pop-up menu and the main menu lies in the fact that the main menu is automatically assigned to the form (to the Menu property of the form) and therefore automatically used, whereas a pop-up menu has to be explicitly assigned to a control. Once we design a pop-up menu, using the same Menu Designer that enables us to design the main menu, we have to select the form or a control on the form and then assign our pop-up menu to the PopupMenu property of the selected control.

Figure 15-10: Assigning a pop-up menu to the form

The TImageList Component

The TImageList component is a nonvisual component that can contain a collection of glyphs, same-sized images used mainly in menus and toolbars. The TImageList component resides in the Win32 category on the Tool Palette window.

We have to use the TImageList component if we want to display images in the main menu, pop-up menus, or toolbars. The first thing that we have to do is drop a TImageList component to the Designer Surface. Then, we have to use the Image List Editor to add images to the TImageList component. To display the Image List Editor, double-click the TImageList component on the Designer Surface.

Figure 15-11: The Image List Editor

You don't have to worry if you have no 16x16 images that you can use in your applications — Delphi comes with a collection of standard glyphs. You can find these glyphs in the X:\Program Files\Borland Shared\Images directory. The Buttons subdirectory contains a collection of rather old but still useful glyphs. The GlyFX subdirectory, on the other hand, contains a collection of extremely nice, modern-looking glyphs. If your goal is to create a user-friendly interface, you should definitely use these glyphs.

When you add a glyph to the TImageList component, the glyph receives an index value, which is used to identify a particular glyph, as shown in Figure 15-12.

Figure 15-12: A TImageList component that contains several glyphs

In order to use the TImageList glyphs in the pop-up menu, we have to connect the image list with the pop-up menu. To do that, select the TPopupMenu component on the Designer Surface and then assign the ImageList1 component to the pop-up menu's Images property.

Finally, double-click the TPopupMenu component to display the Menu Designer and use the ImageIndex property to assign the appropriate glyph to a menu item.

Figure 15-13: Adding images to the pop-up menu