ActiveX Controls | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

ActiveX (http://www.microsoft.com/com/tech/activex.asp), which is the Internet portion of the Component Object Model (COM), is Microsoft's component technology for creating small components , or controls , within a Web page. It is intended to distribute these controls via the Internet to add new functionality to browsers such as Internet Explorer. ActiveX controls are more similar to generalized programmed components than plug-ins because they can reside beyond the browser within container programs such as Microsoft Office. ActiveX controls are similar to Netscape plug-ins insofar as they are persistent and machine specific. Although this makes resource use a problem, installation is not an issue: the components download and install automatically.

Security is a big concern for ActiveX controls. Because these small pieces of code could potentially have full access to a user 's system, they could cause serious damage. This capability, combined with automatic installation, creates a serious problem with ActiveX. End users might be quick to click a button to install new functionality, only to accidentally get their hard drives erased. To address this problem, Microsoft provides authentication information to indicate who wrote a control, in the form of code signing and a certificate, as shown in Figure 15-3.

Figure 15-3: ActiveX signed-code certificate

Certificates provide only some indication that the control creator is reputable; they do nothing to prevent a control from actually doing something malicious. Safe Web browsing should be practiced by accepting controls only from reputable sources.

Adding Controls to Web Pages

Adding an ActiveX control to a Web page requires the use of the <object> tag. The basic form of < object> for an ActiveX control is as follows :

  <object classid="CLSID:    class-identifier    "   height="    pixels or percentage    "   width="    pixels or percentage    "   id="    unique identifier    ">   Parameters and alternative text rendering   </object>

When you insert ActiveX controls, classid is the most important attribute for an <object> tag. The value of classid identifies the object to include. Each ActiveX control has a class identifier of the form " CLSID : class-identifier ," where the value for class-identifier is a complex string, such as the following, which uniquely identifies the control:

  D27CDB6E-AE6D-11cf-96B8-444553540000

This is the identifier for the ActiveX implementation of the Flash Player. The other important attributes for the basic form of <object> when used with ActiveX controls include height and width , which are set to the pixel dimensions of the included control, and id , which associates a unique identifier with the control for scripting purposes. Between the <object> and </object> tags are various <param> tags that specify information to pass to the control, and alternative content and markup that displays in non-ActiveX-aware browsers. The following is a complete example that uses an <object> tag to insert an ActiveX control into a Web page. The markup specifies a Flash file. Figure 15-4 shows the rendering of the control under Internet Explorer and Mozilla, which does not support ActiveX.

Figure 15-4: Rendering of ActiveX control under Internet Explorer and Mozilla

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  ActiveX Test  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   </head>   <body>   <h1 align="center">  ActiveX Demo  </h1>   <hr />   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/pub/   shockwave/cabs/flash/swflash.cab#version=6,0,0,0"   id="flash1" name="flash1"   width="320" height="240">   <param name="movie" value="http://www.htmlref.com/flash/example.swf" />   <param name="quality" value="high" />   <b>  Hello World for you non-ActiveX users!  </b>   </object>   </body>   </html>

After you look at the previous markup, you may have questions about how to determine the classid value for the control and the associated <param> values that can be set. However, providing a chart for all the controls and their associated identifiers isn't necessary. Many Web development tools, including Macromedia Dreamweaver and Microsoft Visual Studio support the automated insertion of controls into a page, as well as configuration of the various control properties. If you are required to insert one by hand, hopefully the vendor of the control has provided documentation that you can consult to find the appropriate classid .

Installing ActiveX Controls

As mentioned previously, the most important attribute in the <object> syntax probably is classid , which is used to identify the particular object to include. For example, the syntax "CLSID:class-identifier" is for registered ActiveX controls. Generally, however, when the object element supports other included items well, classid might be set to other forms, such as "java: Blink.class," as discussed later in the chapter. Explorer also allows the use of the code attribute for the <object> tag; code is used to set the URL of the Java class file to include.

ActiveX and plug-ins are similar in the sense that both are persistent, platform-specific components. ActiveX controls, however, are easy to download and install. This installation, or running of ActiveX controls, can be described as a series of steps:

The browser loads an HTML page that references an ActiveX control with the <object> tag and its associated classid attribute.
The browser checks the system registry to see whether the control specified by the classid value is installed; this control takes the form "CLSID: some-id-number."
If the control is installed, the browser compares the codebase version attribute stored in the registry against the codebase version attribute specified in the tag. If a newer version is specified in the page, a newer control is needed.
If the control is not installed or a newer control is needed, the value of the codebase attribute is used to determine the location of the control to download. The codetype attribute also can be used to set the MIME type of the object to download. Most inclusions of ActiveX controls avoid this because it tends to default to the MIME type application/octet-stream.

For security reasons, the browser checks to see whether the code is signed before the download and installation begins. If the code is not signed, the user is warned . If the code is signed, the user may be presented with an Authenticode certificate bearing the identity of the author of the control. Based on these criteria, the user can allow or deny the installation of the control on his or her system. If the user accepts the control, it is automatically downloaded, installed, and invoked in the page for its specific function. Finally, the control is stored persistently on the client machine for further invocation. This process can be avoided when the declare attribute is present. The declare attribute is used to indicate whether the <object> is being defined only and not actually instantiated until later <object> occurrences, which will start the installation process.

Note	The W3C HTML 4 specification also indicates use of the standby attribute, which can be used to specify a message to display as the object is being downloaded. This currently is not supported by most browsers.

Passing Data to ActiveX Controls

Unlike plug-ins, ActiveX controls do not use special attributes to pass data. Instead, they use a completely different element, called param , which is enclosed within an <object> tag. You can pass parameters to a control by using <param> tags, as shown here:

  <object classid="CLSID:    control-classid-here    "   id="label1" height="65" width="325">   <param name="Caption" value="Hello World" />   <param name="FontName" value="Arial" />   <param name="FontSize" value="36" />   </object>

In this case, the Caption parameter is set to Hello World, the FontName parameter is set to Arial, and the FontSize parameter is set to 36 points. This is just a generic example to illustrate the idea; the previous example with Flash illustrated setting the source of the movie and its quality via <param> tags.

ActiveX Controls and Scripting

Similar to plug-ins, you can control ActiveX controls by using a scripting language such as JavaScript or VBScript. Before a control can be scripted, however, it must be named by using the id attribute. After it is named, scripting code for a particular event can be set for the control so that it can respond to events such as user clicks or mouse movements. The following simple example shows the previous Flash demo using ActiveX style <object> syntax with only minor modifications to the script to make it more like traditional Explorer JavaScript syntax:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Flash JavaScript Control Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <script type="text/javascript">   <!--   var loaded=false;   function playFlash(id)   {   var flashFile = eval("window.document.all."+id);   if (!loaded)   {   while (!loaded)   {   if (flashFile.PercentLoaded() == 100)   {   flashFile.Play();   loaded = true;   }   }   }   else   flashFile.Play();   }   function stopFlash(id)   {   var flashFile = eval("window.document.all."+id);   flashFile.StopPlay();   }   //-->   </script>   </head>   <body>   <h2 align="center">  Plug-in and JavaScript Interaction  </h2>   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"   codebase="http://download.macromedia.com/pub/shockwave   /cabs/flash/swflash.cab#version=6,0,0,0"   id="example" name="example"   width="320" height="240">   <param name="movie" value="http://www.htmlref.com/flash/example.swf" />   <param name="quality" value="high" />   <param name="swliveconnect" value="true" />   <b>  Hello World for you non-ActiveX users!  </b>   </object>   <form action="#">   <input type="button" name="Button1" value="Start Flash" onclick="playFlash('example');" />   <input type="button" name="Button2" value="Stop Flash" onclick="stopFlash('example');" />   </form>   </body>   </html>

Note	This example won't work in anything other than Internet Explorer 3 or better running on a Windows-based system.

Using ActiveX

Developers can access an abundance of available controls for various purposes. Today, most of the controls used are for playing media such as Flash movies or wrap-around images. While Microsoft used to include a variety of controls with its applications, including Internet Explorer, most of these are being phased out in favor of technologies that are part of the .NET framework. Yet despite this, ActiveX still survives and some developers even write their own browser controls and helper objects in Visual Basic, C++, and other high-level languages. ActiveX and related technologies are part of a larger Microsoft development framework that has undergone numerous name changes over the years and at the time of this writing is known as the .NET platform. Even that might change by the time you read this, so for the very latest information on development for the Microsoft platform, see http://msdn.microsoft.com.

< Day Day Up >