Ch 8 - The HTML <Object> Tag Attributes - Web Development with Visual Basic 5

The HTML <Object> Tag Attributes

The Object tag's attributes are used to let the browser know how to display the object. Before the object is fully displayed, the ActiveX layer in the Microsoft Internet Explorer attempts to load the control based on these attributes. Table 8.1 lists all the attributes that apply to ActiveX controls (there are more attributes that are in the specification but are not related to ActiveX controls).

Table 8.1

Object Tag Attributes

Attribute Name	Function
Align	Position of the object
Border	Border of the object
Classid	Class identifier of the object
Codebase	ULR location of the object
Data	Encoded initialization information (see caution below)
Declare	Object is declared but not loaded until it is referenced
Height	Height of the object
Hspace	Horizontal gutter of the object
Id	Reference name of the object
Name	Name of object when passed in a Form tag
Type	Mime type
Vspace	Vertical gutter of the object
Width	Width of the object

Some of the attributes are used to load the control correctly, some are used to reference the object (such as in a VBScript), and some are used to visually display the control correctly. The first set of attributes focus on the loading attributes, the second set focus on referencing the attribute with code, and the third set of attributes focus on the display of the control.

Attributes that load the ActiveX Control

While some of the attributes are not critical to the object loading, there are a couple of attributes that have to be correctly set in order for the object to be loaded. The main attribues for an ActiveX object are the CLASSID (this should be familiar to you by now) and the CODEBASE. The classid is the unique identifier for this control, this is how the browser can find the control. The codebase is the location of where to download the control from. As with all attributes, the correct syntax is Attribute="value" where the attribute name is not case sensitive. CODEBASE will be treated the same as codebase.

The CLASSID attribute value should have the classid of the object, prefaced with the characters 'classid:'. The classid value can be found in the registry at HKEY_CLASSES_ROOT\XYZ\CLASSID where XYZ is the name of the control.

The registry on Windows NT 4.0 can be accessed via the regedit.exe application. It is used to navigate through the registry much like the Windows file system can be navigated with the Explorer.

When you get to the point where the regedit application looks like figure 8.x, you can double-click on the entry in the right side. This will bring up a dialog box. You can select that text (the classid), and copy it (control-c). You can then paste the number into your HTML page. Do NOT alter the number in any way, or your browser will not be able to find the control.

The preceding example, "ComCtl2.Animation.1," contains the version number. By looking at this name, you can figure out that the version number is 1.

Listing 8.2 illustrates how a Web page can use just the classid attribute. The Web page is entirely correct only if the control does not need any initialization data (such as properties), will not be referenced via VBScript, and is already on the machine. There are not a lot of controls that meet that criteria. Do not expect this page to load a control in your browser; this code is meant to be an example.

Listing 8.2 A Web page that uses the Object tag with the classid attribute.

<HTML>
<HEAD>
<TITLE>Basic ActiveX Control Page</TITLE>
</HEAD>
<BODY>
My interesting Web page.
<OBJECT CLASSID="</U><B><U>CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0</U></B><U>">
</OBJECT>
</BODY>
</HTML>

The CODEBASE attribute should be the URL location to download the control from. The URL should look like any Web address such as http://www.mysite.org/controls/mycontrol.ocx. As long as the control's extension is .OCX, you don't need to supply any more information. OCX should be the default extension if the control is built with Visual Basic 5. If you know that the control will already be on the client machine (such as a company intranet of only Windows machines), you don't need to use the codebase attribute.

Before the browser downloads the control, it will first check to see if the control currently exists on the system. If the control does exist, the browser checks to see if the control is the correct version (if one is specified). If the control does not exist on the client machine, the browser downloads the control and registers it. If the control is on the machine but is not the correct version, the browser downloads the control and registers it. If the control is the correct version, the browser is done with the codebase attribute.

The control’s version is denoted in the codebase attribute by adding a ‘#Version=’ then the version number. The version number’s syntax is a four part number where each part is comma-delimited. In your Windows operating system, if you right-click on an executable file (EXE), the version property page will have the version number such as 4.00.31.85. For the HTML page, the periods are replaced with commas. A valid codebase value with a version is The version is programmatically added to the control when it is built by the programmer. It is up to the programmer to make sure that different ‘versions’ of the same control have different version numbers. The higher the version number, the more recent it is. 4.00.31.85 is a newer version than 4.00.31.70.

A developer can easily choose any extension for the control he wants. If the extension is not OCX, then the download will have to be a *.cab (short for cabinet) file. The cab file is a compression technique to make the control smaller as it is shipped across the Internet. Other files that can go in the cab file are information files (*.inf) that information the browser what to do with the control and any files that are in the cab file. There is a complete Cabinet Developer's SDK at http://www.microsoft.com/workshop/prog/cab/. Since this book assumes that controls are built with Visual Basic 5, I'll assume that controls used in this book have the extension of OCX. Visual Basic 5's Books Online has a section regarding CAB files.

Building a cab file can be a simple task or a complex task, depending on what you want to happen to the files included in the cab file. For example, if the control has an extension of .XYZ and isn't dependent on any other files, the only action necessary for the browser is to register to control. The browser automatically registers the control if the Extension is OCX. However, if the control is dependent on several other files (such as initialization files or other dynamic link libraries), the browser will need to be told where those files should be put and if any information needs to be added to the system registry.

Listing 8.3 illustrates a Web page that uses the classid and the codebase. The codebase can be an absolute reference to a Web page (the first object on the page) or it can be a relative reference from the location of the calling Web page (the second object on the page). Do not expect this page to load a control in your browser, this code is meant to be an example.

Listing 8.3 A Web page that uses the Object tag with the classid attribute and the codebase attribute.

<HTML>
<HEAD>
<TITLE>Basic ActiveX Control Page</TITLE>
</HEAD>
<BODY>
My interesting Web page.
<OBJECT 
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
CODEBASE=</U><B><U>"www.mysite.com/scripts/mycontrol.ocx"</U></B><U>>
</OBJECT>
<OBJECT 
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
CODEBASE="</U><B><U>/../../scripts/mycontrol.ocx"</U></B><U>
</OBJECT>
</BODY>
</HTML>

The DATA attribute is used to initialize the ActiveX control properties through 64-bit encoding. This data is encoded so the initialization of the ActiveX controls properties is unreadable. If you don’t have to use the DATA attribute, it is much easier to use the equivalent PARAM tags discussed later. Since the initiliation of properties is encoded, you will not be able to read the values of the properties. The encoding is meant for small but complex initialization. If an ActiveX control is poorly developed in a high-level language, all the initialization of the properties will be through 64-bit encoding. There is nothing wrong with this, but there are two drawbacks to using the data attribute. The first is that you have to know how to generate the 64-bit encoding. The second is that it is not easily read, so debugging will be difficult.

Listing 8.4 illustrates a sample Web page that uses the data attribute. Notice that the value of the attribute is prepended with information about the encoding and the MIME type. This particular control is the Calendar Control 8.0. Do not expect this page to load a control in your browser; this code is meant to be an example.

Listing 8.4 Initializing an ActiveX control’s properties using the DATA attribute in a Web page.

<HTML>
<HEAD>
<TITLE>Basic ActiveX Control Page</TITLE>
</HEAD>
<BODY>
My interesting Web page.
<OBJECT ID="Calendar1" WIDTH=288 HEIGHT=192
 CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02"
 DATA="DATA:application/x-oleobject;BASE64,K8knjmQSHBCKLwQCJ
ACcAgAACADEHQAA2BMAAM0HBAAXAA8AAIAAAAAAAACg
ABAAAIAAAKAAAQABAAIAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAC8AkRCAQAFQXJp
YWwBAAAAkAFEQgEABUFyaWFsAQAAALwCwNQBAAVBcmlhbA==">
</OBJECT>
</BODY>
</HTML>

If have a hard time deciphering the encoding of the preceding listing, there are a couple of programs from Microsoft meant to make this type of work easy. Microsoft's ActiveX Control Pad (free on the Microsoft Web site) is an elementary application to add ActiveX controls to a Web page. Since it is free, the functionality is bare and the support from Microsoft is nonexistent. Microsoft's Visual InterDev (part of the Developer Suite) has an advanced version of the same functionality and dialogs of the ActiveX Control Pad. Once you select the object you want to add to the page, a property sheet comes up (just like in Visual Basic). You fill in the property sheet and design the visual properties of the object. When you insert the control into the page, the properties are set for you, either through the Data attribute or the Param tag (discussedin the following section).

If you use the DATA attribute and the data is just an URL (instead of encoding), you will need to use the TYPE attribute to let the browser know what type of data is being retrieved. If the browser doesn't support that MIME type, the data will not be downloaded and the object will not be initialized. Understand that using the data attribute as an URL is the hard way to work with the popular controls already on your Windows 95 or Windows NT machine (depending on the control--it may be impossible). The popular controls generally need the properties set through the data attribute encoded or set through the PARAM tag (discussed later). If you have created your own control, using the DATA attribute as a nURL and the TYPE attribute to specify the MIME type may work for you.

Listing 8.5 illustrates how to use the DATA and TYPE attributes together. Do not expect this page to load a control in your browser; this code is meant to be an example. Comparing Listings 8.5 and 8.4, you can see that when the data is encoded, the datatype is already included. When the data is not encoded, the MIME type has to be specified via the TYPE attribute.

Listing 8.5 Initializing an ActiveX control by using the DATA and TYPE attributes together

<HTML>
<HEAD>
<TITLE>Declare Attribute</TITLE>
</HEAD>
<BODY>
    <OBJECT ID="MyControl" 
     CLASSID="CLSID:0713E8A2-850A-13lb-AXC0-4210302A8DA7"
     DATA="http://mysite/mydirectory/mydata.xyz"
TYPE="application/x-oleobject">
     </OBJECT>
</BODY>
</HTML>

The DECLARE attribute is used to let the browser know what object will be loaded, but not to load it until it is referenced. There are two situations where this is a cool feature. The first is to have a link point to an object that would not be able to be referenced from a single URL. The second is when one object is a parameter to another object. An example of this is the ever-popular tree control. The tree control is generally used along with a control of images. A tree element of type X will have an image that illustrates X and a tree element of Y will have an image that illustrates Y. In order to have the image control be a parameter of the tree control, the tree control will list the image control as a parameter with the PARAM tag (discussed later). The image control will then use the DECLAREattribute so that it is loaded only when the tree control needs it. Loading the control only when it is referenced is referred to as late binding.

Listing 8.6 illustrates how to use the DECLARE attribute. The first control is the tree control. The control has a property called ImageList where the second control needs to be referenced. The # sign in front of the reference to ImageList1 in the first control means that the referenced control is on the same page. The second control, the ImageList, needs to have the declare statement so that it is loaded only when the tree control is initialized. If you run this page as written, it will not run. This code is for discussion purposes only. Using the tree control and imagelist control actually require a lot more code to function but are perfect examples for the DECLARE attribute. Both of these controls use the DATA attribute to initialize the control. I've reduced the value of the DATA attribute so that the code listing is easier to read (and the DATA attribute is so hard to read).

Listing 8.6 Declaring an ActiveX control that will be initialized by another control on the same Web page

<HTML>
<HEAD>
<TITLE>Declare Attribute</TITLE>
</HEAD>
<BODY>
    <OBJECT ID="TreeView1" 
     CLASSID="CLSID:0713E8A2-850A-10lb-AFC0-4210102A8DA7"
     DATA="DATA:application/x-oleobject;BASE64...">
      <PARAM NAME="ImageList" VALUE="</U><B><U>#ImageList1</U></B><U>" 
VALUETYPE="OBJECT">
    </OBJECT>
    <OBJECT ID="ImageList1" </U><B><U>DECLARE</U></B></P>
     CLASSID="CLSID:58DA8D8F-9D6A-10lb-AFC0-4210102A8DA7"
     DATA="DATA:application/x-oleobject;BASE64...">
    </OBJECT>
</BODY>
</HTML>

Attributes that Reference the ActiveX Control

Only two attributes are used to reference that ActiveX control: NAME and ID. The NAME attribute should be familiar to you. Any information passed in a form uses the NAME attribute. The NAME attribute is used on the Web server when the page is returned to reference the data sent back. This is no different for the ActiveX control. If you use the control inside a FORM where some information is being sent back to the server, the object tag will have to use the NAME attribute. The name can be any string value you want, such as "MyControl" or "TreeControl" or just "CNTR". Listing 8.7 illustrates how to include the NAME attribute on the Web page. The NAME attribute has no affect on any of the other attributes. It is used by the browser only to pass values back to the Web server.

Listing 8.7 By using the NAME attribute, the ActiveX’s properties can be passed in a FORM.

<HTML>
<HEAD>
<TITLE>The Name Attribute</TITLE>
</HEAD>
<BODY>
<FORM METHOD="GET" ACTION="nextpage.htm">
     <OBJECT 
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     NAME="MyControl">
     </OBJECT>
</FORM>
</BODY>
</HTML>

Remember that forms use the name/value pair to pass information back to the server. The NAME attribute and the VALUE attribute have to be set. The preceding example is valid according to the HTML specification, but probably will not be used in this manner for Internet Explorer 3.x. The problem is that the VALUE attribute is not listed in the object tag and the browser can't assume what it is. In order to pass back a value to the server in a form from an ActiveX object, you will probably want to set the name and value in VBScript and then include that information in an input tag of the form tag. The value could be any number of things: a property, a result of a method call, or some value as a result of a user event. This functionality may change in the 4.0 version of Microsoft's Internet Explorer.

The other reference attribute is the ID attribute. If you plan on managing the control in script, the ID is mandatory. The only way you can reference the control in script is from the ID. The ID is a string that you choose and can be just about anything. It is a good coding practice to name the ID something that reflects what the control does. Any reference to the control's methods, properties, and events in script will have to be prefixed with the ID. This is exactly the same as the name of the control in a true Visual Basic application. Listing 8.8 illustrates how you would reference a control from VBScript. Don't concentrate on the syntax of the script; this is only meant to be an example. A more detailed discussion of VBScript and ActiveX follows later in this chapter. Notice that Procedure1 changes the background color of the label to green. The object name is Label1 and the property is BackColor.

Listing 8.8 By using the ID attribute, the ActiveX control can be manipulated in VBScript or Java Script

<HTML>
<HEAD>
<TITLE>The ID Attribute</TITLE>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Procedure1()
     Label1.BackColor = "GREEN"
end sub
-->
</SCRIPT>
</HEAD>
<BODY>
    <OBJECT ID="Label1" WIDTH=132 HEIGHT=28
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
        <PARAM NAME="Caption" VALUE="My Cool Label Control">
        <PARAM NAME="Size" VALUE="3493;741">
        <PARAM NAME="BorderStyle" VALUE="1">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
</BODY>
</HTML>

Attributes that Control the Visual Display of the ActiveX Control

Several attributes affect how the control will display on the page. They are ALIGN, BORDER, HEIGHT, HSPACE, VSPACE and WIDTH. These attributes should be familiar to use but this section will focus on how that attributes relate to ActiveX controls. The ALIGN attribute focuses on the positioning of the control in relation to the objects around it. The values for align are: left, texttop, middle, textmiddle, baseline, textbottom, center, right. The BORDER attribute specifies how large a border you want around the object. The HEIGHT and WIDTH specify how large the object should be. The HSPACE and VSPACE specify how much space should be in between this control and everything else.