|
|
by William Robert Stanek
Creating documents that come to life before your eyes is what Microsoft's ActiveX is all about. ActiveX-enabled pages can feature powerful yet easy-to-use interfaces that merge virtual reality, 360-degree control over video, real-time audio, and even games into Web pages. Recently, ActiveX technology has come to the forefront as a hot Internet innovation; it's even stealing the spotlight from Java.
This chapter explores ActiveX, the control components that make it work, and how to activate your Web pages with ActiveX.
At the heart of ActiveX is a concept for merging technologies by using an enhanced object linking and embedding (OLE) interface. OLE is certainly not a new technology, but applying OLE to the Internet is a groundbreaking innovation-this is what ActiveX is all about. ActiveX is OLE for the Internet.
With ActiveX, your Web pages can include live multimedia effects. You don't just add a video to the page that plays when the page is loaded; you add a video to the page that the user can control in a panoramic 360 degrees. To experience total control over video, check out Surround Video from Black Diamond. (See Figure 31.1.) If seeing 360-degree control over video with ActiveX technology doesn't make you an immediate ActiveX convert, it will certainly change your view about how to activate the World Wide Web. You can find Surround Video on the Web at this site:
http://www.bdiamond.com/surround/surround.htm
Figure 31.1 : Surround Video powered by ActiveX offers a multimedia feast in a full 360 degrees.
Live documents you can create with ActiveX aren't restricted to HTML. Beyond 360-degree video, entire worlds are waiting to be created and explored. You can experience the wonders of the marriage of ActiveX and VRML technologies with the TerraForm VRML browser from Brilliance Labs, Inc. (See Figure 31.2.) This browser uses ActiveX to link to a Direct 3D component module that serves up VR images many times faster than normal VR browsers. The TerraForm VRML browser and great demos are at this site:
http://www.brlabs.com
Figure 31.2 : Activating VRML with ActiveX and the TerraForm VRML browser.
With ActiveX, you get power and simplicity. One of the latest sensations on the Web is Shockwave from Macromedia. Although Shockwave is a powerful tool for creating interactivity on the Web, its animation and applications carry tremendous overhead. With ActiveX, a company called FutureWave Software delivers interactive full-screen animation with one-tenth of the file size of normal animation. (See Figure 31.3.) You can learn all about FutureWave products here:
http://www.futurewave.com
Figure 31.3 : Creating powerful animation with minimal bandwidth requirements.
ActiveX is a sure winner with powerhouse Microsoft at the helm. To help spread the word about ActiveX to the farthest reaches of cyberspace, Microsoft maintains a comprehensive home page for ActiveX. (See Figure 31.4.) You can find the ActiveX home page at this site:
http://www.microsoft.com/activex/
Figure 31.4 : The ActiveX home page at Microsoft.
Microsoft based ActiveX on the Component Object Model (COM), which allows objects to communicate with each other by using links. Object linking is central to OLE, used widely in Windows applications. COM also forms the basis of both OLE and ActiveX, but OLE and ActiveX serve different functions. OLE is designed for use on desktop computers and carries way too much overhead to use it on the Internet. ActiveX, on the other hand, trims down COM to make object linking practical for Internet use.
When the developers at Microsoft redesigned object linking for the Internet, they streamlined COM considerably, so much so that ActiveX components are 50-75 percent smaller than their OLE counterparts. ActiveX also introduces incremental rendering of components and asynchronous connections. Incremental rendering is used so that users can see almost instantaneous results during downloading, and asynchronous connections speed up downloading considerably.
ActiveX is the key to integrated technologies for both clients and servers; its core technologies include the following:
The ActiveX server framework is designed specifically for servers, but ActiveX scripting, ActiveX documents, and ActiveX controls are designed for clients, such as browsers. As Figure 31.5 shows, these core technologies work together to give you live content on the Web.
Figure 31.5 : ActiveX technologies work together.
ActiveX controls are the key to adding live and interactive multimedia to your Web documents. With ActiveX controls, you can embed and execute software applications in a Web page that let users view and interact with movies, animation, and audio. You can create ActiveX controls with any developer tool that supports OLE, such as Visual C++, Visual J++, and Visual Basic.
ActiveX controls are similar to Netscape plug-ins. Both ActiveX controls and Netscape plug-ins allow you to embed applications in your documents. Just as Netscape lets third-party developers create plug-ins for Navigator, Microsoft is allowing third-party developers to create new ActiveX controls. Already hundreds of cool ActiveX controls are available from Microsoft and from third-party developers. Tracking the vast array of controls would be almost impossible. Fortunately, Microsoft maintains a full directory of available controls (See Figure 31.6.) at this site:
http://www.microsoft.com/activexisv/direct.htm
Figure 31.6 : A directory to ActiveX controls.
Recently, client-side scripting languages have gained popularity. Two of the most popular scripting languages are JavaScript and VBScript. With ActiveX scripting, you can use any client-side scripting language in your documents. You can also link your client-side scripts to Java applets, embedded applications, and ActiveX controls. In Chapter 33, "Integrating ActiveX and VBScript," you will learn how to use ActiveX and VBScript together to create more powerful Web pages.
With ActiveX documents, you can import documents formatted for Word, Excel, Powerpoint, Schedule, Access, and many other applications into your Web pages. These documents are imported by using a special viewer inserted into the browser's viewing window. This viewer has its own toolbars, menus, and interface.
The key to ActiveX documents is that the application the document is formatted for must be OLE-compliant. As along as an application is OLE-compliant, you can use ActiveX document technology.
Although ActiveX was initially developed for Windows systems, it's designed as a cross-platform solution. Microsoft and several development partners are hard at work bringing ActiveX to Macintosh and UNIX systems.
The showcase browser to support ActiveX is Internet Explorer 3.0. When you use Internet Explorer, you don't have to get any special software to enable ActiveX. However, you might need to check your browser's security options for active content. As shown in Figure 31.7, you should enable the following:
Figure 31.7 : Using ActiveX with Internet Explorer.
Internet Explorer isn't the only browser to support ActiveX. Netscape Navigator users can download a plug-in called ncompass. With Ncompass installed, you can use ActiveX controls and ActiveX documents just as you would in any other browser. To get the current version of ncompass, visit ncompass Labs (www.ncompasslabs.com).
Although hundreds of cool ActiveX controls are available, you don't have to worry about wading through a myriad of controls spread across hundreds of Web sites. As you have seen, Microsoft maintains a complete directory of controls; it also publishes a gallery of controls created at Microsoft and digitally signed controls available from third-party vendors (www.microsoft.com/activex/gallery/). Because the controls in the gallery are authenticated, they're relatively safe to use on your system.
If you visit the ActiveX gallery, you can quickly get your first taste of how easy it is to get and install a new control. Unlike plug-ins, ActiveX controls are readily and immediately available when you visit a page that uses a control. This is because the ActiveX specification requires that all controls support self-registration. To demonstrate this, see how the Popup Window control is installed in a browser.
The first step is to get to the Popup Window control demo page by following the link given in the ActiveX gallery. As you can see from the status bar at the bottom of Figure 31.8, when you reach a page containing a control, your browser immediately gets and starts to install the control. You will know this because the status bar states that the browser is installing components.
Figure 31.8 : Internet Explorer installs components automatically.
When the browser has completely downloaded the control, you'll see the authentication window shown in Figure 31.9. By following links in the authentication window, you can make sure the control you're installing is both secure and safe for your system. If you choose to continue with the installation, the control is instantly added and available for use; if you choose not to, the control is discarded.
Figure 31.9 : An authentication mechanism for ActiveX is built in.
Most controls download and install very quickly, especially at 28.8 Kbps. If you log onto the Internet with a slower modem, you'll be glad to know that you need to download a control only once. After that, the control is always available for use on your system. On my system, the Popup Window control installed completely and ran the demo in less than 10 seconds. The demo page with a popup window is shown in Figure 31.10.
Figure 31.10: Running an installed ActiveX component.
Objects are the key to using ActiveX. When you add an ActiveX control to a Web page, you're placing a special type of object on the page. Objects are defined in a separate specification that will eventually be merged into the upcoming version of HTML, tentatively known as Cougar.
To embed an ActiveX control in a Web page, use the <OBJECT> tag. This tag tells your browser to insert an object of a specified type into a page. As with most HTML tags, there is a begin and an end <OBJECT> tag.
| Note |
The <OBJECT> tag is the proposed replacement for the <APPLET> tag used with Java applets and the <EMBED> tag used with Netscape plug-ins. Although you can add many types of objects to your pages with the <OBJECT> tag, this section focuses on ActiveX objects. |
Between the begin and end <OBJECT> tag, you can place the following:
This means the basic syntax for adding an object is as follows:
<OBJECT> Additional markup or object parameters
</OBJECT>
To identify a specific object type, you must define attributes
for your objects. The useful <OBJECT>
tag attributes for ActiveX objects are shown in Table 31.1.
| Attribute Name | Description |
| ALIGN | The alignment of the object |
| BORDER | The border width to use if the object is a hyperlink |
| CLASSID | Identifies the object's class |
| DATA | URL for the object's data |
| HEIGHT | Sets the object's height |
| HSPACE | Sets the horizontal spacing around the object |
| ID | An identifier for the specific instance of the object |
| NAME | A name to identify an object submitted in a form |
| TYPE | The MIME type for the object's data |
| STANDBY | Text to display while the object and data are loaded |
| SERVER | URL where the control can be installed from |
| VSPACE | Sets the vertical spacing around the object |
| WIDTH | Sets the object's width |
Most of the attributes shown in the table aren't new to HTML. You have seen the ALIGN, BORDER, HEIGHT, HSPACE, VSPACE, and WIDTH attributes used many times before, especially with the <IMG> tag. These attributes are used exactly as discussed in previous chapters.
| Note |
Because the <OBJECT> tag is part of an advanced specification, it supports the advanced alignments and spacing techniques introduced by HTML 3.2, Netscape Navigator, and Internet Explorer. (Refer to the section "Image Extensions" in Chapter 5 "Designing With HTML 3.2," for more information.) |
When your browser downloads a control and you choose to install it, the control is registered in the Windows registry, a registry for applications on your system. To make sure operating systems can uniquely identify applications, such as your ActiveX controls, each application has a globally unique identifier (GUID).
Because the identifier is globally unique, an ActiveX control
installed on your system has the same GUID as a control installed
on any other system. Table 31.2 lists some sample applications
and their GUIDs.
| Application Name | GUID |
| Internet Explorer | {0002DF01-0000-0000-C000-000000000046} |
| Macromedia Shockwave | {166B1BCA-3f9C-11CF-8075-444553540000} |
| LiveScript | {f414c260-6ac0-11cf-b6d1-00aa00bbbb58} |
| ActiveX Label Control | {99B42120-6EC7-11CF-A6C7-00AA00A47DD2} |
| ActiveX Popup Control | {4EA34162-cc47-11CF-A5D4-00AA00A47DD2} |
| ActiveX Popup Window Control | {A23D7C20-CABA-11CF-A5D4- |
| ActiveX Popup Menu Control | {7823A620-9DD9-11CF-A662-00AA00C066D2} |
| ActiveX Preloader Control | {16E349E0-702C-11CF-A3A9-00A0C9034920} |
| ActiveX Timer Control | {59ccB4A0-727D-11CF-AC36- |
| Note |
In Chapter 33, you will learn how to put the controls identified in Table 31.2 to work. You will also learn about a useful application called the ActiveX Control Pad; with it, you can easily add ActiveX controls to your pages. |
In examining the sample GUIDs, notice that the identifier for each application is, indeed, unique and includes alphabetic and numeric characters separated with dashes. The value {99B42120-6EC7-11CF-A6C7-00AA00A47DD2} is the GUID for the ActiveX Label Control. This value is also referred to as the CLSID or class ID for the Label Control.
Based on the CLSID value, your system starts the appropriate control. Without a proper CLSID, your system doesn't know which control to use, so the control isn't started. When you use controls in Web pages, you need a way to tell your system about a control; you do this with the CLASSID attribute of the <OBJECT> tag.
With the CLASSID attribute, you refer to controls by their CLSID value, such as this one:
<OBJECT CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"> . . .
</OBJECT>
| Note |
In the preceding example, the curly braces are removed from the CLSID. You must remove them from all CLSIDs before referring to them as well. |
Right now, you're probably wondering how to get the monstrous CLSID value. The easiest way is through the Registry Editor, which you can run by starting the regedit.exe application.
| Note |
Usually, the Registry Editor is in your Windows directory: C:\Windows\Regedit.exe |
As shown in Figure 31.11, the Registry Editor files entries by category into directories. For OLE and ActiveX objects, the directory you want to examine is the HKEY_CLASSES_ROOT directory. Although the Registry Editor features a Find function under the Edit menu, it's useful only if you know the exact name of the object you're searching for, especially if your system is cluttered with applications. Therefore, you should browse for the control you're looking for; to do this, double-click the HKEY_CLASSES_ROOT folder.
Figure 31.11: The Registry Editor at startup.
With the HKEY_CLASSES_ROOT folder open, you can see folders for each registered item. Entries are listed by file extension, name, and GUID. The named entries are what you're looking for. Many ActiveX controls are filed beginning with the keyword Internet.
When you find the entry, double-click its folder to see subfolders associated with the entry. (See Figure 31.12.) The CLSID subfolder is the one you want to examine, so double-click it. Now, in the right pane of the Registry Editor, you should see the CLSID associated with the entry.
Figure 31.12: Finding the CLSID value for an entry.
If you double-click the word Default shown in the Name field, the Edit String dialog box is displayed. With the CLSID highlighted, you can press Ctrl+C to copy the CLSID to the Clipboard; then when you're ready to use the CLSID, simply paste the value from the Clipboard with Ctrl+V.
Here's how a Label control could be added to a Web page:
<HTML>
<HEAD>
<TITLE> The Label Control </TITLE>
</HEAD>
<BODY>
<H2>Using the Label Control </H2>
<OBJECT
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
WIDTH=350
HEIGHT=40
VSPACE=0
ALIGN=LEFT
>
. . .
</OBJECT>
</BODY>
</HTML>
Not only do controls added to your page need to be uniquely known by your system, they also need to be uniquely identified on the page so they can be interactive. When you make a control interactive, you identify it with the ID attribute. This ID can then be referred to in a script.
If you're adding a Label control to the page, you could identify the control as follows:
<OBJECT
ID="labelA"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
>
. . .
</OBJECT>
Then you could refer to the control by name in a script. Uniquely identifying each control you add becomes more important when you add several controls to the same page because scripts interact with individual controls referred to by object. Therefore, if you add two Label controls to a page, each control must be uniquely identified, as shown here:
<HTML>
<HEAD>
<TITLE> The Label Control </TITLE>
</HEAD>
<BODY>
<H2>Using the Label Control </H2>
<OBJECT
ID="labelOne"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
WIDTH=350
HEIGHT=40
VSPACE=0
ALIGN=LEFT
>
. . .
</OBJECT>
<OBJECT
ID="labelTwo"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
WIDTH=350
HEIGHT=40
VSPACE=0
ALIGN=LEFT
>
. . .
</OBJECT>
</BODY>
</HTML>
The type of object being transferred to a client is identified by a MIME type so that the client knows how to handle and process the object's data. To avoid possible problems with controls, you should identify the MIME type for the control explicitly; you do this with the TYPE attribute.
For many ActiveX controls, the MIME type is application/x-oleobject, which identifies the control as an application of the experimental OLE object type. You could use this MIME type in an object reference as follows:
<OBJECT
ID="labelOne"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
TYPE="application/x-oleobject"
>
. . .
</OBJECT>
Objects you add to the page may need to refer to data files of a specific MIME type. To do this, identify the file by name using the DATA attribute, then identify the type of data file with the TYPE attribute. To use the data file with a specific ActiveX control, you could define an entry as follows:
<OBJECT
ID="VideoA"
CLASSID="clsid:00022601-0000-0000-C000-000000000046"
DATA="SurfsUp.mpeg"
TYPE="video/mpeg"
>
. . .
</OBJECT>
Earlier, you learned that all ActiveX controls must be self-registering, which ensures that users can get controls without any problems. To enable self-registering, you must tell the client where to get the source code for a control that isn't registered on the user's system-this is where the CODEBASE attribute comes in. You use it to specify the absolute URL path to the control's source code.
Here's the URL path for the Label control:
http://activex.microsoft.com/controls/iexplorer/ielabel.ocx
Follow the URL path with the version and build of the control you're using, as shown here:
http://activex.microsoft.com/controls/iexplorer/ielabel.ocx#version=4,70,0,1161
Then assign the URL path and the version information to the CODEBASE attribute:
<OBJECT
ID="labelA"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=350
HEIGHT=40
VSPACE=0
ALIGN=LEFT
>
. . .
</OBJECT>
| Tip |
Finding the URL path for the control's source code and version information isn't always easy. The best way to make sure your pages refer to a control's most current version is to visit the control developer's Web site and examine the markup source code for samples that use the control. |
Users new to the Web might not understand what's happening when their browser gets and self-installs a control. You can use the STANDBY attribute to keep users informed about what's happening on their system. Any text you assign to the STANDBY attribute is displayed while the control is being installed.
You could use the STANDBY attribute as follows:
<OBJECT
ID="labelA"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx
#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=350
HEIGHT=40
VSPACE=0
ALIGN=LEFT
STANDBY="Please wait while the system installs the Label Control . . ."
>
. . .
</OBJECT>
When you place ActiveX controls on a page, you should set initial properties for the control, such as the label to display with the Label control. You do this with the <PARAM> tag, one of the few HTML tags that isn't used in a pair. The <PARAM> tag is always placed between the begin and end <OBJECT> tags.
Each property you set with a <PARAM> tag is passed as a parameter to the control when it's initialized. You identify parameters with the NAME attribute and set their values with the VALUE attribute, as shown in this example:
<OBJECT> <PARAM NAME="Caption" VALUE="This is the caption for the label.">
</OBJECT>
In the example, the parameter called Caption is set to the initial value:
This is the caption for the label.
Every parameter you pass to a control must be specified in its own <PARAM> tag. Therefore, if you want to set three control properties, you must have three <PARAM> tags:
<OBJECT> <PARAM NAME="Caption" VALUE="See the Popup Window Control in Action."> <PARAM NAME="FontName" VALUE="Times New Roman"> <PARAM NAME="FontSize" VALUE="12">
</OBJECT>
Listing 31.1 shows how you could set parameters for the Label control in a Web page. The sample page is shown in Figure 31.13.
Listing 31.1. Using the Label control.
<HTML>
<HEAD>
<TITLE> The Label Control </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<OBJECT
ID="label0"
CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/
ielabel.ocx#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=480
HEIGHT=500
VSPACE=20
HSPACE=10
ALIGN=LEFT
>
<PARAM NAME="Angle" VALUE="45">
<PARAM NAME="Alignment" VALUE="4" >
<PARAM NAME="BackStyle" VALUE="1" >
<PARAM NAME="Caption" VALUE="Fancy labels are cool!">
<PARAM NAME="FontName" VALUE="Times New Roman">
<PARAM NAME="FontSize" VALUE="30">
<PARAM NAME="ForeColor" VALUE="#f000f0" >
</OBJECT>
<H2 ALIGN=RIGHT> </H2>
<H2 ALIGN=RIGHT>Using the Label Control </H2>
<P> </P>
<P>When your browser downloads a control and you choose to install it, the
control is registered in the Windows registry, which is a registry for
applications on your system. To ensure operating systems can uniquely
identify applications, such as your ActiveX controls, each application
has a unique identifier.</P>
<P>When you place ActiveX controls on a page, you will usually want to set
initial properties for the control, such as the label to display using
the Label Control.</P>
</BODY>
</HTML>
Figure 31.13: Using controls in a Web page.
ActiveX is the key to activating your Web pages-with it, you can create live documents that have features never before seen on the Web. You can easily put ActiveX client-side technologies to work in your Web pages. With ActiveX scripting, you can add scripts that interact with objects on the page; with ActiveX documents, you can add documents formatted with OLE-compliant applications, such as Word and Excel; and with ActiveX controls, you can embed live objects in the page. These objects can enable everything from 360-degree control over video to networked games.
Adding ActiveX objects to your pages is easy, if you follow the steps outlined in this chapter. To identify the object, use the <OBJECT> tag, and to set initial properties for the object, use the <PARAM> tag. Together, the <OBJECT> and <PARAM> tags give you the foundation for fully interactive objects that can come to life before your eyes.
