Chapter 24

ActiveX and VBScript

• Adding ActiveX to Your Pages
• Inserting an ActiveX Control
• Inserting a PowerPoint Animation as an ActiveX Control
• Setting the Default Script Language
• Adding a Script to Your Pages
• Inserting a Script into Your Page
• Creating a Script with the Script Wizard
  • Selecting an Event Handler
  • Selecting an Action
  • Inserting Global Variables
  • Inserting New Procedures
• Using the Code View in the Script Wizard
• Workshop Wrap-Up
  • Next Steps
  • Q&A

Microsoft has developed another technology that is heating up the action in the browser war. ActiveX controls are reusable components that add special functions to your Web pages. What makes them different, however, is that you can use the same controls in software programs. This allows content developers to create Web pages and applications that work together. Nice stuff. With ActiveX, you can add form fields, enhanced navigation controls, animation and multimedia, credit card transactions, spreadsheet calculations, database communications, and more to your Web pages. Thousands of ActiveX controls are published by many third-party software vendors. Internet Explorer 3.0 has ActiveX technology built in to the browser. Other browsers are sure to add ActiveX capabilities through the use of plug-ins.

FrontPage also allows you to insert scripts into your pages, using either VBScript or JavaScript. This is sometimes necessary to make some of the ActiveX controls work. For example, if you insert ActiveX form fields such as text boxes, drop-down menus, and pushbuttons on your page, the script tells the browser what to do after the user pushes the button on the page.

Adding ActiveX to Your Pages

As with any other element that you can download from the Internet, you should verify that you have the right to use an ActiveX control. Some of these controls are available as freeware, whereas others are available on a commercial basis. Appendix C, "Directory of Resources," lists some online sources where you can check out many ActiveX controls that are available for preview or for use. Internet Explorer 3.0 also furnishes a lot of information about the Microsoft ActiveX controls, and the following URL on Microsoft's Web site hosts a gallery of ActiveX controls:

http://activex.microsoft.com/

Inserting an ActiveX Control

You insert an ActiveX control on your page in one of two ways. You use the following method when an ActiveX control exists on your system. When you encounter a page that contains an ActiveX control, you are given the option to download it. When you do, the controls are installed in your Windows system directory. They're also registered in the system registration database. FrontPage examines your system to see what ActiveX controls you have available and allows you to select one of them from a drop-down list.

To insert an ActiveX control that exists on your system, follow these steps:

1. From the FrontPage Editor, choose Insert | Other Components | ActiveX Control, or use the Insert ActiveX Control button on the Advanced toolbar. The ActiveX Control Properties dialog box shown in Figure 24.1 appears.
   Figure 24.1 : Use the ActiveX Control Properties dialog box to select an ActiveX component that you have installed on your system.

2. The Pick a Control drop-down menu lists all the ActiveX controls that are installed on your system. Select one from the drop-down menu.
3. Click the Properties button. Two windows appear.
4. The Edit ActiveX Control window, shown on the left of Figure 24.2, displays the ActiveX control within it. From this window, you can resize the ActiveX control, if necessary, and preview some of the property settings for the control.
   Figure 24.2 : The ActiveX control appears in the Edit ActiveX Control window. You use the Properties dialog box to define the parameters for a control that is installed on your system.

5. A Properties dialog box, shown on the right in Figure 24.2, contains a table editor that lists all the ActiveX control's properties and the current values set for each property. These properties are specific to each ActiveX control. When you highlight a property, you can enter its value or choose one
   of several values from a drop-down menu located at the top of the
   Properties box.
6. After you set the properties, click OK to return to the ActiveX Control Properties dialog box.

If you don't have a particular ActiveX control installed on your system but you know its class ID, you can insert it on your page. The class ID is a very long 128-bit string that identifies the name and version number of the ActiveX control that you are inserting. This number is assigned by the creator of the ActiveX control. For example, if you insert the Microsoft Forms 2.0 Tab Strip control, you'll see something that looks like this in the View or Edit HTML window:

classid="clsid:EAE50EB0-4A62-11CE-BED6-00AA00611080"

To insert an ActiveX control that does not exist on your system, follow these steps:

1. From the FrontPage Editor, choose Insert | Other Components | ActiveX Control, or use the Insert ActiveX Control button on the Advanced toolbar. The ActiveX Control Properties dialog box shown in Figure 24.1 appears.
2. Enter the Class ID for the control in the Pick a Control field, similar to the following example:
   EAE50EB0-4A62-11CE-BED6-00AA00611080
3. Click the Properties button. The Object Parameters dialog box shown at the left of Figure 24.3 appears.
   Figure 24.3 : Use the Object Parameters dialog box to add parameters for controls that do not exist on your system. The parameters are entered in the Edit Object Parameter dialog box.

4. To add a parameter name and value, click the Add button. The Edit Object Parameter box shown on the right in Figure 24.3 appears.
5. Enter the parameter name in the Name field and its value in the Value field.
6. Choose one of the following parameter types for the control you are adding:
   Data. Specifies that the parameter value should be interpreted as data. Enter the data into the Data field.
   Page. Specifies that the parameter value should be interpreted as the URL of a file. Enter the relative or absolute URL of the file in the Page field.
   Object. Specifies that the parameter value should be interpreted as the name of another ActiveX control on the current page. Enter the name of the other control (as entered in the Name field of its ActiveX Control Properties dialog box) in the Object field.
   Media Type. Enabled when the parameter type is Data or Page, allows you to specify a MIME (Multipurpose Internet Mail Extension) type for the parameter.
7. Click OK to exit the Edit Object Parameter dialog box. You return to the ActiveX Control Properties dialog box.

After you select a control, using either of the above methods, you complete the entries in the ActiveX Control Properties dialog box as follows:

1. In the Name field, enter an optional name to use when referring to the ActiveX control within a script on the current page.
2. To specify how you want the ActiveX control to align with other text on your page, choose one of the following from the Alignment drop-down menu in the Layout section:
   Bottom aligns the bottom of the ActiveX control with the text.
   Middle aligns the middle of the ActiveX control with the text.
   Top aligns the top of the ActiveX control with the text.
   Absbottom aligns the ActiveX control with the bottom of the current line.
   Absmiddle aligns the ActiveX control with the middle of the current line.
   Texttop aligns the top of the ActiveX control with the top of the tallest text in the line.
   Baseline aligns the ActiveX control to the baseline of the current line.
   Left places the ActiveX control in the left margin and wraps the text that follows along the control's right side.
   Right places the ActiveX control in the right margin and wraps the text that follows along the control's left side.
3. In the Border Thickness field of the Layout section, enter the number of pixels in thickness that you want for the border around the control. This sets a black border around the control.

4. In the Horizontal Spacing field of the Layout section, enter the number of pixels you want between the ActiveX control and the nearest text. If there is no text on the same line as the control, you can leave this value at the default setting of 0.
5. In the Vertical Spacing field of the Layout section, enter the number of pixels you want between the ActiveX control and the line above or below the current line. If there is no other text above or below the control, you can leave this value at the default setting of 0.
6. In the Width field of the Layout section, enter the width of the ActiveX control in pixels.
7. In the Height field of the Layout section, enter the height of the ActiveX control in pixels.

8. In the Alternate Representation: HTML field, enter the text that you want to appear when the user is not using a browser that supports ActiveX. If you leave this field blank, the user won't see anything in place of the control.
9. In the Network Location field, enter the following parameters:
10. Data Source. Specify the URL of a file that contains the runtime parameters for the control. Click Browse to locate the file in your current FrontPage web, the World Wide Web, or your local or network hard drive.
11. Code Source. Specify the URL that Web browsers should use to download the ActiveX control when the page is loaded. This field is optional but recommended. A typical entry looks something like this:
    http://www.codesite.com/activex/mycontrol.ocx#Version=2,55,0,1092

10. To add extended attributes to an ActiveX control, click the Extended button. The Extended Attributes dialog box appears. Click the Add button, and the Name/Value Pair dialog box shown in Figure 24.4 appears. Enter the attribute name in the Name field and its value in the Value field. Then, click OK to exit the Name/Value Pair and Extended Attributes dialog boxes. You return to the ActiveX Control Properties dialog box.
    Figure 24.4 : Use the Name/Value Pair dialog box to add extended attributes to an ActiveX control.

11. Click OK to exit the ActiveX Control Properties dialog box. A representation of the control appears on your page as a solid gray box.

Each time you insert an ActiveX control on your page, FrontPage adds code into your HTML page that is enclosed by an <OBJECT> tag. This tag defines the ActiveX control or controls that you inserted on your page. The code includes the ActiveX control's class ID, the settings you define in the layout section of the ActiveX Control Properties dialog box, and the properties that you set with the Properties table editor or Name/Value Pair dialog box. The properties you set are those indicated by the <PARAM NAME> and <VALUE> tags.

You can view and edit additional parameter names and values in the code as necessary by choosing the View | HTML command in the FrontPage Editor. The code is color coded, displaying HTML tag names in black, attribute names in blue, and attribute values in green. For example, the HTML code for the Microsoft Forms 2.0 Tab Strip ActiveX control was edited to specify a total of 4 tabs (TabsAllocated parameter), and the Items and Names parameter values were changed to Main, Links, Topics, and Help. The code now looks something like this (edited slightly for clarity):

<object id="menutabs" name="menutabs"

    classid="clsid:EAE50EB0-4A62-11CE-BED6-00AA00611080"

    align="baseline"

    border="0"

    width="533"

    height="313">

    <param name="ListIndex" value="0">

    <param name="ForeColor" value="4210816">

    <param name="Size" value="14111;8290">

    <param name="Items" value="Main;Links;Topics;Help;">

    <param name="TabOrientation" value="2">

    <param name="MultiRow" value="-1">

    <param name="TipStrings" value=";;;;">

    <param name="Names" value="Main;Links;Topics;Help;">

    <param name="NewVersion" value="-1">

    <param name="TabsAllocated" value="4">

    <param name="Tags" value=";;;;">

    <param name="TabData" value="4">

    <param name="Accelerator" value=";;;;">

    <param name="FontName" value="Arial">

    <param name="FontEffects" value="1073741825">

    <param name="FontCharSet" value="0">

    <param name="FontPitchAndFamily" value="2">

    <param name="FontWeight" value="700">

    <param name="TabState" value="3;3;3;3">

</object>

Inserting a PowerPoint Animation as an ActiveX Control

In Chapter 23, "Java and Plug-Ins," you learned how to add a PowerPoint animation to your page as a Netscape plug-in. The PowerPoint Animation Player also has the capability to display a PowerPoint animation as an ActiveX control. To insert a PowerPoint animation as an ActiveX control, follow these steps:

1. Create or open a page in the FrontPage Editor.
2. Position the insertion point where you want the PowerPoint animation to appear.
3. Choose Insert | Other Components | PowerPoint Animation. The PowerPoint Animation dialog box shown in Figure 24.5 appears.
   Figure 24.5 : The PowerPoint Animation dialog box allows you to insert a PowerPoint animation as an ActiveX control.

4. In the PowerPoint Animation File field, enter the path to the animation file, or use the Browse button to locate it. Use the Current FrontPage Web tab to select the animation from your currently opened web. Use the Other Location tab to insert the animation from a file on your local or network hard drive or from the World Wide Web. After you select the file, click OK to return to the PowerPoint Animation dialog box.
5. In the Insert As field, choose ActiveX Control.
6. Click OK. The PowerPoint animation appears on your page in its original size. You can use the ActiveX Control Properties dialog box shown in Figure 24.1 to modify the settings for the ActiveX control.

Setting the Default Script Language

In some cases, FrontPage generates VBScript or JavaScript for you automatically. For example, when you choose to validate form fields used with the Internet Database Connector files generated by the Database Connector Wizard, FrontPage generates the VBScript or JavaScript code for you and inserts it into your Web page.

You need to configure your Web settings so that FrontPage knows which language to use when it generates these scripts. You can choose your default scripting language from the FrontPage Web Settings dialog box. To specify your default scripting language, follow these steps:

1. From the FrontPage Explorer, choose Tools | Web Settings. The FrontPage Web Settings dialog box appears.
2. Choose the Advanced tab, shown in Figure 24.6.
   Figure 24.6 : Use the Advanced tab in the FrontPage Web Settings dialog box to choose the scripting language for scripts that FrontPage generates automatically.

3. In the Validation section, choose JavaScript or VBScript from the Language drop-down menu.
4. Click OK to exit the Web Settings dialog box, or click Apply to add more Web settings.

Adding a Script to Your Pages

Some ActiveX controls need more than a location on your page and a few lines of text in your HTML code. Some controls, such as form fields, buttons, labels, tab strips, and similar controls that require user input, need additional code that defines what is supposed to happen when the user chooses a control or enters data into it. For this, you need to write a script.

FrontPage allows you to develop VBScript and JavaScript for your pages in a couple of ways. VBScript is a subset of Microsoft's Visual Basic programming language. VBScript code is contained within your Web page and can be read by Microsoft Internet Explorer 3.0 and other browsers. JavaScript is a subset of the Java scripting language and also can appear within a Web page. You implement either of these scripting languages by using dialog boxes or by using the Script Wizard to author your scripts.

Inserting a Script into Your Page

When you insert a script on your page, you choose whether you want to use JavaScript or VBScript. You cannot use both languages on the same page.

An inline script is embedded in the page and runs when the page is displayed in a browser. If you're familiar with either scripting language, you can insert a script into your page with the Script dialog box as follows:

1. Position the insertion point on your page where you want the script to appear.
2. Choose Insert | Script. The Script dialog box shown in Figure 24.7 appears.
   Figure 24.7 : You can enter your script manually in the Script field in the Script dialog box.

3. Select the scripting language you want to write your script in. To write a script using VBScript, select the VBScript radio button. To write a script using JavaScript, select the JavaScript radio button.

4. In the Script pane, enter the script.
5. Choose OK to place the script in your page.

Creating a Script with the Script Wizard

When you use the List view in the Script Wizard, you can only write event scripts. The interface allows you to select objects and associated events. Next, you pick an action that is done when the event takes place. The Script Wizard generates the JavaScript for you automatically.

1. Position the insertion point on your page where you want the script to appear.
2. Choose Insert | Script. The Script dialog box appears.
3. Select the scripting language you want to write your script in. To write a script using VBScript, select the VBScript radio button. To write a script using JavaScript, select the JavaScript radio button.
4. Click the Script Wizard button. The Script Wizard opens.

Selecting an Event Handler

When you first open the Script Wizard, you see a screen similar to that shown in Figure 24.8. You use the Script Wizard's List view to write event scripts. Event scripts perform actions when a user selects a control on your page.
Figure 24.8 : Use the List view in the Script Wizard to generate event scripts.

You see three panes in the Script Wizard's List view. The first pane is labeled "1. Select an Event." This is the Event pane. You see a hierarchical view of the events that are available to choose from, including the events that are applicable to the ActiveX controls that are inserted on your page.

The first thing you want to do in the Script Wizard is select an event handler. You can't go anywhere else without doing that.

To select an event handler, follow these steps:

1. In the Select an Event field, click the plus sign (+) beside the window object or ActiveX control (such as the menutabs control shown in Figure 24.9) to expand the tree. A list of the events that you can apply to the object appears, listed in alphabetical order by ID name.
   Figure 24.9 : Select an event handler from the event pane.

2. Highlight the event handler that you want to apply an action to. For example, in Figure 24.9, the event handler that performs an action when the user clicks a menu tab is selected.

After you select an event handler, a couple of things occur. The Script pane waits for you to select an action for the event. In this case, the Script Wizard is waiting for you to select an action to occur when the user clicks the menutabs control, as indicated by the prompt "3. On menutabs Click Perform the following Actions." In addition, the Insert Action button located at the bottom of the Script Wizard enables.

Well, it was easy enough to get that far. The next thing you do is insert an action that takes place when the user selects the option, and that's where it gets interesting (and where you need some additional references). You choose an action from the action pane, labeled "2. Insert Actions." The actions listed in this pane are specific to the ActiveX controls included on your page.

Selecting an Action

You select an action to perform from the Action pane. The list of actions varies, depending on the control you are using. To give you a simple example of how to insert an action, I'll show you the Go To Page action. This action takes the user to another page or property in your script. You can also use this action to play a sound file when the user clicks a button.

To insert a Go To Page event, follow these steps:

1. In the Action pane of the Script Wizard (labeled "2. Insert Actions," select Go To Page.
2. Click the Insert Action button at the bottom of the Script Wizard. The Go To Page dialog box shown in Figure 24.10 appears.
   Figure 24.10 : To jump to a page, enter the URL in the Go To Page dialog box.

3. You can choose one of three options at this point:
   • Enter the URL of the page you want to go to in the Enter a Text String field and choose OK. You return to the Script Wizard.
   • To jump to a predefined variable, property value, or value that is not a simple constant, click the Custom button. The Go To Page dialog box shown in Figure 24.11 appears. Enter a single-word value in the Enter a single value or variable name field, and choose OK to return to the Script Wizard.
     Figure 24.11 : To jump to a variable or property name, select Custom and enter its name in the Go To Page dialog box.

   • To change the color of a page or object, click the Color button. The Color dialog box shown in Figure 24.12 appears. Select a color and choose OK to return to the Script Wizard.
     Figure 24.12 : To change the color of a page or object, select Color and choose a color from the Color dialog box.

Inserting Global Variables

If your script uses global variables, you can add them to your script using the Global Variables selection in the Action pane. When you insert a global variable, the Script Wizard places it at the beginning of the HTML code for the script. In VBScript, a global variable uses the form dim variablename. In JavaScript, global variables use the form var variablename.

To insert a new global variable, follow these steps:

1. Right-click anywhere in the Insert Actions section of the Script Wizard.
2. Choose New Global Variable from the pop-up menu. The New Global Variable dialog box shown in Figure 24.13 appears.
   Figure 24.13 : Use the New Global Variable dialog box to add global variables to your script.

3. In the "Enter the new global variable name field," enter the name of the variable.
4. Click OK. The variable name appears beneath the Global Variables heading in the action tree.

To edit a global variable, follow these steps:

1. From the Insert Actions field, highlight the global variable that you want to edit.
2. Choose Edit from the pop-up menu. The Edit Global Variable dialog box appears.
3. Enter a new declaration name for the variable.
4. Click OK. The new variable name appears beneath the Global Variables heading in the action tree.

To delete a global variable, follow these steps:

1. From the Insert Actions field, highlight the global variable that you want to delete.
2. Choose Delete from the pop-up menu. The variable is removed from the action tree.

Inserting New Procedures

To define a new procedure in your script, select the Procedure option in the Action pane. Procedures are added at the beginning of your script. In VBScript, procedures use the form sub Proceduren(). In JavaScript, procedures use the form function Proceduren().

To insert a new procedure, follow these steps:

1. Right-click anywhere in the Action pane of the Script Wizard.
2. Choose New Procedure from the pop-up menu.
3. Select an action or actions for the procedure from the Action pane field.
4. Click the Insert Action button to add the action to the procedure.

Using the Code View in the Script Wizard

You can use the Code view in the Script Wizard to edit your code manually. To switch the Script Wizard to Code view, select the Code View radio button at the bottom of the Script Wizard screen. You can add events and actions to your script by double-clicking items in the Action pane. Then, you can edit the script for the action in the script pane at the bottom of the Script Wizard screen.

Workshop Wrap-Up

In this chapter, you learned how to add ActiveX controls to your pages. You also learned the basics of how to use the Script Wizard to write event code for the controls you place on your pages. Admittedly, further reference is required for this chapter. Coding in JavaScript and VBScript requires knowledge that is beyond the scope of this book and is better covered by books that focus on each topic. However, using either of these scripting languages, you can extend the functionality of your Web pages with customized menus, active multimedia content, and more. Through the use of these Web technologies, you can create pages like the big guys do.

Next Steps

To begin your adventures with JavaScript and VBScript, check out the following books, published by Sams.net:

Laura Lemay's Web Workshop: JavaScript, Laura Lemay and Michael Moncur. ISBN: 1-57521-141-6.
JavaScript Unleashed, Richard Wagner et al. ISBN: 1-57521-118-1.
Teach Yourself JavaScript in 21 Days, Arman Danesh. ISBN: 1-57521-073-8.
Teach Yourself VBScript in 21 Days, Keith Brophy and Timothy Koets.
ISBN: 1-57521-120-3.

Q&A