Chapter 2

Inserting ActiveX Controls on the Web Page

• Getting Microsoft's ActiveX Controls
  • Label Control
  • Preloader Control
  • Timer Control
  • Menu Control
• Inserting Controls with the OBJECT Tag
  • Setting a Control's Properties with the PARAM tag
  • More About the OBJECT tag
  • Using ActiveX Controls in Netscape (NCompass)
• Connecting Controls to Scripts
  • Handling an Event
  • Changing an Object's Properties
• Tying It All Together with an Example
• Don't Manually Insert Controls

You use ActiveX controls (the objects formerly known as OLE controls or OCXs) to add a variety of features to your Web page. For example, you can add a Timer Control to your Web page that periodically updates the page's content, or you can use a Popup Window Control to display tooltip-style help when the user holds the mouse pointer over a link. Considering that there are more than a thousand ActiveX controls available for you to use, the possibilities are just about endless.

Simply dropping ActiveX controls onto your Web page isn't enough for you to build a dynamic and exciting Web page. You have to make all those controls work together. That's where scripting comes in. You associate scripts with the events and values of the controls you put on a Web page so that you can make them interact. You can update the contents of a TextBox Control when the user clicks a button, for example, or you can open a Web page in a frame when the user chooses an item from a Popup Menu Control.

Although this chapter describes how to connect scripts to controls, this book isn't about scripting languages. It is about using ActiveX controls and plug-ins with Internet Explorer. However, this book is a perfect companion to several of Que's books on scripting languages, such as:

VBScript by Example
JavaScript by Example
Special Edition Using VBScript
Special Edition Using JavaScript
Using JScript

Getting Microsoft's ActiveX Controls

Microsoft provides a basic collection of ActiveX controls with Internet Explorer 3.0. You need only install Internet Explorer 3.0 to get them. However, Microsoft packages some controls only with the complete installation of Internet Explorer 3.0, while providing other controls through its ActiveX Gallery Web site at http://www.microsoft.com/activex/gallery. Table 2.1 briefly describes each control and how you get it. The sections that follow show you working examples of some of these controls.

Label Control

The ActiveX Gallery shows an example of the use of the ActiveX Label Control, shown in Figure 2.1. Using this control, you can display text within a Web page using any installed font with any style or color, and at any arbitrary angle you choose. In this example, the two regions change-either color, text, or orientation-whenever you click them.

Figure 2.1 : The Label Control gives you the ability to place text on the Web page without resorting to graphics.

Preloader Control

The ActiveX Preloader Control makes your Web site seem to work faster than normal. It's a slight-of-hand, however, because the Preloader Control quietly caches files (graphics, video, audio, and HTML) from the Web site while the user is reading the current Web page. You can see an example of the Preloader Control at Microsoft's ActiveX Gallery.

Timer Control

The Timer Control lets you periodically run a script which you can use to change the content of a Web page or perform some other task. Figure 2.2 shows a Web page that uses a timer to change the size and color of the two labels (each implemented with the Label Control) over time. Both labels change at different intervals because this Web page uses two different Timer controls.

Figure 2.2 : You use the Timer Control to execute a script at preset intervals, such as every second or every ten seconds.

Menu Control

You use the Menu Control to put a button on your Web page that, when clicked by the user, displays a menu. When the user chooses a menu item, the control fires an event which you can handle with a script. Figure 2.3 shows you the example from Microsoft's ActiveX Gallery. It contains two Menu controls; each one displays a different submenu.

Figure 2.3 : You can use the Menu Control to add menu-driven navigation to your Web site, like Microsoft's Site Builder Workshop.

Inserting Controls with the OBJECT Tag

You've seen the controls, now you need to know how to insert them into your Web pages. You use the OBJECT tag to do just that. With regard to ActiveX controls, the OBJECT tag identifies the control you're using. The OBJECT tag identifies which control on the user's computer (the browser downloads and installs the control on the user's computer) you want to use and gives that instance of the control a name, which you can use in scripts. That's all.

In the sections that follow, you learn much more about each of the OBJECT tag's attributes. Before moving on, take a look at how you use the OBJECT tag in a Web page. In its simplest form, the OBJECT tag looks similar to the following:

<OBJECT

       classid="clsid:1A771020-A28E-11CF-8510-00AA003B6C7E"

       id=Track1

       width=400

       height=2

       align=left>

<IMG SRC="noobject.gif">

<PARAM NAME="Image" VALUE="image.gif">

</OBJECT>

The CLASSID attribute uniquely identifies, on the computer, the control you're using. Every control installed on the user's computer is installed in the Registry. The control's CLASSID is the number that Windows uses to identify that control. You can think of the CLASSID as a name that is guaranteed to be unique. You'll learn more about this attribute later. In this case, I'm using the View Tracker Control. You use the id attribute to identify the control to the scripts in your Web page. width, height, and align work the same as with other types of tags; they specific the size and location of the control on the Web page.

The OBJECT tag provides a way out for those browsers that don't support the OBJECT tag. Browser's that do support the OBJECT tag ignore anything between <OBJECT> and </OBJECT> that isn't a PARAM tag (you learn about this in the next section). Browser's that don't support the OBJECT tag will ignore it and the PARAM tags, and use the sandwiched <OBJECT> and </OBJECT> tags instead. In this case, if the user's Web browser supports the OBJECT tag, she sees the View Tracker Control inserted into her Web page. Otherwise, she sees an IMAGE.gif image inserted using the IMG tag.

Setting a Control's Properties with the PARAM tag

You will need to set the properties of the ActiveX controls you put on the Web page to control its appearance or functionality. For example, you need to give the Stock Ticker Control the URL of the text file it should use for data. You need to provide the Label Control the text it should display. The only way to know for sure which properties each control requires is to check in the control's documentation. You can also use the ActiveX Control Pad to set a control's properties, as described in Chapter 3 "Creating Web Pages with the ActiveX Control Pad & Layout Control."

So how do you set these properties? You use the PARAM tag to assign a value to a named property within the control. This works very much like Visual Basic property sheets. Note that the PARAM tag has no closing </PARAM> tag. Table 2.2 describes the attributes you use with the PARAM tag. You frequently need to use only the NAME and VALUE attributes.

NAME, VALUE, and TYPE are self-explanatory. Table 2.3 describes the settings you can use with VALUETYPE.

The following is an example of inserting an ActiveX control using the OBJECT tag. The CLASSID attribute specifies the Popup Menu Control, and each PARAM tag adds a menu item to the menu.

<OBJECT

       id=iemenu1

       classid="clsid:0482b100-739C-11CF-A3A9-00A0C9034920"

       width=1

       height=1

       align=left

       hspace=0

       vspace=0

   >

   <PARAM NAME="Menuitem[0]" VALUE="First Choice">

   <PARAM NAME="Menuitem[1]" VALUE="Second Choice">

   <PARAM NAME="Menuitem[2]" VALUE="Third Choice"> 

   <PARAM NAME="Menuitem[3]" VALUE="Fourth Choice">

   <PARAM NAME="Menuitem[4]" VALUE="Firth Choice">

</OBJECT>

More About the OBJECT tag

The OBJECT tag has a number of attributes that you can use. The sections that follow describe each attribute. In reality, however, you'll find yourself using only a few: classid, id, height, width, align, and, possibly, codebase.

ALIGN  You use the ALIGN attribute to specify where to place the object. You can position an object relative to the text line or on its own on the left, right, or center of the page. Table 2.4 describes the settings you can use to align the object with the text line. Table 2.5 describes the settings you can use to align the object with the page.

BORDER  When you use an object as part of a hypertext link, you can specify whether or not the object has a border. The BORDER attribute specifies the width of the border around the object. If you don't want a border around the object, set this attribute to 0, such as: BORDER=0.

CLASSID and CODEBASE  You use CLASSID to refer to the ActiveX control to be placed within the object's borders. There are several different ways to indicate the object to be inserted here. ActiveX uses the clsid: URL scheme to specify the ActiveX class identifier.

The best way to obtain the CLSID for an ActiveX control is to look at the control's documentation. You can look up Microsoft's ActiveX controls at Microsoft's ActiveX Gallery. Alternatively, use the ActiveX Control Pad to insert an ActiveX control in your Web page so that you don't have to worry about the CLSID (see Chapter 3 "Creating Web Pages with the ActiveX Control Pad & Layout Control"). If the CLASSID attribute is missing, ActiveX data streams will include a class identifier that can be used by the ActiveX loader to find the appropriate control.

The CODEBASE attribute can be used to provide an URL from which the control can be obtained. If the control is already installed on the user's computer, the browser will do nothing with this attribute. If the control isn't installed on the user's computer, however, the browser will try to download the control from the URL in CODEBASE and install it.

CODETYPE  The CODETYPE attribute is used to specify the Internet Media Type for the code pointed to by the CLASSID attribute. Browsers use this value to check the type of code before downloading it from the server. Thus, the browser can avoid a lengthy download for those objects which it doesn't support.

Currently, the CODETYPE attribute is supported in a limited fashion in Internet Explorer 3.0. Microsoft has indicated that TYPE will be implemented for all relevant MIME types.

DATA  The DATA attribute contains a URL that points to data required by the object, for instance a GIF file for an image. Internet Explorer 3.0 currently supports the DATA attribute.

DECLARE  You'll use the DECLARE attribute to tell the browser whether to instantiate the object or not. If the DECLARE attribute is present, it indicates that the object should not be instantiated until something references it. The browser will note the declaration of the object, but won't actually load it until you reference it.

HEIGHT  The HEIGHT attribute defines the height in pixels to make available to the ActiveX control when rendered by the browser. The Web browser might use this value to scale an object to the requested height.

HSPACE  The HSPACE attribute defines the amount of space in pixels to keep as white space on the left and right as a buffer between the ActiveX control and surrounding page elements. The Web browser might use this value to allocate white space.

ID  The ID attribute defines a document-wide identifier. This can be used for naming positions within documents. You also use the control's ID to reference it in scripts.

NAME  You use the NAME attribute to indicate whether an object wrapped in a FORM tag will be submitted as part of the form. If you specify NAME, the Web browser submits the VALUE property of the object to the host. If you don't specify NAME, the ActiveX control is assumed to be decorative and not functional in the form.

STANDBY  STANDBY is short string of text that the browser displays while it loads the ActiveX control.

TYPE  The TYPE attribute is used to specify the Internet Media Type for the data specified by the DATA attribute.

USEMAP  The value in USEMAP specifies a URL for a client-side image map.

VSPACE  The VSPACE attribute defines the amount of space in pixels to keep as white space on the top and bottom as a buffer between the ActiveX control and surrounding page elements. The Web browser might use this value to allocate the requested white space.

WIDTH  The WIDTH attribute defines the width in pixels to make available to the ActiveX control when rendered by the browser. The Web browser might use this value to scale an object to the requested width.

Using ActiveX Controls in Netscape (NCompass)

NCompass Labs provides a Netscape plug-in called ScriptActive that makes ActiveX controls work in Netscape. It requires Netscape Navigator 3.0 or later. To install the ScriptActive plug-in, download ScriptActive from http://www.ncompasslabs.com, saving it into a temporary folder. In Windows Explorer, double-click the file that you downloaded to start the setup program. Follow the instructions you see on the screen.

As always, there are a few caveats. These caveats should make you wary in choosing the ScriptActive plug-in. For example, you won't have much luck using Microsoft's new development tools with ScriptActive, because ScriptActive doesn't support ActiveX controls with the OBJECT tag. Here's more information about these caveats:

• ScriptActive only supports VBScript if it's stored in a separate file. Thus, if you want both Internet Explorer and Netscape users to be able to use your Web page, you must store your scripts in files with the ALX extension and refer to that script using the EMBED tag, such as:
  <EMBED SRC="myscript.axs" WIDTH=1 HEIGHT=1 LANGUAGE="VBScript">
• ScriptActive doesn't directly support the OBJECT tag. It only supports the EMBED tag. Thus, if you're authoring a Web page that you want to be compatible with both Internet Explorer and Netscape, you must insert a comparable EMBED tag inside of each OBJECT tag. Otherwise, Netscape users won't be able to use your Web page, regardless of whether or not they have ScriptActive. Internet Explorer will use the OBJECT tag, ignoring the EMBED tag, and Netscape will use the EMBED tag, ignoring the OBJECT tag.

Connecting Controls to Scripts

Now, we're getting to the meat of the matter. You learned how to insert ActiveX controls into your Web page using the OBJECT tag. Now you need to learn how to interact with those controls using a scripting language. In the sections that follow, you learn how to handle the events that are triggered by a control. You also learn how to get and set a control's properties from your scripts. Incidentally, the scripting language of choice is VBScript for these examples. The JavaScript versions of these examples aren't much different, however.

ActiveX controls act like and quack like the elements on a form. You interact with each ActiveX control's properties, methods, and events in exactly the same way in which you interact with a form's elements. You handle a control's events when the control needs attention, you call a control's methods, and you get and set the control's properties.

Handling an Event

In a Web page, an object causes events in response to the messages the object receives from Windows. When you click inside of an object, Windows sends a message to the object telling it that you clicked the mouse. In turn, the object causes a click event, and the browser looks for a special script procedure or function called an event-procedure to handle that event.

You can use a couple of different methods of handling events for forms and elements (event-procedures, inline event-handlers, and so on), but there's really only one way to handle an ActiveX control's events: using the FOR/EVENT attributes of the SCRIPT tag.

The FOR and EVENT attributes let you associate a script with any named object in the HTML file and any event for that object. Take a look at the following:

<SCRIPT LANGUAGE="VBScript" FOR="btnButton" EVENT="Click">

<!--

 window.alert( "Ouch! You clicked on me." )

-->

</SCRIPT>

<OBJECT ID="btnButton" WIDTH=96 HEIGHT=32

        CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">

        <PARAM NAME="Caption" VALUE="Click Me">

        <PARAM NAME="Size" VALUE="2540;847">

</OBJECT>

This defines a button (with an ID of btnButton) that executes the script when the user clicks it. Take a look at the <SCRIPT> tag. It contains the FOR and EVENT attributes which define the object and event associated with that script. FOR="btnButton" EVENT="Click" says that when an object named btnButton triggers the Click event, every statement in this script is executed.

Some events pass arguments to the event handlers. How do you handle arguments when you're handling the event using the FOR/EVENT syntax? Like the following:

<SCRIPT LANGUAGE="JavaScript" FOR="btnButton" EVENT="MouseMove(shift, button, x, y)">

The enclosed script can then use any of the parameters passed to it by the MouseMove event.

You just saw the Click event. ActiveX controls support a wide variety of other events. The only way to know for sure which events a control supports is to consult the control's documentation or the ActiveX Control Pad's documentation. For your convenience, however, the following list describes the most prevalent and useful events:

• BeforeUpdate occurs before data in a control changes.
• Change occurs when the value property in a control changes.
• Click occurs when the user either clicks the control with the left-mouse button or selects a single value from a list of possible values.
• DblClick occurs when the user clicks twice with the left-mouse button rapidly.
• DropButtonClick occurs when a drop-down list appears or disappears.
• KeyDown occurs when a user presses a key.
• KeyUp occurs when a user releases a key.
• KeyPress occurs when the user presses an ANSI key.
• MouseDown occurs when the user holds down a mouse button.
• MouseUp occurs when the user releases a mouse button.
• MouseMove occurs when the user moves the mouse pointer over a control.
• Scroll occurs when the user changes a scroll bar.

Changing an Object's Properties

Many objects let the user input data. For example, the user can choose an item from a list, type text in an edit box, or click a check box. What good are objects if you can't get and set their value? Not much. You read the value of most elements using the object's value property in an assignment or logical expression. The following example assigns the text that the user typed into the txtTextBox Control to a variable called str. The next example compares the text that the user typed into the txtTextBox with the word "Howdy."

str = txtTextBox.value

If txtTextBox.value = "Howdy" Then

You can also set the value of an element by assigning a string to the element's value, as follows:

txtTextBox.value = "New Contents of the Text Box"

The value property is the default property for most ActiveX controls which accept user input. Thus, you can use the control's value in an expression without explicitly using the value property, such as:

alert txtTextBox

txtTextBox = "New Contents of the Text Box"

Tying It All Together with an Example

You learned a lot in this chapter. You learned about the variety of ActiveX controls you can put in your Web page. You learned about using the OBJECT and PARAM tags to insert controls in your Web page. You also learned how to associate scripts with controls.

Working through a quick example might make things clearer for you. This example in particular is a simple Web page that prompts the user for his name and displays a greeting to him when he clicks a button. Use these steps to create this example:

1. Start with an empty HTML file. All you really need in this file are the <HTML> and </HTML> tags.
2. Insert a TextBox Control called txtName into your Web page using the following OBJECT tag. This is where the user will type his name. You don't need to set any properties for the text box. You can change the size of the text box by experimenting with the WIDTH and HEIGHT attributes. You must type the CLASSID attribute exactly as shown.
   <OBJECT ID="txtName" WIDTH=160 HEIGHT=24
   CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002f3">
   </OBJECT>
3. Insert a CommandButton Control named cmdDisplay into your Web page using the following OBJECT tag. The Caption property determines what the user sees on the button. The Size attribute determines the size of the button. The ParagraphAlign property aligns the caption in the middle of the button, because it's set to 3.
   <OBJECT ID="cmdDisplay" WIDTH=60 HEIGHT=24
   CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
   <PARAM NAME="Caption" VALUE="Display">
   <PARAM NAME="Size" VALUE="2455;846">
   <PARAM NAME="ParagraphAlign" VALUE="3">
   </OBJECT>
4. Add the following script to the HTML file. The FOR attribute associates this script with the cmdDisplay object you created in step 3. The EVENT attribute associates this script with the Click event of the CommandButton Control. When the user clicks the button, Internet Explorer executes every line in this script, which displays a message box with the user's name in it.
   <SCRIPT LANGUAGE="JavaScript" FOR="cmdDisplay" EVENT="Click()">
   <!--
   window.alert( "Hello " + txtName)
   -->
   </SCRIPT>
5. Save the HTML file and open it in Internet Explorer 3.0. Type your name in the text box, and click the button. You should see a message box similar to Figure 2.4.

Figure 2.4 : The user can't interact with Internet Explorer 3.0 as long as the message box is displayed.

Don't Manually Insert Controls

This chapter has showed you how to manually insert controls into a Web page. You need this information. Understanding the OBJECT and PARAM tags makes it easier to understand what tools, such as the ActiveX Control Pad, are doing to your Web page.

On the other hand, you shouldn't make a habit of manually inserting controls into your Web page. Why? Well, because it's a bit tedious and it's certainly error prone. The next chapter, "Creating Web Pages with the ActiveX Control Pad & Layout Control," shows you how to use this great tool to automatically insert a control into your Web page, creating all the necessary tags as it works.