Schongar P.VBScript unleashed.1997
.pdf
102:<PARAM NAME="Caption" VALUE="San Francisco">
103:<PARAM NAME="Size" VALUE="3202;582">
104:<PARAM NAME="FontName" VALUE="Comic Sans MS">
105:<PARAM NAME="FontEffects" VALUE="1073741825">
106:<PARAM NAME="FontHeight" VALUE="220">
107:<PARAM NAME="FontCharSet" VALUE="0">
108:<PARAM NAME="FontPitchAndFamily" VALUE="2">
109:<PARAM NAME="FontWeight" VALUE="700">
110:</OBJECT>
111:<OBJECT ID="Label4"
112:CLASSID="CLSID:978C9E23-D4B0-11CE-Bf2D-00AA003f40D0"
STYLE="TOP:198pt;LEFT:446pt;WIDTH:91pt;HEIGHT:17pt;
ZINDEX:7;">
113:<PARAM NAME="ForeColor" VALUE="16776960">
114:<PARAM NAME="VariousPropertyBits" VALUE="8388627">
115:<PARAM NAME="Caption" VALUE="New York">
116:<PARAM NAME="Size" VALUE="3202;582">
117:<PARAM NAME="FontName" VALUE="Comic Sans MS">
118:<PARAM NAME="FontEffects" VALUE="1073741825">
119:<PARAM NAME="FontHeight" VALUE="220">
120:<PARAM NAME="FontCharSet" VALUE="0">
121:<PARAM NAME="FontPitchAndFamily" VALUE="2">
122:<PARAM NAME="FontWeight" VALUE="700">
123:</OBJECT>
124:</DIV>
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:
<OBJECT
id=menu1
classid="clsid:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
width=80
height=25
align=middle
>
<param NAME="Caption" value="Menu">
</OBJECT>
This definition doesn't attach any items to the menu; you'll have to insert them manually with PARAM tags. The second Menu control (the File menu) in the Menu document was defined with the following OBJECT definition:
<OBJECT
id=menu1
classid="clsid:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
width=80
height=25
align=middle
>
<param NAME="Menuitem[0]" value="New">
<param NAME="Menuitem[1]" value="Open">
<param NAME="Menuitem[2]" value="Save">
<param NAME="Menuitem[3]" value="Save As">
<param NAME="Menuitem[4]" value="">
<param NAME="Menuitem[5]" value="EXIT">
<param NAME="Caption" value="File">
</OBJECT>
Notice the similarities between the Menu and Popup Menu controls. Moreover, the Menu control provides the same methods for manipulating the contents of the menu at runtime. The Clear, AddItem, RemoveItem, and PopUp methods work with the Menu control as well. It's doubtful that you'll ever need to call the PopUp method to expand a Menu control, but it's an option.
The Menu control has an ItemCount property that returns the number of items in the control, as well as a Caption property that sets the menu's title (the caption of the button). The index of the selected item is reported back to the program from within the control's Click event handler. This event is triggered when a menu option is selected. Because some menus might not lead to submenus, the Menu control recognizes the Select event, which is triggered only when the user clicks a Menu control without a submenu. (The arrow-down symbol will be missing from such a menu.) The Menu document contains three Menu controls and a multiline textbox (inserted with the TEXTAREA tag). The first Menu control is a single command that doesn't lead to a submenu. The other two have their own submenus that are the typical File and Edit submenus of a text-editing application. (VBScript can't save data on the local disk, so what's the point in a File menu? It is possible to store data on the local disk with VBScript; it just isn't a recommended, or common, practice yet. The options of the menus of this project were not implemented, of course. This example is meant to demonstrate how to manipulate the Menu control at runtime.)
The complete listing of the Menu document is shown in Listing 9.2.
Listing 9.2. The Menu document.
<HTML>
<HEAD>
<TITLE>Menu demo</TITLE>
<SCRIPT LANGUAGE=VBS>
Sub Menu1_Select(i)
MsgBox "You selected item # " & i & " from the File menu"
End Sub
Sub Menu2_Select(i)
MsgBox "You selected item # " & i & " from the Edit menu"
End Sub
Sub Menu0_Click()
MsgBox "You clicked on the Help menu!"
End Sub
</SCRIPT>
</HEAD>
<H1>The Menu Structure of a Text Editor</H1>
<P>
<OBJECT
id=menu0
CODEBASE="http://activex.microsoft.com/controls/iexplorer/
btnmenu.ocx#Version=4,7
0,0,1161"
classid="clsid:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
width=80
height=25
align=middle
>
<param NAME="Caption" value="Help">
</OBJECT>
<OBJECT
id=menu1
classid="clsid:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/
btnmenu.ocx#Version=4,7
0,0,1161"
width=80
height=25
align=middle
>
<param NAME="Menuitem[0]" value="New">
<param NAME="Menuitem[1]" value="Open">
<param NAME="Menuitem[2]" value="Save">
<param NAME="Menuitem[3]" value="Save As">
<param NAME="Menuitem[4]" value="">
<param NAME="Menuitem[5]" value="EXIT">
<param NAME="Caption" value="File">
</OBJECT>
<OBJECT
id=menu2
classid="clsid:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/
btnmenu.ocx#Version=4,7
0,0,1161"
width=80
height=25
align=middle
>
<param NAME="Menuitem[0]" value="Copy">
<param NAME="Menuitem[1]" value="Cut">
<param NAME="Menuitem[2]" value="Paste">
<param NAME="Menuitem[3]" value="Select All">
<param NAME="Menuitem[4]" value="">
<param NAME="Caption" value="Edit">
</OBJECT>
<BR>
<TEXTAREA rows=15 cols=100></TEXTAREA>
</HTML>
</HTML>
The Click event handlers of the File and Edit menus are quite similar. They simply report the index of the item selected. The Help menu's Click event handler reports in a message box that the menu was clicked.
The Popup Window Control
The Popup Window control is a small browser in a window that lets you display any valid URL without leaving the current page. Figures 9.3 and 9.4 show how the Popup Window control works. The page of Figure 9.3 contains two command buttons. When they are clicked, they display the MSN and Netscape pages in a separate window, like the one shown in Figure 9.4. The large window is a Popup Window control that contains the home page of the MSN site. The user can't do anything with it-can't click on hyperlinks, for example, or execute any scripts that happen to be on the page. In fact, as soon as a key is pressed the popup window disappears. Its sole purpose is to provide the user with a preview of an Internet site or document, from within another page.
Figure 9.3 : The PopupWin document lets the viewer preview two popular sites without actually switching to another
site.
Figure 9.4 : This is the MSN home page viewed in a popup window.
The OBJECT definition for the Popup Window control is
<OBJECT ID="PreVu1" WIDTH=1 HEIGHT=1
CLASSID="CLSID:A23D7C20-CABA-11CF-A5D4-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/
iepopwnd.ocx#Version=4,
70,0,1161>"
<PARAM NAME="_ExtentX" VALUE="5054">
<PARAM NAME="_ExtentY" VALUE="3519">
</OBJECT>
The control's dimensions in the OBJECT definition don't matter, because it will be resized to fit the page that's displayed
on it. To display the window, use the control's Popup method, which accepts two arguments: the URL of the document to be displayed in the popup window and an optional argument that determines whether the destination document will be resized to fit the popup window or not. The complete syntax of the Popup method is
PreVu1.Popup URL, True|False
where PreVu1 is the default name of the first popup window, URL is the URL of the document to be displayed on the window, and the last argument can be True or False value, which determines how the document will fit into the window: whether the document will be resized to fit the window, or the window will be resized to display the document in actual size. The popup window in Figure 9.4 was invoked with the statement:
PreVu1.Popup "http://www.microsoft.com", False
Figure 9.5 shows the same popup window, only this time it was invoked with the line
Figure 9.5 : You can specify that the destination document will be resized to fit in the available space.
PreVu1.Popup "http://www.microsoft.com", True
There is also a Dismiss method, which does the opposite. It closes the popup window programmatically. Any user action will close the popup window so the Dismiss method is used rarely, most likely from within a Timer event to close a popup window that remained on the screen for a long period.
The PopupWin example was created with Control Pad, as an HTML document. Start Control Pad, create a new HTML file, and using the Insert ActiveX control command, put two command buttons and a popup window on the document. The text was entered directly on the HTML document (it's not on a label or other control). Once the HTML file is generated for you (the PopupWin document you will find on the CD was edited a little to arrange the buttons), enter the following event handlers in the document's SCRIPT section:
Sub CommandButton1_Click
PreVu1.Popup "http://www.microsoft.com", True
End Sub
Sub CommandButton2_Click
PreVu1.Popup "http://www.netscape.com", False
End Sub
The two popup windows are invoked with a different URL and a different value for scaling. You can change the values True and False to see how they affect the appearance of each site. The code listing of the PopupWin document is in Listing 9.3.
Listing 9.3. The PopupWin document.
1:<HTML>
2:<HEAD>
3:<TITLE>The Popup Window control</TITLE>
4:<SCRIPT Language="VBSCRIPT">
5:Sub CommandButton1_Click
6:PreVu1.Popup "http://www.microsoft.com", True
7:End Sub
8:
9:Sub CommandButton2_Click
10:PreVu1.Popup "http://www.netscape.com", False
11:End Sub
12:
13:</SCRIPT>
14:</HEAD>
15:<BODY BGCOLOR=WHITE>
16:<H3>Click on one of the command buttons to view the MSN or Netscape
17:home page without actually leaving this page.
18:<P>
19:<OBJECT ID="PreVu1" WIDTH=10 HEIGHT=10
20:CLASSID="CLSID:A23D7C20-CABA-11CF-A5D4-00AA00A47DD2">
21:<PARAM NAME="_ExtentX" VALUE="5054">
22:<PARAM NAME="_ExtentY" VALUE="3519">
23:</OBJECT>
24:
25: <OBJECT ID="CommandButton1" WIDTH=123 HEIGHT=32
26:CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
27:<PARAM NAME="Caption" VALUE="Microsoft">
28:<PARAM NAME="Size" VALUE="3254;846">
29:<PARAM NAME="FontCharSet" VALUE="0">
30:<PARAM NAME="FontPitchAndFamily" VALUE="2">
31:<PARAM NAME="ParagraphAlign" VALUE="3">
32:<PARAM NAME="FontWeight" VALUE="0">
33:</OBJECT>
34:
35:
36:
37:<OBJECT ID="CommandButton2" WIDTH=123 HEIGHT=32
38:CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
39:<PARAM NAME="Caption" VALUE="Netscape">
40:<PARAM NAME="Size" VALUE="3254;846">
41:<PARAM NAME="FontCharSet" VALUE="0">
42:<PARAM NAME="FontPitchAndFamily" VALUE="2">
43:<PARAM NAME="ParagraphAlign" VALUE="3">
44:<PARAM NAME="FontWeight" VALUE="0">
45:</OBJECT>
46:</BODY>
47:</HTML>
The popup window is similar to the keywords of a Windows 95 help file. Although most keywords act as hyperlinks to other pages (or topics, in the case of help files), some keywords cause a small frame with a short explanation to be displayed. This should give you an idea of the kind of functionality you can place on your pages with the Popup Window control. Instead of displaying an entire new page (which, admittedly, isn't very practical), you can display a short HTML document that further explains a term on the current page. In this capacity, the Popup Window control is very useful, if you consider how many times you clicked on a hyperlink only to be taken to a small page with a few lines of text.
The Marquee Control
The Marquee control is Microsoft's first attempt to provide the means for simple animation on Web pages. This control has a function similar to that of the MARQUEE tag, only instead of scrolling a piece of text, it can scroll an entire HTML page in a rectangular area on the document. Moreover, the Marquee control can scroll its contents in all directions, even diagonally. The document displayed and scrolled in a Marquee control is a regular HTML document that can contain images, any HTML tags (including the MARQUEE tag), and even its own animation. The only limitation is that it can't handle hyperlinks and can't contain embedded HTML layouts.
To place an ActiveX Marquee control on your page, use the Insert ActiveX control command on the HTML Editor's Edit menu or insert a definition like the following one in the document:
<OBJECT ID="Marquee1" WIDTH=408 HEIGHT=160 BORDER=2
CLASSID="CLSID:1A4DA620-6217-11CF-BE62-0080C72EDD2D">
<PARAM NAME="ScrollStyleX" VALUE="Circular">
<PARAM NAME="ScrollStyleY" VALUE="Circular">
<PARAM NAME="ScrollPixelsX" VALUE="0">
<PARAM NAME="ScrollPixelsY" VALUE="-2">
<PARAM NAME="ScrollDelay" VALUE="100">
<PARAM NAME="LoopsX" VALUE="-1">
<PARAM NAME="LoopsY" VALUE="-1">
</OBJECT>
The Marquee control comes with Internet Explorer 3.0 and you needn't specify its CodeBase property in the control's definition.
Do not add the Marquee control to the Control Pad's toolbox, because any attempt to place a Marquee control on a layout will crash the program. Just type in the definition or open the Marquee project in this chapter's folder on the CD, copy the definition of the object, and paste it in your HTML document. The various properties of the Marquee control are explained shortly.
ScrollStyleX, ScrollStyleY
These properties set the scrolling style of the marquee, and their values can be
Circular |
The document is wrapped around the control. When it reaches the |
|
end of the control, the document enters the control from the other |
|
end. |
Bounce |
The document bounces in the control. When it reaches the end of the |
|
control, it starts scrolling in the opposite direction. |
ScrollPixelsX, ScrollPixelsY
The direction of the scrolling is controlled with the ScrollPixelsX and ScrollPixelsY properties. Assign the