Hour 17

Menus in VB Applications

When you go to a restaurant for the first time, you don't know what to order until the menu arrives. When users use your application, they need a menu so they will know what to order also. Just like a restaurant's customers, your application's new users will not know what they can do. The menu gives them a guide. Once they become more familiar with the application, they will also learn various shortcut keys you supply on the menu bar.

Most Windows programs contain common menu commands. Visual Basic is one such program. Many of the Visual Basic pull-down menus contain the same commands as Microsoft Word and Microsoft Excel. You should follow this pattern as closely as you can. Group your file-related commands on the menu bar's File option so your users will feel right at home with your application. Your application will require some menu options that no other application uses, and your application certainly may not be as complete as VB's, but use as much overlap as you can so your users can adapt as quickly as possible to your application's interface.

The highlights of this hour include

The Menu Editor

Before looking at menu creation, take a moment to familiarize yourself with Figure 17.1's menu components. The rest of this lesson discusses the various components that make up most Windows menus. In working with Visual Basic, you've already seen these menu components.

Figure 17.1. The menu components.


NOTE: Notice that Visual Basic displays toolbar icons next to menu options that appear on one of the toolbars. Most of Microsoft's newer products now show the toolbar icons on matching menu options. You'll more quickly learn which toolbar goes with which menu item because you'll more quickly associate toolbar button icons to their equivalent menu options. Unfortunately, you cannot add such icons to your own application menus because Visual Basic does not give you a way to add the icons.

Even Visual Basic programming gurus don't always know that a menu is another control object just like a command button or a text box. Once you add a menu bar to an application, the menu bar and its options are all controls that you can manage from the Properties window. Even though the menu items are regular controls with properties you can set, the programming gurus don't often know that because they use a better resource than the Properties window for creating their menus. Whereas the Properties window is great for setting normal toolbox control properties, the Menu Editor makes for a better menu-creation tool.

The Menu Editor lets you quickly and easily place menu bar items into your application by pushing command buttons and typing a few property values. The Menu Editor contains menu description tools that let you create the application's menu bar, menu commands, and shortcut access keys to all of your applications.

The Menu Editor is a dialog box that you access from the Form window by pressing Ctrl+E or by selecting Tools | Menu Editor from Visual Basic's own menu bar. Figure 17.2 shows the Menu Editor dialog box.

Figure 17.2. Creating a menu with the Menu Editor.

The Menu Editor creates your menu, but you still need to write event procedures that tie menu command selections to actions taken by your application. When the user selects a menu command, Visual Basic generates an event, just as it generates an event when the user clicks a command button. The only event that menu items support is the Click() event. Therefore, whether the user selects a menu option with a mouse or with a keyboard, that selection triggers a Click() event.


NOTE: Learning to add menus to your programs involves a mastery of the Menu Editor, and you'll always re-open the Menu Editor if you want to modify an application's menu. After you use the Menu Editor to create the menu, the menu's event procedures work just like the other event procedures that you've been writing throughout this book.

As you'll see throughout the rest of this lesson, the Menu Editor lets you add to applications a menu bar, pull-down menu commands, separator bars (bars that help group menu options), submenus (menus that appear from other menu options), checked items, and shortcut access keystrokes. After you create the menu, you'll write event procedures for each menu option. When the user selects a menu command, that menu command's event procedure will automatically execute.


NOTE: Sometimes the options on the menu bar's pull-down list are called items or commands. This tutorial uses the more common term, option, throughout the text.

Adding an Applications Menu Bar

An application's menu bar is one of the easiest parts of the menu system to add. This section walks you through the steps necessary to add a menu bar. Subsequent sections show you how to add pull-down menu options to each of the menu bar commands.

The Menu Editor makes adding a menu bar to any application simple. Create a new project so you can practice creating a menu. The menu bar you create will contain the following options:

This tutorial could go into a lot of detail, explaining all the nuances of the Menu Editor. Luckily, you don't need all that preliminary detailed description. The Menu Editor is most easily mastered by jumping in and building a menu from scratch. You don't need a bunch of theory to use the Menu Editor.

Every option on a menu bar, as well as the menu options, submenus, and separator bars that appear when you display a pull-down menu, has properties just as the other controls do. The Menu Editor acts like a dialog box that helps you set menu property values. The Properties window is perfect for the other controls, but as you'll see, menus require a few extra kinds of property choices that the other controls don't need. That's why using the customized Menu Editor is simpler than modifying an application's menu through the Properties window.

Perform the following steps to add a menu bar to your new project:

1. Press Ctrl+E to display the Menu Editor. Each menu bar command requires a caption (specified by the Caption property) and a name (specified by the Name property). The other Menu Editor items are optional.

The additional Menu Editor properties, such as the Enabled property that determines whether the menu item is grayed out and unavailable for certain procedures, as well as a Visible property, which determines when the user can see the menu bar command, are not needed for every option. You'll rarely change these extra property values from their default values for menu bar commands.

2.
At the Caption prompt, type &File. The ampersand, as with the other controls' Caption properties, indicates an accelerator keystroke of Alt+F for the File menu item. As you type the Caption value, notice that Visual Basic adds the caption in the Menu Editor's lower section. The Menu Editor's lower half displays the menu bar and the pull-down options as you add them to the menu. The Menu Editor's top half contains a description of individual items in the menu.

3.
Press Tab to move the focus to the Name text box, and type mnuFile. The application will refer to the File menu bar item by the name mnuFile as needed. In other words, just as a command button might be named cmdPressMe, the menu bar option can be named mnuFile. The three-letter prefix indicates that the mnuFile object is a menu item and not some other kind of control. Your Menu Editor's window should look something like the one in Figure 17.3.

The only accelerator keystroke available for menu bar options is the underlined Alt+keystroke that occurs as the result of the Caption property's underlined letter. Don't attempt to select Ctrl+keystroke from the Shortcut drop-down list box for the menu bar options. Ctrl+keystroke shortcut combinations are available only for pull-down menu options.
Don't press Enter or click the OK button to close the Menu Editor just yet, because you've got to add the additional menu bar options before closing the Menu Editor's window.

Figure 17.3. The menu bar now has a defined File option.

Naming Menu Options

You should follow a standard naming convention when naming menu options.

The event procedures within any Visual Basic application reference menu options by their menu option names. Preface all menu items, both menu bar and pull-down menu items, with the mnu prefix so that you can easily distinguish menu commands from variables and from the other controls as you work within the application's code.


NOTE: Generally, Visual Basic programmers follow the standard of naming menu bar options with the prefix mnu followed by the name of the item. Therefore, the File option is named mnuFile, Edit is named mnuEdit, and so on.

As you add pull-down options to the menu bar items, preface each of those options with the mnu prefix as well as the name of the menu bar command, and then append the name of the pull-down menu's item. Therefore, the File | Exit item would be named mnuFileExit, View | Normal would be named mnuViewNormal, and so on. The names then clearly describe the menu items that they represent. If a submenu appears, append its item name to the parent's name (for example, mnuViewNormalFull).

Follow these steps to complete the creation of a menu bar:

1. Click the Menu Editor's Next command button to inform Visual Basic that you want to add the next item. The lower window's highlight bar drops down to the next line in preparation for the next menu item. The buttons right above the lower window control the addition, insertion, and deletion of menu items from the menu you are building.

2.
Type &Edit at the Caption text box and press Tab. Name this second menu bar item mnuEdit. Click the Next command button to prepare the Menu Editor for the next menu bar item.

3
. Type &View and press Tab to move the focus to the Name text box. Type mnuView and select Next to prepare for the final menu item.

4.
Type &Help and press Tab to move the focus to the Name text box. Type mnuHelp. Your screen should look like the one in Figure 17.4.

Figure 17.4. The menu bar is now complete, with four options.

Close the Menu Editor by pressing Enter or clicking the OK command button. Immediately, Visual Basic displays the new menu bar across the top of the application's Form window, as shown in Figure 17.5. The menu bar is the result of your efforts with the Menu Editor.

Obviously, the menu is incomplete. The menu bar exists, but no options pull down from the menu bar. You're now ready to add the individual pull-down options to the menu. The next section explains how to complete the File pull-down menu.

Figure 17.5. The Form window's new menu bar.

Adding Pull-Down Menu Options

Each menu bar command opens a pull-down menu that consists of a series of options, separator bars, access keystrokes, and submenus. The Menu Editor's four arrow command buttons let you indent the pull-down menu commands from their matching menu bar commands to show which items go with which menu bar commands.

Now that you've added the menu bar, you can add the individual options to the pull-down menus. You didn't have to complete the menu bar before completing each pull-down menu. You could have added the File option to the menu bar and then completed the File option's pull-down menu before adding the View option to the menu bar. The order in which you add menu items doesn't matter at all. It is where you place them and how you indent them that determines the order in which the menu items appear.

The File pull-down menu will contain the following items:

After you add these submenu items, you can hook up the menu commands to Click() event procedures that you write, as explained in the next section.

Adding pull-down items requires that you follow the same steps you followed when you added the menu bar items in the previous section. The difference is that the Menu Editor options that the previous section ignored, such as the Shortcut option, become more important because you'll apply some of these options to the pull-down menu items. Table 17.1 explains the remaining Menu Editor properties.

Table 17.1. The Menu Editor's remaining properties.
Property Description
Checked Indicates whether a menu item has a checkmark next to it. Generally, you'll add checkmarks to menu options that perform on or off actions, such as a View menu that contains a Highlighted command. The checkmark appears when you, at design time or through code, set the menu item's Checked property to True. The checkmark goes away (indicating that the item is no longer active or selected) when you set the Checked property to False.
HelpContextID This is a code that matches a help file description if and when you add help files to your application.
Index If you create a menu control array rather than name individual menu items separately, this Index property specifies the menu item's subscript within the control array.
Shortcut This is a drop-down list of Ctrl+keystroke access keys that you can add to any pull-down menu item.
Window List Specifies whether the menu item applies to an advanced application's MDI (multiple-document interface) document. The menus that you create for this book don't require the use of MDI features.

Perhaps the most important command keys on the Menu Editor, when you add pull-down menu items, are the four arrow command buttons. The left and right arrow command buttons indicate which items go with which menu bar option. In other words, if four items in the lower window are indented to the right and appear directly beneath the File menu bar item, those four indented items will appear on File's pull-down menu. The left arrow removes an indentation level and the right arrow adds an indentation level. The up- and down-arrow keys move menu items up and down the list of menu items, rearranging the order if you need to do so.

The arrow keys make a lot of sense when you see them used. Follow these steps to create the File pull-down menu bar's submenu:

1. Move the lower window's highlight line to the &Edit menu bar item. Click the Insert command button. You always insert before an item, so to add items to the File menu, you must insert before the Edit menu bar item in the lower window.

2.
Click the right-arrow command button. Visual Basic adds four dots (similar to an ellipsis), showing that the newly inserted item will be indented under the File option.

3.
Move the focus to the caption prompt and type &New.

4.
Press Tab to move the focus to the name prompt and type mnuFileNew.

5.
Click Next and then Insert, and press the right arrow command button to insert another item beneath the New item. Your Menu Editor should look like the one in Figure 17.6. Notice that the File menu bar option now has a pull-down menu; you know this because of the indentation of the New option right below &File.

Figure 17.6. The File pull-down menu is gaining additional options.


6. Move the focus to the caption prompt and type &Open. Press Tab and enter the Name property value mnuFileOpen. Rather than add the next item, click the Shortcut drop-down list and select Ctrl+O from the list. When the user now displays the File pull-down menu, Ctrl+O will appear as the shortcut key next to the File | Open menu item.

7. Click Next, Insert, and then the right arrow command button to make room for the next item. Add the Exit caption with the Name property mnuFileExit. Click Next again and then Insert to insert another item beneath the Close item. You can now add a separator bar.

Separator bars help you break individual pull-down menus into separate sections. Although several options appear on most Windows applications' File pull-down menus, these options don't all perform the same kind of tasks. Some options relate to files, some relate to printing, and the Exit command always appears on the File menu as well. The separator bars help distinguish groups of different items from each other on the pull-down menus.

All separator bars have the same Caption property, which is nothing more than a hyphen (-). You must give every separator bar a different name. Usually, the name of the separator bars on the File menu are mnuFileBar1, mnuFileBar2, and so on. Some programmers prefer to name the first separator bar Sep1, the second Sep2, and so on, no matter which menu the separator bar appears on.

You must add the separator bars on an indented menu level so that they indent properly beneath their pull-down menus. Follow these steps to add the single separator bar for this lesson's File pull-down menu:

1. Type - (a hyphen) for the Caption property and press Tab.

2.
Type mnuFileBar1 for the Name property.

There's one more item to add: the Exit item. You know enough to add the Exit option to the File menu. After adding Exit, your Menu Editor should look like the one shown in Figure 17.7.

Figure 17.7. The File menu is now complete.

Menu Extras

You don't need to complete all the menu bar options. You already know how to add routine options. If you need to add additional menu elements, however, such as a submenu or a checked item, the mechanics of those additions are about as simple as the items that you added in the previous sections.

To practice adding a checked object, add one checked item to the View pull-down menu bar item. Add an indented option that uses Highlighted for the Caption item and mnuViewHighlighted for the Name. Click the Checked check box. The View | Highlighted option will initially be checked when the user displays the View pull-down menu. Your code can check and uncheck the item by changing the mnuViewHighlighted object's Checked property to True and False.

If you want to add a submenu from a pull-down menu item, add an additional level of indentation. For example, to add a two-option submenu off the File | Open option that gave the user an additional choice of Binary or Text (binary and text are two possible kinds of files), insert a place for the first item right beneath Open and click the right-arrow command button to add a second ellipsis. Type &Binary for the Caption property and mnuFileOpenBinary for the Name property. Insert an additional item beneath that, indented at the same level, and type &Text for the Caption property and mnuFileOpenText for the Name property.


NOTE: Your menu has a slight bug now! Go back to the &Open menu option and set the shortcut keystroke back to None. You cannot add a shortcut keystroke to a submenu's parent option.

Now that you've completed the menu (as far as we're taking it here), click the OK command button. When the Menu Editor disappears, you'll see the application's Form window with the menu bar across the top of the screen. Open the File menu and then select Open to see the submenu like the one shown in Figure 17.8. Notice the right arrow next to Open, which indicates that an additional submenu will appear for that option.

Figure 17.8. The File menu is now complete.

Connecting Menus to Event Procedures

Once you've built your menu, you need to tie each menu command to your application. To respond to menu selections, you need to write Click() event procedures that you want Visual Basic to execute when the user selects a menu command.

Visual Basic generates a Click event when the user selects a menu command. The name of the menu command, combined with Click(), provides the name of the event procedure. Therefore, the File | Exit menu item named mnuFileExit will generate the execution of the event procedure named mnuFileExit_Click().

Adding the mnuFileExit_Click() event procedure requires only that you select that menu command during the program's development. At the Form window, click the File menu bar command. Visual Basic displays the Form window's File pull-down menu. Even though you're not running the program but are working on the program from the Form window, the File menu shows you what happens when the user selects File at runtime.

Click the Exit item on the File pull-down menu. As soon as you click Exit, Visual Basic opens the Code window to a new event procedure named mnuFileExit_Click(), as shown in Figure 17.9.

Figure 17.9. The menu option's Click() event procedure.

This event procedure is simple to code. When the user selects File | Exit, you want the application to terminate. Therefore, insert an Unload Me and an End statement to the body of the mnuFileExit_Click() procedure and close the procedure by double-clicking its control button. As you can see, adding event procedures requires little more than clicking the menu item and adding the body of the procedure that appears.

Although the application is far from complete, you can run the application to see how the menu looks and to test the File | Exit option.

After building your menu, you must tie code to the various menu items by writing Click() event procedures that will execute when the user runs the application and selects from the menu. If any menu command duplicates the functionality of other controls, such as command buttons, don't copy the command button's code into the body of the menu event procedure. Instead, simply execute that command button's event procedure from the menu item's event procedure.


NOTE: The Menu Editor creates a working menu shell. As you've seen, the Menu Editor will not do more than produce a working menu that responds the way other Windows menus respond. You must write all the code behind all the menu options. If you want a checkmark to disappear from a checked menu item (such as this application's View | Highlighted option), your code will have to hide the checkmark. The mark will not disappear on its own when the user selects the option.

Copying Menus Between Projects

Here's a tip that you should file away for the day when you want to copy a menu from one form to another project's form file. Although several methods exist, one way that you can accomplish this copy is to perform these steps:

1. Make a backup of the target form where you want to copy the menu.

2.
Start the Windows Notepad Editor.

3.
Load the form with the menu into the editor. Visual Basic saves form files in a text format that you can load into an editor.

4.
Copy all the text that describes that form's menu to the Windows Clipboard. Here is a form's text that describes the previous section's menu:






Begin VB.Menu mnuFile

   Caption         =   "&File"

   Begin VB.Menu mnuFileNew

      Caption         =   "&New"

   End

   Begin VB.Menu mnuFileOpen

      Caption         =   "&Open"

      Begin VB.Menu mnuFileOpenBinary

         Caption         =   "&Binary"

      End

      Begin VB.Menu mnuFileOpenText

         Caption         =   "&Text"

      End

   End

   Begin VB.Menu mnuFileClose

      Caption         =   "&Close"

   End

   Begin VB.Menu mnuFileBar1

      Caption         =   "-"

   End

   Begin VB.Menu mnuFileExit

      Caption         =   "E&xit"

   End

End

Begin VB.Menu mnuEdit

   Caption         =   "&Edit"

End

Begin VB.Menu mnuView

   Caption         =   "&View"

   Begin VB.Menu mnuViewHighlighted

      Caption         =   "Highlighted"

      Checked         =   -1  `True

   End

End

Begin VB.Menu mnuHelp

   Caption         =   "&Help"

End
5. Open the target application's form file. Each Begin-End block defines an object on the form. Locate an End statement that completes an object's definition and paste the Clipboard's form description there. When you save the file and load the form, the menu will be working as it does in the other. You now can write the event procedures for the menu options.

Summary

Adding menus to your applications requires only that you master the Menu Editor. Menus are nothing more than advanced controls with property values that you set using the Menu Editor. Most menu items require that you specify a Caption and Name property as well as indent the item properly under its menu bar command. Optionally, a menu item might contain a shortcut access keystroke or a checkmark next to the item.

The next hour will be really fun--you'll learn how to add colorful graphic images to your applications.

Q&A

Q My application is simple, so do I now need a menu?

A
Most applications require a menu, even if the only menu option is File | Exit. The simple applications you've seen throughout this tutorial have rarely had an Exit command button. To close them you've had to click the application's window close button. You offer users a much more graceful exit if you give them the familiar File | Exit command.

Q How many levels can I use for submenus?

A
The Menu Editor supports numerous submenu levels, but menus become much less manageable if you go past two levels of submenus. In other words, a submenu such as File | Open | Text is about as deep as you should go. Your users will find the menu structure too cumbersome to traverse if you add additional submenus. A better option is to create a dialog box if a menu option requires several settings. The dialog box can be a second form with buttons and controls. You can display that form (by assigning True to its Visible property) when the user clicks the menu option for that dialog box.

Workshop

The quiz questions and exercises are provided for your further understanding. See Appendix C, "Answers," for answers.

Quiz

1. True or false: Menu items are controls that have properties.

2.
True or false: More than one form can have a menu within a single application.

3.
What is the most common menu-naming prefix?

4.
What would be a good name for an Edit | Select | All menu option?

5.
How does the Menu Editor know that a submenu option is part of a menu bar option?

6.
True or false: You can add a menu shortcut keystroke to a menu option that produces a submenu.

7.
What menu option should all applications use?

8.
Why should programmers shy away from using unconventional menu options such as File | Quit?

9.
What is the event property used in menu processing?

10.
Which property must your application change in order to change the checkmark setting on a menu option?

Exercises

1. Create a new project with the following menu bar items: Write, Read, and Listen. Create a Write submenu with these options: Keyboard, Pencil, and Pen. Create a Read submenu with these options: Screen, Book, and Magazine. Create a Listen submenu with these options: Radio and Television.

2.
Add menus to the Atm.vbp project that appears in VB's Samples\PGuide\Atm folder. On the opening form add a File | Exit option as well as a Language menu bar option with these pull-down checked choices: English, Italiano, Espanol, Francais, and Deutsch. Don't use special foreign characters unless you can access them easily from your keyboard and you are used to using them. When the user first starts the application, put the checkmark next to the English option but move the checkmark (or let the user select a different option) when the user selects an option or clicks the corresponding command button. Add one more menu to the Welcome form that includes a File | Exit option. Unlike the Welcome form's OK button, make sure the menu's File | Exit command on that form completely terminates the application.