activex

activex overview
ActiveX is fundamentally different from Java in several ways:

• ActiveX is strictly browser dependent. ActiveX controls are only supported by Internet Explorer 3.0 and higher, and some may not operate correctly unless run on IE 4.0. Java, however, is completely browser independent, and will run on everything from NCs (Network Computers) to Unix workstations.
• ActiveX controls have precompiled source files. Unlike Java, which generates bytecodes that are later interpreted at run time by the browser, ActiveX controls are precompiled and must go through a rigorous testing process to check for security or memory leaks before being released to the public. The Java interpreter limits program functionality with built-in security "features" that disable direct access to memory by applets.
• ActiveX is a standard that is integrated into the Windows platform. ActiveX controls are interpreted by Windows on the same level as standard user interface controls, such as buttons and text boxes. This means that any ActiveX control can be implemented in a standard program, and is not limited to being used only in web pages.
• ActiveX DLLs are installed onto the system. After an ActiveX control is downloaded, it is permanently installed on the computer's hard drive, and can be accessed by any web page or program. Java controls require the source code to be redownloaded each time web pages containing Java controls are loaded.

activex tutorial
For our tutorial, I'll take you through the steps we used to implement the area menu on the navigation bar above. (Only available on the Internet Explorer versions of our site.) The ActiveX control was originally downloaded from the Microsoft ActiveX repository, now relocated to http://www.activex.com/.
This is the code we used to initialize the ActiveX control:

<OBJECT ID="AreaMenu" WIDTH=192 HEIGHT=192
     CLASSID="CLSID:275E2FE0-7486-11D0-89D6-00A0C90C9B67"
     CODEBASE="http://activex.microsoft.com/controls/mcsi/mcsimenu.cab#version=1,0,0,44">
        <PARAM NAME="ForeColor" VALUE="&H00000000">
        <PARAM NAME="BackColor" VALUE="&H00BEBEBE">
        <PARAM NAME="FontName" VALUE="Verdana">
        <PARAM NAME="FontSize" VALUE="10">
        <PARAM NAME="FontBold" VALUE="0">
        <PARAM NAME="FontItalic" VALUE="0">
        <PARAM NAME="FontUnderline" VALUE="0">
        <PARAM NAME="FontStrikethrough" VALUE="0">
        <PARAM NAME="FontCharset" VALUE="0">
</OBJECT>

I realize that this looks intimidating, but, after I explain the different tags and parameters used, everything will fall into place. First, the <object> tag performs the self-explanatory action of creating an ActiveX object. The five major parameters, used here, are:

• ID: The ID of an object is how the object is referred to in script code. The ID of this menu is AreaMenu, and if we were to call a fictitous open() function, the line of JavaScript syntax would be:

  AreaMenu.open();

• Width: This attribute defines the width of the control. For this menu control, the Width and Height attributes are irrelevant, because the control doesn't have a visible user interface. Instead, it sits behind the scenes until it's called out by a script.
• Height: See if you can guess what this does.
• ClassID: Each ActiveX control is assigned a unique Class ID number, like an identification number. Programs and web pages use this number to tell the computer which ActiveX control to load.
• Codebase: If the control is not present on the system, the Codebase attribute tells the browser where to find the control on the Internet. The viewer's browser will then download the file (usually a .cab compressed archive) and install it on to the user's computer.

the <param> tag
The other half of ActiveX control implementation is the <param> tag. ActiveX controls expose a set of properties that affect how it operates and displays. You can change these properties using the <param> tag, as shown above. It requires only two parameters:

• Name: The Name attribute tells the browser which property to change. The browser passes this on to the ActiveX control to verify that it's a valid property. In the above code, I used the <param> tag to set up the foreground and background colors (the menu control requires colors to be in &H00BBGGRR format) and the font display options.
• Value: This is the value to set the parameter defined in the Name attribute to. In my menu code, I defined "Verdana" as the value for the "FontName" parameter. This information was passed from the browser to the control, which processed the information and updated it's interface display.

accessing activex objects with scripts
Many scripts are useless on their own, but very powerful when coupled with JavaScript or VBScript. Our area menu is one such example. To add items to the menu, the MCSi Menu control (the menu we use) supports a function, AddItem(PicIndex, "ItemCaption", ID), that should be called when the menu is created. The PicIndex property is normally set to 0, unless you define images to be loaded into the menu, which is beyond the scope of this tutorial. Another function that the control exposes is the Popup() function. To create a menu, initialize it with several menu items, and set it up to pop out when the viewer clicks a button, you can use the following code:

<body bgcolor="black" text=#F0F0F0 onLoad="JavaScript:InitMenu();">

<OBJECT ID="AreaMenu" WIDTH=192 HEIGHT=192
     CLASSID="CLSID:275E2FE0-7486-11D0-89D6-00A0C90C9B67"
     CODEBASE="http://activex.microsoft.com/controls/mcsi/mcsimenu.cab#version=1,0,0,44">
        <PARAM NAME="ForeColor" VALUE="&H00000000">
        <PARAM NAME="BackColor" VALUE="&H00BEBEBE">
        <PARAM NAME="FontName" VALUE="Verdana">
        <PARAM NAME="FontSize" VALUE="10">
        <PARAM NAME="FontBold" VALUE="0">
        <PARAM NAME="FontItalic" VALUE="0">
        <PARAM NAME="FontUnderline" VALUE="0">
        <PARAM NAME="FontStrikethrough" VALUE="0">
        <PARAM NAME="FontCharset" VALUE="0">
</OBJECT>

<script language="JavaScript">

function InitMenu()
{
  // This function is called when the window is opened
  // because of the onLoad attribute defined in the <body> tag above.
  AreaMenu.AddItem(0, "Menu Item 1", 1);
  AreaMenu.AddItem(0, "Menu Item 2", 2);
  AreaMenu.AddItem(0, "Menu Item 3", 0);
  AreaMenu.AddItem(0, "", 4); // This is a spacer
  AreaMenu.AddItem(0, "Menu Item 4", 4);
}

</script>

<input type="button" value="Popup Menu" OnClick="JavaScript:AreaMenu.Popup()">

</body>

Of course, having a menu doesn't do any good if the web page can't respond when the user selects an item. To add this functionality, ActiveX controls supply us with events. Events allow scripts embedded in the web page to handle user responses. To trap the Click(IDofClicked) function that the MCSi Menu Control exposes, insert the following code inside the <body> tag:

<script language="vbscript">

Sub AreaMenu_Click(Cmd)
  ' This function is executed when a menu item is selected.
  ' The ID of the menu item is automatically inserted into
  ' the Cmd variable, defined in the function header.
  Msgbox("You have selected Menu Item #" & Cmd)
  ' Append the ID of the menu item selected to a friendly message.
End Sub

</script>

This code might be unlike the standard scripting code you've been working with, but don't let it unnerve you. First, note that ActiveX events can only be trapped with VBScript code. The syntax for handling an ActiveX event is:

Sub ObjectID_EventName([Optional Arguments])
  Code to be executed when the event is triggered
End Sub

After implementing the event handling code, your final menu should work like this:

Congratulations! You've completed the ActiveX tutorial. Now, check out our Links section for resources providing ActiveX controls that you can use in your own web pages!

Click here to go back to the table of contents.