In addition to VBScript and the Internet Explorer Object Model, which are used for scripting client-side events within the context of HTML documents, Internet Explorer also offers ActiveX controls (or objects).
Based on Microsoft's OLE (Object Linking and Embedding) technology, used for inter-application document sharing and interaction in the Windows environment, ActiveX objects offer an alternative to Java for embedding highly interactive controls and applets in Web pages.
In this chapter, you will learn about ActiveX controls and their place in the Internet Explorer framework. Specifically, you will see the following:
ActiveX—essentially another name for Microsoft's OLE technology—is made up of several components, including:
In this chapter, you're covering ActiveX controls, which are components, similar to Java applets, that adhere to Microsoft's OLE standards. They can be inserted in Web pages and also used in programs developed in any of Microsoft's programming and database languages.
Internet Explorer's support for ActiveX objects allows it to be easily extended with new features—including formatting and animation support—by plugging in new ActiveX controls.
The ActiveX model used in Internet Explorer is based on Component Object Model (COM) technology, which allows components built in different languages—such as Visual Basic, C++, and Java—to work together. This ability gives development flexibility they're currently lacking with Java applets because developers familiar with other development tools should be able to develop ActiveX controls.
Internet Explorer itself is, essentially, a set of ActiveX controls. All the pieces of Internet Explorer, such as the scripting engine, are ActiveX objects that can be used in other applications to give them Internet capabilities, just as Internet Explorer can use other ActiveX applications to extend its functionality.
Unlike Navigator plug-ins, which generally are installed by running a setup program, ActiveX controls operate more like Java applets—they are downloaded when needed. Unlike applets, once they're downloaded and installed, they remain in place for future use, but applets generally disappear at the end of the current session and need to be downloaded again for future use.
Internet Explorer comes with several controls, including:
Like Navigator plug-ins, the list of available ActiveX controls, both from Microsoft and third-party vendors, is growing rapidly. A selection is listed in Table 24.1.
| Name | Company | Description |
| Acrobat | Adobe Systems | Adobe is implementing an Acrobat viewer as an ActiveX control. |
| ActiveMovie | Microsoft | Allows AVI, QuickTime, MPEG, WAV, AU, AIFF, and MIDI files to be embedded in pages. |
| Billboard Manager | NCompass Labs | Displays several images as a billboard with a large selection of transitions between images. |
| Chart | Microsoft | Displays graphs and charts from a set of data. |
| Chart FX | Software FX | Creates scriptable business and scientific charts. |
| EarthTime | Starfish Software | This ActiveX control from Starfish Software can display the time in multiple cities at the same time. (See Figure 24.1.) |
| HTML Layout Control | Microsoft | Enables support for HTML layouts (discussed in Chapter 21, "Microsoft Internet Explorer"). |
| Label | Microsoft | Can display text at any angle as well as displaying on custom paths. (See Figure 24.2.) |
| Look@Me | Farallon Communications | View the screen of another computer running Look@Me or Timbuktu Pro. |
| Marquee Control | Microsoft | Allows the content of an HTML document to be scrolled through in a frame at a set speed. |
| PowerPoint | Microsoft Animation Player | Plays PowerPoint animations in Web pages (animations are created with PowerPoint Animation Publisher—a freely available extension for PowerPoint for Windows 95). (See Figure 24.3.) |
| RealAudio Control | Progressive Networks | Enables Internet Explorer to play streamed RealAudio sound files. |
| Shockwave | Macromedia | Macromedia is making its Shockwave viewers available as ActiveX controls. |
| Stock Ticker | Microsoft | Provides a stock ticker. |
| SylvanMaps | Sylvan Ascent | Display and analyze geographic data. (See Figure 24.4.) |
| UniVerse | Gamma Productions | A Unicode-based editor. (See Figure 24.5.) |
| VDOLive | VDOnet | Provides real-time, streamed audio and video on the Internet. |
| VRML Control | Microsoft | Provides Virtual Reality Modeling Language support in Internet Explorer. |
A more complete list of ActiveX controls is available on Microsoft's Web site at http://www.microsoft.com/activex/controls/.
Figure 24.1. The EarthTime control.
Figure 24.2. The Label control.
Figure 24.3. The PowerPoint Animation Player.
Figure 24.4. The SylvanMaps control.
Figure 24.5. The UniVerse Unicode editing control.
Although Navigator 3.0 doesn't include built-in support for Active objects, a third-party plug-in from NCompass Labs offers ActiveX support in Netscape Navigator. With this plug-in, you can view pages that include ActiveX controls in Navigator as well as Internet Explorer. The ActiveX plug-in is available from NCompass's Web site at http://www.ncomapsslabs.com/.
ActiveX is currently supported on Windows systems, and work is underway to offer ActiveX support on Macintosh systems and UNIX environments.
In addition, Microsoft announced in the summer of 1996 that it will transfer ownership, control, and future development of ActiveX technology to a standards body. By doing this, it's likely that ActiveX will overcome its biggest criticism in the Web community—that it is proprietary technology—and ensure its position next to HTML, Java, and other open solutions for interactive content on the Internet.
Active controls are included in Web pages by using the <OBJECT> tag, which takes several attributes, listed in Table 24.2.
| Attribute | Description |
| ALIGN | Specifies the alignment for the object. Possible values are BASELINE, CENTER, LEFT, MIDDLE, RIGHT, TEXTBOTTOM, TEXTMIDDLE, and TEXTTOP. |
| BORDER | Specifies the width of the object's border in pixels. |
| CLASSID | Identifies the object implementation. Registered controls take a value of the form CLSID:class-identifier where class-identifier is a complex alphanumeric string identifying the control. |
| CODEBASE | Specifies the code base for the object. |
| CODETYPE | Specifies the Internet media type. |
| DATA | Indicates the location of the data for the control to use. |
| DECLARE | Declares an object without activating an instance of it. |
| HEIGHT | Specifies the height of the object in pixels. |
| HSPACE | Specifies the horizontal margin in pixels. |
| NAME | Specifies the name of the object. |
| SHAPES | Indicates that the object has shaped hyperlinks. Takes no values. |
| STANDBY | Indicates a message to display while the object is loading. Takes a string value. |
| TYPE | Specifies the Internet media type of the data. |
| USEMAP | Specifies an image map to use with the object. |
| VSPACE | Specifies the vertical margin in pixels. |
|
WIDTH
| Specifies the width of the object in pixels. |
In addition to the <OBJECT> tag, the <OBJECT> tag acts as a container that can include <PARAM> tags for any parameters that need to be passed to control—just like the <PARAM> tag is used to pass values to a Java applet in Navigator.
For instance, to include a world clock in a page using the EarthTime control from Starfish Software, you could use a tag like this:
<OBJECT ID="EarthTime1" WIDTH=297 HEIGHT=199
CLASSID="CLSID:9590092D-8811-11CF-8075-444553540000">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="7858">
<PARAM NAME="_ExtentY" VALUE="5239">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
This produces results like the ones shown in Figure 24.6.
Figure 24.6. The <OBJECT> tag can be used to include ActiveX controls in a page.
Note that the correct use of the CLSID value and other <PARAM> settings is important for the control to work, so for practical purposes it isn't realistic to include controls in pages by manually writing the <OBJECT> tags. Effective coding of a complex <OBJECT> tag is better done by using the ActiveX Control Pad rather than manual coding. The ActiveX Control Pad is a development tool that can be used to include controls, build HTML layouts, and produce VBScript and JavaScript scripts. The ActiveX Control Pad is discussed in detail in Chapter 25 "Using the ActiveX Control Pad".
Like most other objects, ActiveX controls generally have properties and methods available for use in JavaScript or VBScript scripts. Each control has its own set of properties and methods; information about them is available from producers of ActiveX controls.
For instance, the EarthTime control offers the following properties and methods:
For most, the name of the method or property explains its purpose. For instance, ChangeCity() opens a Change City dialog box like the one in Figure 24.7, and FactsAboutTheCity() opens an information box like the one in Figure 24.8 for the currently selected city. The City property evaluates to the name of the currently selected city as a string.
Figure 24.7. The EarthTime Change City dialog box.
Figure 24.8. The EarthTime City Facts dialog box.
Using these methods, you can create a page that includes the EarthTime control, as well as extra buttons for the following functions:
To do this, you simply need to create an HTML form with buttons for each of these functions and call the appropriate methods of the EarthTime object from the buttons' event handlers:
<HTML>
<HEAD>
<TITLE>Scripting a Control</TITLE>
</HEAD>
<BODY>
<OBJECT NAME="EarthTime1" WIDTH=533 HEIGHT=335
CLASSID="CLSID:9590092D-8811-11CF-8075-444553540000">
<PARAM NAME="_Version" VALUE="65536">
<PARAM NAME="_ExtentX" VALUE="14111">
<PARAM NAME="_ExtentY" VALUE="8855">
<PARAM NAME="_StockProps" VALUE="0">
</OBJECT>
<FORM NAME="controls">
<INPUT LANGUAGE="JavaScript" TYPE=button VALUE="Change City" ONCLICK="EarthTime1.ChangeCity()"
NAME="cityChange">
<INPUT LANGUAGE="JavaScript" TYPE=button VALUE="Make Home City" ONCLICK="EarthTime1.ChooseAsHomeClock()"
NAME="homeClick">
<INPUT LANGUAGE="JavaScript" TYPE=button VALUE="View City Facts"
ONCLICK="EarthTime1.FactsAboutTheCity()" NAME="viewFacts">
<INPUT LANGUAGE="JavaScript" TYPE=button ONCLICK="EarthTime1.CenterMapBySelectedClock()"
NAME="focusCity" VALUE="Focus Map on City">
</FORM>
</BODY>
</HTML>
This produces a page with the four buttons under the EarthTime control, like the one shown in Figure 24.9.
Figure 24.9. Scripts can be used to extend the user interface of an ActiveX control.
The scripting is simple—the EarthTime object is referred to by the name specified in the NAME attribute of the <OBJECT> tag, and the event handlers for each button in the form make one call to a method of the EarthTime object.
In addition to properties and methods, many controls have event handlers of their own, many with robust sets of scriptable events. For instance, the Label control provides handlers for the following events:
Using these events, you can create interactive text labels. For instance, change the text style by scripting event handlers for the MouseDown and MouseUp events, or change other properties, such as the text of the label on clicks or double clicks:
<HTML>
<HEAD>
<TITLE>New Page</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript" FOR="Label1" EVENT="MouseUp(Button, Shift, X, Y)">
<!--
Label1.Font.Italic = false
-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="Label1" EVENT="MouseDown(Button, Shift, X, Y)">
<!--
Label1.Font.Italic = true
-->
</SCRIPT>
<OBJECT ID="Label1" WIDTH=192 HEIGHT=171
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
<PARAM NAME="ForeColor" VALUE="2147483669">
<PARAM NAME="Caption" VALUE="This is a test">
<PARAM NAME="PicturePosition" VALUE="262148">
<PARAM NAME="Size" VALUE="5075;4493">
<PARAM NAME="BorderColor" VALUE="2147483670">
<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="FontName" VALUE="Technical">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="320">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
<BR>
<SCRIPT LANGUAGE="JavaScript" FOR="Label2" EVENT="Click()">
<!--
Label2.Caption = "Clicked."
-->
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" FOR="Label2" EVENT="DblClick(Cancel)">
<!--
Label2.Caption = "Double Clicked."
-->
</SCRIPT>
<OBJECT ID="Label2" WIDTH=97 HEIGHT=24
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
<PARAM NAME="VariousPropertyBits" VALUE="268435483">
<PARAM NAME="Caption" VALUE="Another Test">
<PARAM NAME="Size" VALUE="2566;635">
<PARAM NAME="SpecialEffect" VALUE="1">
<PARAM NAME="FontHeight" VALUE="240">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="0">
</OBJECT>
</BODY>
</HTML>
Two text labels are displayed. In the first, holding the mouse button down changes the text style to italic; releasing it changes the text back to straight, non-italic text. This is done by assigning true or false to the Italic property of the Font object of the Label control.
Similarly, the second label changes its displayed text by assigning new values to the caption property of the Label object based on whether the user clicks or double-clicks on the text.
This script produces results like those shown in Figure 24.10.
Figure 24.10. Objects have scriptable event handlers.
Notice that the special syntax of the <SCRIPT> tag with the FOR and EVENT attributes is used to script the event handlers for the objects.
As with Navigator plug-ins, developing ActiveX controls requires more programming knowledge than scripting Web pages does and is beyond the scope of this book. Microsoft offers the ActiveX Software Developer's Kit, which includes tools and documentation, for those who want to take a stab at developing ActiveX controls. You can get more information about the ActiveX SDK from the Microsoft Web site at http://www.microsoft.com/intdev/sdk/.
To take advantage of the SDK, you need the following:
Note:
The main resource for ActiveX information on the Web is at http://www.microsoft.com/activex/.
In this chapter, you learned about ActiveX controls and their place in the Internet Explorer Framework. ActiveX controls provide an alternative to Java applets and Navigator plug-ins—based on Microsoft's OLE technology—for adding component-level interactivity and file support to Internet Explorer.
You were introduced to some sample controls and learned how to combine them into Web pages, then use JavaScript to write scripts that extend their interfaces, much the way you can for applets and plug-ins.
In the next chapter, you will take a closer look at the ActiveX Control Pad, which gives you an ideal tool for developing Web pages that combine ActiveX controls, HTML layouts, and scripts.
