Home

Application Resources
 

The Main Menu
 

Overview

A menu of a computer program is a list of actions that can be performed on that application. To be aware of these actions, the list must be presented to the user upon request. A menu is considered a main menu, when it carries most of the actions the user can perform on a particular application. Such a menu is positioned in the top section of the form in which it is used. By design, although a main menu is positioned on a form, it actually belongs to the application.

A main menu is divided in categories of items and each category is represented by a word. On the Visual Studio's IDE, the categories of menus are File, Edit, Project, Window, etc. To use a menu, the user first clicks one of the words that displays on top. When clicked, the menu expands and displays a list of items that belong to that category.

There is no strict rule on how a menu is organized. There are only suggestions. For example, actions that are related to file processing, such as creating a new file, opening an existing file, saving a file, printing the open file, or closing the file usually stay under a category called File. In the same way, actions related to viewing documents can be listed under a View menu.

 

Main Menu Creation

The main menu is implemented through the MainMenu class. To create a main menu, on the Toolbox, you can click the MainMenu button and click the form that will use the menu. After clicking the form, an empty menu is initiated, waiting for you to add the necessary menu item.

To create a menu category that starts a list of items that belong to the menu object, click the Type Here line and type the desired item then press Enter.

If you look at the main menu of Visual Studio, you would see that a letter on each menu is underlined. This letter allows the user to access the menu using a keyboard. For example, if the letter e is underline in a File menu as in File, the user can access the File by pressing the Alt then the E keys. To create this functionality, choose a letter on the menu item and precede it with the & character. For example, &File would produce File.

A shortcut is a key or a combination of keys that the user can press to perform an action that would also be performed using a menu item. When creating a menu, to specify a shortcut, use the Shortcut field in the Properties window.

If you have used applications like Microsoft Word or Adobe Photoshop, you may know that they don't show all of their shortcuts on the menu. If you want to hide a shortcut, after specifying it, in the Properties window, set the ShowShortcut property to False.

Practical LearningPractical Learning: Creating a Menu
  1. Start a new Windows Application named Menus1
  2. Change the form's Text to Employees Related Issues
  3. On the Toolbox, click the MainMenu button and click on the form
  4. On the form, click Type Here, type &Staff and press Enter
  5. On the form, click Staff and click the Type Here box under it
  6. Type &New Hire
  7. In the Properties window, click Shortcut. Click the arrow of the Shortcut right field and select CtrlN
  8. On the form, click the Type Here line under New Hire and type &Records
  9. Using the Properties window, set the Shortcut to CtrlR
  10. On the form, click the item under Records and type Time &Sheet...
  11. Set its Shortcut to CtrlM
  12. Set its ShowShortcut property to False
  13. On the form, click Records and press Insert
  14. Type Searc&h...
  15. To add a separator, click the Type Here line under Time Sheet
  16. Type - and press Enter
  17. Click the empty item under the previously added separator line, type E&xit
  18. While the Exit menu item is still selected, in the Properties window, click (Name). Type mnuFileExit and press Enter
  19. To move the Search item, on the form, click and drag Search down
  20. When it is positioned under Time Sheet item, release the mouse:
     
    Moving a menu item
  21. To start a new menu category, click the Type Here box on the right side of Staff
  22. Type &Books and press the down arrow key
  23. In the empty box under Books, type &New and press the down
  24. Type Show All &Titles
  25. To create a submenu, click New and press the right arrow key
  26. In box on the right side of New, type &Title and press the down arrow key
  27. Type &Author and press the down arrow key
  28. Type &Category
  29. Click the Type Here box on the right side of Books. Type &View and press Enter
  30. Click View and click the empty box under it
  31. Type &Toolbar and press Enter
  32. Type &Status Bar and press the up arrow key
  33. Under the View menu item, click Toolbar to select it
  34. To put a check mark on a menu item, in the Properties window, set the Checked property to True
  35. Also, for the Status Bar item, set the Checked property to True
  36. To move the whole View menu category, click and drag View to the left:
     
    Moving a menu category
  37. When it is positioned between Staff and Books, release the mouse
 

Coding a Main Menu Item

If you create a menu as we have just done, to write code for one of the menu items, you can double-click the menu item. This would open the Click event of the menu item in the Code Editor and you can start writing the desired code for that item.

Practical LearningPractical Learning: Writing Code For a Main Menu
  1. On the form, click Staff and double-click Exit
  2. Implement the event as follows:
      
    Private Sub mnuFileExit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles mnuFileExit.Click
        End
End Sub
  3. Test the form
     
    Using a menu item at execution time
  4. To close it, click Staff -> Exit
 

Popup or Context Menus

A menu is considered, or qualifies as, popup if, or because, it can appear anywhere on the form as the programmer wishes. Such a menu is also referred to as context-sensitive because its appearance and behavior depends on where it displays on the form or on a particular control.

The first difference between a main menu and a popup menu is that a popup menu appears as one category or one list of items and not like a group of categories of menus like a main menu. Secondly, while a main menu by default is positioned on the top section of a form, a popup menu doesn't have a specific location on the form.

To use a popup menu, usually the user can right-click the section of the form or the object on which the menu is configured to appear.

A popup menu is based on the ContextMenu class. To visually create a popup menu, on the Toolbox, click the ContextMenu button and click on the form. Once you have a ContextMenu object, you can create its menu items. To do this, click the ContextMenu box to display the first Type Here line and configure the menu item as you would proceed with a menu item on the main menu.

Unlike a main menu, a popup menu provides a single list of items. If you want different popup menus for your form, you have two options. You can create various popup menus or programmatically change your single popup menu in response to something or some action on your form.

There is nothing particularly specific with writing code for a popup menu item. You approach it exactly as if you were dealing with a menu item of a main menu. You can write code for an item of a popup menu independent of any other item of a main menu. If you want an item of a popup menu to respond to the same request as an item of a main menu, you can write code for one of the menu items (either the item on the main menu or the item on the popup menu) and simply call its Click event in the event of the other menu item

Practical LearningPractical Learning: Creating a Context Menu
  1. Display the form in the Form  Designer
    On the Toolbox, click the ContextMenu button and click on the form
  2. On the form, click the ContextMenu box
  3. Click the Type Here box. Type &Font... and press Enter
  4. Click the empty box under Font to select it. Type &Options and press Enter
  5. Type &Properties and press the down arrow key
  6. Type - and press the down arrow key
  7. Type Finis&h and press Enter
  8. Double-click the Finish menu item
  9. Using the previous written code, simply call the event that implemented it:
      
    Private Sub MenuItem21_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem21.Click
        mnuFileExit_Click(sender, e)
End Sub
  10. Display the form in the Form Designer and click an empty area on the form to select it
  11. In the Properties window, click the ContextMenu field
  12. Click the arrow of the ContextMenu property and select contextMenu1
  13. Execute the application
     
    Using context-sensitive help
  14. Right-click in the middle of the form and click Finish
 

Toolbars
 

Introduction

A toolbar is a Windows control that allows the user the perform some actions on a form by clicking a button instead of using a menu. What a toolbar provides is a convenient group of buttons that simplifies the user's job by bringing the most accessible actions as buttons so that, instead of performing various steps to access a menu, a button on a toolbar can bring such common actions closer to the user.

Toolbars usually display under the main menu. They can be equipped with buttons but sometimes their buttons or some of their buttons have a caption. Toolbars can also be equipped with other types of controls.

To create a toolbar, on the Toolbox, click the Toolbox button and the form. By default, a toolbar is positioned on the top section of the form.

Like a form, a toolbar is only a container and does not provide much role by itself. To make a toolbar efficient, you should equip it with the necessary controls. To add controls to a toolbar, on the Properties window, click the ellipsis button of the Buttons field. This would open the ToolBarButton Collection Editor.

To add a control to a toolbar, in the ToolBarButton Collection Editor, click the Add button. The most common control used on a toolbar is a button. The types of buttons used are set using the Style property. A regular button has the PushButton style. The new button would appear empty.

A button on a toolbar is a rectangular object with a picture on top. The picture on the button should suggest what the button is used for but this is not always possible. Providing a picture is more important. The easiest way to provide pictures for your toolbar is by creating an image list and associating it with the toolbar. If a toolbar is given an image list, whenever you add a button, use the ImageIndex property to specify the image that would display on the button. You can keep adding buttons in this fashion.

A separator is a line that separates buttons (or controls) as groups of objects on a toolbar. To create a separator, after clicking Add, select the item and set its Style to Separator.

As a toolbar can be equipped with various types of controls, there are various types of buttons you can place on a toolbar. The types of buttons can be configured using the Style property on the Object Inspector.

Practical LearningPractical Learning: Creating a Toolbar
  1. To create a new popup menu, on the Toolbox, click the ContextMenu button and click the form
  2. On the form, click ContextMenu and click Type Here
  3. Type &Staff and press Enter
  4. Type &Customer and press Enter
  5. Type &Book and press Enter
  6. Type &Author and press Enter
  7. Under the form, click contextMenu2 to select it. In the Properties window, click Name, type mnuNewContext and press Enter
  8. To create an image list, on the Toolbox, click the ImageList button and click the form
  9. While the new imageList1 control is still selected, in the Properties window, click the ellipsis button of the Images field
  10. In the Image Collection Editor, click the Add button
  11. Using the Open dialog box, locate the Drive:\Program Files\Microsoft Visual Studio .NET 2003\Common7\Graphics\Bitmaps\Tbr_W95 folder. Click BACK and click Open
  12. From the same folder and in the same way, add the following bitmaps MCR, UNGROUP, and UP1LVL
  13. Click OK to close the Image Collection Editor
  14. To create a new toolbar, on the Toolbox, click the ToolBar button and click on the form
  15. In the Properties window, click the ImageList field and, from its combo box, select imageList1
    set the Appearance to Flat
  16. To add the controls to the toolbox, in the Properties window, click the ellipsis button Ellipsis of the Buttons field
  17. In the ToolBarButton Collection Editor, click the Add button
  18. In the Properties section, click the ImageIndex field and, from its combo box, select 0
  19. Click the Add button again and set its ImageIndex to 1
  20. Click the Add button again and, while the new item is still selected, click the arrow of the Style field and select Separator
  21. Click Add again. While the new item is still selected, in the Properties section
    click the arrow of the Style field and select DropDownButton
    Set its ImageIndex to 3
    click the arrow of the DropDownMenu and select mnuNewContext
  22. Click Add again and set the ImageIndex of this last button to 2
  23. Click OK to close the ToolBarButton Collection Editor
  24. To create a new popup menu, on the Toolbox, double-click ContextMenu
  25. Change its Name to mnuViewContext
  26. On the form, click Context Menu. Click Type Here
  27. Type &Toolbar and press the down arrow key
  28. Type &Status Bar
  29. Click the blue box on the left side of the new Status Bar menu item to add a check mark to it
  30. In the same way, click the blue box on the left side of the new Toolbar menu item to add a check mark to it
  31. Click the body of the form to select it
  32. On the main menu of the form, click View and double-click Toolbar
  33. Implement the event as follows:
      
    Private Sub MenuItem15_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MenuItem15.Click
        ToolBar1.Visible = Not ToolBar1.Visible
        MenuItem15.Checked = Not MenuItem15.Checked
End Sub
  34. Test the application
     
    Using a drop down menu on a toolbar button
  35. Close it and return to MSVB
 

Toolbar Programming

The controls on a toolbar are controls by their owner, the toolbar. In order to write code for a control, you must first locate it. The buttons are located in a collection called Buttons. Each button can be located by calling the IndexOf() methods. Once this gives you access to a button, you can write its code as you see fit.

Practical LearningPractical Learning: Writing Code For a Toolbar
  1. On the form, double-click the toolbar to access its Click event
  2. Implement the event as follows:
      
    Private Sub ToolBar1_ButtonClick(ByVal sender As System.Object, ByVal e As System.Windows.Forms.ToolBarButtonClickEventArgs) Handles ToolBar1.ButtonClick
        Dim IndexOfButtonSelected As Integer

        IndexOfButtonSelected = ToolBar1.Buttons.IndexOf(e.Button)

        If IndexOfButtonSelected = 3 Then
            End
        End If
End Sub
  3. Execute the application
 

The Multiple Document Interface (MDI)
 

Introduction to MDI-Based Applications

A multiple document interface, abbreviated MDI, is an application whose main form directly "owns" other forms. The main form is also considered the parent. The forms that the parent form owns can display only within the rectangular borders of the parent form. The main idea behind an MDI is to allow the user to open different documents and work on them without having to launch another instance of the application.

As opposed to an MDI, a Single Document Interface (SDI) allow only one document at a time in the application.

WordPad is an example of an SDI. The user can open only one document at a time. If he wants another WordPad document, he must open an additional instance of WordPad.

Each form that is child of the main form in an MDI can be a fully functional form and most, if not all, child forms are of the same kind. There are two main ways a child document of an MDI displays. To provide information about its state, a child form is equipped with a title bar. The title bar of a child form displays an icon, the name of its document, and its own system buttons. Since it can be confined only within the parent form, it can be minimized, maximized, or restored within the parent form. When a child form is not maximized, it clearly displays within the parent form. If it gets closed and there is no other child form, the parent form would appear empty. If there are various child forms, they share the size of the client area of the parent form. If one of the child forms is maximized, it occupies the whole client area of the main form and it displays its name on the title bar of the main form.

 

MDI Creation

It is not particular difficult to create an MDI application. The challenge may come when you need to configure its functionality. To start, you must set a form to be the eventual parent of the application. This can be taken care of by setting its IsMDIContainer property to true. After doing this, the body of the form is painted in gray with a sunken client area that indicates that it can host other form.

After creating the parent form of the MDI, you must provide a way to display a child form when needed. This is usually done with a menu, which we haven't covered yet. When displaying a child form of the MDI, access its MdiParent property and assign it the name of the parent form. Then display the child.

Practical LearningPractical Learning: Creating an MDI
  1. Start a new Windows Application and name it MDITest1
  2. While the main form is still displaying, in the Properties window, change the following values:
    IsMdiContainer: True
    Size -> Width: 620
    Size -> Height: 400
  3. To add another form that will be used as a child, on the main menu, click Project -> Add Windows Form...
  4. In the Add New Item dialog box, replace the contents of the Name edit box with Baby and press Enter
  5. To display the first form, in the code editor, click the Form1.vb [Design] tab
  6. Double-click in the middle of the first form to access its Load() event and implement it as follows:
      
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Dim MyBaby As Form

        MyBaby = New Baby
        MyBaby.MdiParent = Me
        MyBaby.Show()
    End Sub
  7. Execute the application
  8. Close it and return to MSVB
 
Previous Copyright © 2004-2010 FunctionX, Inc. Next