|
|
by William Robert Stanek
Strap on your seat belt-it's time to leave the world of static Web pages behind and graduate to the next level of Web publishing. With ActiveX, you can activate your Web site with controls, and by using VBScript, you can add advanced logic and client-side interaction. By integrating ActiveX and VBScript, you can create interactive controls that bring the Web to life.
Just as you can't create applications without a development language, such as C++ or Visual Basic, and controls, like menus, buttons, and toolbars, you can't create fully interactive Web pages without a scripting language and controls, which is where ActiveX and VBScript enter the picture. ActiveX and VBScript are the perfect partners.
ActiveX supplies the foreground functions, like the menus, buttons, and other controls users see, hear, and experience; VBScript provides the background functions, gluing the controls together and allowing them to call script methods and respond to events.
With VBScript, you can easily change the properties of an ActiveX control. All you need to do is access the control by using the name identifier you assigned to it. This unique identifier is the value assigned to the ID attribute of the <OBJECT> tag associated with the control and is used to create a reference to the object you're adding to the page.
Using the unique ID of the control, you can change any of its properties by referring to one specifically in a method call to the control. For example, if a control called LabelA has a property called FontName, you can set the FontName property in your script this way:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub setFontName
LabelA.FontName = "Arial"
End Sub
-->
</SCRIPT>
| Note |
Determining the acceptable properties for a control you downloaded over the Internet isn't an easy task unless you have documentation. If you got a control you want to use in your Web pages, you should visit the control developer's Web site to get detailed documentation for the control. |
To explore this concept further, take another look at the <OBJECT> and <PARAM> tags. Remember, in the previous chapter, you placed a control on the page with the <OBJECT> tag and set its properties by using the <PARAM> tag. The Calendar control is a fairly simple one that allows you to insert a calendar into a Web page. You can define the <OBJECT> tag for the Calendar control as follows:
<OBJECT ID="Calendar1"
WIDTH=450
HEIGHT=350
CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
>
In the example, the unique identifier for the Calendar control is Calendar1. The control is sized with the WIDTH and HEIGHT attributes of the <OBJECT> tag and is identified to your system with the CLASSID attribute.
The Calendar control has many properties you can set, such a default day, month, and year. You can set those properties to initial values with the <PARAM> tag:
<OBJECT ID="Calendar1"
WIDTH=450
HEIGHT=350
CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
>
<PARAM NAME="Year" VALUE="1996">
<PARAM NAME="Month" VALUE="12">
<PARAM NAME="Day" VALUE="31">
</OBJECT>
Those same properties can be accessed in your script by using method calls. As shown here, there would be one method call for each property you want to set:
<SCRIPT LANGUAGE="VBScript">
<!--
' Add main body of script here
Sub setCalendar
Calendar1.Year = 1997
Calendar1.Month = 1
Calendar1.Day = 1
End Sub
'Add more subroutines here
-->
</SCRIPT>
Examine Listing 33.1 to see how the Calendar control was added to the page. As you can see, the control's initial values are set in a script. Figure 33.1 shows the page with the Calendar control.
Listing 33.1. Setting object properties
<HTML>
<HEAD>
<TITLE> The Calendar Control </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<OBJECT ID="Calendar1"
WIDTH=450
HEIGHT=350
CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
>
</OBJECT>
<SCRIPT LANGUAGE="VBScript">
<!--
Calendar1.Year = 1997
Calendar1.Month = 1
Calendar1.Day = 1
-->
</SCRIPT>
</BODY>
</HTML>
Figure 33.1 : Setting a control's properties in a script.
Many controls have methods you can access. Methods differ from properties because they're generally used to perform or simulate an action. For example, the Calendar control has methods for moving around the calendar. Using these methods, you can advance or go back to the next day, month, or year.
Documentation for a control should discuss any methods it uses. To access a control's method, use the same technique you use to change a control's property. The only difference is that instead of using a property name, you use a method name, such as the following:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub prevDay
Calendar1.PreviousDay
End Sub
-->
</SCRIPT>
Some methods accept parameters, so you can pass parameters to a method by placing them in parentheses. Each parameter in parentheses is separated by a comma:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub paramPassing
paramControlA.setupBox("What are you trying to do?", "Ensure you use proper values")
End Sub
-->
</SCRIPT>
Other methods may return values to your script. Procedures that return values are called functions, and generally, functions return a result you want to evaluate or store, such as this one:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub storeResult
result = paramControlA.setup
End Sub
-->
</SCRIPT>
Using intrinsic HTML controls, you can add more functions to the Calendar control. As you see in Figure 33.2, button controls that allow users to easily manipulate the calendar have been added to the page. If you examine Listing 33.2, you will find that methods of the Calendar control are used to update the calendar when any of the buttons on the page are clicked.
Listing 33.2. Using methods of a control.
<HTML>
<HEAD>
<TITLE> The Calendar Control </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<P><OBJECT ID="Calendar1"
WIDTH=600
HEIGHT=380
CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
ALIGN=LEFT
HSPACE=1
>
</OBJECT>
<INPUT TYPE="BUTTON" NAME="PreviousDay" VALUE="< Day">
<BR>
<INPUT TYPE="BUTTON" NAME="PreviousMonth" VALUE="<< Month">
<BR>
<INPUT TYPE="BUTTON" NAME="PreviousYear" VALUE="<<| Year">
<BR>
<INPUT TYPE="BUTTON" NAME="NextYear" VALUE="Year |>>"</P>
<BR>
<INPUT TYPE="BUTTON" NAME="NextMonth" VALUE="Month >>">
<BR>
<INPUT TYPE="BUTTON" NAME="NextDay" VALUE="Day >">
</P>
<SCRIPT LANGUAGE="VBScript">
<!--
Calendar1.Year = 1997
Calendar1.Month = 1
Calendar1.Day = 1
Sub PreviousDay_OnClick
Calendar1.PreviousDay
End Sub
Sub NextDay_OnClick
Calendar1.NextDay
End Sub
Sub PreviousMonth_OnClick
Calendar1.PreviousMonth
End Sub
Sub NextMonth_OnClick
Calendar1.NextMonth
End Sub
Sub PreviousYear_OnClick
Calendar1.PreviousYear
End Sub
Sub NextYear_OnClick
Calendar1.NextYear
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 33.2 : Accessing a control's methods in a script.
Just as your scripts can react to user events such as button clicks, your scripts can also react to a control's events. Most controls have events driven by interaction with users. By using events of the Label control, you can react to mouse movements or clicks of mouse buttons.
The way you handle an event, such as a mouse click, is up to you. When a user clicks a mouse button over a Label control, you could rotate the label, display a message box, change the caption for the label, or even dynamically update the document.
To handle an event, you must create a subroutine in your script that executes when the event is triggered. The name of the subroutine must include the identifier of the control to which the event relates, followed by an underscore character, then the name of the event, such as the following:
<SCRIPT LANGUAGE="VBScript"> <!-- Sub labelA_Click labelA.caption = "Mouse click detected" End Sub -->
</SCRIPT>
In the example, the name of the control whose event you want to handle is labelA. The event related to the control is Click. Therefore, when the control is clicked, the subroutine labelA_Click is automatically executed; it sets the value of the control's caption to Mouse click detected.
With events, you can create highly interactive pages. A mouse click on one control can drive other events or updates in other controls. For example, you could add two label controls to a page. When you click one label, the label updates itself and the other label as well. In the following example, clicking on labelA changes the angle and caption for itself and another label on the page called labelB:
<SCRIPT LANGUAGE="VBScript"> <!-- Sub labelA_Click labelA.angle = labelA.angle + 5 labelB.angle = labelB.angle - 5 labelA.caption = "Mouse click detected" labelB.caption = "Why not click on me?" End Sub --> </SCRIPT>
As shown in Listing 33.3, you can take interaction between Label controls a step further. In this example, two Label controls are added to a Web page. When you click on either control, the caption of the active control is set to Click and the angle of the captions for both controls is changed, which makes the labels rotate in different directions. When you double-click either control, the caption of the active control is set to Double click and the angles for the controls are interchanged and updated. Figure 33.3 shows the sample page in a browser.
Listing 33.3. Handling a control's events.
<HTML>
<HEAD>
<TITLE> An interactive Label Control </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<OBJECT
ID="labelA"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx
#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=300
HEIGHT=300
VSPACE=10
HSPACE=10
ALIGN=LEFT
>
<PARAM NAME="Angle" VALUE="0">
<PARAM NAME="Alignment" VALUE="4" >
<PARAM NAME="BackStyle" VALUE="1" >
<PARAM NAME="Caption" VALUE="Interactive Labels are the best!">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="10">
<PARAM NAME="ForeColor" VALUE="#FFFFFF" >
</OBJECT>
<OBJECT
ID="labelB"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx
#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=300
HEIGHT=300
VSPACE=10
HSPACE=10
ALIGN=LEFT
>
<PARAM NAME="Angle" VALUE="180">
<PARAM NAME="Alignment" VALUE="4" >
<PARAM NAME="BackStyle" VALUE="1" >
<PARAM NAME="Caption" VALUE="Labels can react to user-driven events">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontSize" VALUE="10">
<PARAM NAME="ForeColor" VALUE="#FFFFFF" >
</OBJECT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub labelA_Click
labelA.angle = labelA.angle + 5
labelB.angle = labelB.angle - 5
labelA.caption = "Click"
End Sub
Sub labelB_Click
labelA.angle = labelA.angle - 5
labelB.angle = labelB.angle + 5
labelB.caption = "Click"
End Sub
Sub labelA_DblClick
labelA.angle = labelB.angle + 20
labelB.angle = labelA.angle - 20
labelA.caption = "Double Click"
End Sub
Sub labelB_DblClick
labelA.angle = labelB.angle - 20
labelB.angle = labelA.angle + 20
labelB.caption = "Double Click"
End Sub
-->
</SCRIPT>
</BODY>
</HTML>
Figure 33.3 : Handling a control's events in a script.
Adding controls to your page isn't always easy, especially if you don't know the acceptable properties, events, and methods for the control you want to use. This is where the ActiveX Control Pad comes in-it's an authoring tool with enhancements for ActiveX. As you know from previous chapters, authoring tools let you easily create HTML pages without having to enter markup manually.
With the ActiveX Control Pad, adding controls to your Web pages is as easy as clicking a button, selecting a control to insert, and entering property values for the control. Once you do that, the Control Pad takes over and inserts the control into the page for you.
The ActiveX Control Pad even features a scripting wizard to automatically generate scripts for your ActiveX controls. It's this feature of the Control Pad that makes it a wonderful tool for integrating ActiveX and VBScript. In the section "Instant Scripts with the Script Wizard," you'll find tips on how the Control Pad can create scripts that interact with controls.
| Note |
Currently, the ActiveX Control Pad is available as a free download from Microsoft at this site: http://www.microsoft.com/workshop/author/cpad |
Microsoft includes over a dozen ActiveX controls with the ActiveX Control Pad. Yet if you have ever used other ActiveX-compliant products, you probably have several dozen controls available on your system. For example, when you install Internet Explorer 3.0, about a dozen new controls are made available on your system. Further, some controls you install depend on other controls. This means when you install one control, several controls are actually installed on your system.
Table 33.1 shows a combined list of controls that are typically
installed when both ActiveX Control Pad and Internet Explorer
3.0 are available on your system. You are not limited to the controls
installed with the Control Pad. Any ActiveX control registered
on your system can be used in your Web pages.
| Control name | Description |
| ActiveMovie | Plays video files. |
| ActiveX Image | Displays images in multiple formats, including JPG, gif, BMP, metafile, and wavelet. |
| Animated Button | Creates an animated button that uses frame sequences of an AVI video file. |
| Calendar | Adds a calendar that can be interacted with. |
| Chart | Creates charts and graphs from data. |
| Gradient | Creates horizontal lines with gradient coloring. |
| Label object | Creates text labels that can be rotated. |
| Marquee | Creates a window for scrolling marquees. |
| Macromedia Active Shockwave | Allows you to use Shockwave files. |
| ActiveX Hot Spot | Creates clickable regions on a page. |
| Menu | Creates a menu that can be easily accessed. |
| Popup Window | Creates a popup window for tips, notes, and warnings. |
| Popup Menu | Creates a popup menu for easy site navigation. |
| Preloader | Loads documents, images, and other media files in the background so they are instantly available when needed. |
| Stockticker | Displays data that changes continuously. |
| Timer | Allows you to create timed events that are used to add or remove elements from the page. |
| ViewTracker | Generates events that can be used to tell when controls are in the viewable part of the browser's window. |
| Web Browser | Control for displaying any ActiveX document within a page. These documents can include Word documents, Excel spreadsheets, and Access tables. |
Many of the controls available from Microsoft deal with Form elements. These controls provide alternatives to using intrinsic HTML controls that depend solely on VBScript and are in a group of controls called Microsoft Forms 2.0. Table 33.2 shows a listing of these controls.
You use form controls as you would intrinsic HTML controls. For
example, you can use the Checkbox control to add a checkbox that
uses ActiveX to respond to the user's selections. However, you
may find that using intrinsic HTML controls with VBScript is much
easier than using ActiveX form controls. For this reason, I recommend
using only the form controls with unique features, which include
the MultiPage control, the Spin Button control, and the TabStrip
control.
| Control name | Description |
| Checkbox | Adds a checkbox to the page. |
| Combobox | Adds a drop-down list to the page. |
| Command Button | Adds a pushbutton to the page. |
| Frame | Creates a scrollable picture frame for manipulating images. |
| Image | Adds an image within a form. |
| 1Label | Adds a text label to the page. |
| Listbox | Adds a scrollable list of options to the page. |
| MultiPage | Allows you to use multiple pages that can be accessed with buttons or tabs; similar to the TabStrip control. |
| Option Button | Adds a radio button to the page. |
| Scrollbar | Adds scrollbars to the page. |
| Spin Button | Adds a button to the page that can be rotated. |
| TabStrip | Lets user reach several pages with tabs that can be clicked on. |
| Textbox | Adds a text entry field or text window to the page. |
| Toggle Button | Adds a button with a toggle state, such as on and off, to the page. |
The ActiveX Control Pad is much like any other editor or HTML authoring tool you may have used. You create and edit Web pages by using a basic editor that allows you to enter HTML markup directly into an editor window. The control pad has all the features you would expect in an authoring tool. You can manipulate files, edit files, create new files, save files, and get help by using a menu or a toolbar.
To start the ActiveX Control Pad, use the Start menu on the Windows taskbar. Click Start | Programs | Microsoft ActiveX Control Pad | Microsoft ActiveX Control Pad. The second reference to the Control Pad is the actual executable file.
When you start the ActiveX Control Pad, you see the minimal HTML page shown in Figure 33.4. Each file you have open in the Control Pad editor is displayed in a separate window, so you can have several files open at one time.
Figure 33.4 : Using the ActiveX control Pad.
There are two types of files you can create with the ActiveX Control Pad:
You can open a new HTML page by choosing File | New HTML. When you define a Web page by using the HTML style of the Control Pad, you enter markup directly into the editor window. HTML pages with markup and references to controls are saved with the .htm or .html extension.
You can use options in the Edit menu to insert ActiveX controls and HTML layout files directly into the page you're currently working on. Because you're using the ActiveX Control Pad, you don't have to worry about creating the markup for controls or layout files; the editor creates this markup for you.
As you can see in Figure 33.5, each new HTML page you open is automatically cascaded. Using options on the Window menu, you can reorganize the windows into a tile or cascade style. When you tile your windows, a single window fills the editor's viewing area. Other pages you have open can then be reached with the Window menu.
Figure 33.5 : Creating HTML pages.
To open a new HTML Layout page, choose File | New HTML Layout. HTML Layout pages use a WYSIWYG authoring style, so you can decide where you want to add objects, such as controls, and the editor creates the markup that places the control on the page for you.
The main difference between the HTML editor and the HTML Layout Editor is that the HTML Layout Editor allows you to add controls by using a graphical interface to size, group, and align controls. HTML Layout pages have object references and are saved with the .alx extension. The .alx extension is used for ActiveX Layout Controls.
Although layout pages can be viewed directly in ActiveX-enabled browsers like Internet Explorer, you should insert the layout page into an HTML document so you can add descriptive text and other essentials to finish off the page.
When you open a layout page, you can tell immediately that you're not using the standard editor. As you can see in Figure 33.6, the standard editor window is replaced with a drawing board and a toolbox. From the toolbox, you can select any available controls to place on the drawing board by clicking the appropriate icon. Then you can place the control on the drawing board wherever you want it to be displayed. Any control on the drawing board can be moved, sized, and edited directly.
Figure 33.6 : Creating HTML Layout pages.
Using the Control Pad's built-in editor, you can add ActiveX controls and HTML Layout files to a Web page. Start by opening an existing Web page or creating a new one, then move the cursor to where you want the control or layout file to be inserted. Finally, select the appropriate option from the Edit menu.
Selecting Insert ActiveX Control from the Edit menu opens the dialog box shown in Figure 33.7. This dialog box shows a list of all controls registered on your system. Using the cursor keys or the mouse, you can choose a control to add to the page.
Figure 33.7 : Selecting a control to insert.
After selecting a control to insert, the dialog boxes shown in Figure 33.8 open. The Edit ActiveX Control dialog box is a drawing board that allows you to size, move, and edit the control; the Properties dialog box has two columns of entries for each property of the control that you can set. The first column shows the name of a property, and the second column shows the property's default value. Not all properties have default values, though.
Figure 33.8 : Control properties and placement.
Clicking on an entry in the Properties dialog box lets you edit a text value associated with the property you're setting. You enter this text in the text entry field at the top of the dialog box. If another window is associated with the property you've selected, a button is displayed to the right of the text entry field. Clicking this button opens a dialog box for the property, but you can also double-click the property entry to display this dialog box. When you click on a property that accepts only specific values, such as On or Off, values are entered for you automatically. Each click of the mouse moves you through the value selections.
Once you set the control's properties, you can add the control to the page simply by closing the Edit ActiveX Control dialog box. When you do this, both the Edit ActiveX Control dialog box and the Properties dialog box for the control should be visible. If the Properties dialog box is closed, the control won't be added to the page. You can reopen a closed Properties dialog box by choosing Edit | Properties.
When you close the Edit ActiveX Control dialog box, markup for the control is inserted into the current page. As shown in Figure 33.9, this markup includes definitions for <OBJECT> and <PARAM> tags. After you insert a control, you can edit its properties at anytime by clicking the cube icon displayed to the left of the control definition; this opens both the Edit ActiveX Control dialog box and the Properties dialog box.
Figure 33.9 : A page with controls.
Just about any control you use has properties that set default colors for text, backgrounds, and highlights, so take a look at how you can define color-related properties. Most properties that set colors have a related dialog box called Color where you can select colors by using a graphical interface. If you've played the color-guessing game with your HTML pages before, you know how cool it is to see a color palette and select a color from it at the click of a button.
When the Color dialog box shown in Figure 33.10 is open, you can choose a color simply by clicking on it. After you make a color selection, close the Color dialog box by clicking the OK button. Now the active property is set to the color you selected.
Figure 33.10: Setting a property to a specific color.
If the 48 colors in the basic palette aren't enough, you can create custom colors. The ActiveX Control Pad also lets you store values for up to 16 custom colors to use for other controls or control properties. To create a custom color, click the Define Custom Colors button. As you can see from Figure 33.11, this adds a new area to the Color window.
Figure 33.11: Customizing your colors.
You define custom in colors by using one of the following methods:
The Color/Solid field displays the dithered and solid colors that correspond to your current color selection. Your system dithers (uses a close approximation of) the true color to correct for the current color settings. When the custom color is set to your liking, click the OK button to use the value for the current property.
| Tip |
If you want to save the custom color, select a rectangle in the Custom Colors grid, create your custom color, and then click the Add to Custom Colors button. |
Using the Control Pad's built-in layout editor, you can precisely position controls in a layout file. Although you can open layout files directly in a browser, layout files are usually inserted into other documents.
The only browser that currently supports layout files directly is Internet Explorer, which means layout files pose a potential compatibility problem with most browsers. However, if you use the Control Pad to insert the layout file into your documents, your layout file will be added as an object that any browser capable of using ActiveX should be able to handle.
To create a layout file, choose New HTML Layout from the File menu. This opens a layout file and the toolbox. The layout area is a drawing board where you can place, size, and edit controls. Unlike the Insert Control dialog box used with standard HTML files, the toolbox has a limited set of controls. The only controls you can use with the toolbox are those installed with the ActiveX Control Pad.
Tabs at the top of the toolbox let you find standard controls and additional controls. On the Standard Controls tab, you'll find the object selector, which you can use to select objects placed on the drawing board. You can select a control to work with just by clicking the control's icon in the toolbox.
Once you select a control, you can add it to the drawing board. Figure 33.12 shows a drawing board with three controls. A Tabstrip control is placed at the top of the layout area; beneath it are two Label controls.
Figure 33.12: Placing controls on the HTML Layout editor's drawing board.
After you place controls on the drawing board, you can change their default properties by clicking the control to select it, then either choosing Properties from the Edit menu or right-clicking the mouse and selecting Properties from the pop-up menu. Another way to open the Properties dialog box is to double-click the control.
Some controls can be edited directly on the drawing board. For example, you can change the label for a Label control by clicking the control, backspacing over the current entry, and typing in a new entry.
When you're done creating the layout, save the file. You can then insert the layout in an open HTML page by choosing Insert HTML Layout from the Edit menu. As you can see in Figure 33.13, the HTML editor identifies layout differently from controls. The cube icon for controls is replaced with a layout icon that shows a capital A, a circle, and a square.
Figure 33.13: Adding layout files to a HTML page.
The object reference for layout files has some changes worth noting. A parameter called ALXPATH is used to refer the file path to the layout you're inserting. As you can see from the figure, this path is set to an absolute location on your file system. Therefore, before you publish a document with a layout file, you must update the file path.
After you add controls to the page with either the standard editor or the layout editor, you can link the controls to a script. The ActiveX Control Pad supports scripting with VBScript and JavaScript, but by default, it's set to use VBScript. You can check and change the current script settings at any time by choosing Tools | Options.
To create a script for a control, click the Script Wizard icon on the toolbar or choose Script Wizard from the Tools menu to open the dialog box shown in Figure 33.14.
Figure 33.14: Introducing the Script Wizard.
The Script Wizard dialog box is divided into three primary regions. The upper-left part, called the Select Event field, is used to select events, and the upper-right part-the Insert Action field-is used to select actions to insert. The lower part of the dialog box, the Edit Script field, is used to view a summary of currently inserted actions, to delete actions, and to modify actions.
Each control added to the current page is identified in the Script Wizard dialog box. When you first open the dialog box, the controls are shown in the Select Events field, along with a special control called Window that can be used to set actions for the current page. In this example, the page contains two controls: Label1 and PreVu1. Label1 identifies a Label control, and PreVu1 identifies a Popup Window control.
Clicking on a control's entry in the Select Events field displays a listing of all events the control can respond to. In Figure 33.15, you see some of the events for the Label control. Some controls, like the Popup Window, have no related events, so clicking on the control's identifier has no effect. To select an event, simply click on it. You can now define actions for it.
Figure 33.15: A control's events can be selected from a list.
After selecting an event, you can relate it to an action by using the Insert Action field. When you open the Script Wizard dialog box, the Insert Action field has icons for the controls in the current page, the current page's window, global variables, procedures, and a special event called Go To Page. Under the control names in the Insert Action field is a complete list of properties and methods used by the controls.
You can view code instructions in one of two views: list view or code view. In the lower portion of the Edit Script field, you can use option buttons to switch views. In list view, script instructions are summarized by action; in code view, the actual script instructions are displayed.
Global variables are those variables you would normally create at the beginning of a script with the Dim keyword, such as in these two examples:
Dim form Dim vbYesNoCancel: vbYesNoCancel=3
To insert a new global variable, select any event in the Select an Event field, move the cursor to the Insert Action field, right-click, then select New Global Variable from the pop-up menu. This opens the New Global Variable dialog box shown in Figure 33.16, where you enter the name of your global variable, such as messageText.
Figure 33.16: Creating a global variable in the Script Wizard.
Once you create global variables, you can click on the Global Variable entry in the Insert Action field to see a listing of them. To define a value for the variable, double-click on its entry, then enter a value in the dialog box that's displayed. This value can be an actual numeric or text string or a reference to another variable.
Figure 33.17 shows how the messageText variable created earlier could be set to a specific value. Be sure to enclose text strings in quotations. When you are done defining the variable, click the OK button to close the dialog box.
Figure 33.17: Setting a global variable to a specific value in the Script Wizard.
Script Wizard defines procedures related to events for you, but you can also create your own procedures. Once you create event-driven procedures, they're available for editing. If you're in code view, you can click the Procedures icon in the Select Action field to see a listing of currently defined procedures.
To insert a new procedure, move the cursor to the Insert Action field, right-click, then select New Procedure from the pop-up menu. In the Edit Script field, you can now define actions for the procedure. The Script Wizard names procedures sequentially. The first procedure you create is Procedure1, the second is Procedure2, and so on.
If you're in code view, you can define actions for the active procedure. To do this, enter the code directly into the Edit Script field, as shown in Figure 33.18.
Figure 33.18: Editing procedures in the Script Wizard.
To create an event-driven procedure, select an event for a specific control in the Select Event field. Next, choose actions to associate with the event. Actions include setting a control's properties and methods.
In list view, separate dialog boxes are displayed when you double-click on a property or method name in the Select Event field. Some dialog boxes allow you to select from lists of acceptable values; others let you enter text strings or set a color-related property with the Color dialog box.
To create an event that changes a label's background style when the mouse moves over the control, first make sure you're in list view, then select the MouseMovement event of the Label control by clicking on it in the Select Event field. Next, in the Insert Action field, double-click on the BackStyle property of the Label control. This opens the dialog box shown in Figure 33.19. You can now select the new background style for the label.
Figure 33.19: Generating event-driven procedures in the Script Wizard.
In code view, dialog boxes aren't displayed when you click on a property or method name in the Select Event field. Instead, clicking on a property or method name inserts a reference in your code. You must then set the method or property yourself.
If you want to create an event that changes a label's caption when the mouse moves over the control, make sure you're in code view, then select the MouseMovement event of the Label control by clicking on it in the Select Event field. Next, in the Insert Action field, double-click on the Caption property of the Label control. As shown in Figure 33.20, this inserts a reference to the Caption property into the procedure shown in the Script Edit field. Now you can assign a value to the property.
Figure 33.20: Creating event-driven procedures in code view.
In the Script Wizard, the final step is to generate your script. You do this simply by clicking the OK button in the Script Wizard dialog box. The Script Wizard then inserts your script into the current page, as you can see in Figure 33.21. You can edit your script at any time by clicking the Script Wizard icon displayed to the left of the script.
Figure 33.21: A script generated by the Script Wizard.
Although the sample script is fairly basic, you can use the Script Wizard to generate some enormous scripts. Because the Script Wizard has a point-and-click interface, you can easily generate a 50-line script in five minutes.
ActiveX and VBScript are a powerful combination for activating the Internet. With ActiveX, you can add controls, such as menus, labels, popup windows, and much more, to your pages. With VBScript, you can make the controls interactive. You can even use VBScript to glue controls together, which allows one control to make dynamic updates to others.
Tracking properties, methods, and events for controls is no picnic. Fortunately, Microsoft has created a terrific authoring tool called the ActiveX Control Pad. Not only does it help you integrate ActiveX and VBScript, the Control Pad also gives you instant access to the properties, methods, and events used by controls.
