Visual Basic 4 in 12 Easy Lessons vel419.htm

Previous Page TOC Next Page



Unit 19


Menus Improve Usability



What You'll Learn


This lesson explains how to add menus to your applications. Why add menus? As you already know, menus add commands to your application that the command buttons alone do not always handle. Although a command button often performs the same task as one of the menu options, Windows users expect to see menus. Common program commands such as exiting a program reside on the menu's list of commands.

How do you decide which menu options to include? Look at any popular Windows programs. Most Windows programs contain common menu commands and features. Visual Basic is one such program. Many of the Visual Basic pull-down menus contain the same commands as Microsoft Word and Microsoft Excel.

Microsoft products aren't the only Windows programs with common menu items, either. When you write a program, you want users to feel comfortable with your interface. The user responds well to familiarity. Only when the interface contains common commands will the user be likely to use your program without fuss.

The Menu Editor Window




Concept: Visual Basic makes creating and placing menu bar items into your application as easy as pushing command buttons and typing a few keystrokes. The Menu Editor window contains menu description tools that enable you to create the application's menu bar, menu commands, and shortcut keys to all of your applications.

The Menu Editor window 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 19.1 shows the Menu Editor window and names the parts of the Menu Editor window.

Figure 19.1. The Menu Editor window.

The Menu Editor window 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.



Note: Learning to add menus to your programs involves a mastery of the Menu Editor window more than anything else. After you use the Menu Editor window 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 a prelude to adding a menu bar to your applications, study Figure 19.2 to learn the proper names for menu-related elements of a menu bar. This unit will walk you through the creation of a menu by adding a menu bar to the previous lesson's project application named PROJECT9.VBP.

Figure 19.2. The parts of a menu.



Note: This unit doesn't add event procedures to every menu command that you will add to PROJECT9.VBP. This unit explains how to create the menu and the menu's elements, and also explains how to hook up a couple of event procedures to the menu. Once you see how to create the menu and add an event procedure to a few menu commands, you know enough to add event procedures to all the rest.



Review: Add menus to your applications using the Menu Editor window. The Menu Editor menu enables you to add the menu bar, pull-down menu commands, separator bars, and shortcut keystrokes to menu commands. After you create the menu, you'll write event procedures for each menu command. When the user selects a menu command, that menu command's event procedure will automatically execute.


Adding the Menu Bar




Concept: 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 add pull-down menu items to each of the menu bar commands.

The Menu Editor window makes adding a menu bar to any application simple. Load the PROJECT9.VBP file now and get ready to add a menu bar that consists of the following commands:

  • File

  • Edit

  • View

  • Help

Before doing anything else, save the PROJECT9.VBP form and project files under different names. By saving the files under different names, you'll protect the contents of the project so that the project matches the description given at the end of the previous lesson. Of course, if you do inadvertently change PROJECT9.VBP, you can always copy the files named PROJECT9.FRM and PROJECT9.VBP from this book's CD-ROM back to your hard disk.

The following steps assume that you have the PROJECT9.VBP file loaded and that you want to save a copy of the form and project file under the names MYMENU.FRM and MYMENU.VBP.

  1. Select File, Save File As to open the Save File As dialog box and enter the new name, MYMENU.FRM, at the File Name prompt. Press Enter or click OK to close the dialog box. The File Save As dialog box saves only the form file.

  2. Select File, Save Project As to open the Save Project As dialog box and enter the new name, MYMENU.VBP, at the File Name prompt. Press Enter or click OK to close the dialog box.

Now you have a copy of the PROJECT9.VBP project called MYMENU.VBP that you can modify by adding a menu. Lesson 9's project will remain intact.



Tip: This book could go into a lot of detail explaining all the nuances of the Menu Editor window. Luckily, you don't need all that preliminary detailed description. The Menu Editor window is most easily mastered by jumping in and building a menu from scratch.

Every command on a menu bar, as well as the menu commands and separator bars that appear when you display a pull-down menu, has properties just as the other controls do. The Menu Editor window acts like a dialog box that helps you set menu property values. The Property 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.

With the MYMENU.VBP application still loaded, follow these steps to add the menu bar:

  1. Press Ctrl+E to open the Menu Editor window. For this section of the unit, you're adding only the menu bar commands. Each menu bar command requires a caption (specified by the Caption property) and a name (specified by the Name property).
    Optionally, you can set other properties, such as an Enabled property, which 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. Generally, you'll rarely change these extra property values from their defaults for the menu bar commands.

  2. At the Caption prompt, type &File. The ampersand, as with the other controls' caption properties, indicates a shortcut keystroke of Alt+F for the File menu item. As you type the caption, notice that Visual Basic adds the caption in the Menu Editor window's lower section.
    The bottom half of the Menu Editor window contains a description of the full menu, whereas the top half of the Menu Editor window 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. The rest of the Menu Editor window's default property settings are fine as set. Your screen should look something like the one in Figure 19.3.
    The only shortcut key available for menu bar commands is the underlined Alt+keystroke that occurs as the result of the Caption property's underlined letter. Don't attempt to select a Ctrl+keystroke from the Shortcut dropdown list box for the menu bar commands. Ctrl+keystroke shortcut keystroke combinations are available only for pull-down menu commands.
    Don't press Enter or click the OK button to close the Menu Editor window just yet, because you've got to add the additional menu bar commands before closing the window.

Figure 19.3. The File menu bar command is now added to the menu.



Naming Menu Items: The event procedures within any Visual Basic application's code reference menu items by their menu item names. Preface all menu items, both menu bar as well as pull-down menu items, with the mnu caption prefix so that you can easily distinguish menu commands from variables and from the other controls as you work with the application's code.
Generally, Visual Basic programmers follow the naming standard of naming menu bar items mnu, followed by the name of the item. Therefore, File is named mnuFile, Edit is named mnuEdit, and so on.
As you add additional items to the pull-down menus, preface each of those items 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 will be named mnuFileExit, View Normal will be named mnuViewNormal, and so on. The names then clearly describe the menu items that they represent.


Adding the remaining menu bar commands requires little more than adding the three items to the lower window of the Menu Editor window. These steps complete the creation of the MYMENU.VBP's menu bar:

  1. Click the Menu Editor window'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.

  2. Type &Edit at the Caption text box and press Tab. Name the second menu bar item mnuEdit. Click the Next command button to prepare the Menu Editor window 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 the Menu Editor window for the final menu bar 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 19.4.

Figure 19.4. The Menu Editor window with all four menu bar items entered.

Close the Menu Editor window 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.



Review: The Menu Editor window provides the tools needed to add a menu bar along with the menu bar's pull-down menus and commands. Adding the menu bar items involves little more than typing the item name and caption. You're now ready to add the individual items to the menu. The next section explains how to complete this unit's File menu bar pull-down menu.


Adding Pull-Down Menus




Concept: Each menu bar command opens a pull-down menu that consists of a series of commands, separator bars, and shortcut keystrokes. These pull-down menus are sometimes called submenus. The four arrow key command buttons inside the Menu Editor window enable you to 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 items 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 command to the menu bar and then completed the File pull-down menu before adding the View command 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 in which order menu items appear.

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

  • The New command

  • The Open command with a shortcut keystroke of Ctrl+O

  • The Close command

  • A separator bar

  • The Exit command

After you add these submenu items, you can hook up the menu commands to event procedures that you write, which is explained in the next section.

Adding submenu items consists of following steps that are virtually identical to the ones you followed when adding the menu bar items. The difference is that the additional Menu Editor window options become more important because you'll apply these options more frequently to the pull-down menu items. Table 19.1 explains the remaining Menu Editor window properties.

Table 19.1. The Menu Editor window's remaining property explanations.

Property Description
Checked Indicates whether a menu item has a check mark next to the item. Generally, you'll add check marks to menu commands that perform on or off actions, such as a View menu that contains a Highlighted command. The check mark appears when you, at design time or through code, set the menu item's Checked property to True. The check mark 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 you add help files to your application.
Index If you create a menu control array rather than name individual menu items separately, the Index property specifies the menu item's subscript within the control array.
NegotiatePosition Determines how the menu appears in an advanced container form (used for Visual Basic's retail version that allows for several forms in a single application).
Shortcut This is a dropdown list of Ctrl+keystroke shortcut 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 window 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 command. 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 the File pull-down menu. The left arrow removes the indention and the right arrow adds the indention. 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 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 to insert another item beneath the New item. Your Menu Editor window should look like the one in Figure 19.5.

  6. Move the focus to the Caption prompt and type &Open. Press Tab and enter the Name value of mnuFileOpen. Rather than add the next item, click the Shortcut dropdown 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 and then Insert to make room for the next item. Add the Close caption with the name mnuFileClose. Click Next and then Insert to insert another item beneath the Close item. It's now time to add the separator bar.

Figure 19.5. In the process of adding to the File menu.

Separator bars help you break individual pull-down menus into separate sections. Although several commands appear on most Windows applications' File pull-down menus, these commands don't all perform the same kind of functions. Some 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 that 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. You must add the separator bars using the right arrow's command button so that they indent properly beneath their pull-down menus. Follow these steps to add the single separator bar for this MYMENU.VBP's File pull-down menu:

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

  2. Type mnuFileBar1 for the Name.

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

Figure 19.6. The completed File pull-down menu commands.

As an extra menu feature, add one checkmarked item to the View pull-down menu. Add an indented Highlighted item with the name mnuViewHighlighted. Click the Checked check box. The View Highlighted item will initially be checked when the user selects the View Highlighted from the menu.

Now that you've completed the menu (as far as we're taking it here), click the OK command button. When the Menu Editor window disappears, you'll see the application's Form window with the menu bar across the top of the screen.



Review: Adding menus to your applications requires only that you master the Menu Editor window. Menus are nothing more than advanced controls with property values that you set using the Menu Editor window. 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 keystroke or a check mark next to the item.


Connecting Menus to Event Procedures




Concept: 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 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 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 appears to show 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 19.7.

Figure 19.7. Visual Basic opens the Code window when you click a menu item.

This event procedure is simple. When the user selects File Exit, you want the application to terminate. Therefore, insert the End statement to the body of the mnuFileExit_Click() procedure and close the procedure by double-clicking its control button.

Although this unit doesn't take the time to complete the menu bar's pull-down menus or add event procedure code to every menu item, perhaps it would also be good to hook up the File Open menu command to display the file-selection frame that appears when the user selects the Display a File command button on the form. Rather than duplicate the Display a File command button's code inside the mnuFileOpen_Click() procedure, you can execute the command button's Click event by adding the following line to the body of the mnuFileOpen_Click() procedure:


cmdSel_Click ' Execute the Display a file event

As you can see, adding event procedures requires little more than clicking the menu item and adding the body of the procedure that appears.

Stop and Type: Add a Highlighted submenu option to the application's View menu bar command. Add yet another event procedure to the View Highlighted menu option by clicking its menu item and adding the code so that the procedure looks like that in Listing 19.1.



Review: 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.

Input: Listing 19.1. Code that boldfaces the displayed file.


1: Private Sub mnuViewHighlighted_Click ()

2: ' Determines if the file being displayed

3: ' appears Boldfaced or not

4: mnuViewHighlighted.Checked = Not (mnuViewHighlighted.Checked)

5: txtFile.FontBold = mnuViewHighlighted.Checked

6: End Sub

Output: Figure 19.8 shows a textual data file being displayed with a boldface font. Before you added the View Highlighted menu item, the file always appeared in a boldface font.

Figure 19.8. When checked, the View Highlighted menu item turns on the file display's boldface font.

Analysis: When the user first runs the program, the View Highlighted item will be checked, meaning that the file the user displays will appear in the boldfaced font.

Listing 19.1 uses the Not operator to set the FontBold property of the text box that displays the file in the application. Line 4 resets the check mark on the View Highlighted menu item. If the item is checked, line 4 sets the value to the opposite value using Not. The check mark will then disappear and won't be displayed if the user displays the View pull-down menu once again. Line 5 sets the FontBold property of the file's text box to the same True or False condition that the Checked item is now set to.

This menu discussion ends here without adding event procedures to all of the menu items because you follow these same steps to add event procedures to the remaining items. You now understand how to add the menu bar, submenu items, and event procedure code to your applications, and you're well on your way to creating Windows programs that rival those of the pros!

Homework



General Knowledge


  1. What Visual Basic tool do you use to design menus?

  2. True or false: The Menu Editor enables you to specify property values for your application's menus.

  3. True or false: You can add Ctrl+keystroke shortcut keys to your menu bar commands.

  4. True or false: You can add Alt+keystroke shortcut keys to your menu bar commands.

  5. What is the Name prefix that you should use for all menu items?

  6. What is a submenu?

  7. Which command buttons in the Menu Editor enable you to rearrange menu options?

  8. Which command buttons in the Menu Editor enable you to indent menu items to indicate that those items are part of a pull-down menu?

  9. Which menu property enables you to add check marks next to menu items?

  10. Which menu property enables you to hide menu items from the user at various times?

  11. True or false: Menu commands can be part of a control array.

  12. What Caption property do all separator bars require?

  13. What is the event name that all menu selections trigger?


Write Code That...


  1. What would you name a menu item with the caption Split that appears when the user selects from the Window menu bar?

  2. What name would you give to two separator bars located on the View pull-down menu?

  3. Describe how you could gray out the menu items in MYMENU.VBP that have no event procedure code (such as File New) at this time.


Extra Credit


Create a blank application with the following menu bar items: A, B, C, D, and E. Write code in the Form_Load() procedure to right justify the E item. On each pull-down menu, add the following items: 1, 2, 3, 4, and 5. Insert separator bars between the 2 and 3 and the 4 and 5. After you complete this, run the program to make sure that your menu items all appear as expected. After you complete this simple Menu Editor window exercise, you will have mastered the basics of adding menu commands.

Previous Page Page Top TOC Next Page