Integrating Client-Side ActiveX Controls

ActiveX controls do everything from providing a simple text label to creating full-function spreadsheetlike grids. Many types of ActiveX controls are available.

The operating system and the browser running on that operating system must support ActiveX controls in order for them to run in the browser. Most ActiveX controls in use today are for 32-bit Windows-based systems—Microsoft Windows 95, Windows 98, and Microsoft Windows NT. These controls can be written in a number of languages, including Microsoft Visual Basic, Delphi, PowerBuilder, and C++.

The Macintosh version of Internet Explorer supports ActiveX controls specifically compiled for the Macintosh with MetroWorks CodeWarrior. You can use the Browser Capabilities component, discussed in Chapter 17 and included with ASP, to detect which browser is making requests. This lets you determine whether the browser supports ActiveX controls and which control to send (Macintosh or Windows, for example).

ActiveX controls provide building blocks and an easy development model because they come with visual property sheets for easy customization. Thousands of controls are available commercially that you can use not only in Web pages, but with Visual Basic, Microsoft Visual C++, Microsoft Office, Lotus Notes, Delphi, PowerBuilder, and many other applications.

Inserting ActiveX Controls in HTML and ASP Files

You insert ActiveX controls into HTML and ASP files with the <OBJECT> tag, an HTML tag that specifies the class ID (CLASSID) of the object to insert. You use the class ID to identify the control in a system's registry.

The CLASSID attribute is possibly the most important attribute within the <OBJECT> tag; it specifies the object's class identifier, a long hexadecimal number that refers to the ActiveX control. Every class ID is unique. In fact, the number itself is called a globally unique identifier (GUID) because it is generated by an algorithm that combines the time (to the millisecond) and information about the current machine to create a number that's guaranteed to be unique. When you install an ActiveX control on your machine, the GUID is written to the registry along with other information that you need to create the control. The GUID travels with the control, so whether you upload it to a friend or someone reading your Web site downloads it, the GUID in your <OBJECT> tag always matches the right control.

You can insert ActiveX controls in a page with both Visual InterDev and the Microsoft FrontPage editor. Both automate the insertion of ActiveX controls with special features. Both of these tools insert the <OBJECT> tag in the target page automatically. The <OBJECT> tag has many options, as shown in the following code example:

<OBJECT classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"      id=Calendar1 style="LEFT: 0px; TOP: 0px" VIEWASTEXT>     <PARAM NAME="_Version" VALUE="524288">     <PARAM NAME="_ExtentX" VALUE="7620">     <PARAM NAME="_ExtentY" VALUE="5080">     <PARAM NAME="_StockProps" VALUE="1">     <PARAM NAME="BackColor" VALUE="-2147483633">     <PARAM NAME="Year" VALUE="1998">     <PARAM NAME="Month" VALUE="10">     <PARAM NAME="Day" VALUE="31">     <PARAM NAME="DayLength" VALUE="1">     <PARAM NAME="MonthLength" VALUE="2">     <PARAM NAME="DayFontColor" VALUE="0">     <PARAM NAME="FirstDay" VALUE="1">     <PARAM NAME="GridCellEffect" VALUE="1">     <PARAM NAME="GridFontColor" VALUE="10485760">     <PARAM NAME="GridLinesColor" VALUE="-2147483632">     <PARAM NAME="ShowDateSelectors" VALUE="-1">     <PARAM NAME="ShowDays" VALUE="-1">     <PARAM NAME="ShowHorizontalGrid" VALUE="-1">     <PARAM NAME="ShowTitle" VALUE="-1">     <PARAM NAME="ShowVerticalGrid" VALUE="-1">     <PARAM NAME="TitleFontColor" VALUE="10485760">     <PARAM NAME="ValueIsNull" VALUE="0"> </OBJECT> 

The qualifiers for the <OBJECT> tag specify the following items.

• The object or ActiveX control placed on the Web page
• The name used to reference the control
• The initial parameters that control the ActiveX control's characteristics

The various parameters contain enough information for the browser to find the control and load it for display on the Web page.

The ID attribute specifies the name by which you can refer to the control. The following code sets the control's name to Calendar1:

<OBJECT classid="clsid:8E27C92B-1264-101C-8A2F-040224009C02"      id=Calendar1 style="LEFT: 0px; TOP: 0px" VIEWASTEXT> 

Property settings are also required to determine how the control functions. You can use the <PARAM> tags within the <OBJECT> tag to specify parameters that are required by the ActiveX control, as in the following example:

<PARAM NAME="Year" VALUE="1998"> <PARAM NAME="Month" VALUE="10"> <PARAM NAME="Day" VALUE="31"> 

In this example, the parameters set the opening values of the day, month, and year for the ActiveX Calendar control that you'll find in the Visual InterDev Toolbox. Like Java applets, <PARAM> tags set the ActiveX control's properties. These parameters are optional; you do not have to enter them on the Web page. While some properties are common and found in many controls, such as caption and size, other properties are specific to a given control, as illustrated in the example above.

If you do not use a <PARAM> tag to set a control's properties, the control sets those properties with the defaults. Web pages support persistent properties in ActiveX controls unless you set them with a <PARAM> tag. The other option is to set a property with some type of script code.

ActiveX controls in ASP Web pages

An interesting application of ASP server-side scripting is to dynamically generate parameters for ActiveX controls before you send the Web page to the browser. For instance, you can use a Grid control and set the control's values to correspond to the values coming from a database. You simply use the <%=varname%> expression or a similar expression within the appropriate <PARAM> tags for the ASP Web page's control. Your server-side script code can write any parameter that you see for an <OBJECT> tag, including the tag itself. An ASP Web page can contain any number of ActiveX controls. We'll see an example of dynamically building the parameters for a Java applet using server-side scripting later in this chapter.

Adding an ActiveX control from the Toolbox

Visual InterDev conveniently inserts the <OBJECT> tag in HTML or ASP code and <PARAM> tags for properties that you can visually set in the Visual InterDev Properties window. You don't have to determine the GUID and manually set the initial properties; Visual InterDev does it automatically. To insert an ActiveX control into a Web page, take the following steps:

1. Open the HTML or ASP Web page in which you want to place the control.
2. Select the ActiveX control from the ActiveX Controls tab on the Toolbox, and drag it onto the page. (See Figure 11-1.)
3. Make any necessary changes to the control's properties in the Properties window, and make the control the size you want it to be in the Web page.

Figure 11-1 shows an ActiveX Calendar control on an ASP Web page. You can also see the Toolbox to the right and the Properties window to the left. You'll notice that the Properties window displays the properties for the Calendar control. These properties are predefined when you drag the ActiveX control onto the Web page. You can change these properties either within the Properties window or via scripting within the Web page.

Figure 11-1. Visual InterDev showing an ActiveX Calendar control that was dragged onto the page from the Toolbox.

Adding an ActiveX control to the Toolbox

If the ActiveX control you want to place on your Web page is not shown on the ActiveX Controls tab of the Toolbox, you can use the following steps to add a new control to the Toolbox:

1. Right-click within the Toolbox, and choose Customize Toolbox from the context menu.
2. Click the ActiveX Controls tab in the Customize Toolbox dialog box. (See Figure 11-2.)
3. Select the required ActiveX control by checking the check box within the listing of available controls, or select another control by clicking the Browse button and locating the relevant .ocx file within your file system.
4. Click OK to add the new control to the ActiveX Controls tab in the Toolbox.

You'll notice that the ActiveX Controls tab on the Customize Toolbox dialog box presents you with the name of the ActiveX controls available, plus their path on your file system and the date they were last modified. After you have added a control to the Toolbox, you can add it to your Web page in the same manner as before by simply dragging and dropping it onto the page.

Figure 11-2. The Customize Toolbox dialog box showing the ActiveX Controls tab where you can select ActiveX controls to add to the Toolbox.

Customizing the Toolbox

You can further customize the Toolbox in several ways:

• By adding, renaming, or deleting tabs
• By renaming or deleting items on the tabs

To add, rename, or delete tabs from the Toolbox, simply right-click a tab and choose the relevant menu item from the context menu. You can also move tabs up or down to change their respective ordering.

To rename or delete items from the Toolbox, right-click over the item you want to change and choose the relevant menu item from the context menu.

Setting properties for an ActiveX control

Once you've added the ActiveX control to your Web page, you'll most likely want to change some of its properties. As mentioned earlier, you can do this in one of several ways:

• By entering values in the Properties window
• By accessing the ActiveX control's Properties dialog box
• By entering values in the <PARAM> tag within the source code

To enter values in the Properties window, simply scroll through the properties listed until you find the item you want to change. Then directly change the value of the property in the relevant cell. Notice that you can sort the properties either alphabetically or in a categorized fashion by clicking one of the buttons at the top of the Properties window.

To access the ActiveX control's Properties dialog box, either click the Property Pages button at the top of the Properties window or right-click the control and choose Properties from the context menu. Figure 11-3 below shows the Properties dialog box for the ActiveX Calendar control.

The third way to modify a control's properties is within the source code. First you'll need to convert the control from a graphical representation to a textual one. You can do this by right-clicking the control and choosing Always View As Text from the context menu. Now that the <PARAM> tags are available for editing, you can add new tags or edit existing ones within the Visual InterDev Source View editor.

Figure 11-3. The Properties dialog box for the ActiveX Calendar control.

Using the Codebase property to download a control

To specify the location of a control for downloading, use the Codebase property. The location can be either a relative or full URL. You can edit the CODEBASE attribute in the HTML or ASP Web page, or you can use the Properties window. In the Properties window, enter the control's URL as the Codebase property. This tells the browser where it can download the control if the user's machine does not have that control installed.

Internet Explorer automatically installs the control on users' machines as required. Once it is installed and registered, a user does not have to download it again. You can also specify version information in the Codebase property; this lets you make sure a newer version is downloaded to users' machines if you create one.

Using the Package & Deployment Wizard

You can use Visual Basic 6.0 to build ActiveX controls and then use the Package & Deployment Wizard to package your control for easy deployment. You can access the Package & Deployment Wizard by choosing Start|Programs|Visual Studio 6.0|Microsoft Visual Studio 6.0 Tools|Package & Deployment Wizard. You can also access the Wizard from Visual Basic 6.0 if you have installed it as an add-in.

To install the Package & Deployment Wizard as an add-in to Visual Basic 6.0, follow these steps:

1. Start Visual Basic 6.0, and choose Add-In Manager from the Add-Ins menu.
2. Choose Package And Deployment Wizard from the Add-In Manager dialog box.
3. Check the Load On Startup check box, and click OK.
4. Restart Visual Basic 6.0.

The Package & Deployment Wizard will now be available as a menu item on the Add-Ins menu.

Figure 11-4 shows the opening window for the Package & Deployment Wizard. From here you select the appropriate Visual Basic 6.0 project and then select Package. The Wizard then guides you through the rest of the steps needed to deploy your ActiveX control as a CAB file (that is, a cabinet file that uses Microsoft's file compression and storage technology and that can hold several files).

Figure 11-4. The Package & Deployment Wizard's main screen.

When you use the Package & Deployment Wizard to package a control for Internet downloads by choosing the Internet Package type, it creates a sample HTML file that contains an <OBJECT> tag for the control, as in the following example:

<HTML> <HEAD> <TITLE>Nick.CAB</TITLE> </HEAD> <BODY> <!--    If any of the controls on this page require licensing,      you must create a license package file. Run LPK_TOOL.EXE to      create the required LPK file. LPK_TOOL.EXE can be found on     the ActiveX SDK, http://www.microsoft.com/intdev/sdk/sdk.htm.     If you have the Visual Basic 6.0 CD, it can also be found in     the \Tools\LPK_TOOL directory.     The following is an example of the Object tag: <OBJECT CLASSID="clsid:5220cb21-c88d-11cf-b347-00aa00a28331">     <PARAM NAME="LPKPath" VALUE="LPKfilename.LPK"> </OBJECT> --> <OBJECT ID="UserControl1"     CLASSID="CLSID:FCAED242-72C2-11D2-B8A0-0040051F31F4"     CODEBASE="Nick.CAB#version=1,0,0,0"> </OBJECT> </BODY> </HTML> 

The example above was created using the Package & Deployment Wizard, which creates the minimum <OBJECT> tag needed to download a control. The CODEBASE attribute specifies the filename of the CAB file. The example created by the Wizard does not include a URL, so you might need to modify the CODEBASE attribute to include the full URL, as shown in the following example:

CODEBASE="http://www.nevans.com/vi/nick.CAB#version=1,0,0,0" 

After these items are in place and a Web page has the <OBJECT> tag defined, users can download the component. When a browser links to the page containing an ActiveX control, it invisibly downloads the control and all the files needed to support it. You can package all these files together into a single autoinstall CAB file.

When a user browses the Web page, the browser interprets the <OBJECT> tag, which has a URL indicating the CAB file's location. The browser then downloads the CAB file and decompresses it. The CAB file contains all the information the browser needs to automatically download the control, along with the support files the control needs.

The browser first looks for the additional support files on the user's system. If the files are already there, the installation is complete. If they're not, the files are downloaded from the site specified in the URL.

Component safety

VBScript and JScript are benign scripting languages that do not pose any safety threats, because access to system components are disabled. (For instance, you cannot write to the file system.) Java applets run inside the Java virtual machine and likewise cannot access system components. ActiveX controls, however, are a different matter. You can write a control that does just about anything to the user's machine. This has significant advantages as well as disadvantages. An ActiveX control, like almost all commercial software, can be very powerful, offer high performance, and take unique advantage of the operating system. However, on the Internet, a hacker can write a control that harms a user's computer.

ActiveX controls come with a mechanism called Authenticode to reduce the risk of downloading a dangerous ActiveX control from an unknown source. With Authenticode, controls can be digitally signed so that users know the component's exact source. When the Web browser begins downloading the ActiveX control, it checks to see whether the control has a certificate. The browser then presents the user with the certificate information so that the user can decide whether to let the control be downloaded and installed on the local machine.

Microsoft's Web site has information on how to get custom controls signed by third-party signing authorities such as VeriSign.

Scripting ActiveX Controls

As an example of how to script ActiveX controls within Visual InterDev, we'll use a sample ASP Web page that allows a user to schedule an appointment. The page is named Appointment.asp and is included on the CD-ROM under the CHAP11 folder.

The example uses an ActiveX Calendar control so that the end user can easily select a day for the appointment. The start time and end time of the appointment are specified by using Listbox DTCs. Textbox DTCs are used to capture the Subject, Location, and Comments regarding the appointment. Finally, a Button DTC is used to submit the captured information. Rather than complicate this example with a database update, the Button simply displays a message box confirming the details of the appointment.

Figure 11-5 below shows the Appointment.asp page as it appears in the Internet Explorer 4.0 browser after an end user has entered information and has clicked the Save button. You can see the message box displaying the details of the appointment.

Another important thing about this example is that it uses a client-side scripting model so that all feedback regarding input validation and so on is immediately returned to the user without a round-trip to the server.

Figure 11-5. The Appointment.asp page demonstrating the integration of an ActiveX Calendar control into an ASP Web page with client-side scripting.

Let's take a look at some of the client-side scripting for the Calendar control within this sample code. The first piece of script ensures that, when the user selects a date, the date selected is greater than or equal to the current date. The code is as follows:

<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript> <!-- Sub Calendar1_Click     If CDate(thisForm.Calendar1.Value) < Date() Then         MsgBox("Please select today's date or a future date.")     End If End Sub --> </SCRIPT> 

The code uses the Click event for the Calendar control and compares the current date with the date the user selected. To find out what events are available for this control, you can view the Script Outline window within Visual InterDev. Figure 11-6 shows the Script Outline window and the Calendar control events. The Calendar control is actually found within the thisForm object under the Client Objects & Events node in the Script Outline window.

Figure 11-6. The Click event for the Calendar control shown within the Script Outline window.

The Script Outline window

The Script Outline window is a powerful tool to aid you in your client-side or server-side scripting. If you do not see the Script Outline window within Visual InterDev, you can add it by choosing View|Other Windows|Script Outline. The Script Outline window displays both client objects and events and server objects and events. You can also use it to navigate to client-side and server-side scripts that you have already written for your page. By expanding the Client Scripts or the Server Scripts nodes, you'll see a list of all your current scripts within your page. By double-clicking a script name, you can move the cursor to that script within the Source View editor. Figure 11-6 also shows the client scripts for the Appointment.asp page.

Completing the Appointment sample application

We've already seen how the Calendar control is scripted to check that the date selected is greater than or equal to the current date. The other areas in the Appointment.asp page where the Calendar control is scripted are the window_onload event and the Save_onclick event.

The code below shows the full client-side script for the Appointment.asp example.

<SCRIPT ID=clientEventHandlersVBS LANGUAGE=vbscript> <!-- Sub lbStartTime_onchange()     If TimeValue(lbStartTime.getValue()) >= _         TimeValue(lbEndTime.getValue()) Then         MsgBox("Please enter a start time earlier than the end time.")     End If End Sub Sub lbEndTime_onchange()     If TimeValue(lbStartTime.getValue()) >= _         TimeValue(lbEndTime.getValue()) Then         MsgBox("Please enter an end time later than the start time.")     End If End Sub Sub Calendar1_Click     If CDate(thisForm.Calendar1.Value) < Date() Then         MsgBox("Please select today's date or a future date.")     End If End Sub Sub Save_onclick()     str = "The following Appointment has been scheduled for " _         & thisForm.Calendar1.Value & _         Chr(10) & Chr(10) & _         "Start Time: ", & lbStartTime.getValue() & _         " End Time: ", & lbEndTime.getValue() & _         Chr(10) & Chr(10) & "Subject: " & txtSubject.value & _         Chr(10) & Chr(10) & "Location: " & txtLocation.value         MsgBox str, 64, "New Appointment" End Sub Sub window_onload     lbStartTime.selectedIndex = 1         lbEndTime.selectedIndex = 2     thisForm.Calendar1.Value = Date() End Sub --> </SCRIPT> 

The window_onload event is used to set the date displayed in the calendar to the current date according to the system clock. This is achieved by setting the Value property of the Calendar control equal to Date. The Save_onclick event is used to print out the value selected in the Calendar control to a message box displayed to the user. Again, the Value property is used to retrieve the current date that the user has selected. In the Save_onclick event, the MsgBox VBScript function is called with both a prompt and a title caption. The number 64 passed to the function is used to display an information message icon as opposed to the normal message box that has no icons displayed.

From this example, you'll see that scripting ActiveX controls is really no different from scripting other elements (such as design-time controls) within the page. Both offer a rich set of events, methods, and properties for you to script against. When writing your script, you can also take advantage of statement completion to assist you with finding the required properties and methods for your ActiveX controls.