Location of menu elements

Transcription

1 E Creating Menus Appendix E C Page 1 07/10/06--JHR In Visual Basic 2005, you use a MenuStrip control to include one or more menus in an application. You instantiate a MenuStrip control using the MenuStrip tool, which is located in the Menus & Toolbars section of the toolbox. Each menu in an application contains a menu title, which appears on the menu bar at the top of a Windows form. When you click a menu title, its corresponding menu opens and displays a list of options, called menu items. The menu items can be commands (such as Open or Exit), separator bars, or submenu titles. As in all Windows applications, clicking a command on a menu executes the command, and pointing to a submenu title opens an additional menu of options. Each of the options on a submenu is referred to as a submenu item. The purpose of a separator bar is to visually group together the related items on a menu or submenu. Figure E.1 identifies the location of these menu elements.

2 2 Appendix E Creating Menus Separator bar FIGURE E.1 Location of menu elements Although you can create many levels of submenus, it is best to use only one level in your application, because too many layers of submenus can be confusing to the user. Each menu element is considered an object and has a set of properties associated with it. The most commonly used properties for a menu element are the Name and Text properties. The programmer uses the Name property to refer to the menu element in code. The Text property, on the other hand, stores the menu element s caption, which is the text that the user sees when he or she is working with the menu. The caption indicates the purpose of the menu element. Examples of familiar captions for menu elements include Edit, Save As, Copy, and Exit. Menu title captions should be one word only, with the first letter capitalized. Each menu title should have a unique access key. The access key allows the user to open the menu by pressing the Alt key in combination with the access key. Unlike the captions for menu titles, the captions for menu items can be from one to three words. Use book title capitalization for the menu item captions, and assign each menu item a unique access key. The access key allows the user to select the item simply by pressing the access key when the menu is open. If a menu item requires additional information from the user, the Windows standard is to place an ellipsis (...) at the end of the caption. The ellipsis alerts the user that the menu item requires more information before it can perform its task. The menus included in your application should follow the standard Windows conventions. For example, if your application uses a File menu, it should be the first menu on the menu bar. File menus typically contain commands for opening, saving, and printing files, as well as exiting the application. If your application requires Cut, Copy, and Paste commands, the commands should be placed on an Edit menu, which typically is the second menu on the menu bar. To create a menu: 1. Start Visual Studio. If necessary, close the Start Page window. 2. Open the Sales Tax Solution (Sales Tax Solution.sln) file, which is contained in the VbReloaded\Appendix E\Sales Tax Solution folder. If necessary, open the designer window and permanently display the Toolbox window. 3. Click the MenuStrip tool, which is located in the Menus & Toolbars section of the toolbox. Drag the mouse pointer to the form, then release the mouse button. A MenuStrip control named MenuStrip1 appears in the component tray, and the words Type Here appear in a box on the form s title bar, as shown in Figure E.2. Appendix E C Page 2 07/10/06--JHR

3 Creating Menus 3 Type the first menu title here MenuStrip tool Appendix E C Page 3 07/10/06--JHR MenuStrip control appears in the component tray FIGURE E.2 MenuStrip control added to the application 4. Auto-hide the Toolbox window, then temporarily display the Properties window. Click (Name) in the Properties list, and then type mainmenustrip and press Enter. You will include two menu titles on the form s menu bar: File and Calculate. The File menu will contain three menu items: a Clear Tax command, a separator bar, and an Exit command. The Calculate menu will contain two menu items: a 5% Tax command and a 6% Tax command. To add the File menu title and three menu items: 1. Click the Type Here box on the menu bar, then type &File. See Figure E.3. Second menu title First menu title First menu item on the first menu FIGURE E.3 Menu title shown in the interface Notice that a Type Here box appears below the File menu title and also to the right of the menu title. The Type Here box that appears below the menu title allows you to add a menu item to the File menu. The Type Here box that appears to the right of the menu title allows you to add another menu title to the menu bar.

4 4 Appendix E Creating Menus 2. Press Enter, then click the File menu title. Temporarily display the Properties window. Scroll the Properties window, if necessary, until you see the Text property. Notice that the property contains &File. 3. Scroll to the top of the Properties window, then click (Name). Change the menu title s name to filemenutitle and press Enter. 4. Click the Type Here box that appears in the row below the File menu title, then type &Clear Tax and press Enter. Click the Clear Tax menu item. Change the menu item s name to fileclearmenuitem and press Enter. Next, you will add a separator bar to the File menu. 5. Place your mouse pointer on the Type Here box that appears below the Clear Tax menu item, then click the list arrow that appears in the box. See Figure E.4. FIGURE E.4 Drop-down list 6. Click Separator in the list. A separator bar appears below the Clear Tax menu item. Click the separator bar, then change its name to fileseparator and press Enter. 7. Click the Type Here box that appears below the separator bar, then type E&xit and press Enter. Click the Exit menu item. Change the menu item s name to fileexitmenuitem and press Enter. 8. Save the solution, then start the application. Click File on the form s menu bar. The File menu opens and displays the Clear Tax and Exit options, which are separated by a separator bar, as shown in Figure E.5. Appendix E C Page 4 07/10/06--JHR FIGURE E.5 Open File menu 9. Click the Close button on the form s title bar. The application closes and you are returned to the designer window. Next, you will add the Calculate menu and its two options to the form.

5 Creating Menus 5 To add the Calculate menu title and two menu items: 1. Click the Type Here box that appears to the right of the File menu title, then type &Calculate and press Enter. Click the Calculate menu item, then change its name to calculatemenutitle and press Enter. 2. Click the Type Here box that appears below the Calculate menu title. Type &5% Tax and press Enter. Click the 5% Tax menu item, then change its name to calculate5menuitem and press Enter. 3. Click the Type Here box that appears below the 5% Tax menu item. Type &6% Tax and press Enter. Click the 6% Tax menu item, then change its name to calculate6menuitem and press Enter. 4. Save the solution, then start the application. Click Calculate on the form s menu bar. The Calculate menu opens and displays the 5% Tax and 6% Tax options, as shown in Figure E.6. Appendix E C Page 5 07/10/06--JHR A menu item s access key can be used only when the menu is open, whereas the shortcut key can be used only when the menu is closed. FIGURE E.6 Open Calculate menu 5. Click the Close button on the form s title bar. The application closes and you are returned to the designer window. ASSIGNING SHORTCUT KEYS Shortcut keys appear to the right of a menu item and allow you to select an item without opening the menu. For example, in Windows applications you can select the Save command when the File menu is closed by pressing Ctrl + S. You should assign shortcut keys only to commonly used menu items. In the Sales Tax Calculator application, you will assign shortcut keys to the 5% Tax and 6% Tax options on the Calculate menu. To assign shortcut keys: 1. Click the 5% Tax menu item. Click ShortcutKeys in the Properties window, then click the list arrow in the Settings box. A box opens and allows you to specify the shortcut key s modifiers and key. To assign Ctrl + 5 as the shortcut key, you specify Ctrl as the modifier and 5 as the key. 2. Click the Ctrl check box to select it. Click the list arrow that appears in the Key section. A drop-down list appears. Scroll the list until you see the number 5, then click 5 in the list. See Figure E.7.

6 6 Appendix E Creating Menus FIGURE E.7 Shortcut key specified in the ShortcutKeys box 3. Press Enter. Ctrl+5 appears in the Properties window and on the Calculate menu, as shown in Figure E.8. Shortcut key Shortcut key Appendix E C Page 6 07/10/06--JHR FIGURE E.8 Shortcut key appears in the Properties window and on the Calculate menu 4. On your own, assign Ctrl+6 as the shortcut key for the 6% Tax menu item. 5. Save the solution, then start the application. Click Calculate on the form s menu bar. Each shortcut key appears next to its corresponding menu item, as shown in Figure E.9.

7 Creating Menus 7 Shortcut keys FIGURE E.9 Shortcut keys displayed on the Calculate menu 6. Click the Close button on the form s title bar. The application closes and you are returned to the designer window. Appendix E C Page 7 07/10/06--JHR Now that the File and Calculate menus are complete, you can begin coding their menu items. First, you will code two of the items on the File menu. Coding the Exit Menu Item When the user clicks the Exit option on the File menu, the option s Click event procedure should end the Sales Tax Calculator application. To code the Exit menu item: 1. Open the Code Editor window. Replace the <yourƒname> and <currentƒdate> text with your name and the current date. 2. Open the code template for the fileexitmenuitem s Click event procedure. Type me.close() and press Enter. See Figure E.10. FIGURE E.10 Completed fileexitmenuitem s Click event procedure 3. Save the solution, then start the application. Click File on the form s menu bar, then click Exit. The application closes and you are returned to the Code Editor window. Coding the Clear Tax Menu Item When the user clicks the Clear Tax option on the File menu, the option s Click event procedure should clear the tax amount displayed in the taxlabel. To code the Clear Tax menu item: 1. Open the code template for the fileclearmenuitem s Click event procedure. Type taxlabel.text = string.empty and press Enter. See Figure E.11.

8 8 Appendix E Creating Menus FIGURE E.11 Completed fileclearmenuitem s Click event procedure 2. Save the solution. You will test the Clear Tax option in the next section. Now you will code the two items on the Calculate menu. Coding the 5% Tax Menu Item When the user clicks the 5% Tax option on the Calculate menu, the option s Click event procedure should calculate a 5% sales tax and display the amount in the taxlabel. To code the 5% Tax menu item: 1. Open the code template for the calculate5menuitem s Click event procedure. Type calculates a 5% sales tax amount and press Enter twice. 2. Type const Rate as double =.05 and press Enter. 3. Type const Message as string = _ and press Enter. Press Tab, then type The sales amount must be numeric and press Enter. 4. Type dim sales as double and press Enter, then type dim tax as double and press Enter. Type dim isconvertedsales as boolean and press Enter twice. 5. Type isconvertedsales = double.tryparse(salestextbox.text, sales) and press Enter. 6. Type if isconvertedsales then and press Enter, then type tax = sales * rate and press Enter. 7. Type else and press Enter, then type messagebox.show(message, Sales Tax Calculator, _ and press Enter. 8. Press Tab, then type messageboxbuttons.ok, messageboxicon. information). 9. Position the insertion point at the end of the EndƒIf line, then press Enter to insert a blank line. In the blank line, type taxlabel.text = tax.tostring( C2 ) and press Enter. Figure E.12 shows the completed calculate5menuitem s Click event procedure. Appendix E C Page 8 07/10/06--JHR

9 Creating Menus 9 Appendix E C Page 9 07/10/06--JHR FIGURE E.12 Completed calculate5menuitem s Click event procedure Now you will test the Calculate menu s 5% Tax option, as well as the File menu s Clear Tax option. To test the 5% Tax and Clear Tax menu items: 1. Save the solution, then start the application. Type 1000 in the Sales text box. Click Calculate on the menu bar, then click 5% Tax. The calculate5menuitem s Click event procedure calculates and displays the sales tax amount, as shown in Figure E.13. FIGURE E.13 Sales tax amount displayed in the interface Now test the Clear Tax option on the File menu, and also the 5% Tax option s shortcut key. 2. Click File on the form s menu bar, then click Clear Tax. The fileclearmenuitem s Click event procedure removes the sales tax amount from the taxlabel. Press the Ctrl (or Control) key as you type the number 5, then release the Ctrl key. The calculate5menuitem s Click event procedure calculates and displays the sales tax amount, as shown earlier in Figure E Click File on the form s menu bar, and then click Exit. The application closes and you are returned to the Code Editor window.

10 10 Appendix E Creating Menus Coding the 6% Tax Menu Item When the user clicks the 6% Tax option on the Calculate menu, the option s Click event procedure should calculate a 6% sales tax and display the amount in the taxlabel. To code and then test the 6% Tax menu item: 1. Open the code template for the calculate6menuitem s Click event procedure. 2. Copy the comment and code from the calculate5menuitem s Click event procedure to the calculate6menuitem s Click event procedure. 3. Modify the calculate6menuitem s Click event procedure as shown in Figure E.14. Change from 5 to 6 FIGURE E Save the solution, then start the application. Completed calculate6menuitem s Click event procedure 5. Type 1000 in the Sales text box. Click Calculate on the menu bar, then click 6% Tax. The calculate6menuitem s Click event procedure calculates and displays $60.00 as the sales tax amount. 6. Click File on the form s menu bar, then click Clear Tax. The fileclearmenuitem s Click event procedure removes the sales tax amount from the taxlabel. 7. Press Ctrl + 6. The calculate6menuitem s Click event procedure calculates and displays $60.00 as the sales tax amount. 8. Click File on the form s menu bar, and then click Exit. The application closes and you are returned to the Code Editor window. 9. Close the Code Editor window, then close the solution and Visual Studio. Appendix E C Page 10 07/10/06--JHR You have completed Appendix E.