Previous Page TOC Next Page



29


Creating Interactive Pages with Controls


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.

Using ActiveX with VBScript


Just as you can't create applications or controls—such as menus, buttons, and toolba—without 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.

Changing Object Properties with Method Calls


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:

  1. Double-click on the Day field and enter 31 in the text input area. Press Enter.
  2. Double-click on the Month field and enter 12 in the text input area. Press Enter.
  3. Double-click on the Year field and enter 1999 in the text input area. Press Enter.

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

Accessing a Control's Methods


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:

  1. Create a page for the Calendar control.
  2. Open the ActiveX Control Properties box, then select the Calendar control using the Pick a control field's pull-down list.
  3. Name the control Calendar1.
  4. In the Layout area, set the Alignment to Left.
  5. Set the width of the control to 600 pixels and the height of the control to 380 pixels.
  6. Set the horizontal spacing to 1.
  7. Add the control to the page by closing the ActiveX Control Properties box.
  8. The insertion point should be on the right side of the control. Without pressing any other keys, add a push-button to the page. Press Shift-Enter. Repeat this step until there are 6 push-buttons on the right side of the control.
  9. Double-click on the first push button. Set the Name field to PreviousDay. Set the Value field to < Day. Select the Normal button type.
  10. For the second push button, set the Name field to PreviousMonth. Set the Value field to << Month. Select the Normal button type.
  11. For the third push button, set the Name field to PreviousYear. Set the Value field to <<| Year. Select the Normal button type.
  12. For the fourth push button, set the Name field to NextYear. Set the Value field to Year |>>. Select the Normal button type.
  13. For the fifth push button, set the Name field to NextMonth. Set the Value field to Month >>. Select the Normal button type.
  14. For the sixth push button, set the Name field to NextDay. Set the Value field to Day >. Select the Normal button type.
  15. Create a script using the Script dialog box. You can open this dialog box by selecting Insert | Script. Be sure VBScript is selected as the language type. Enter the following code:

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.

Using Events of a Control


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:

  1. Create a new page.
  2. Open the ActiveX Control Properties dialog box, then select the Label Object control using the Pick a control field's pull-down list. Follow steps 2A through 2D.
      A. Name the control labelA.
      B. In the Layout area, set the alignment to left.
      C. Set the width of the control to 300 pixels and the height to 300 pixels.
      D. Set the horizontal and vertical spacing to 10.

  3. Open the Properties dialog box for the control by clicking on the Properties button. Follow steps 3A through 3G.
      A. Double-click on the Angle property. Enter this text in the text entry field at the top of the dialog box: 0. Press the Enter key.
      B. Double-click on the Alignment property. Enter: 4. Press the Enter key.
      C. Double-click on the BackStyle property. Enter: 1. Press the Enter key.
      D. Double-click on the Caption property. Enter: Interactive Labels are the Best!. Press the Enter key.
      E. Double-click on the FontName property. Enter: Arial. Press the Enter key.
      F. Double-click on the FontSize property. Enter: 10. Press the Enter key.
      G. Double-click on the ForeColor property. Enter: #FFFFFF. Alternately, you can click on the button beside the text input field and select white as your color. Press the Enter key.

  4. Add the control to the page by closing the ActiveX Control Properties box.
  5. Move the insertion point to a new line.
  6. Open the ActiveX Control Properties box, then select the Label Object control using the Pick a control field's pull-down list. Follow steps 7A through 7D.
      A. Name the control labelB.
      B. In the Layout area, set the alignment to left.
      C. Set the width of the control to 300 pixels and the height to 300 pixels.
      D. Set the horizontal and vertical spacing to 10.

  7. Open the Properties dialog box for the control by clicking on the Properties button. Follow steps 8A through 8G.
      A. Double-click on the Angle property. Enter: 180. Press the Enter key.
      B. Double-click on the Alignment property. Enter: 4. Press the Enter key.
      C. Double-click on the BackStyle property. Enter: 1. Press the Enter key.
      D. Double-click on the Caption property. Enter: Labels can react to user-driven events. Press the Enter key.
      E. Double-click on the FontName property. Enter: Arial. Press the Enter key.
      F. Double-click on the FontSize property. Enter: 10. Press the Enter key.
      G. Double-click on the ForeColor property. Enter: #FFFFFF. Alternately, you can click on the button beside the text input field and select white as your color. Press the Enter key.

  8. Create a script using the Script dialog box. You can open this dialog box by selecting Insert | Script. Be sure VBScript is selected as the language type. Enter the following code:

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.

Instant Scripts with the Script Wizard


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 FrontPage—the 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."

Getting Started with the Script 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 box—there'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 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.

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.

Setting Global Variables


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.

Creating Procedures and Generating Scripts


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.

Summary


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.

Previous Page Page Top TOC Next Page