Chapter Four: Working with ActiveX Controls
Although the Microsoft Internet Explorer 3.0 supports a reasonable assortment of standard controls, the intrinsic control set is certainly limited. If you try to use the intrinsic controls to add special functionality to a web page, you'll find that the controls come up short. Fortunately, in addition to intrinsic controls, the Internet Explorer supports ActiveX controls through the new HTML <OBJECT></OBJECT> tags. At the time of this writing, the <OBJECT></OBJECT> tags have the attributes listed here. The information that follows comes from a working draft by the World Wide Web Consortium. Since this information is regularly updated, it is advisable to review the current information at the website, http://www.w3.org/pub/WWW/.
ALIGN specifies where to place the object. The ALIGN tag recognizes the LEFT, CENTER, RIGHT, TEXTTOP, MIDDLE, TEXTMIDDLE, BASELINE, and TEXTBOTTOM arguments.
BORDER specifies the width of the border that is displayed around the visible area of the object when the object is part of a hypertext link.
CLASSID specifies a URL used to locate the object, or it specifies a class identifier for the object. For ActiveX controls, CLASSID is used to specify the class identifier. The class identifier is a unique alphanumeric code assigned to each ActiveX control and is stored in the system Registry of the client computer.
CODEBASE specifies a URL used to locate the object.
CODETYPE specifies the Internet Media Type of the code specified by the CLASSID attribute. Since this information can be accessed before the code is retrieved, it is possible to skip over unsupported media types.
DATA specifies a URL that references the object's data (for example, a gif file for an image object).
DECLARE is used to indicate that the object is not to be instantiated, only declared.
HEIGHT specifies the height of a box enclosing the visible area of the object. Use height instead of accessing the Height property.
HSPACE specifies the space to the left and right of the visible area of the object.
ID specifies the name of the object as it is referenced in code. The ID attribute is just like the Name property of an OCX control.
NAME provides a way to determine whether an object within a form block should be involved in the Submit process. If the object has its NAME attribute specified, its VALUE property will be included in any Submit action for a form.
SHAPES indicates that the object element contains shape-defined links on the visible area of the object.
STANDBY specifies a text string that can be displayed in the browser while the object and data are being loaded.
TYPE specifies the Internet Media Type of the data specified by the DATA attribute. Since this information can be accessed before the data is retrieved, it is possible to skip over unsupported media types.
USEMAP specifies a URL for a client-side image map in a format proposed by Spyglass, Inc.
VSPACE specifies the space to the top and bottom of the visible area of the object.
WIDTH specifies the width of a box enclosing the visible area of the object. Use width instead of accessing the Width property.
For the </OBJECT> attributes that specify a positioning or size value, the unit of measurement can be either screen pixels or a percentage of the current displayable region. Additional units, such as points and inches, can be used if you include a suffix after the value. See the World Wide Web Consortium web site for more information.
Although the <OBJECT></OBJECT> tags have an exhausting array of attributes, only two of the attributes are generally required: CLASSID and ID. These attributes tell the browser which ActiveX control to load and how the control is referenced in code.
While you are loading the ActiveX control, you can set its properties with the <PARAM> tag. The <PARAM> tag has the following attributes:
NAME specifies the property name.
VALUE specifies the value for the named property.
VALUETYPE specifies REF, OBJECT, or DATA.
REF indicates that the value is a URL.
OBJECT indicates that the value is a URL of an OBJECT element in the same document.
DATA indicates that the value is to be passed directly to the object as a string.
Key Concept: ActiveX controls are the same as the reusable OCX controls found in Visual Basic but are optimized so that they can be downloaded more quickly across the Internet.
When an object has been inserted into an HTML page, you can access its properties, events, and methods by using a format that is the same as that of Microsoft Visual Basic for Applications. Listing 4-1 shows an example of an ActiveX control in HTML, and Figure 4-1 shows a sample of the output. This example uses the Visual Basic Gauge control and an intrinsic Button control that increments the gauge. Notice the connection between the OnClick event of the button and the event procedure written in Microsoft Visual Basic, Scripting Edition. Initially, events such as OnClick will be confusing to Visual Basic developers because the same event in Visual Basic for Applications is called Click. The difference is due to the fact that OnClick is part of the HTML language, not the Visual Basic for Applications language. HTML has always supported some intrinsic controls, and these are supported by the Internet Explorer for backward compatibility. You can get absolute adherence to Visual Basic for Applications standards simply by downloading a Button object instead of using an intrinsic Button control. Once you learn the intrinsic controls, however, you will find them fairly simple to use. Listing 4-1 and all other full program listings are available on this book's companion CD, in the samples folder.
Also, note that if you want to run the Gauge control example, the Gauge control must be registered on your computer.
<HTML>
<HEAD>
<TITLE>Gauge Control</TITLE>
<!--
This demo shows how to use an ActiveX control.
It uses the Gauge control from Visual Basic 4.0
and increments it with a standard HTML button.
-->
<SCRIPT LANGUAGE="VBScript">
<!--
`Notice that VBScript does not
`support data types. All variables
`are variants.
Dim intValue
`This routine is called when the
`button is clicked. Note that
`an intrinsic button is being used.
`This means that only the Gauge control
`is downloaded. The button is always
`available.
Sub cmdChange_Click
`Increment variable
intValue=intValue + 1
`Check bounds
If intValue>9 then
intValue=0
End If
`Set gauge property
Gauge1.Value=intValue
End Sub
Listing 4-1.
An ActiveX Gauge control in VBScript.
-->
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<!--
This is the key to the example. The OBJECT
tag is a new tag used to download ActiveX
components. Once the ActiveX component is available,
you can set its properties by using the PARAM tag.
-->
<OBJECT
CLASSID="clsid:7A080CC5-26E2-101B-AEBD-04021C009402"
ID="Gauge1"
HEIGHT=100
WIDTH=100
>
<PARAM NAME="Style" VALUE=3>
<PARAM NAME="NeedleWidth" VALUE=5>
<PARAM NAME="Min" VALUE=0>
<PARAM NAME="Max" VALUE=10>
<PARAM NAME="Value" VALUE=0>
</OBJECT>
<P>
<!--
Set up an intrinsic HTML button
-->
<INPUT TYPE="BUTTON" NAME="cmdChange" VALUE="Change Gauge"
OnClick="cmdChange_Click">
</CENTER>
</BODY>
</HTML>
.gif)
Figure 4-1.
An example of a Gauge control used in HTML code.