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.
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.
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
|Provided by the Minimum, Typical, and Complete Installs of Internet Explorer 3.0|
|Web Browser||Displays HTML files, ActiveX Controls, and ActiveX documents|
|Timer||Executes a script at specific intervals|
|Marquee||Scrolls an HTML file horizontally or vertically|
|Provided by the Complete Install of Internet Explorer 3.0|
|ActiveMovie||Displays streaming and nonstreaming video and audio|
|HTML Layout||Displays 2-D HTML regions created with the ActiveX Control Pad|
|Forms 2.0 Label||Displays a text label|
|Forms 2.0 Textbox||Prompts the user for text|
|Forms 2.0 Combo Box||Displays a drop-down list of options|
|Forms 2.0 List Box||Displays a scrollable list of options|
|Forms 2.0 CheckBox||Displays a checkbox option|
|Forms 2.0 Option Button||Displays an option button|
|Forms 2.0 Toggle Button||Displays a button that the user can toggle on and off|
|Forms 2.0 Command Button||Displays a basic button|
|Forms 2.0 Tabstrip||Displays multiple pages of controls that the user selects by clicking a tab|
|Forms 2.0 ScrollBar||Displays vertical and hortizontal scroll bars|
|Forms 2.0 Spin Button||Displays a spin button that can be pushed up or down|
|Image||Displays a progressive image from a JPG, GIF, or BMP file|
|Hotspot||Adds a transparent hotspot to a layout|
|Provided at Provided at http://www.microsoft.com/activex/gallery|
|Animated Button||Displays an AVI file on a button|
|Chart||Draws various types of charts|
|Gradient||Shares an area with a range of colors|
|Label||Displays a text label with a given angle, color, and font|
|Menu||Displays a button that pops up a standard menu that fires an event when the user chooses an item|
|Popup Menu||Displays a pop-up menu that fires an event when the user chooses an item|
|Popup Window||Displays an HTML file in a pop-up window|
|Preloader||Downloads the file at the given URL into the user's cache|
|Stock Ticker||Displays data from a text file at regular intervals|
|View Tracker||Fires events when the control enters or leaves the browser's viewing area|
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.
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.
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.
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.
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.
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 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||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|
|IDMAP||Indicates 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.
|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|
|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:
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.
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.
|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.
|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" VALUE="First Choice"> <PARAM NAME="Menuitem" VALUE="Second Choice"> <PARAM NAME="Menuitem" VALUE="Third Choice"> <PARAM NAME="Menuitem" VALUE="Fourth Choice"> <PARAM NAME="Menuitem" VALUE="Fifth Choice"> </OBJECT>
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.
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:
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:
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:
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
property, as follows:
alert txtTextBox txtTextBox = "New Contents of the Text Box"
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:
Figure 12.4 : The user can't interact with Internet Explorer
3.0 as long as the message box is displayed.
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.