Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Special Edition Using Jscript

chapter 12 -- Scripting and ActiveX

Chapter 12

Scripting and ActiveX


CONTENTS



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.

Tip
Netscape Navigator can display ActiveX controls too. You need to get the ActiveX plug-in from Ncompass Labs, however. Open http://www.ncompass.com in your Web browser for more information.

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.

Table 12.1 Microsoft's ActiveX Controls

NameDescription
Provided by the Minimum, Typical, and Complete Installs of Internet Explorer 3.0
Web BrowserDisplays HTML files, ActiveX Controls, and ActiveX documents
TimerExecutes a script at specific intervals
MarqueeScrolls an HTML file horizontally or vertically
Provided by the Complete Install of Internet Explorer 3.0
ActiveMovieDisplays streaming and nonstreaming video and audio
HTML LayoutDisplays 2-D HTML regions created with the ActiveX Control Pad
Forms 2.0 LabelDisplays a text label
Forms 2.0 TextboxPrompts the user for text
Forms 2.0 Combo BoxDisplays a drop-down list of options
Forms 2.0 List BoxDisplays a scrollable list of options
Forms 2.0 CheckBoxDisplays a checkbox option
Forms 2.0 Option ButtonDisplays an option button
Forms 2.0 Toggle ButtonDisplays a button that the user can toggle on and off
Forms 2.0 Command ButtonDisplays a basic button
Forms 2.0 TabstripDisplays multiple pages of controls that the user selects by clicking a tab
Forms 2.0 ScrollBarDisplays vertical and hortizontal scroll bars
Forms 2.0 Spin ButtonDisplays a spin button that can be pushed up or down
ImageDisplays a progressive image from a JPG, GIF, or BMP file
HotspotAdds a transparent hotspot to a layout
Provided at Provided at http://www.microsoft.com/activex/gallery
Animated ButtonDisplays an AVI file on a button
ChartDraws various types of charts
GradientShares an area with a range of colors
LabelDisplays a text label with a given angle, color, and font
MenuDisplays a button that pops up a standard menu that fires an event when the user chooses an item
Popup MenuDisplays a pop-up menu that fires an event when the user chooses an item
Popup WindowDisplays an HTML file in a pop-up window
PreloaderDownloads the file at the given URL into the user's cache
Stock TickerDisplays data from a text file at regular intervals
View TrackerFires events when the control enters or leaves the browser's viewing area

Note
Many of the ActiveX controls you find on the Internet aren't digitally signed. By default, Internet Explorer 3.0 won't install unsigned controls-it doesn't even give you the chance to override it. Thus, Internet Explorer will ignore many of the controls that the Web page authors are using. Check your security configuration to make sure you have a choice: choose View, Options from the main menu; click the Security tab; click the Safety Level button; and make sure that you select Medium. Then Internet Explorer 3.0 will ask you before installing an unsigned control. If you choose not to install the control, the Web page may not work as the author intends. On the other hand, if you do install the control, you open yourself up to troubles that come from running controls from unknown sources, such as bugs that can cause the browser to crash or, worse, controls that damage your system.

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.

Table 12.2 OBJECT Tag Attributes

AttributeDescription
ALIGN Determines placement of the object relative to other items on the page or relative to the page itself
BORDER Specifies the width of the border to be placed around the object when used as an anchor
CLASSID URL that identifies an implementation of the object to be rendered on the page (i.e., a class identifier)
CODEBASE URL that specifies the location of the objects code (Java and ActiveX objects require this attribute)
CODETYPE Internet Media Type for code that specifies the type of code that the CLASSID attribute refers to
DATA URL that specifies the location of the objects data
DECLARE Indicates whether the object referred to in CLASSID is to be declared (and not loaded) or instantiated (loaded)
HEIGHT Suggests the height that the Web browser should provide for display of the object
HSPACE Area to be preserved as white space to the left and right of the border and display space of the object
ID A document-wide identifier for referring to the object
IDMAPIndicates that the object has a server-side image map
NAME Used to indicate whether the object's value should be included in a form submit
STANDBY Identifies the text to be displayed while the object is being loaded
TYPE Refers to Internet Media Type (RFC 1590) for data
USEMAP URL for a client-side image map
VSPACE Area to be preserved as white space above and below the border and display space of the object
WIDTH Suggests the width that the Web browser should provide for display of the object

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.

Table 12.3 Values for the ALIGN Attribute Relative to the Current Text Line

ValueMeaning
TEXTTOP The top of the object is aligned with the top of the current font
MIDDLE The middle of the object is aligned vertically with the baseline
TEXTMIDDLE The middle of the object is vertically aligned with a position halfway between the baseline and the height of the letter x in lowercase
BASELINE The object's bottom is aligned with the baseline of the text line on which it appears

Table 12.4 Values for the ALIGN Attribute as a Freefloating Object

ValueMeaning
LEFT The object will be placed on the left margin below the previous text or object in the page
CENTER The object will be placed midway between the left and right margins
RIGHT The object will be placed on the right margin below the previous text or object in the page

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").

Getting a CLASSID from the Registry
You can also get the CLASSID for an ActiveX control from the Windows Registry, like this:
  1. the Registry Editor. Choose Run from the Start menu, type regedit, and press Enter.
  2. a control under HKEY_CLASSES_ROOT, such as Internet.Gradient or
  3. the default value of the CLSID subkey for that control. This is the string you use in the CLASSID attribute.
You can learn more about CLSIDs in Special Edition Using the Windows 95 Registry or Windows 95 Registry Handbook by Que.

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.

Table 12.5 Attributes of the PARAM Tag

AttributeDescription
NAME Defines the name of the property. Your ActiveX control can treat the name as case-sensitive if desired
VALUE Specifies the value of the property identified in NAME
VALUETYPE Can be one of REF, OBJECT, or DATA
TYPE Refers to Internet Media Type (RFC 1590) of the item referred to in the VALUE field when VALUETYPE = REF

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.

Table 12.6 Values for the VALUETYPE Attribute

ValueMeaning
REF Indicates that the value found in the VALUE attribute is a URL
OBJECT Indicates that the value found in the VALUE attribute is the URL of another OBJECT element
DATA Indicates that the value found in the VALUE attribute is intended to be passed to the OBJECT as a string; this is the default 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="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.

Tip
Once you've specified a language in your HTML file, you don't need to do it again. Your browser defaults to the most recently used language used in the HTML file. You can put <SCRIPT LANGUAGE="JavaScript"></SCRIPT> at the very beginning of your HTML file one time and forget about it. The rest of the scripts in your file will use JScript.

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:

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.

Note
Although you can continue to work with ActiveXcontrols by hand, I don't recommend that you do so. Microsoft'sActiveX Control pad makes inserting ActiveX controls into a Web page far too simple for you to continue whacking yourself with the OBJECT tag. See Chapter 19, "The ActiveX Control Pad," for more information.