Working with Menus

#  How to create menus and options?

#  How to use graphic methods such as Circle and Line?

#  How to use properties related to drawing?

#  Properties of an option

#  How to check and uncheck options?

#  How to create and use submenu?

#  How to work with radio menu items?

#  How to use Popup Menus?

What is a Menu?

A menu is a collection of options. Whenever user clicks on a menu, all its options are displayed so that user can select an option. Each option in the menu initiates an action.

In Visual Basic, each Form can contain a menu. Once a menu is attached to a form it cannot be attached to any other Form.

In Visual Basic, a menu is designed using Menu Editor.

Code for the options of the menu is written using Code Window. For each option, code is written for click event. In other words, whenever user selects an option Click event occurs and the code written for Click event procedure will be executed.

Note: Click is the only event available for options in menu.

Sample Application

Now let us develop an application to understand various types of options available in VB. This sample application covers plain options, separators, submenus, check options and options that are mutually exclusive (radio menu options).

The following table (table 7.1) explains what each option in the menu system is supposed to do.

Draw	Style
Circle         F2	Size…          Ctrl + S
Rectangle   F3	Draw Style
Line            F4	Sold
	Dot
Exit	Dash
	Fill             Ctrl + F

Option	What it does?
Circle	Draws a circle with a radius of 200 units (by default) and with center point at a random location. Shortcut key is F2.
Rectangle	Draws a rectangle with random points. Shortcut key is F3.
Line	Draws a line with random points. Shortcut key is F4.
Exit	Exits program.
Size	Prompts the user to enter size to be used to draw line and changes the DrawWidth of the form. Shortcut key is CTRL + S.
Draw Style	This is a submenu. It contains three options, Solid, Dot, and Dash. Only one of the three options can be selected at a time. Drawing takes place in the selected style. By default Solid is selected.
Fill	It is a check option. If it is checked then circles and rectangles that are drawn subsequently will be filled otherwise they are not filled. Default is unchecked. If it is checked then Draw Style option is to be disabled. Shortcut key is CTRL + F.

Table  7.1: Description of options in sample application.

Shortcut Key

A shortcut key is a key sequence that can be used from anywhere in the application to select an option.  For example, if shortcut key of a menu item is F2, then from anywhere in the application you can press F2 to select the menu item. This is much easier way of selecting a menu item. Because, otherwise, we have to select the menu in which the option is and then select the menu item. Shortcut keys make selection faster. That is the reason they are generally assigned commonly used options.

Creating Sample Application and Menu

Now, let us understand how to create menu system step-by-step.

1.      Select File->New Project.  Choose Standard Exe project type.

2.      When Form is displayed, choose Tools -> Menu Editor

This will invoke menu editor

3.      Enter &Draw in Caption field and press Tab key to move to Name field.

4.      Enter mnudraw as the name of the menu

5.      Click on Next button at the bottom.

At this stage highlighted bar moves to next item at the bottom of the Menu Editor and focus is shifted to Caption field.

6.      Enter &Circle as Caption and press tab key.

7.      Enter mnucircle as the Name of the option.

8.      Use Shortcut drop-down Listbox and select F2 as the shortcut key.

At this stage, both Draw and Circle are at the same indent level. But as Circle is an option in Draw menu, Circle option should be pushed towards right using right arrow key in Menu Editor.

For the remaining enter the following.

Caption	Name	Shortcut key
&Rectangle	Mnurectangle	F3
&Line	Mnuline	F4
-	Mnusep1
&Exit	Mnuexit

9.      Enter Style as the caption for second menu.

As we have been working with options, we are at first indent level (option level). But Style is a menu and it should be at left most.

10.  Select Style menu and click on left arrow to move left.

11.  Click on Next button

12.  Enter &Size as the caption of first option in the second menu. And select Shortcut key CTRL+ S.

13.  And enter the following options:

Caption	Name	Shortcut Key
&Size…	Mnusize	Ctrl + S
&Draw Style	Mnuds
&Solid	Mnusolid
&Dot	Mnudot
&Dash	Mnudash
&Fill	Mnufill	Ctrl + F

Increase indent level of Solid, Dot, and Dash options so that they make up a sub menu for Draw Style option.

At the end of the entire menu your Menu Editor

Writing Code for options

We have just created required menus and options. Now, let us write code for CLICK event of options in Draw menu.

1.      At design time click on the Draw menu

2.      When Visual Basic displays options in Draw menu, select Circle option.

3.      Visual Basic takes you into Code Window and displays event procedure for CLICK event.

4.      Enter the code

Private Sub mnucircle_Click()

 Dim x, y

 ' draw a circle at a random location

 x = Rnd * Me.ScaleWidth

 y = Rnd * Me.ScaleHeight

 Circle (x, y), 200 'radius is 200

End Sub

Listing 7.1: Code for Circle option of Draw menu.

Before we proceed let us spend some time with new command used in the above listing.

RND function

Returns a random number in the range 0 to 1.

Circle Method

Draws a circle by taking coordinates of the starting point and the radius. Circle method can also be used to draw arc, ellipse etc.

Circle [Step] (x, y), radius, [color, start, end, aspect]

The following table explains each options of circle method.

Step	Specifies the x, y coordinates are relative to the current position.
X, Y	X and Y coordinates of the center point.
Radius	Radius of the circle
Color	Color to be used to draw circle.
Start, End	Specifies starting and ending angles in radius when drawing Arc or Ellipse.
Aspect	Specifies the aspect ratio. The default is 1.0

5.      In the same manner write code for Rectangle and Line options as show in listing 7.2.

Private Sub mnurectangle_Click()

  Dim sx, sy, ex, ey

 'draw a rectangle connecting two random points

 sx = Rnd * Me.ScaleWidth

 ex = Rnd * Me.ScaleWidth

 sy = Rnd * Me.ScaleHeight

 ey = Rnd * Me.ScaleHeight

 Line (sx, sy)-(ex, ey), , B

End Sub

Private Sub mnuline_Click()

 Dim sx, sy, ex, ey

 ' draw a line connecting two random points

 sx = Rnd * Me.ScaleWidth

 ex = Rnd * Me.ScaleWidth

 sy = Rnd * Me.ScaleHeight

 ey = Rnd * Me.ScaleHeight

 Line (sx, sy)-(ex, ey)

End Sub

Listing 7.2: Code for Rectangle and Line options.

Line Method

Draw a line or a rectangle connecting given two points.

Line [Step] (x1, y1) [Step] - (x2, y2), [color], [B][F]

The following table explains each of the available options.

Object	Any object that supports LINE method.
X1,y1	Coordinates of the first point.
X2, Y2	Coordinates of the second point.
Color	Color to be used to draw Line or Rectangle.
B	Causes a Box to be drawn.
F	Fills the box. It cannot be used without using B.

Writing code for Size option

Size option has to take a number from the user and change Drawwidth property of the Form so that the new width effects drawings that will take place subsequently. The following is the code for Size option.

Private Sub mnusize_Click()

Dim ssize As String

   ssize = InputBox("Enter line size", "LineSize", 2)

   ' user has not clicked on Cancel button

   If ssize <> "" Then

       Me.DrawWidth = Val(ssize)

   End If

End Sub

Listing  7.3: Code for Size option.

InputBox Function

It is used to accept a value from user.  It contains two command buttons, Ok and Cancel,  The prompt and  a textbox where you enter the value.  it is one of the predefined dialog boxes in Visual Basic.  We have already used, other predefined dialog box called Message Box.

 

The following is the syntax of InputBox function.

InputBox (prompt[,title] [,default] [,xpos] [,ypos] [,helpfile, context])

The following is the list of options and their meaning.

Prompt	The message to be displayed in Inputbox. This could be up to 1024 characters.
Title	The title to be displayed in the title bar of Inputbox.
Default	The value to be taken when user doesn’t enter any value.
Xpos	X coordinate from where the Inputbox is to be displayed.
Ypos	Y coordinate from where the Inputbox is to be displayed.
Helpfile,  Context	Identify the help file and context id in help file. It these two are given then user can press F1 to display help.

InputBox function returns the value entered by the user. If user clicks on Cancel button, Inputbox return zero-length string (“”).

DrawWidth property

Specifies the width of the line for output by graphics methods such as Line, Circle, etc. The value assigned to this property may be in the range 1 to 32767. And the value is specified in Pixels.

Note: If the value of DrawWidth is more than 1 then DrawStyle property settings 1 to 4 produce a solid line.

Writing code for Fill option

When Fill option is checked, the objects will be filled with solid color. If it is unchecked , the objects are drawn but not filled with solid color. This option is an example of check option. It is either checked, in which case a check mark appears on the left, or unchecked, in which case no check mark is displayed.

In our program, when this option is checked then rectangles and circles will be filled. See listing 7.4, for the code of Fill option.

Private Sub mnufill_Click()

 If mnufill.Checked Then

   mnufill.Checked = False

   Me.FillStyle = vbFSTransparent

   ' enable mnulinstyle option

   mnudrawstyle.Enabled = True

 Else

   mnufill.Checked = True

   Me.FillStyle = vbFSSolid

   ' disable mnulinstyle option

   mnudrawstyle.Enabled = False

 End If

End Sub

Listing  7.4: Code for Fill option.

If option is currently checked then the code does the following:

¨       Sets Checked property to false to uncheck the option

¨       Turns off filling by setting FillStyle property to 1 (Transparent).

¨       Enable Draw Style sub menu.

If option is currently unchecked then the code does the following:

¨       Sets Checked property to true to check the option

¨       Sets FillStyle property to 0 (Solid) so that future drawings will be filled

¨       Disables Draw Style sub menu because change to DrawStyle is not visible when drawings are filled.

FillStyle property

Returns or sets the pattern used to fill Shape controls as well as circles and boxes created with the Circle and Line methods.

The following are the available settings.

Constant	Setting	What it uses to fill?
VbFSSolid	0	Solid
VbFSTransparent	1 (Default)	Transparent
VbHorizontalLine	2	Horizontal Line
VbVerticalLine	3	Vertical Line
VbUpwardDiagonal	4	Upward Diagonal
VbDownwardDiagonal	5	Downward Diagonal
VbCross	6	Cross
VbDiagonalCross	7	Diagonal Cross

Note: Use FillColor property to change the color used for filling.

Writing code for Draw Style submenu

This submenu contains three options. Out of these three options only one option can be selected   ( checked) at a time. So when an option is selected, the remaining two options are to be unchecked.  Each option changes DrawStyle property of the form to the required setting. For instance, when DOT option is selected DrawStyle property is set to vbDot

Here is the code for all three options in this submenu.

Private Sub mnusolid_Click()

   ‘ Check SOLID option and uncheck other options

    mnusolid.Checked = True

    mnudot.Checked = False

    mnudash.Checked = False

    Me.DrawStyle = vbSolid

End Sub

Private Sub mnudot_Click()

    ‘ Check DOT option and uncheck other options

    mnusolid.Checked = False

    mnudot.Checked = True

    mnudash.Checked = False

    Me.DrawStyle = vbDot

End Sub

Private Sub mnudash_Click()

    ‘ Check DASH option and uncheck other options

    mnusolid.Checked = False

    mnudot.Checked = False

    mnudash.Checked = True

    Me.DrawStyle = vbDash

End Sub

Listing 7.5: Code for options in Draw Style sub menu.

Test Run

To test the options, run the program and take the following steps.

1.      Run program using F5

You should see an empty Form

2.      Select Draw-> Circle to draw a circle.  You should see a small circle at right-bottom of the form.

3.      Turn on Fill option by selecting Style->Fill

4.      Select Draw->Circle again. You will see a filled circle on the form.

5.      If you select Style menu again, you should see a check mark on the left of Fill option, and also note that Draw Style option is disable.

6.      Turn off Filling by selecting Style->Fill.

7.      Select Style->Draw Style->Dot to change the drawing style. If you select Style->Draw Style again, you will find only Dot checked and the rest unchecked.

8.      At this stage your form contains a few graphic objects. Now move some other window on to your form and remove the window. This action will erase all the graphic objects you have drawn. 

Note: To retain the graphics that you are drawing even after an overlap, set AutoRedraw property of the form to true. Please see on-line help for more details.

Properties of a Menu Item

The following are the properties of menu items.

Property	Meaning
Caption	Contains the text to be displayed.
Name	The name using which the menu item is identified.
Checked	If it is set to true, menu item appears with a check mark  on the left.
Enabled	If it is set to false, menu item gets disabled, and it cannot be selected.
Visible	If it is set to false, menu item will be invisible.
Helpcontextid	Contains the context number of the help topic that is to be displayed when user presses F1 by highlighting the menu item. If it is set to 0 then there is no context-sensitive help.
Index	Used to uniquely identify a menu item in menu array. Please see the section on Menu Array.

Table 7.2: Properties of menu items

Menu Array

Some times you encounter a case where two or more menu items have more or less the same code. In this case writing code for each item may be lengthy and redundant. The solution to this problem is creating a menu array with the options that have more or less the same code.

The following are the characteristics of a menu array.

¨       All the menu items that are part of menu array have same name.

¨       All the menu items that are part of menu must have unique index value. The unique index value is set using Index property.

¨       When user selects any of the menu items in the menu array  only one event procedure occurs with the name as shown below, and with Index parameter to identify the menu item that actually caused the event.

menuarrayname_click (index as integer)

In our sample program, if you observe, you find menu items Solid, Dash, and Dot are ideal for a menu array.  The following is the sequence of steps to be taken to convert those three menu items to a menu array and also the revised code.

Steps to create menu array

1.      Invoke menu editor using Tools->Menu Editor.  You can invoke Menu Editor only when you are on Form. If you are in Code window then Menu Editor options will be disabled.

2.      Select menu item Solid and change the Name to mnuds and change Index property to 0.

3.      Change the name of Dash menu item to mnuds and Index to 1.

4.      Change the name of Dot menu item to mnuds and Index to 2.

5.      Click on Ok button to exit Menu Editor

Writing code for menu array

All menu items in the menu array invoke the same event procedure. All menu items of the menu array (MNUDS) will invoke the following event procedure.

Private Sub mnuds_Click(Index As Integer)

 ‘write code here. Index property contains the index value of the

 ‘menu item that is selected by the user.

End Sub

Listing  7.6: Code for menu array

Now let us write code for Click event of mnuds. See listing 7.7 for complete code.

Note: Index property of menu array event procedure contains the index of the  menu item that has been selected.

Private Sub mnuds_Click(Index As Integer)

Dim i as integer

  ' first uncheck all menu items in the menu array

  For i = 0 To 2

      mnuds(i).Checked = False

  Next

  ' set checked property of menu item that is selected by user

  mnuds(Index).Checked = True

 

  'set DRAWSTYLE property to index because the value of index property

  'of the menu item and the required setting are matching.

  'INDEX property value            Required setting of DRAWSTYLE

  '--------------------------------------------------------------

  '       0  (Solid)                            0 - vbsolid

  '       1  (Dash)                             1 - vbdash

  '       2  (Dot)                              2 - vbdot

 

Me.DrawStyle = Index    ' change DrawStyle setting

End Sub

Listing 7.7: Code for menu array.

Popup Menu

Popup menu is a menu that pops up on the form. This menu is not displayed at the top of the form like normal menus, instead it is displayed when certain event occurs, such as user pressing right mouse button.

Visual Basic provides PopupMenu method for Form and MDIform objects to invoke a popup menu. Here is the syntax of the command.

PopupMenu menuname, flags, x, y, boldcommand

Here is the meaning of each parameter.

Parameter	Meaning
Menuname	name of the pop-up menu to be displayed.
Flags	value or constant that specifies the location and behavior of a pop-up menu. Please see on-line documentation for more information.
X	Specifies the x-coordinate where the pop-up menu is displayed. If omitted, the mouse coordinate is used.
Y	Specifies the y-coordinate where the pop-up menu is displayed. If omitted, the mouse coordinate is used.
Boldcommand	Specifies the name of a menu control in the pop-up menu to display its caption in bold text. If omitted, no controls in the pop-up menu appear in bold.

Let us develop a simple form, which displays a popup menu when user clicks on right button. the popup menu contains the following options and meaning.

Option	Meaning
Clear	Clears the content of the form.
Maximize	Maximizes the form.
Move Left	Moves the form towards left by 200 units.
Move Right	Moves the form towards right by 200 units.

Table 7. 3:  Options in Popup menu.

Creating sample form with popup menu

Following are the steps to create popup menu.

1.      Create new project using File-> New Project and select Standard Exe as the type of the project.

2.      Change Caption property of the form to Demonstration of Popup menu.

3.      From Form1, select Tools -> Menu Editor.

4.      Create a single menu with name,  mnupopup, and required options  

5.      Write the following code for menu items.

Private Sub mnuclear_Click()

 ' clear the contents on form

  Me.Cls

 

End Sub

Private Sub mnumaximize_Click()

   ' maximize the form

   Me.WindowState = vbMaximized

  

End Sub

Private Sub mnumoveleft_Click()

  ' move form towards left by 200 units

  Me.Left = Me.Left - 200

End Sub

Private Sub mnumoveright_Click()

    ' move form towards right by 200 units

    Me.Left = Me.Left + 200

End Sub

Listing 7. 8: Code for options of popup menu.

6.      Invoke the popup menu (frmpopup) using PopupMenu method whenever user click right mouse button using the following code.

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)

   ' invoke popup menu when right button is clicked

   If Button = 2 Then

       Me.PopupMenu mnupopup, , X, Y

   End If

       

End Sub

Listing  7.9 : Code to invoke popup menu

1.      Run the project using F5.

2.      Click the right button of the mouse. Form displays a popup menu

3.      Selecting Move Left option will move form towards left by 200 units.

Exercises

1.      What is the name of the parameter in event procedure of menu array that identifies the menu item at which the event occurred?

2.      Which property of the menu item is used to disable menu item?

3.      Which is the caption of a separator?

4.      Which property is used to increase the width of the line drawn using Line method?

5.      What is the return value of Rnd function?

6.      How do you make all the options of a menu unavailable?

7.      What does AutoRedraw property in a form do?

8.      Convert options Circle, Rectangle, and Line to a menu array and rewrite the code.

9.      Make options Draw Style invisible when option Fill is checked and make it visible when Fill is unchecked.

10.  What is the use of shortcut key?