Previous Page TOC Next Page



28


Exploring ActiveX and ActiveX Controls


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.

What Is 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.

ActiveX in Action


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 28.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 28.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, Incorporate (See Figure 28.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 28.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 28.3). You can learn all about FutureWave products here:

http://www.futurewave.com

Figure 28.3. Creating powerful animation with minimal bandwidth requirements.

ActiveX Background


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 28.4). You can find the ActiveX home page at this site:

http://www.microsoft.com/activex/

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 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 helps users see almost instantaneous results during downloading, and asynchronous connections speed up downloading considerably.

Figure 28.4. The ActiveX home page at Microsoft.

ActiveX Core Technologies


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 28.5 shows, these core technologies work together to give you live content on the Web.

Figure 28.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 lets 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 enable 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 28.6.) at this site:

http://www.microsoft.com/activexisv/direct.htm

Figure 28.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 29, "Creating Interactive Pages with 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.

Using ActiveX and ActiveX Controls


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 28.7, you should enable the following:

Figure 28.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 28.8, when you reach a page containing a control, your browser immediately retrieves and starts to install the control. You will know this because the status bar states that the browser is installing components.

Figure 28.8. Internet Explorer installs components automatically.

When the browser has completely downloaded the control, you'll see the authentication window shown in Figure 28.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 28.9. An authentication mechanism is built in to ActiveX.

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 28.10.

Figure 28.10. Running an installed ActiveX component.

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 28.1 lists some sample applications and their GUIDs.

Table 28.1. Globally unique identifiers.

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-00AA00A47DD2}
ActiveX Popup Menu Control {7823A620-9DD9-11CF-A662-00AA00C066D2}
ActiveX Preloader Control {16E349E0-702C-11CF-A3A9-00A0C9034920}
ActiveX Timer Control {59CCB4A0-727D-11CF-AC36-00AA00A47DD2}

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.

Whenever you install a control, you must reference the control's unique identifier. Entering and verifying this identifier by hand would be tedious and prone to typos. Fortunately, when you add a control to your Web page, FrontPage automatically creates a reference to the unique identifier for you.

Placing ActiveX Controls on a Web Page


Adding controls to your page isn't always easy, especially if you don't know the acceptable properties, events, and methods for the control you want to use. This is where FrontPage integration with ActiveX comes in handy.

Microsoft includes over a dozen ActiveX controls with FrontPage. Yet if you have ever used other ActiveX-compliant products, you probably have several dozen controls available on your system. For example, when you install Internet Explorer 3.0, approximately a dozen new controls are made available on your system. Furthermore, some controls you install depend on other controls. This means when you install one control, several controls are actually installed on your system.

Table 28.2 shows a combined list of controls that are typically installed when both FrontPage and Internet Explorer 3.0 are available on your system. Because these are known controls, FrontPage tells you the properties, events, and methods these controls accept.

Table 28.2. Common Controls.

Control Name Description
ActiveMovie Control Plays video files.
ActiveX Image Control Displays images in multiple formats, including JPG, GIF, BMP, metafile, and wavelet.
Animated Button Creates an animated button from sequences of an AVI video file.
Calendar control Adds an interactive calendar.
Chart control Creates charts and graphs from data.
Gradient control Creates horizontal lines with gradient coloring.
Label object Creates text labels that can be rotated.
Marquee control Creates a window for scrolling marquees.
Macromedia Active Shockwave Allows you to use Shockwave files.
ActiveX Hot Spot control Creates clickable regions on a page.
Menu control Creates a menu that can be easily accessed.
Popup Window control Creates a popup window for tips, notes, and warnings.
Popup Menu control Creates a popup menu for easy site navigation.
Preloader control Loads documents, images, and other media files in the background so they are instantly available when needed.
Stockticker control Displays data that changes continuously.
Timer Allows you to create timed events that are used to add or remove elements from the page.
ViewTracker Generates events that can be used to tell when controls are in the viewable part of the browser's window.
Web Browser control Control for displaying any ActiveX document within a page. These documents can include Word documents, Excel spreadsheets, and Access tables.

Many of the controls available from Microsoft deal with Form elements. These controls provide alternatives to using intrinsic HTML controls that depend solely on VBScript and are in a group of controls called Microsoft Forms 2.0. Table 28.3 shows a listing of these controls.

You use form controls as you would use intrinsic HTML controls. For example, you can use the Checkbox control to add a checkbox that uses ActiveX to respond to the users selections. However, you may find that using intrinsic HTML controls with VBScript is much easier than using ActiveX form controls. For this reason, I recommend using only the form controls with unique features. This includes the MultiPage control, the Spin Button control, and the TabStrip control.

Table 28.3. Microsoft Forms 2.0 controls.

Control Name Description
Checkbox control Adds a checkbox to the page
Combobox control Adds a drop-down list to the page
Command Button control Adds a push button to the page
Frame control Creates a scrollable picture frame for manipulating images
Image control Adds an image within a form
Label control Adds a text label to the page
Listbox control Adds a scrollable list of options to the page
Multipage control Allows you to use multiple pages that can be accessed with buttons or tabs; similar to the TabStrip control
Option Button control Adds a radio button to the page
Scrollbar control Adds scrollbars to the page
Spin Button control Adds to the page a button that can be rotated
TabStrip control Lets users reach several pages with tabs that can be clicked on
Textbox control Adds a text entry field or text window to the page
Toggle Button control Adds a button with a toggle state, such as on and off, to the page

You are not limited to the controls known to FrontPage. Any ActiveX Control registered on your system can be used in your Web pages. You add ActiveX controls to your pages in the FrontPage Editor. After you move the insertion point to where you want to add the control, select Insert | Other Components | ActiveX Control. Alternately, if you have the Advanced Toolbar selected, you can simply click on the ActiveX control button. This opens the dialog box shown in Figure 28.11.

Figure 28.11. Setting properties for ActiveX Controls.

The Pick a Control field has a pull-down list that allows you to quickly select any control registered on your system. Keep in mind that this is a list of all controls currently registered on your system.

After you select a control from the list, you need to set properties for the control. Although properties listed in the ActiveX Control Properties dialog are common to all controls, properties you access by clicking on the Properties button are unique properties for the control you are using. If possible, FrontPage will display the control exactly as it will be seen in the user's browser. Otherwise, you'll see an icon for the control you've added to the page. For ActiveX, this icon is gray and has a label that reads "ActiveX" in large letters.

Setting Common Properties of Controls


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. To do this, enter a name for the control in the Name field. You will use this name to refer to the control in your scripts.

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.

The properties in the Layout area of the ActiveX Control Properties box aren't new. You have seen them used many times before, especially with images. These properties are used exactly as discussed in previous chapters. For your convenience, they are summarized in Table 28.4.

Table 28.4 Common layout properties for ActiveX controls.

Property Name Description
Alignment Determines the alignment of the object
Border Thickness Determines the border width to use if the object is a hyperlink
Height Sets the object's height
Horizontal Spacing Sets the horizontal spacing around the object
Vertical Spacing Sets the vertical spacing around the object
Width Sets the object's width

If you refer back to Figure 28.11, you'll see the three fields I haven't defined yet:

The HTML field allows you to insert HTML markup and text that will be displayed by browsers that do not support ActiveX controls. Ideally, you will add content to make up for what the reader can't see. Unfortunately, FrontPage will not create the markup for you, and you must enter your own markup tags and text directly in the HTML field.

Controls you add to the page may need to refer to data files. You will use the Data Source field to tell the control the name of the data file. For example, the ActiveMovie Control plays movies and needs to know the name of the movie you want it to play. You can enter the data source using an absolute or relative URL.

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 Code Source property 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 Code Source property.


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 the 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.



Setting Unique Properties of Controls


You can set unique properties for a control by clicking on the Properties button. Some controls have dozens of unique properties. Although FrontPage will let you add any type of control to your page, that doesn't mean that the FrontPage Editor understands all the properties the control uses. For this reason, when you click on the Properties button, one of two things happens, depending on whether the control is known or new.

Known Controls

If the FrontPage Editor knows what properties the control uses—as read from a configuration file—you will see a dialog box that lists all of the control's properties. When this dialog box is available, setting individual properties is often as easy as clicking on the property listing until the value you want to use is displayed.

Figure 28.12 shows the Properties dialog box for the ActiveMovie Control. You'll learn more about properties for commonly used controls in the next section.

Figure 28.12. If FrontPage knows the properties for the control, you'll see a Properties box like this one.

As you can see from Figure 28.12, the Properties dialog box has two columns of entries for each property that you can set for the control. The first column shows the name of a property, and the second column shows the property's default value. Not all properties have default values, though.

Clicking on an entry in the Properties dialog box lets you edit a text value associated with the property. You enter this text in the text entry field at the top of the dialog box. If another window is associated with the property you've selected, a button is displayed to the right of the text entry field. Clicking this button opens a dialog box for the property, but you can also double-click the property entry to display this dialog box.

When you click on a property that accepts only specific values, such as On or Off, values are entered for you automatically. Each click of the mouse moves you through the value selections.

Just about any control you use has properties that set default colors for text, backgrounds, and highlights, so let's take a look at how you can define color-related properties. Most properties that set colors have a related dialog box called Color where you can select colors by using a graphical interface. When the Color dialog box shown in Figure 28.13 is open, you can choose a color simply by clicking on it. After you make a color selection, close the Color dialog box by clicking the OK button. Now the active property is set to the color you selected.

Figure 28.13. Setting a property to a specific color.

If the 48 colors in the basic palette aren't enough, you can create and store values for up to 16 custom colors to use for other controls or control properties. To create a custom color, click the Define Custom Colors button. As you can see from Figure 28.14, this adds a new area to the Color window.

Figure 28.14. Customizing your colors.

You define custom colors by using one of the following methods:

The Color/Solid field displays the dithered and solid colors that correspond to your current color selection. When the custom color is set to your liking, click the OK button to use the value for the current property.


TIP

If you want to save the custom color, select a rectangle in the Custom Colors grid, create your custom color, and then click the Add to Custom Colors button.



New Controls

If the FrontPage Editor does not know what properties the control uses, you will see a generic dialog box that lets you set parameters for the control (See Figure 28.15).

Figure 28.15. If FrontPage doesn't know the properties for the control, you'll see a Properties box like this one.

When the Object Parameters dialog box is displayed, FrontPage depends on you to enter valid parameters for the control. A parameter is like any other property, meaning parameters have names and accept values. With parameters, you can also sometimes define a media type.

To add parameters, you will click on the Add button. This opens the Edit Object Parameters dialog box shown in Figure 28.16. In the Name field, you enter the name of the parameter you are setting. In the Value field, you select a radio button that corresponds to the type of parameter you are setting, then enter information related to the parameter type.

Figure 28.16. Editing parameters for the control.

Data type parameters use strings or numeric values. For example, the Label Control uses a parameter called FontSize that expects a numeric value. This numeric value is a Data type. To use a 12-point font with the Label Control, you would enter FontSize in the Name field, select the Data type, and enter 12 in the related input field.

Page type parameters generally, but not always, refer to HTML documents, which is why you must also specify a media type. Media types follow the MIME standard. For example, the ActiveMovie Control uses a page type parameter called FileName. To use this property, you enter FileName in the Name field, then select the Page type. In the input area for the Page type, enter the actual filename, such as myMovie.avi. Here, you enter video/x-msvideo in the Media Type field.

Object type parameters generally refer to other objects, which could be another control on the page. For example, if you have two Label Controls on the page. The control named labelA could refer to the control named labelB. In the Name field, enter the name of the parameter, such as Reference, then select the Object type, and enter the name of the object in the input area.

Summary


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.

While these objects can enable everything from 360-degree control over video to networked games, your primary use for controls will probably be to add versatility. Instead of having a navigation bar with hypertext links, you'll use an ActiveX control to add a popup menu. Instead of placing footnotes at the bottom of the page, you'll use an ActiveX control to add popup windows so your references can be accessed directly. These kinds of features will bring readers back to your pages time after time.

Previous Page Page Top TOC Next Page