Schongar P.VBScript unleashed.1997

Review

In this chapter, you learned about the parts of the ActiveX Control Pad. You saw how to use the ActiveX Control Pad to insert ActiveX objects. You examined the Script Wizard and how you can use it to generate VBScript code. Finally, you looked at HTML layouts and how they can be created, scripted, and manipulated in your own HTML files.

Chapter 9

More ActiveX Controls

by Evangelos Petroutsos

CONTENTS

The Popup Menu and Menu Controls

The Popup Menu

The Menu Control

The Popup Window Control

The Marquee Control

The Chart Control

The Chart Example

Review

The ActiveX controls explored in the previous chapter come with Internet Explorer. Since the release of Internet Explorer and the ActiveX Control Pad, Microsoft introduced a number of additional ActiveX controls, and there will be many more in the future, both from Microsoft and from third-party companies. In this chapter, we are going to explore a few additional ActiveX controls, which we believe you'll find very useful in VBScript programming. These are the Popup Menu and Menu controls, which let you incorporate menu structures in your documents; the Marquee control, which lets you scroll a page within another page; the Popup Window control, which can display a URL in a window without switching the browser to another URL; and the Chart control, which presents numeric data to the viewer as graphs.

Automatic Component Installation

As mentioned, the additional ActiveX controls we are going to explore in this chapter, as well as a large number of ActiveX controls that will become available in the future from Microsoft and third-party companies, are not automatically installed with Internet Explorer 3.0. So, what will happen if the users of your application don't have the controls already installed on their systems? A common property of all ActiveX controls is called CodeBase, and is the URL of the control's code. If the control hasn't been installed on a given client, Internet Explorer will connect to the URL specified by the CodeBase property and download and install the control.

The first time you open any of this chapter's projects, you might experience a delay while the message "Downloading components" appears in the browser's status bar. Internet Explorer is downloading the missing components from the appropriate URLs. Once a component (an ActiveX control) has been installed on your system, Internet Explorer won't download it again. When an ActiveX control is installed, it's registered in the Windows Registry and other applications can find it there. The URL for the Chart control, for instance, is

"http://activex.microsoft.com/controls/iexplorer/

iechart.ocx

#Version=4,70,0,1161"

Of course, the missing components won't be installed unless you are already connected to the Internet. If you are testing the examples locally, you must first establish a dialup connection to your Internet service provider, so that Internet Explorer can connect to the URL specified by the CodeBase property.

When the Downloading components message is displayed on your browser's window, you needn't worry about your system's security. No components will be installed directly from this book's CD; the ActiveX controls will be installed directly from Microsoft's Web site.

The values of the CodeBase property for the ActiveX controls covered in this chapter are listed next. In general, every time you include an ActiveX control in your projects, you should find out the value of the CodeBase property from the control's manufacturer and include it in the control's definition with a line similar to the following ones:

Menu control:

CODEBASE="http://activex.microsoft.com/controls/

iexplorer/btnmenu.ocx#Version=4,70,0,1161"

Chart control:

CODEBASE="http://activex.microsoft.com/controls/

iexplorer/iechart.ocx#Version=4,70,0,1161"

Popup menu:

CODEBASE="http://activex.microsoft.com/controls/

iexplorer/iemenu.ocx#Version=4,70,0,1161"

Popup window:

CODEBASE="http://activex.microsoft.com/controls/

iexplorer/iepopwnd.ocx#Version=4,70,0,1161"

The Popup Menu and Menu Controls

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:

Clear	This 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 menuItem	Appends 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 index	Removes 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:

<OBJECT ID="IEPOP1"

CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2"

STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;

TABINDEX:0;ZINDEX:3;">

<PARAM NAME="_ExtentX" VALUE="582">

<PARAM NAME="_ExtentY" VALUE="0">

</OBJECT>

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:

<PARAM NAME="MenuItem[0]" value="First menu item">

<PARAM NAME="MenuItem[1]" value="Second menu item">

<PARAM NAME="MenuItem[2]" value="Third menu item">

<PARAM NAME="MenuItem[3]" value="Fourth menu item">

<PARAM NAME="MenuItem[4]" value="Fifth menu item">

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 rightclicks 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 Button<>2 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:<SCRIPT LANGUAGE="VBScript">

2:<!--

3:

4:Sub Image1_MouseDown(Button, Shift, X, Y)

5:If Button<>2 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 Button<>2 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 Button<>2 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:</SCRIPT>

38:<DIV ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:545pt;HEIGHT:330pt;">

39:<OBJECT ID="Image1"

40:CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"

STYLE="TOP:33pt;LEFT:17pt;WIDTH:243pt;HEIGHT:153pt;

ZINDEX:0;">

41:<PARAM NAME="PicturePath" VALUE="mission.bmp">

42:<PARAM NAME="BorderStyle" VALUE="0">

43:<PARAM NAME="SizeMode" VALUE="3">

44:<PARAM NAME="SpecialEffect" VALUE="1">

45:<PARAM NAME="Size" VALUE="8571;5396">

46:<PARAM NAME="PictureAlignment" VALUE="0">

47:<PARAM NAME="VariousPropertyBits" VALUE="19">

48:</OBJECT>

49:<OBJECT ID="Image2"

50:CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"

STYLE="TOP:41pt;LEFT:305pt;WIDTH:243pt;HEIGHT:183pt;

ZINDEX:1;">

51: <PARAM NAME="PicturePath" VALUE="bridges.bmp">

52:<PARAM NAME="BorderStyle" VALUE="0">

53:<PARAM NAME="SizeMode" VALUE="3">

54:<PARAM NAME="SpecialEffect" VALUE="1">

55:<PARAM NAME="Size" VALUE="8571;6454">

56:<PARAM NAME="PictureAlignment" VALUE="0">

57:<PARAM NAME="VariousPropertyBits" VALUE="19">

58:</OBJECT>

59:<OBJECT ID="Image3"

60:CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"

STYLE="TOP:182pt;LEFT:107pt;WIDTH:243pt;HEIGHT:153pt;

ZINDEX:2;">

61:<PARAM NAME="PicturePath" VALUE="lake.bmp">

62:<PARAM NAME="BorderStyle" VALUE="0">

63:<PARAM NAME="SizeMode" VALUE="3">

64:<PARAM NAME="SpecialEffect" VALUE="1">

65:<PARAM NAME="Size" VALUE="8571;5396">

66:<PARAM NAME="PictureAlignment" VALUE="0">

67:<PARAM NAME="VariousPropertyBits" VALUE="19">

68:</OBJECT>

69:<OBJECT ID="IEPOP1"

70:CLASSID="CLSID:7823A620-9DD9-11CF-A662-00AA00C066D2"

STYLE="TOP:239pt;LEFT:355pt;WIDTH:17pt;HEIGHT:0pt;

TABINDEX:0;ZINDEX:3;">

71:<PARAM NAME="_ExtentX" VALUE="582">

72:<PARAM NAME="_ExtentY" VALUE="0">

73:</OBJECT>

74:<OBJECT ID="Label1"

75:CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"

STYLE="TOP:8pt;LEFT:58pt;WIDTH:396pt;HEIGHT:17pt;ZINDEX:4;">

76:<PARAM NAME="Caption" VALUE="Click on a city's picture

to see more

topics and information">

77:<PARAM NAME="Size" VALUE="13970;582">

78:<PARAM NAME="FontName" VALUE="Verdana">

79:<PARAM NAME="FontHeight" VALUE="220">

80:<PARAM NAME="FontCharSet" VALUE="0">

81:<PARAM NAME="FontPitchAndFamily" VALUE="2">

82:<PARAM NAME="ParagraphAlign" VALUE="3">

83:<PARAM NAME="FontWeight" VALUE="0">

84:</OBJECT>

85:<OBJECT ID="Label2"

86:CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"

STYLE="TOP:50pt;LEFT:165pt;WIDTH:91pt;HEIGHT:17pt;

ZINDEX:5;">

87:<PARAM NAME="ForeColor" VALUE="65535">

88:<PARAM NAME="VariousPropertyBits" VALUE="8388627">

89:<PARAM NAME="Caption" VALUE="Santa Barbara">

90:<PARAM NAME="Size" VALUE="3202;582">

91:<PARAM NAME="FontName" VALUE="Comic Sans MS">

92:<PARAM NAME="FontEffects" VALUE="1073741825">

93:<PARAM NAME="FontHeight" VALUE="220">

94:<PARAM NAME="FontCharSet" VALUE="0">

95:<PARAM NAME="FontPitchAndFamily" VALUE="2">

96:<PARAM NAME="FontWeight" VALUE="700">

97:</OBJECT>

98:<OBJECT ID="Label3"

99:CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"

STYLE="TOP:190pt;LEFT:132pt;WIDTH:91pt;HEIGHT:17pt;

ZINDEX:6;">

100:<PARAM NAME="ForeColor" VALUE="255">

101:<PARAM NAME="VariousPropertyBits" VALUE="8388627">