19 - Including ActiveX Controls in Your Web Pages

Use the <OBJECT> HTML tag - Although the ActiveX Control Pad helps to hide some of the details of the <OBJECT> tag from you, it's good to understand the details of this important part of HTML.
Learn about the <PARAM> HTML tag - Passing parameters to an ActiveX Control helps you the tap the power of dynamic content.
Build a dynamic Web page that uses the Microsoft ActiveX Controls - Microsoft provides a variety of ActiveX Controls that make for exciting Web pages, such as the Timer and Label controls that are used in an example to demonstrate the power of ActiveX.

Building ActiveX Controls is a pretty technical exercise. Using C++ and ActiveX Template Libraries requires a thorough understanding of the OLE and COM object specifications. However, you don't need to build ActiveX Controls in order to produce dynamic Web pages. In fact, Microsoft is quite hopeful that a large third-party market in ActiveX Controls will develop, much as the VBX and OCX market has developed. Using ActiveX Controls in a Web page is really a straightforward exercise, once you've learned a few basics.

Introducing the <OBJECT> HTML Tag

HTML 2.0 provided a very simple content model for insertion of multimedia into HTML documents: the <IMG> tag. Unfortunately, this tag does not treat multimedia as a more general sort of item. With ActiveX and Java and other types of robust multimedia applications, Web page authors require a more general mechanism for including these applications into Web pages. There have been a few attempts at other types of multimedia tags such as the following:

DYNSRC, a Microsoft attribute for video and audio
<EMBED>, Netscape's tag for compound document embedding
<APP> and <APPLET>, Sun Microsystems' tags for including Java into Web HTML documents

These varying alternatives all take a swipe at defining a more general nomenclature for describing new multimedia content. Serving in its role of developing standards for the Web, the World Wide Web Consortium (W3C) convened a group of experts to define a new tag, <OBJECT>, which encompasses the <IMG> tag and provides a general solution for handling diverse multimedia content. In addition, <OBJECT> allows you to specify various parameters for initializing the object when it is placed on a Web page.

The <OBJECT> tag allows you to specify object parameters in a number of ways including the following:

Another file referenced via URL
In-line data
Named properties

ActiveX Controls typically use named properties to initialize. Note that there are also standard properties, such as HEIGHT and WIDTH, that may be specified for all objects.

This tag can also point to the code that is to be executed in the object's space. This makes it easy for Web authors to include and change referenced objects. The code can also be referenced in the following ways:

Explicit reference
Class name
Media type

ActiveX, as you'll see, uses the class name option to be referenced.

A Simple <OBJECT> Tag Example

Before we dive into a detailed discussion of each of the parameters, let's take a brief look at how the <OBJECT> tag is used. In its simplest form, the <OBJECT> tag would look something like Listing 19.1.

Listing 19.1-7-1LSTNG.HTM-Object Tag Example #1

<! ------------------------------------------------- 
<! --
<! --     Description:     Simple OBJECT tag Example #1
<! --
<! --     Author:          Brian Farrar
<! --
<! --   Date:          5/11/96
<! ------------------------------------------------- 

<HTML>

<TITLE>Simple OBJECT Tag Example #1
</TITLE>

<BODY>

<H1>Simple Object Tag Example #1</H1>

<P>
If your browser supports display of avi movies inline 
you'll see a movie here, 
otherwise you'll see a simple graphic.
<OBJECT 
     DATA=SomeFile.avi
     TYPE="application/avi">

     <IMG SRC=SomeGif.gif ALT="ActiveX">
</OBJECT>

</BODY>

</HTML>

If the Web browser you use supports in-line playing of AVI video format, the movie called SomeFile.avi would be played. Otherwise, the Web browser will substitute the graphic SomeGif.gif. Thus, the <OBJECT> tag allows you to include specific content that is not supported by all browsers, without getting involved in content negotiation.

Various Web browsers support different features. For instance, Netscape Navigator 2.0 and Microsoft Internet Explorer 3.0 both support frames. However, most other browsers do not. In order to use more advanced features like frames without excluding those who use browsers that don't support an advanced feature, Web authors sometimes engage in content negotiation. Content negotiation usually employs a CGI application to examine the USER_AGENT field passed through the CGI (which indicates the type of browser) and selects a page optimized for the requesting browser.

The TYPE attribute makes it easy for Web browsers to determine if the indicated <OBJECT> is supported and, if it is not supported, does not download the object thereby avoiding unnecessary bandwidth use. Making TYPE available also allows the Web browser to avoid guessing at the application format based on the extension.

The <OBJECT> Tag in Detail

The <OBJECT> tag has a number of attributes that can be specified. Table 19.1 explains how you'll be using these attributes working with ActiveX Controls.

Table 19.1-<OBJECT> Tag Attributes
Attribute Description

ALIGN Determines placement of the object relative to other items on the page

BORDER Suggests the width of the border to be placed around the display

CLASSID Identifies an implementation of the object to be rendered on the page

CODE Some objects (like Java applets) need this as reference to other code

DATA Points to any data required by the object referred to by CLASSID

DECLARE Indicates whether the object referred to in CLASSID is to be declared or instantiated

HEIGHT Suggests the height that the Web browser should provide for display of the object

HSPACE Area to be preserved as white space to the left and right of the border and display space of the <OBJECT>

ID A document-wide identifier used to refer to the <OBJECT>

ISMAP When the object is clicked, this attribute causes the mouse coordinates to be sent to the server

NAME Used to indicate if the <OBJECT>'s value should be included in a FORM

STANDBY Identifies the text to be displayed while the object is being loaded

TYPE Refers to Internet Media Type (RFC 1590) of the item referred to in the CLASSID field

USEMAP Points to a client-side image map

VSPACE Area to be preserved as white space above and below the border and display space of the <OBJECT>

WIDTH Suggests the width that the Web browser should provide for display of the object

Table 19.1-*<OBJECT>* Tag Attributes
Attribute	Description
`ALIGN`	Determines placement of the object relative to other items on the page
`BORDER`	Suggests the width of the border to be placed around the display
`CLASSID`	Identifies an implementation of the object to be rendered on the page
`CODE`	Some objects (like Java applets) need this as reference to other code
`DATA`	Points to any data required by the object referred to by `CLASSID`
`DECLARE`	Indicates whether the object referred to in `CLASSID` is to be declared or instantiated
`HEIGHT`	Suggests the height that the Web browser should provide for display of the object
`HSPACE`	Area to be preserved as white space to the left and right of the border and display space of the `<OBJECT>`
`ID`	A document-wide identifier used to refer to the `<OBJECT>`
`ISMAP`	When the object is clicked, this attribute causes the mouse coordinates to be sent to the server
`NAME`	Used to indicate if the `<OBJECT>`'s value should be included in a `FORM`
`STANDBY`	Identifies the text to be displayed while the object is being loaded
`TYPE`	Refers to Internet Media Type (RFC 1590) of the item referred to in the `CLASSID` field
`USEMAP`	Points to a client-side image map
`VSPACE`	Area to be preserved as white space above and below the border and display space of the `<OBJECT>`
`WIDTH`	Suggests the width that the Web browser should provide for display of the object

Use the summary table as a quick reference for the <OBJECT>'s tag attributes. Each of these attributes bears a bit of explanation.

The ALIGN Attribute

You'll use the ALIGN attribute to determine the placement of your ActiveX control in the Web page. ActiveX objects can be placed as part of the current text line or as a distinct element aligned left, right, or center. You'll set the ALIGN attribute to one of the values found on Tables 19.2 and 19.3, depending on the appearance you want to achieve.

Table 19.2-Values for the ALIGN Attribute Relative to the Current Text Line
Value Meaning

TEXTTOP The top of the object aligned with the top of the current font

MIDDLE The middle of the object aligned vertically with the baseline

TEXTMIDDLE The middle of the object vertically aligned with a position halfway between the baseline and the height of the lowercase letter x

BASELINE The object's bottom aligned with the baseline of the text line on which it appears

Table 19.2-Values for the *ALIGN* Attribute Relative to the Current Text Line
Value	Meaning
`TEXTTOP`	The top of the object aligned with the top of the current font
`MIDDLE`	The middle of the object aligned vertically with the baseline
`TEXTMIDDLE`	The middle of the object vertically aligned with a position halfway between the baseline and the height of the lowercase letter x
`BASELINE`	The object's bottom aligned with the baseline of the text line on which it appears

Table 19.3-Values for the ALIGN attribute as a Free-Floating Object

Value Meaning

LEFT The object will be placed on the left margin below the previous text or object in the page.

CENTER The object will be placed midway between the left and right margins.

RIGHT The object will be placed on the right margin below the previous text or object in the page.

Value	Meaning
`LEFT`	The object will be placed on the left margin below the previous text or object in the page.
`CENTER`	The object will be placed midway between the left and right margins.
`RIGHT`	The object will be placed on the right margin below the previous text or object in the page.

The ALIGN tag is currently fully implemented in MSIE 3.0.

The BORDER Attribute

If the object is part of a hypertext link, the BORDER attribute suggests the width to be used as a border around the object's visible area. For instance, if you didn't want the object to have a border as a hypertext link, you would set BORDER=0. The BORDER attribute is currently fully implemented in MSIE 3.0.

The CLASSID and CODE Attributes

The CLASSID attribute is used to refer to the ActiveX Control to be placed within the object's borders. There are several different ways to indicate the object to be executed here. ActiveX uses the CLASSID: URL scheme to specify the ActiveX class identifier.

http://www.w3.org/pub/WWW/Addressing/clsid-scheme-For further information on the CLASSID: URL scheme, check out this Web site.

The CLASSID for any ActiveX Control can also be obtained from the registry in Windows 95. To do this, follow these steps:

Press the Start button.

Select Run.

Type regedit.

Press OK.

Select the HKEY_CLASSES_ROOT registry key.

Scroll down to an ActiveX Control name like ieChart.ieChartCtl.

Double-click the control's registry key.

Select the CLSID registry key.

From the data window, copy the CLASSID string and use it in your HTML as necessary.

If the CLASSID attribute is missing, ActiveX data streams will include a class identifier that can be used by the ActiveX loader to find the appropriate control. The CODE attribute can be used to provide an URL from which the control can be obtained.

The DATA ATTRIBUTE

The DATA attribute contains a URL that points to data required by the object-for instance, a GIF file for an image. MSIE 3.0 currently supports the DATA attribute.

The DECLARE ATTRIBUTE

You'll use the DECLARE attribute to tell the browser whether to instantiate the object or not. If the DECLARE attribute indicates that the object should not be instantiated until something references it, then the object is not loaded. At this writing, the DECLARE attribute has not been implemented in MSIE 3.0. However, Microsoft indicates that DECLARE will be supported.

The HEIGHT Attribute

The HEIGHT attribute suggests the height in pixels to be made available to the ActiveX Control when rendered by the browser (see fig. 19.1). The Web browser may (or may not) use this value to scale an object to the requested height. The HEIGHT attribute is currently supported in MSIE 3.0.

Fig. 19.1 - How placement attributes affect the <OBJECT> tag.

The HSPACE Attribute

The HSPACE attribute suggests the amount of space, in pixels, that should be kept as white space on the left and right as a buffer between the ActiveX Control and surrounding page elements (refer to fig. 19.1). The Web browser may (or may not) use this value to allocate white space. The HSPACE attribute is currently supported in MSIE 3.0.

The ID Attribute

The ID attribute defines a document-wide identifier. This can be used for naming positions within documents. In order to communicate between objects within the Web browser, the ID attribute may be set. The ID attribute is currently supported in MSIE 3.0.

The ISMAP Attribute

The ISMAP attribute indicates that the Web server provides an image map. The object must appear within an Anchor tag indicating a hypertext link in order for ISMAP to make sense. ISMAP requires that mouse clicks be sent to the server in the same manner as the <IMG> element. There is still disagreement among the W3C committee members working on the <OBJECT> tag definition, so the ISMAP attribute is not currently supported in MSIE 3.0. However, Microsoft has indicated that ISMAP will be supported if it remains a part of the <OBJECT> tag specification.

The NAME Attribute

Use the NAME attribute to indicate whether an object wrapped in a <FORM> tag will be submitted with the form. If you specify NAME, the Web browser submits the VALUE property of the object to the host. If you don't specify NAME, the ActiveX Control is assumed to be decorative and not functional in form. The NAME attribute is currently supported in MSIE 3.0.

The STANDBY Attribute

A short string of text can be displayed while the browser loads the ActiveX Control. Use the STANDBY attribute to specify this text. The STANDBY attribute is not currently supported in MSIE 3.0; however, Microsoft will likely implement this attribute.

The TYPE Attribute

The TYPE attribute is used to specify the the Internet Media Type for the ActiveX Control identified by CLASSID before actually retrieving it.

ftp://ds.internic.net/rfc/rfc1590.txt-You can learn more about Internet Media Types by refering to RFC 1590, which you can find at this FTP site.

Currently, the TYPE attribute is supported in a limited fashion in MSIE 3.0. Microsoft has indicated that TYPE will be implemented for all relevant MIME types.

The USEMAP Attribute

The USEMAP attribute is included for use with static images. The value in USEMAP specifies a uniform resource locator for a client-side image map. The USEMAP attribute is currently not supported in MSIE 3.0, but Microsoft has indicated that MSIE 3.0 will support USEMAP in the future.

The VSPACE Attribute

The VSPACE attribute suggests the amount of space, in pixels, to keep as white space on the top and bottom as a buffer between the ActiveX Control and surrounding page elements (refer to fig. 19.1). The Web browser may (or may not) use this value to allocate the requested white space. The VSPACE attribute is currently supported in MSIE 3.0.

The WIDTH Attribute

The WIDTH attribute suggests the width, in pixels, to make available to the ActiveX Control when it is rendered by the browser (refer to fig. 19.1). The Web browser may (or may not) use this value to scale an object to the requested width. The WIDTH attribute is currently supported in MSIE 3.0.

The <PARAM> Tag in Detail

You may want to pass parameter values to your ActiveX Control. The <PARAM> tag provides a mechanism to supply a list of named property values. Note that the <PARAM> tag has no closing </PARAM> tag. (Just to keep it simple for you!) Table 19.4 lists the attributes of the <PARAM> tag.

Table 19.4-Attributes of the <PARAM> Tag
Attribute Description

NAME Defines the name of the property. Your ActiveX Control can treat the name as case-sensitive, if desired.

VALUE Specifies the value of the property identified in NAME.

VALUETYPE Can be one of REF, OBJECT, or DATA.

TYPE Refers to Internet Media Type (RFC 1590) of the item referred to in the VALUE field when VALUETYPE = REF.

Table 19.4-Attributes of the *<PARAM>* Tag
Attribute	Description
`NAME`	Defines the name of the property. Your ActiveX Control can treat the name as case-sensitive, if desired.
`VALUE`	Specifies the value of the property identified in `NAME`.
`VALUETYPE`	Can be one of `REF`, `OBJECT`, or `DATA`.
`TYPE`	Refers to Internet Media Type (RFC 1590) of the item referred to in the `VALUE` field when `VALUETYPE = REF`.

There is no need to go through all of these attributes. Except for the VALUETYPE attributes, they are mostly self-explanatory. The VALUETYPE attributes are explained briefly in Table 19.5.

Table 19.5-Values for VALUETYPE Attribute
Value Meaning

REF Indicates that the value found in the VALUE attribute is a URL.

OBJECT Indicates that the value found in the VALUE attribute is the URL of another OBJECT element.

DATA Indicates that the value found in the VALUE attribute is intended to be passed to the OBJECT as a string. This is the default VALUETYPE.

Table 19.5-Values for *VALUETYPE* Attribute
Value	Meaning
`REF`	Indicates that the value found in the `VALUE` attribute is a URL.
`OBJECT`	Indicates that the value found in the `VALUE` attribute is the URL of another `OBJECT` element.
`DATA`	Indicates that the value found in the `VALUE` attribute is intended to be passed to the `OBJECT` as a string. This is the default `VALUETYPE`.

Using Some of the Microsoft ActiveX Controls

Microsoft provides a few demonstration ActiveX Controls which turn out to be quite useful for Web developers. In this section, you'll use three of these controls in step-by-step examples. The four controls that you'll be using are the following:

The New control
The Label control
The Chart control
The Timer control

In each of the following sections, you'll work an example and then review important properties.

Using the New Control

If you're maintaining a Web site, you know that to keep your audience, you must add new content on a regular basis. Whether you run a simple personal page or a corporate Web site with thousands of pages and links, you always want to draw attention to the new stuff. The problem with specially marking new content is that you have to unmark it after it isn't new anymore. Maintenance headache. The New control solves this problem for you.

Working an Example

All of the examples in this chapter assume that you have a simple HTML template file. Having a template saves you the time of retyping comment headers and the basic tags that are found in all HTML documents. Your template might look something like Listing 19.2.

Listing.19.2-HTMLSTUB.HTM-HTML Document Template

<! ------------------------------------------------- 
<! --
<! --     Description:     
<! --
<! --     Author:          Brian Farrar
<! --
<! --   Date:          
<! ------------------------------------------------- 

<HTML>

<TITLE>
</TITLE>

<BODY BGCOLOR=#FFFFFF>

<H1></H1>

<P>

<OBJECT 

</OBJECT>

</BODY>

</HTML>

To use the New control in HTML document, follow these steps:

Start the ActiveX Control Pad , and open your HTML template file.
Update the comment header, TITLE value, and major heading to reflect the example your working on.

Save the file to a convenient working directory as NEWCTL.HTM. It should now look similar to Listing 19.3.

Listing 19.3-NEWCTL.HTM-Customizing the HTML Template

<! ------------------------------------------------- 
<! --
<! --	Description:      Using the New Control
<! --
<! --	Author:           Brian Farrar
<! --
<! --   Date:           5/12/96
<! -------------------------------------------------
<HTML>
<TITLE>
New Item ActiveX Control Example
</TITLE>

<BODY BGCOLOR=#FFFFFF>

<H1>What's New on Our Web Site</H1>

<P>

</BODY>

</HTML>

Add the masthead graphic NEW.GIF, provided on the CD.
Place a horizontal rule-the <HR> tag-below the <H1> enclosed title.
Place an <H3> heading that indicates a date when the following items will no longer be considered new. Be sure to pick a date that is past than today's date. So, if today is 9/25/96, pick something like 10/12/96.
Select Edit, Insert ActiveX Control from the menu. Choose newbCtl Object from the pick list of ActiveX Controls and press OK. Or you can specify the <OBJECT> by entering the code directly into the document. Make sure to set the attributes as shown in Listing 19.4. Note that the CLASSID field should be filled in for you by the ActiveX Control Pad. Be sure that the date <PARAM>'s value is set to the date indicated in the <H3> heading of step 6.
Listing 19.4-2NEWCTL.HTM-First Instance of <OBJECT> in NEWCTL.HTM
```
<OBJECT
            ID="NewLabel"
CLASSID="CLSID:642B65C0-7374-11CF-A3A9-00A0C9034920"
     WIDTH=20
     HEIGHT=10
     HSPACE=10
>
      <PARAM NAME="date" value="6/1/96">
</OBJECT>
```
Add some text that indicates that there is new information available on the Web site somewhere. Do this by typing text after the </OBJECT> tag.
Repeat steps 7 and 8 several times.
Place another <HR> horizontal rule below your last <OBJECT> from step 9.
Place an <H3> heading that indicates a date when the following items will no longer be considered new. Be sure to pick a date that is earlier than today's date. So, if today is 9/25/96, pick something like 9/11/96.
Copy and paste the <OBJECT> tag information after a breaking line (<BR>). Specify the <OBJECT> attributes something like that shown in Listing 19.5. Be sure that the date <PARAM>'s value is set to the date indicated in your <H3> heading from step 11.
Listing 19.5-3NEWCTL.HTM-Expired New Control <OBJECT> Listing
```
<OBJECT
            ID=NewLabel
CLASSID="CLSID:642B65C0-7374-11CF-A3A9-00A0C9034920"
     WIDTH=20
     HEIGHT=10
     HSPACE=10
>
      <PARAM NAME="date" value="5/1/96">
</OBJECT>
```
Add some text that indicates that there is new information available on the Web site somewhere. Do this by typing some text after the </OBJECT> tag.
Repeat steps 12 and 13 several times.
Save your work as NEWCTL.HTM.

Now that the HTML document is complete, you can test your work using Microsoft Internet Explorer 3.0. To test your HTML document, follow these steps:

Start Microsoft Internet Explorer 3.0.
Place the text cursor in the document text box and type NEWCTL.HTM. Be sure to include the fully qualified path to your document. Press Enter.
If you've done everything correctly, the New graphic will appear next to the top items and not next to the bottom items (see fig. 19.2).
Fig. 19.2 - First test of NEWCTL.HTM.
Open a DOS window, type the DOS date command, and press Enter.
Set the date to a time before the date you selected in step 11. The date selected in the example here was 5/1/96, so I entered 4/15/96 at the DOS date prompt.
Now press the reload button on MSIE 3.0. The results should look something like figure 19.3. If you've done everything right, the New graphic will appear next to all the items on your page.
Fig. 19.3 - Second test of NEWCTL.HTM.
Open a DOS window again, type the DOS date command , and press Enter.
Set the date to a time after the date you selected in step 6. The date selected in the example here was 6/1/96, so I entered 6/15/96 at the DOS date prompt.
Now press the reload button on MSIE 3.0. If you've done everything right, the New graphic will not appear at all.

If you've managed a Web site, you can see the tremendous benefit for an ActiveX Control like the New control.

Important Properties

There are two critical properties to be set for the New ActiveX control-the DATE parameter and the IMAGE parameter (see Table 19.6).

Table 19.6-Important New Control Properties
Property Description

DATE This property sets the date on which the New sticker should expire. This allows a document to decide for itself whether the content is new.

IMAGE This property allows you to select an image other than the default image. Provide a URL to an appropriate image.

Table 19.6-Important New Control Properties
Property	Description
`DATE`	This property sets the date on which the New sticker should expire. This allows a document to decide for itself whether the content is new.
`IMAGE`	This property allows you to select an image other than the default image. Provide a URL to an appropriate image.

Using the Label Control

HTML makes it easy for you to deal with most of the standard types of text information. As long as the orientation of the text is left to right, HTML provides all the tools necessary. But sometimes, your page may need something a little bit more daring. This is where the Label control steps in.

Working an Example

To use the Label control in an HTML document, follow these steps:

Start the ActiveX Control Pad, and open your HTML template file.
Update the comment header, TITLE value, and <H1> major heading to reflect the example your working on.
Save the file to a convenient working directory as LABEL.HTM.
Add an <HR> tag below the <H1> title you entered.
Select Edit, Insert ActiveX Control from the menu. Choose sprLabelCtl Object from the list of ActiveX Controls and press OK. Or simply enter the <OBJECT> data for the Label control as shown in Listing 19.6. This sets up a label that rises at a 30-degree angle using the Impact True Type font.
Listing 19.6-LABEL.HTM-<OBJECT> Tag For Inserting Label ActiveX Control
```
<OBJECT
     CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
           ID=label
           WIDTH=200
            HEIGHT=100
            VSPACE=0
            ALIGN=left
>
     <PARAM NAME="angle" value="30">
     <PARAM NAME="alignment" value="3">
     <PARAM NAME="BackStyle" value="0">
     <PARAM NAME="caption" value="Announce">
     <PARAM NAME="FontName" value="Impact">
     <PARAM NAME="FontSize" value="40">
     <PARAM NAME="frcolor" value="255">
</OBJECT>
```
Note that the order parameters that appear in the code depend upon whether you typed the code or used the ActiveX Control Pad's Edit menu and property sheet. The examples in this chapter were typed.
Add some text to appear to the right of the <OBJECT>. Make sure you put in enough text to ensure that the following text and Label control appear below the <OBJECT> entered in step 5.

Enter the <OBJECT> data for the Label control as shown in Listing 19.7. This sets up a string of text that will be rendered upside down using the Brush Script MT True Type font.

Listing 19.7-2LABEL.HTM-Second Label Control in LABEL.HTM

<OBJECT
     CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
       ID=label
            WIDTH=300
            HEIGHT=100
            VSPACE=0
            ALIGN="center"
>
     <PARAM NAME="angle" value="180">
     <PARAM NAME="alignment" value="2">
     <PARAM NAME="BackStyle" value="0">
     <PARAM NAME="caption" value="Surprise">
     <PARAM NAME="FontName" value="Brush Script MT">
     <PARAM NAME="FontSize" value="110">
     <PARAM NAME="frcolor" value="16776960">
</OBJECT>

Add some text to appear below the <OBJECT> you just created.
Save your work as LABEL.HTM.

Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0. To testing your HTML document, follow these steps.

Start Microsoft Internet Explorer 3.0.
Place the text cursor in the document text box and type LABEL.HTM. Be sure to include the fully qualified path to your document. Hit Enter.
If you've done everything correctly, the HTML document well look something like figure 19.4.

Fig. 19.4 - Check your Label control example results.

Important Properties

Let's take a look at the properties that can be set for the Label control. Table 19.7 provides a quick look at all the properties. It is followed by a brief discussion of a few critical items.

Table 19.7-Properties for the Label ActiveX Control
Property Description

Caption Indicates the text to be displayed within the Label control. The appearance of this text will be affected by other properties.

Angle Indicates the angle of the base line for the text. This item is specified in degrees counter-clockwise from horizontal.

Alignment Indicates the alignment of the control within the rectangular area specified for the control

BackStyle Indicates how to display the area of the control not covered by the caption text.

FontName Indicates the True Type font used to draw the Caption text.

FontSize Indicates the size of the font used to draw the Caption text.

FontItalic Indicates that the Caption text should be italicized.

FontBold Indicates that the Caption text should be bolded.

FontUnderline Indicates that the Caption text should be underlined.

FontStrikeout Indicates that the Caption text should be marked with strikethrough.

FrColor Indicates the RGB triplet for the color.

Table 19.7-Properties for the Label ActiveX Control
Property	Description
`Caption`	Indicates the text to be displayed within the Label control. The appearance of this text will be affected by other properties.
`Angle`	Indicates the angle of the base line for the text. This item is specified in degrees counter-clockwise from horizontal.
`Alignment`	Indicates the alignment of the control within the rectangular area specified for the control
`BackStyle`	Indicates how to display the area of the control not covered by the caption text.
`FontName`	Indicates the True Type font used to draw the `Caption` text.
`FontSize`	Indicates the size of the font used to draw the `Caption` text.
`FontItalic`	Indicates that the `Caption` text should be italicized.
`FontBold`	Indicates that the `Caption` text should be bolded.
`FontUnderline`	Indicates that the `Caption` text should be underlined.
`FontStrikeout`	Indicates that the `Caption` text should be marked with strikethrough.
`FrColor`	Indicates the RGB triplet for the color.

The following sections examine a few details related to some of these properties.

The Angle Property

The Angle property indicates the angle of the baseline along which the text will be drawn. The value used to express this angle is in degrees. Degrees are counted in a counter-clockwise fashion from horizontal. That is, to turn a bit of text upside down, the Angle property is set to 180.

The Alignment Property

You'll use the Alignment property to situate the caption text within the ActiveX Control's rectangular space on the page. Table 19.8 summarizes the effect of various Alignment settings.

Table 19.8-Values for the Alignment Property
Value Description

0 Causes the control to be aligned along the left edge of the control's frame.

1 Causes the control to be aligned along the right edge of the control's frame.

2 Causes the control to be centered within the control's frame.

3 Causes the control to be aligned along the top of the control's frame.

4 Causes the control to be aligned along the bottom of the control's frame.

Table 19.8-Values for the *Alignment* Property
Value	Description
0	Causes the control to be aligned along the left edge of the control's frame.
1	Causes the control to be aligned along the right edge of the control's frame.
2	Causes the control to be centered within the control's frame.
3	Causes the control to be aligned along the top of the control's frame.
4	Causes the control to be aligned along the bottom of the control's frame.

The BackStyle Property

You'll use the BackStyle property to set the background treatment for area within the control's frame not covered by the Caption text. Table 19.9 summarizes the effect of various BackStyle settings.

Table 19.9-Values for the BackStyle Property
Value Description

0 Transparent-the area within the control's frame not covered by the Caption text is set to the page's background color.

1 Opaque-the area within the control's frame not covered by Caption text is set to a default color (usually gray).

Table 19.9-Values for the *BackStyle* Property
Value	Description
0	Transparent-the area within the control's frame not covered by the `Caption` text is set to the page's background color.
1	Opaque-the area within the control's frame not covered by `Caption` text is set to a default color (usually gray).

Important Methods and Events

The Label control also implements one method (the About method) and one event (the Mouse Click). Dealing with methods will be discussed in Chapter ?? and events will be discussed in the next example.

Using the Timer Control

The Timer control provides you with the ability to enact changes to a control based on the expiration of an arbitrary timer. Unlike the other ActiveX Controls you've worked with so far, the Timer is an invisible control. That is, you won't see it on your Web pages. Instead, you'll use the Timer to trigger changes in another control or item on the page. Timer controls are a bit tricky at first but, once you've worked an example, you'll see all kinds of uses for them. Also unlike the controls you've used so far, you'll need to add a bit of VBScript to your Web page to make the Timer control work. Don't worry though; you'll only need a snippet of VBScript to make it work.

Working an Example

To use the Timer control in an HTML document, follow these steps:

Start the ActiveX Control Pad and open your HTML template file.
Update the comment header, TITLE value, and <H1> major heading to reflect the example you're working on.
Save the file to a convenient working directory as TIMER.HTM.
Add an <HR> tag below the <H1> title you entered.

Select Edit, Insert ActiveX Control from the menu. Choose sprLabelCtl Object from the list of ActiveX Controls and press OK. Or simply type the <OBJECT> data for a Label control as shown in Listing 19.8. This sets up a Label with no angle using the Monotype Corsiva True Type font. Select an initial FontSize as well.

Listing 19.8-TIMER.HTM-Label Control for Use with Timer Control

     <OBJECT
          CLASSID="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
          ID=Spinner
          WIDTH=350
          HEIGHT=350
          ALIGN=center
          HSPACE=30
          VSPACE=50
     >
          <PARAM NAME="angle" value="0">
          <PARAM NAME="alignment" value="2">
          <PARAM NAME="BackStyle" value="0">
          <PARAM NAME="caption" value="Spin a web">
          <PARAM NAME="FontName" value="Monotype Corsiva">
          <PARAM NAME="FontSize" value="30">
     </OBJECT>

Now place the <OBJECT> data for the Timer control as shown in Listing 19.9. Start with an initial TimeOut setting of 100. (You may want to play with this later.)

Listing 19.9-2TIMER.HTM-Timer Control

     <OBJECT
          CLASSID="59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
          ID=SpinTimer
          ALIGN=middle
     >
          <PARAM NAME="TimeOut" value="100">
          <PARAM NAME="enable" value="1">
     </OBJECT>

When a Timer control is enabled, it throws a time event at every TimeOut interval. In order to harness the Timer control and make dynamic changes to your Web page, you must implement a response function. The response function is invoked when the event is thrown. (You'll learn more about VBScript in Chapter 20, "Designing Visual Basic Script Applications.")
from Listing 19.10 into your TIMER.HTM document. To accomplish this, select Tools, Script Wizard. The Script Wizard dialog box appears. Select the SpinTimer object's Time event. Place the Script Wizard into Code View by selecting the Code View radio button and enter the code as shown in Listing 19.10. Your screen should look like figure 19.5.
Fig. 19.5 - Enter the code in Code View from the Script Wizard.
Listing 19.10-3TIMER.HTM-VBScript to Implement Timer Response Function
```
<SCRIPT LANGUAGE="VBScript" FOR="SpinTimer" EVENT="time">

      Spinner.Angle = (Spinner.Angle - 5) mod 360
      If Spinner.FontSize > 100 Then
            Spinner.FontSize = 10
            If Spinner.Caption = "Spin a web" Then
                  Spinner.Caption = "Don't get dizzy"
            Else
                  Spinner.Caption = "Spin a web"
            End If
      Else
            Spinner.FontSize = Spinner.FontSize + 5
      End If

</SCRIPT>
```
Save your work as TIMER.HTM.

Take a minute and study what this function does. First, the Angle property of the Spinner Label control is decreased by five. Then the modulus of the result and 360 is taken. (This ensures that the result is always less than 360 degrees.) As the Angle property is being changed, the FontSize property is increased until it exceeds 100. When the FontSize exceeds 100, the Caption property is toggled between two different strings.

Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0. These next steps take you through testing your HTML document:

Start Microsoft Internet Explorer 3.0.
Place the text cursor in the document text box and type TIMER.HTM. Be sure to include the fully qualified path to your document. Hit Enter.
If you've done everything correctly, the HTML document well look something like figure 19.6.

Fig. 19.6 - Timer control example results.

Important Properties

Let's take a look at the properties that can be set for the Timer control. Table 19.10 describes the properties and a brief discussion of a few critical items follows.

Table 19.10-Timer Control Properties
Property Description

Enable This property indicates whether the Timer has been enabled or not.

TimeOut Use this property to set the time, in milliseconds, when the Timer is triggered.

Table 19.10-Timer Control Properties
Property	Description
`Enable`	This property indicates whether the Timer has been enabled or not.
`TimeOut`	Use this property to set the time, in milliseconds, when the Timer is triggered.

The Enable Property

A Timer control can be enabled or disabled. When the Timer is disabled, no Time event is triggered. When the Timer is enabled, the Time event is triggered and response functions can take any desired action (see Table 19.11).

Table 19.11-Enable Property Settings
Status Meaning

1 Timer is enabled

0 Timer is disabled

Table 19.11-Enable Property Settings
Status	Meaning
1	Timer is enabled
0	Timer is disabled

The TimeOut Property

The Timer control generates a Time event on a regular interval. You'll set the interval by changing the value of TimeOut. TimeOut assumes that the number you provide is in milliseconds. Passing a negative value has the same effect as setting Enable to 0.

Important Methods and Events

The Timer control also implements one method (the About method) and one event (the Time event). Note that the proper form for an event response function is ID_EVENT. In our example, the timer had ID=SpinTimer and the control throws the time event so the response function has the name SpinTimer_time.

To experiment with response function naming, go back to the LABEL.HTM file created previously and implement a response function for the Mouse Click event. A simple way to do this is to use the MsgBox function which takes a text string as a parameter.

Copyright ©1996, Que Corporation. All rights reserved. No part of this book may be used or reproduced in any form or by any means, or stored in a database or retrieval system without prior written permission of the publisher except in the case of brief quotations embodied in critical articles and reviews. Making copies of any part of this book for any purpose other than your own personal use is a violation of United States copyright laws. For information, address Que Corporation, 201 West 103^rd Street, Indianapolis, IN 46290.
Notice: This material is from BackOffice Intranet Kit, ISBN: 0-7897-0848-5. The electronic version of this material has not been through the final proof reading stage that the book goes through before being published in printed form. Some errors may exist here that are corrected before the book is published. This material is provided "as is" without any warranty of any kind.