Strap on your seat beltit'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 or controlssuch as menus, buttons, and toolbawithout a development language, 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, such as 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 Name
field in the ActiveX Control Properties box and is used to create a reference to the control you're adding to the page.
Using the unique name of the control, you can change any of its properties by referring to the property 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:
Sub setFontName LabelA.FontName = "Arial" End Sub
NOTE
Determining the acceptable properties for a control you have downloaded over the Internet isn't an easy task unless you have documentation. If you have 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, lets take a look at the Calendar control. Remember, in the previous chapter, you place a control on the page by selecting Insert | Other Components | ActiveX Control in the FrontPage Editor. Alternately, if you have the
Advanced toolbar open, you can simply click on the ActiveX control button.
Create a page for the control in the FrontPage Editor. Open the ActiveX Control Properties box, then select the Calendar control using the Pick a control field's pull-down list. If the Calendar control isn't available on your system, don't worry.
Follow the discussion and refer to the figures provided.
Start by naming the control Calendar1. Then set the Width of the control to 450 pixels and the height of the control to 350 pixels. As you see in Figure 29.1, leave the rest of the settings with
their default values.
Figure 29.1. Creating a Calendar control.
The Calendar control has many properties you can set, such a default day, month, and year. To set these properties, click on the Properties button. This opens the dialog box you see in Figure 29.2. Set properties for the day, month and year by doing
the following:
Figure 29.2. Setting unique properties for the Calendar control.
Now you can close all open dialog boxes and save the page. If you add some text to describe the control, you'll have a page similar to the one shown in Figure 29.3.
Figure 29.3. The finished page with your control.
The same Day, Month, and Year properties can be accessed in a script using method calls. As shown in Listing 29.1, there would be one method call for each property
you want to set.
Listing 29.1. Setting control properties.
' Add main body of script here Sub setCalendar Calendar1.Year = 1997 Calendar1.Month = 1 Calendar1.Day = 1 End Sub 'Add more subroutines here
When the setCalendar routine of the script is executed, the properties for the calendar control are set, and the control updates instantly.
To have the properties set automatically when your page is loaded, you would not use a subroutine. Instead, you would place the properties before the main body of the script as follows:
Calendar1.Year = 1997 Calendar1.Month = 1 Calendar1.Day = 1 ' Add main body of script here
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 another 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:
Sub prevDay Calendar1.PreviousDay End Sub
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:
Sub paramPassing paramControlA.setupBox("What are you trying to do?", ¬"Ensure you use proper values") End Sub
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:
Sub storeResult result = paramControlA.setup End Sub
Using intrinsic HTML controls, you can add more functions to the Calendar control. As you see in Figure 29.4, button controls that allow users to easily manipulate the calendar have been added to the page. Here, methods of the Calendar control are used
to update the calendar when any of the buttons on the page are clicked.
Figure 29.4. Accessing a control's methods in a script.
You can create a similar page following these steps:
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
After you save the page, load it into your browser. As long as the browser supports ActiveX and VBScript, you'll be able to interact with the Calendar control. Study the script which enables this interaction. You can use similar techniques with other
controls.
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 Object 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:
Sub labelA_Click labelA.caption = "Mouse click detected" End Sub
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 event-related actions, 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:
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
As Figure 29.5 shows, you can take interaction between Label Object controls a step further. In this example, two Label Object 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 29.5. Handling a control's events in a script.
The following steps show how you can create a similar page:
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
Save the page and load it into your browser. Test the controls by clicking on them. A single click should have different results than a double-click. Study the script to see how it performs this and use similar techniques in your own scripts.
After you add controls to a page, you can link the controls to a script. FrontPage supports automated scripting with the Script Wizard, which can generate scripts in either VBScript or JavaScript. Although the Script Wizard is a very useful tool, it is
not as intuitive as some of the other tools you'll find in FrontPagethe exception being when you use the Scripting Wizard to generate validation routines for your forms. Validating scripts with the Scripting Wizard was discussed in Chapter 12,
"Using Forms and the Forms Wizard."
Generally, you will use the Script Wizard to create scripts for a control that you've added to the page. The Scripting Wizard is started from the Script dialog boxthere's a button labeled Script Wizard.
The Scripting Wizard dialog box is divided into three primary regions (See Figure 29.6). The upper-left part, called the Select Event field, is used to select events, and the upper-right partthe Insert Action fieldis 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.
Figure 29.6. Introducing the Scripting Wizard.
Each control added to the current page is identified in the Scripting 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 29.7, you see some of the events for the Label control. Some controls, such as 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 29.7. 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 Scripting 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
29.8, where you enter the name of your global variable, such as messageText.
Figure 29.8. Creating a global variable in the Script Wizard.
After 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 29.9 shows how the messageText variable created earlier could be set to a specific value. Be sure to enclose text strings in quotation marks. When you are done defining the variable, click the OK button to close the
dialog box.
Figure 29.9. Setting a global variable to a specific value in the Script Wizard.
Scripting Wizard defines procedures related to events for you, but you can also create your own procedures. After 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 Scripting 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 29.10.
Figure 29.10. 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 29.11. You can now select the new background style for the label.
Figure 29.11. 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 29.12, 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 29.12. 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. After you inspect your script in the Script dialog box, close this dialog box so the Script Wizard can insert
your script into the current page. You can edit your script at any time by clicking the script icon. For VBScript, this small icon shows a flow chart with a document.
If you follow the steps in this section, your script should be similar to the following:
Sub Label1_MouseMove(Button, Shift, X, Y) Label1.BackStyle = 1 Label1.Caption = "A new label for your control!" end sub
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 fifty-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.