Chapter 12

Scripting and ActiveX

• Getting Microsoft's ActiveX Controls
  • Label Control
  • Preloader Control
  • Timer Control
  • Menu Control
• Inserting Controls with the OBJECT Tag
  • The OBJECT Tag in Detail
  • Setting a Control's Properties with the PARAM Tag
• Connecting Controls to Scripts
  • Handling an Event
  • Changing an Object's Properties
• Tying It All Together with an Example

You use ActiveX controls (the objects formerly known as OLE controls or OCXs) to insert a variety of functionalities into 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 over 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 if you want to build dynamic and exciting Web pages. You have to make all those controls work together. That's where JScript 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.

Getting Microsoft's ActiveX Controls

Microsoft provides a collection of ActiveX Controls with Internet Explorer 3.0. You don't have to do anything other than install Internet Explorer 3.0 to get them. Microsoft does package some controls only with the complete installation of Internet Explorer 3.0, though, and Microsoft provides other controls through its ActiveX Gallery Web site at http://www.microsoft.com/activex/gallery. Table 12.1 briefly describes each control and how you get it. The sections that follow show you real, live 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 12.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 12.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 faster than all the rest. You use it to speed up the apparent throughput of a Web session by allowing Internet Explorer 3.0 to cache graphics, video, and audio for a subsequent Web page while the user is looking at the current page. Normally, you'd use the Preloader control to quietly preload images or other HTML elements while the user is reading the current Web page. Then,when you want to go on to the next page in the Web site, or when you want to view an image file, hear a sound, or watch a video clip, Internet Explorer has already downloaded it to the cache and the user can view it without any further delay. 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 that you can use to change the content of a Web page or perform some other task. Figure 12.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 12.2 : You use the Timer control to execute a script at preset intervals, such as every second or every 10 seconds.

Menu Control

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

Figure 12.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. That's all.

In the following sections, you dive into a detailed discussion of each of the OBJECT tag's attributes. Before that, however, take a brief look at how you use the OBJECT tag in a Web page. In its simplest form, the OBJECT tag looks something like 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. In this case, I'm using the View Tracker control. Don't let that awkward looking number throw you, it just identifies the control. You'll learn how to set this attribute later. You use the id attribute to identify the control to the scripts in your Web page. width, height, and align work the same as always.

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

The OBJECT Tag in Detail

The OBJECT tag has a number of attributes that can be specified. Table 12.2 goes through each attribute and explains how you'll be using these attributes working with ActiveX controls. Use Table 12.2 as a quick reference for the OBJECT tag's attributes. The sections that follow describe each attribute in detail.

ALIGN.You'll use the ALIGN attribute to determine the placement of your ActiveX control in the Web page. ActiveX objects can be placed as part of the current text line or as a distinct element aligned left, right, or center. You'll set the ALIGN attribute to one of the values found in Tables 12.3 or 12.4, depending on the appearance you want to achieve.

The ALIGN tag is currently fully implemented in Internet Explorer 3.0.

BORDER. If the object is part of a hypertext link, the BORDER attribute suggests the width to be used as a border around the object's visible area. For instance, if you wanted the object to have no border at all as a hypertext link, you would set BORDER=0. The BORDER tag is currently fully implemented in Internet Explorer 3.0.

CLASSID and CODEBASE CLASSID. are used 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 executed here. ActiveX uses the clsid: URL scheme to specify the ActiveX class identifier.

For further information on the clsid: URL scheme see http://www.w3.org/pub/WWW/Addressing/clsid-scheme.

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 19, "The ActiveX Control Pad").

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 a URL from which the control can be obtained.

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 that 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. The DECLARE attribute indicates that the object should not be instantiated until something references it. That is, the browser will note the declaration of the object, but won't actually load it until you reference it. At this writing, the DECLARE attribute has not been implemented in Internet Explorer 3.0. However, Microsoft indicates that DECLARE will be supported.

HEIGHT. The HEIGHT attribute suggests the height in pixels to make available to the ActiveX control when rendered by the browser. The Web browser may (or may not) use this value to scale an object to the requested height. The HEIGHT attribute is currently supported in Internet Explorer 3.0.

HSPACE. The HSPACE attribute suggests 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 may (or may not) use this value to allocate white space. The HSPACE attribute is currently supported in Internet Explorer 3.0.

ID. The ID attribute defines a documentwide identifier. This can be used for naming positions within documents. You also use the controls ID to reference it in scripts. The ID attribute is currently supported in Internet Explorer 3.0.

ISMAP. The ISMAP attribute indicates that the Web server provides an image map. The OBJECT must appear within an anchor tag indicating a hypertext link in order for ISMAP to make sense. ISMAP requires that mouse clicks be sent to the server in the same manner as the IMG element is used for regular image maps. There is still disagreement among the W3C committee members working on the OBJECT tag definition, so the ISMAP attribute is not currently supported in Internet Explorer 3.0. However, Microsoft has indicated that ISMAP will be supported if it remains a part of the OBJECT tag specification.

NAME. Use the NAME attribute to indicate whether an object wrapped in a FORM tag will be submitted with 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. The NAME attribute is currently supported in Internet Explorer 3.0.

STANDBY. A short string of text can be displayed while the browser loads the ActiveX control. Use the STANDBY attribute to specify this text. The STANDBY attribute is not currently supported in Internet Explorer 3.0. However, Microsoft will likely implement this attribute.

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

You can learn more about Internet Media Types by referring to RFC 1590. You can get RFC 1590 from the Internet at ftp://ds.internic.net/rfc/rfc1590.txt.

Currently, the TYPE 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.

USEMAP. The USEMAP attribute is included for use with static images. The value in USEMAP specifies a URL for a client-side image map. The USEMAP attribute is not currently supported in Internet Explorer 3.0, but Microsoft has indicated that future versions of Internet Explorer will support USEMAP.

VSPACE. The VSPACE attribute suggests 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 may (or may not) use this value to allocate the requested white space. The VSPACE attribute is currently supported in Internet Explorer 3.0.

WIDTH. The WIDTH attribute suggests the width in pixels to make available to the ActiveX control when rendered by the browser. The Web browser may (or may not) use this value to scale an object to the requested width. The WIDTH attribute is currently supported in Internet Explorer 3.0.

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 in order 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 19, "The ActiveX Control Pad."

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 12.5 describes the attributes you use with the PARAM tag. You frequently need to use only the NAME and VALUE attributes.

There is no need to go through all of these attributes-they are mostly self-explanatory except for the VALUETYPE attribute. The VALUETYPE attributes are explained briefly in Table 12.6.

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="Fifth Choice"> 
</OBJECT>

Connecting Controls to Scripts

Now, we're getting to the meat of the matter. You've 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 JScript. In the sections that follow, you'll learn how to handle the events that are fired by a control. You'll also learn how to get and set a control's properties from your scripts.

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

Handling an Event

In Chapter 3 "Events and JScript," you learned all about events and event handlers. You can use a couple of different methods of handling events for forms and elements, 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="JavaScript" 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 that define the object and event associated with that script. FOR="btnButton" EVENT="Click()" says that when an object named btnButton fires 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. What good are those objects if you can't get and set their value, then? You read the value of most elements using the object's value property, as follows:

str = txtTextBox.value

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 that accept user input. Thus, you can use them in an expression without explicitly using the value
property, as follows:

alert txtTextBox
txtTextBox = "New Contents of the Text Box"

Tying It All Together with an Example

You've 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.

An example might make things clearer for you, however, so that's exactly what you'll do in this section: Work through a quick example. 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. with an empty HTML file. All you really need in this file are the <HTML> and
   </HTML> tags.
2. a TextBox control called txtName into your Web page using the following You don't need to set any properties for the text box.
   160 HEIGHT=24
   CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3">
3. Insert a Command Button control named cmdDisplay into your Web page using the 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.
   60 HEIGHT=24
   CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
   ="Display"> <PARAM NAME="Size" VALUE="2455;846">
   ="ParagraphAlign" VALUE="3">
   </OBJECT>
4. Add the HTML file. The FOR attribute associates this script with thecmdDisplay object you created in step 3. The EVENT attribute associates this script with the Click event of the Command Button 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.
   JavaScript" FOR="cmdDisplay" EVENT="Click()">
   .alert( "Hello " + txtName)
   -->
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 12.4.

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