ActiveX controls provide all the functionality of a typical Windows application from within Internet Explorer's environment. But there is one function, which is so common among Windows applications, that isn't available to your VBScript applications-the menu bar. HTML layouts don't have a menu bar, and there's no ActiveX control you can place on a layout that would provide the functionality of a menu bar. There are, however, two ActiveX controls that provide a similar functionality. They are not as convenient or flexible as the elaborate Windows menu structures, but they provide the basic functionality of a menu structure. They are the Popup Menu control, which causes a popup menu to be displayed anywhere on the browser's window, and the Menu control, which is a like a custom command button that displays a drop-down menu every time it's clicked.
The Popup Menu
Let's start our discussion with the Popup Menu control, which is the simpler one. Figure 9.1 shows a popup menu that acts as a shortcut menu. [It's displayed when the user right-clicks a specific area of the layout.] The layout of Figure 9.1 contains three Image controls, each with a picture of a different city. Each time the user right-clicks one of the images, a popup menu is displayed with choices about the specific city. The shortcut menus are also context-sensitive, because each one can be invoked only when the pointer is on top of an Image control.
Figure 9.1 : The Popup Menu document uses the Popup Menu control to display shortcut menus.
The Popup Menu control provides four methods that let you manipulate its contents and display it:
ClearThis method clears the menu [removes any existing options] in preparation for a new menu structure. If you must change the items of a Popup Menu control at runtime, you must first clear its current contents. AddItem menuItemAppends another option [command] to the popup menu. menuItem is the string you want to appear in the menu. To insert an option at a specific location in the menu, supply the item's index in the menu. [The first option has index 1.] The statement IEPop1.AddItem "This is the third choice", 1 will insert the specified string at the first menu item. IEPop1 is the default name for the first Popup Menu control placed on a layout or form. RemoveItem indexRemoves the item at the specified index.The statement IEPop1.RemoveItem 1 removes the first item in the menu. The popup menu has two properties, one of them being the ItemCount property, which reports the number of items in the menu. To remove the last item, use the statement IEPop1.RemoveItem IEPop1.ItemCount PopUp [x, y]This method causes the Popup Menu control to pop up on the screen. x and y are the coordinates of the upper-left corner of the control, and you can use them to control the popup menu's location. Both arguments are optional, and if you omit them the menu will pop up at the pointer's location. The values of the x and y coordinates are relative to the window, with the origin being the window's upper-left corner.
To display a popup menu from within a command button's Click event, insert a statement like the following in the button's Click event handler:
Sub CommandButton1_Click[] IEPop1.Popup End Sub
To find out whether the user has clicked a menu item, use the Click event of the control, which reports the index of the item that was clicked:
Sub IEPop1_Click[index] MsgBox "Item # " & index & " was selected" End Sub
The Popup Menu Project
After this introduction to the Popup Menu control, you can look at the implementation of the Popup Menu project, which you will find in this chapter folder on the CD. Create a layout with the three Image controls and then place a Popup Menu control somewhere on the layout. The popup menu is not in the toolbox, so you'll have to customize your toolbox by adding an extra control. Right-click an empty area of the current page [or create a new page, if you plan to add many new controls] and from the shortcut menu select Additional controls. In the Insert ActiveX dialog box that will appear, locate Popup Menu Object and click OK. The icon of the new control will be added to the toolbox's current page. Select the tool and draw a small rectangle on the layout.
The size of the Popup Menu control on the layout has nothing to do with its actual size when it pops up. The actual size of the control depends on the number of choices it contains-and it will be large enough to accommodate them all. One thing you should keep in mind is that the current implementation of the control isn't invisible. Instead, a white stripe with the size of the control at design time will remain visible on the layout. Once the Popup Menu control has been placed on the layout, reduce it to a single line to avoid this white stripe on the layout at runtime. The Popup Menu control doesn't have many properties you can set at design time through the Properties window anyway.
If you save the layout now and look at its code, you'll see that the following definition was inserted by the Control Pad:
The menu inserted with the previous OBJECT definition doesn't contain any item yet. Instead, you must add its items with the AddItem method from within your script. To assign some initial items to the popup menu, insert additional PARAM tags with the MenuItem property, as follows:
The MenuItem property is an array with as many elements as there are options in the menu. Notice that where the indexing of the menu item starts at 1, the MenuItem array's indexing starts at zero.
Before you display the popup menu you just placed on the layout, you must populate it with the AddItem method. Use the Script Wizard or your favorite text editor to edit the Click event handler for each Image control. We could have used three Popup Menu controls in our design, one for each image. But because we want to demonstrate how to manipulate popup menus dynamically with VBScript, we used a single one, which will be invoked when the user right-clicks an image. As soon as the code detects a right-click operation on one of the images, it must clear the menu and append the items for the specific image with the AddItem method. Here's the MouseDown event handler for Image1:
Sub Image1_MouseDown[Button, Shift, X, Y] If Button2 Then Exit Sub IEPop1.Clear IEPop1.AddItem "Manhattan" IEPop1.AddItem "Brooklyn Bridge" IEPop1.AddItem "Central Park" IEPop1.AddItem "Musicals" IEPop1.PopUp End Sub
[The Click event can't be used because it's not invoked with the right mouse button.] The code tests which button was pressed, and if it wasn't the right button it exits the subroutine. [You would probably execute a different command for the Click event.] Then the IEPop1 menu is cleared and populated with the menu items that apply to the image of New York City. The last statement causes the popup menu to be displayed on the window. The MouseDown event handlers for the other two Image controls are quite similar. They simply add different options to the popup menu.
After the user has made a selection, the popup menu's Click event is triggered, which reports the index of the selected item:
Sub IEPOP1_Click[item] MsgBox "You 've selected option " & item End Sub
The Popup Menu control doesn't provide a property that would return the actual string of the selected item, just its index. If you need access to the actual string from within your code, you must store the options in a global array and use the index returned by the Click event to access the values. Listing 9.1 is the complete listing of the PopMenu layout.
Listing 9.1. The PopMenu project's source code.
1: 2: 3: 4: Sub Image1_MouseDown[Button, Shift, X, Y] 5: If Button2 Then Exit Sub 6: IEPop1.Clear 7: IEPop1.AddItem "The beaches" 8: IEPop1.AddItem "Santa Barbara Peer" 9: IEPop1.AddItem "Riviera" 10: IEPop1.PopUp 11: End Sub 12: 13: Sub Image3_MouseDown[Button, Shift, X, Y] 14: If Button2 Then Exit Sub 15: IEPop1.Clear 16: IEPop1.AddItem "Golden Gate Bridge" 17: IEPop1.AddItem "Fisherman's Wharf" 18: IEPop1.AddItem "Alcatraz" 19: IEPop1.AddItem "Sausalito" 20: IEPop1.PopUp 21: End Sub 22: 23: Sub Image2_MouseDown[Button, Shift, X, Y] 24: If Button2 Then Exit Sub 25: IEPop1.Clear 26: IEPop1.AddItem "Manhattan" 27: IEPop1.AddItem "Brooklyn Bridge" 28: IEPop1.AddItem "Central Park" 29: IEPop1.AddItem "Musicals" 30: IEPop1.PopUp 31: End Sub 32: 33: Sub IEPOP1_Click[item] 34: MsgBox "You 've selected option " & item 35: End Sub 36: > 37: 38:39: 41: 42: 43: 44: 45: 46: 47: 48: 49: 51: 52: 53: 54: 55: 56: 57: 58: 59: 61: 62: 63: 64: 65: 66: 67: 68: 69: 71: 72: 73: 74: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124:
In a practical situation, the popup menu's Click event handler will do something more meaningful than simply displaying the index of the selected item. The project RTF Editor makes use of the popup menu to display the usual shortcut menu of a text editor, which implements the Cut, Copy, and Paste operations.
The Menu Control
The Menu control is quite similar to the Popup Menu control, only closer to the actual structure of a menu bar. Each Menu control remains visible on the screen at all times and looks like a command button, as shown in Figure 9.2. When the mouse pointer is moved over the Menu control, the control's caption takes a three-dimensional look. In addition, an arrow pointing down suggests that the menu leads to a submenu. It is possible to have menus without submenus, which behave similarly to command buttons, but they have the same look as the other Menu controls.
Figure 9.2 : The Menu applications demonstrate how to use the Menu controls to build menu bars, similar to ones deployed by most Windows applications.
To implement the project Menu, shown in Figure 9.2, we aren't going to use the Control Pad as usual, because Control Pad doesn't insert a meaningful definition in the HTML file. Start a new HTML document and manually insert the following definition: