Laura Lemay's Teach Yourself Web Pub. W/HTML 3.2 twpxh.htm

- — Appendix H —ActiveX and Visual Basic Script Language Reference

- Microsoft ActiveX Technology
- Using ActiveX Controls
- ActiveX/Visual Basic Script Examples
- ActiveX Control Pack

- <OBJECT> ... </OBJECT>
- The Label Control—IELABEL.OCX
- The Timer Control—IETIMER.OCX
- The Animated Button—IEANBTN.OCX
- The Chart Control—IECHART.OCX
- The New Button Control—IENEWB.OCX
- The Pre-loader Control—IEPRELD.OCX
- The Intrinsic Controls—HTMLCTL.OCX (Registered During Internet Explorer 3.0 Setup)
- The Active Movie Control—AMOVIE.OCX
- The ActiveVRML Control—AVVIEW.DLL

- Visual Basic Script

#
— Appendix H —
ActiveX and Visual Basic Script Language Reference

Recent advances in browser technology have been pushing the idea of active content. To this end, here are a couple of products that HTML authors should be aware of:

- ActiveX
- Visual Basic Script

The recent technology from Microsoft is based around ActiveX controls (previously known as OLE controls). A new control requirement specification has meant that OLE controls previously burdened with code inappropriate for use on the Internet can now be much more streamlined, making it possible to embed them as <OBJECT>s into Web pages. This (like Java) allows almost limitless activity and interactivity within Web pages. To produce ActiveX controls though, you must have a good deal of programming skill. Casual HTML authors, however, will be able to rely on taking advantage of many freely available controls, as they can with JavaScript scripts and Java applets at the moment. (This mechanism is Internet Explorer-specific.)

Visual Basic Script is a lightweight yet fully compatible version of Visual Basic. Designed for use on the Internet, Visual Basic Script allows full automation, customization, and scripting within Web pages. Coming into its own when used to control ActiveX controls, Visual Basic is the easiest to learn of the available methods for creating dynamic content. (This mechanism is Internet Explorer-specific.)

###
Microsoft ActiveX Technology

Microsoft's ActiveX technology, recently announced and supported by Internet Explorer 3.0 only (although Microsoft is co-developing a plug-in module for Netscape that will allow Netscape to employ ActiveX controls), represents a huge advance in the capabilities of Internet Explorer. ActiveX has relaxed the OLE control requirements to practically nothing. Although previous OLE controls (such as the .OCX files shipped with Visual Basic) contained a lot of baggage inappropriate to use on the Internet, new ActiveX controls (conforming to the redesigned control requirements specification) can be a lot more streamlined, facilitating the easier production of high-quality dynamic content for HTML documents. (It's easier to create ActiveX controls than previous OLE controls, but it still requires a great degree of programming knowledge. Casual HTML authors, though, will no doubt be able to take advantage of a multitude of freely available ActiveX controls in time.)

Internet Explorer 3.0 allows for the use of ActiveX controls, active scripts (such as Visual Basic Script), and active documents. ActiveX can be used to encapsulate practically any application or applet for use within HTML documents.

The embedding mechanism, using the <OBJECT> element, has been designed in coalition with the W3C, a technical report of which can be found at http://www.w3.org/pub/www/TR/WD-object.html.

The specific method of construction of ActiveX controls is outside the scope of this reference, but some (very) simple examples of the use of a couple of ActiveX controls are presented later in this appendix.

Microsoft recently made available a number of ActiveX controls as a brief demonstration of the possibilities of the technology. For details on how to use these, see the ActiveX control pack section and the Microsoft ActiveX gallery at the Internet Explorer 3.0 Web site. Also see the ActiveVRML and ActiveMovie Web sites at http://www.microsoft.com/intdev/avr/ and http://www.microsoft.com/advtech/ActiveMovie/Amstream.htm, respectively.

###
Using ActiveX Controls

This HTML fragment uses the label and new button ActiveX controls, using the new button's built-in graphic image. The screen capture in Figure H.1 was created using Internet Explorer 3.0 Alpha, which is the only browser at present that supports the use of ActiveX controls. For more details on ActiveX controls, see the section "ActiveX Control Pack" later in this appendix.

    <HTML>

    <HEAD>

    <TITLE>Label Control</TITLE>

    </HEAD>

    <BODY>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=lbl1

      width=100

      height=220

      align=left>

      <param name="angle" value="80" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="The HTML Reference">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="24">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    <BR><BR>

    Welcome to the new Reference pages

    <OBJECT

      classid="{642B65C0-7374-11CF-A3A9-00A0C9034920}"

      id=newb

      width=31

      height=19>

      <PARAM NAME="date" value="6/1/1997">

    </OBJECT>

    </BODY>

    </HTML>

Figure H.1. Example of ActiveX controls.

###
ActiveX/Visual Basic Script Examples

The following examples use both the Timer and the Label ActiveX controls (both available in the ActiveX control pack from the Microsoft Web site). They are exceedingly simple but serve to show how easy it is.

They will require Internet Explorer 3.0 and the ActiveX controls to be installed.

The first example uses the Timer control to alter the text color and alignment angle of the text displayed by the Label controls at regular intervals. The Label ActiveX control supports the Click event, and so actions that are carried out when the control is clicked can be attributed to this Label. In this case, it simply displays an Alert dialogue, with the text "Hello" on it.

    <HTML>

    <HEAD>

    <OBJECT classid="{59CCB4A0-727D-11CF-AC36-00AA00A47DD2}"

            id=timer

            align=left

            width=1

            height=1>

      <param name="TimeOut" value="100">

      <param name="enable" value="1">

    </OBJECT>

    <TITLE>Label Control</TITLE>

    <SCRIPT LANGUAGE="VBS">

    <!—

    Sub timer_time

      lbl1.forecolor= rnd() * 166777216

      lbl2.forecolor= rnd() * 166777216

      lbl3.forecolor= rnd() * 166777216

      lbl1.Angle=(lbl1.Angle+5) mod 360

      lbl3.Angle=(lbl3.Angle-10) mod 360

    End Sub

    Sub lbl1_Click

      Alert "Hello"

    End Sub

    —>

    </SCRIPT>

    </HEAD>

    <BODY BGCOLOR=#c0c0c0>

    <CENTER>

    <TABLE

      WIDTH=50%

      BORDER=5

      BORDERCOLORLIGHT=green

      BORDERCOLORDARK=navy

      RULES=none

      FRAME=box>

    <COLGROUP SPAN=4 ALIGN=center VALIGN=top>

    <THEAD></THEAD>

    <TBODY>

    <TR>

    <TD>

    <OBJECT  classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=lbl1

      width=90

      height=90>

      <param name="angle" value="30" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="The HTML">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=lbl2

      width=200

      height=20

      align=center>

      <param name="angle" value="0" >

      <param name="alignment" value="3" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="Reference Library is">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="22">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=lbl3

      width=90

      height=90>

      <param name="angle" value="-30" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="Great!">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="24">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    </TR>

    </TBODY>

    <TFOOT></TFOOT>

    </TABLE>

    <FONT SIZE=+1>

    </CENTER>

    </BODY>

    </HTML>

The second example is in a similar vein and is a mock version of the infamous Nervous Text Java applet. Again, it uses the Timer control to control the random setting of the Label alignments and to rotate them.

    <HTML>

    <HEAD>

    <OBJECT classid="{59CCB4A0-727D-11CF-AC36-00AA00A47DD2}"

            id=timer1

            align=left

            width=1

            height=1>

    <param name="TimeOut" value="100">

    <param name="enable" value="1">

    </OBJECT>

    <TITLE>Label Testing</TITLE>

    <SCRIPT LANGUAGE="VBS">

    <!—

    Sub timer1_time

      label1.Alignment= rnd() * 4

      label2.Alignment= rnd() * 4

      label3.Alignment= rnd() * 4

      label4.Alignment= rnd() * 4

      label5.Alignment= rnd() * 4

      label6.Alignment= rnd() * 4

      label7.Alignment= rnd() * 4

      label8.Alignment= rnd() * 4

      label9.Alignment= rnd() * 4

      label10.Alignment= rnd() * 4

      label1.Angle= rnd() * 90

      label2.Angle= rnd() * 90

      label3.Angle= rnd() * 90

      label4.Angle= rnd() * 90

      label5.Angle= rnd() * 90

      label6.Angle= rnd() * 90

      label7.Angle= rnd() * 90

      label8.Angle= rnd() * 90

      label9.Angle= rnd() * 90

      label10.Angle= rnd() * 90

    End Sub

    —>

    </SCRIPT>

    </HEAD>

    <BODY BGCOLOR=#c0c0c0>

    <CENTER>

    <TABLE

      BORDER=5

      BORDERCOLORLIGHT=green

      BORDERCOLORDARK=navy

      RULES=none

      FRAME=box>

    <THEAD></THEAD>

    <TBODY>

    <TR>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label1

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="I">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label2

      width=30

      height=30

      align=center>

      <param name="angle" value="0" >

      <param name="alignment" value="3" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="'">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label3

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="m">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label4

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value=" ">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label5

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="S">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label6

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="c">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label7

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="a">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label8

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="r">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label9

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="e">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    <TD>

    <OBJECT classid="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label10

      width=30

      height=30>

      <param name="angle" value="0" >

      <param name="alignment" value="2" >

      <param name="BackStyle" value="0" >

      <param name="caption" value="d">

      <param name="FontName" value="Arial">

      <param name="FontSize" value="20">

      <param name="FontBold" value="1">

      <param name="frcolor" value="8421376">

    </OBJECT>

    </TD>

    </TR>

    </TBODY>

    <TFOOT></TFOOT>

    </TABLE>

    </BODY>

    </HTML>

For a list of the CLASSID attributes of the controls in the ActiveX control pack available from Microsoft, see the next section.

###
ActiveX Control Pack

The ActiveX control pack, available from the Microsoft Web site, contains the following controls:

- Label
- Timer
- Animated button
- Chart
- New button
- Pre-loader
- Intrinsic Controls

Also, separately available are the ActiveMovie and ActiveVRML controls. Presented here are the unique CLASSID identification numbers, together with a list of properties. At the time of this writing, these controls were beta-test versions, and so, for more up-to-date information about their properties or for later releases of the controls, you should check the Microsoft Web site.

Almost any ActiveX control (such as those shipped with Visual Basic) can be embedded within HTML documents.

Each of the ActiveX controls is described in more detail in the following subsections.

####
<OBJECT> ... </OBJECT>

The <OBJECT> element provides away for the ActiveX controls and other media to be embedded directly into HTML documents. It subsumes the role of the <IMG> element, providing an insertion mechanism for media other than static images. As far as the Internet Explorer is concerned, the <OBJECT> element can be used for the inclusion of ActiveX OLE controls and Java applets.

The <OBJECT> element is currently supported only by Internet Explorer. The object insertion mechanism is the subject of a W3C working draft available at http://www.w3.org/pub/WWW/TR/WD-object.html. For this and other W3C working drafts, you should visit the W3C site at http://www.w3.org/pub/World Wide Web/TR/.

An example of the syntax is as follows. This example inserts a Label ActiveX control into the page:

    <OBJECT CLASSID="clsid:{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      ID=lbl1

      WIDTH=90

      HEIGHT=90>

      <PARAM NAME="angle" VALUE="30" >

      <PARAM NAME="alignment" VALUE="2" >

      <PARAM NAME="BackStyle" VALUE="0" >

      <PARAM NAME="caption" VALUE="Hello there">

      <PARAM NAME="FontName" VALUE="Arial">

      <PARAM NAME="FontSize" VALUE="20">

      <PARAM NAME="FontBold" VALUE="1">

      <PARAM NAME="frcolor" VALUE="8421376">

    </OBJECT>

The object being inserted into the HTML document in this case is referred to by its CLASSID. This is a unique identifier for the label control, according to the Component Object Model "class ID" URL scheme. (CLASSIDs can be found by searching in the Registry under HKEY_CLASSES_ROOT under the file type name (in this case, SprLbl.SprLblCtl) or by searching through the CLSID section of HKEY_CLASSES_ROOT. Searching for the file type is easier. The ID attribute identifies the specific label with a unique name, allowing interaction with and dynamic updating of the object's properties via active OLE scripting (for example, Visual Basic Script). Some objects will require certain code to implement them. This should be referenced by using the CODE attribute. Also, the DATA attribute can be used to point to a persistent data stream to initialize the object's state. The use of the above attributes is control- dependent, so exhaustive examples cannot be given.

In keeping with the role of the <OBJECT> element as a media insertion element (using <IMG>), various standard formatting attributes, such as HEIGHT, WIDTH, ALIGN, BORDER, HSPACE, VSPACE, and so on, can also be used to define the positioning of the object on the page.

The PARAM element allows a list of named property values (used to initialize an OLE control, plug-in module, or Java applet) to be represented as a sequence of PARAM elements. Note that PARAM is an empty element and should appear without an end tag. The NAME attribute defines the property to be defined, and the VALUE attribute defines the property value. For instance, in the preceding example, the line:

    <PARAM NAME="caption" VALUE="Hello there">

sets the value of the property caption to be "Hello there". (In this case, this property represents the text that will be displayed for the label.) Object properties are entirely control- dependent, so you should read the reference documentation for any control to find out what properties can be set using the PARAM element.

####
The Label Control—IELABEL.OCX

The Label ActiveX control allows the setting of labels within HTML documents. Labels are text strings that can be aligned at any angle, in any color, and in any font. The Label control has the following properties:

Caption | Specifies text to be displayed.
Angle | Specifies in degrees, counter-clockwise, how far the text is to be rotated.
Alignment | Specifies how to align text in the control. Possible values are
| 0 | Align to left.
| 1 | Align to right.
| 2 | Centered.
| 3 | Align to top.
| 4 | Align to bottom.
BackStyle | Control background. Possible values are
| 0 | Transparent.
| 1 | Opaque.
FontName | Name of TrueType font for the label text.
FontSize | Size of the font for the label text.
FontItalic | Flag for italic text.
FontBold | Flag for bold text.
FontUnderline | Flag for underline text.
FontStrikeout | Flag for strikeout text.
frcolor | Specifies the color of the text to be used. This accepts a single value that can be calculated by working out the RRGGBB triplet for the color you desire and then converting the whole triplet to a decimal value. (Instead of treating it as a triplet of two figures for each color component, treat it as a six-figure hexadecimal number.)

For all flag values, anything that isn't 0 is treated as a 1. Using a value of 1 specifies the flag to be true.

The Label control accepts the Click event (for the purposes of scripting added functionality to the control).

The CLASSID of the Label control is as follows:

    classid="{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

Something like the following could typically be used in HTML for the Label control:

    <OBJECT

      classid="{99B42120-6EC7-11CF-A6C7-00AA00A47DD2}"

      id=label

      width=150

      height=500

      vspace=0

      align=left>

      <PARAM NAME="angle" VALUE="45">

      <PARAM NAME="alignment" VALUE="2">

      <PARAM NAME="BackStyle" VALUE="0">

      <PARAM NAME="caption" VALUE="Stephen">

      <PARAM NAME="FontName" VALUE="Times New Roman">

      <PARAM NAME="FontSize" VALUE="20">

    </OBJECT>

####
The Timer Control—IETIMER.OCX

The Timer control can be used to trigger events periodically. It does not appear rendered on the screen. It accepts the following properties:

Enable | To enable/disable the Timer. Possible values are
| 1 | Enabled state.
| 0 | Disabled state.
TimeOut | Interval (in milliseconds) at which Time event be triggered,

When set to a negative or 0 value, Timer will behave as in disabled state.

The Timer supports just one event:

Time | When the timer is enabled and has a positive TimeOut value, this event is invoked at every interval (i.e., when the timer reaches its TimeOut value).

The CLASSID of the Timer control is as follows:

    classid="{59CCB4A0-727D-11CF-AC36-00AA00A47DD2}"

Something like the following would typically be used in HTML for the Timer control:

    <OBJECT

      classid="{59CCB4A0-727D-11CF-AC36-00AA00A47DD2}"

      id=timer

      align=middle>

      <PARAM NAME="TimeOut" VALUE="100">

      <PARAM NAME="enable" VALUE="1">

    </OBJECT>

This would cause whatever events are scripted in the sub timer_time event routine to occur every 0.1 seconds.

####
The Animated Button—IEANBTN.OCX

The Animated button control displays various frame sequences of an AVI movie depending on the button state, which can be in any of four states:

Default | When the mouse cursor and focus are both not on the control
Down | When the control receives LButton click
Focus | When the control gets focus
Mouseover | When mouse moves over the control

The Animated button accepts the following properties:

DefaultFrEnd | The End Frame for Default state
DefaultFrStart | The Start Frame for Default state
DownFrEnd | The End Frame for Down state
DownFrStart | The Start Frame for Down state
FocusFrEnd | The End Frame for Focus state
FocusFrStart | The Start Frame for Focus state
MouseoverFrEnd | The End Frame for Mouseover state
MouseoverFrStart | The Start Frame for Mouseover state
URL | The URL location of the AVI file to be used

The Animated button, by nature of its very use, supports the following events:

ButtonEvent_Click

ButtonEvent_DblClick

ButtonEvent_Focus

The CLASSID of the Animated button control is as follows:

    classid="{0482B100-739C-11CF-A3A9-00A0C9034920}"

Something like the following would typically be used in HTML for the Animated button control:

    <OBJECT

      classid="{0482B100-739C-11CF-A3A9-00A0C9034920}"

      id=anbtn

      width=320

      height=240

      align=center

      hspace=0

      vspace=0>

      <PARAM NAME="defaultfrstart" VALUE="0">

      <PARAM NAME="defaultfrend" VALUE="7">

      <PARAM NAME="mouseoverfrstart" VALUE="8">

      <PARAM NAME="mouseoverfrend" VALUE="15">

      <PARAM NAME="focusfrstart" VALUE="16">

      <PARAM NAME="focusfrend" VALUE="23">

      <PARAM NAME="downfrstart" VALUE="24">

      <PARAM NAME="downfrend" VALUE="34">

      <PARAM NAME="URL" VALUE="welcome3.avi">

    </OBJECT>

####
The Chart Control—IECHART.OCX

The Chart control allows the embedding of graphical charts in an HTML document. It supports the following chart types:

Area Chart

Bar Chart

Column Chart

Line Chart

Pie Chart

Point Chart

Stocks Chart

Each Chart Type has three different styles that can be employed:

    Chart Type

    Styles

Area Chart | Simple Chart.
| Stacked Chart.
| 100%.
Bar Chart | Simple Chart.
| Stacked Chart.
| 100%.
Column Chart | Simple Chart.
| Stacked Chart.
| 100%.
Line Chart | Simple Chart.
| Stacked Chart.
| 100%.
Pie Chart | Simple Chart.
| One wedge of the chart is offset by some distance from the center.
Point Chart | Simple Chart.
| Stacked Chart.
| 100%.
Stocks Chart | With Open, High, Low, and Close values.
| Simple Chart.
| Connected Chart.

The IECHART control supports the following properties:

Rows | Specifies number of rows in the data series. |
Columns | Specifies number of columns in the data series. |
HorizontalGrid | Specifies horizontal grids. |
VerticalGrid | Specifies vertical grids. |
ChartType | Specifies the type of chart you want. This property can take the following values:
| Pie Chart | 0
| Point Chart | 1
| Line Chart | 2
| Area Chart | 3
| Column Chart | 4
| Bar Chart | 5
Stocks Chart | 6 (for High, Low, Close values).
Stocks Chart | 7 (for Open, High, Low, Close values).
ChartStyle | This property can assume one of the following values:
| Simple | 0
| Stacked | 1
| 100% | 2
RowIndex | Specifies the row index, used along with the DataItem property.
ColumnIndex | Specifies the column index, used along with the DataItem property.
DataItem | Specifies a data value—entry is identified by RowIndex and ColumnIndex properties. For example, to specify a data value of 3 for row 2, column 4, you would set the RowIndex property to 2, ColumnIndex property to 4, and then set the DataItem property value to 3.
ColorScheme | Specifies which pre-defined set of colors you would like to use. These colors will be used to fill regions. The possible values this property can take: 0, 1, or 2.

The CLASSID of the Chart control is as follows:

    classid="{FC25B780-75BE-11CF-8B01-444553540000}"

Something like the following would typically be used in HTML for the Chart control:

    <OBJECT

      classid="{FC25B780-75BE-11CF-8B01-444553540000}"

      id=chart1

      width=300

      height=150

      align=center

      hspace=0

      vspace=0>

      <PARAM NAME="ChartStyle" VALUE="1">

      <PARAM NAME="ChartType" VALUE="0">

      <PARAM NAME="hgridStyle" VALUE="0">

      <PARAM NAME="vgridStyle" VALUE="0">

      <PARAM NAME="colorscheme" VALUE="0">

      <PARAM NAME="backstyle" VALUE="2">

      <PARAM NAME="rows" VALUE="4">

      <PARAM NAME="columns" VALUE="4">

      <PARAM NAME="data[0][0]" VALUE="40">

      <PARAM NAME="data[0][1]" VALUE="50">

      <PARAM NAME="data[0][2]" VALUE="30">

      <PARAM NAME="data[0][3]" VALUE="60">

    </OBJECT>

This particular example will render a pie chart with one slice pulled out from the center, using the color scheme of red, green, blue, and yellow.

####
The New Button Control—IENEWB.OCX

The New Button control can be used to display a New button alongside some text. It has a fairly typical new graphic built in.

It has just two properties:

Date | The date until which this image needs to be displayed
Image | The URL specifying the image (if the default image is unsatisfactory)

The CLASSID for the New button is as follows:

    classid="{642B65C0-7374-11CF-A3A9-00A0C9034920}"

The HTML to include the default New button graphic, until the author's next birthday, would be as follows:

    <OBJECT

      classid="{642B65C0-7374-11CF-A3A9-00A0C9034920}"

      id=ienewb

      width=31

      height=19>

      <PARAM NAME="date" VALUE="6/1/1997">

    </OBJECT>

Care should be taken when specifying the date. Readers' systems may use a different date format. The above uses a format of day/month/year, that is, a standard British format.

####
The Pre-loader Control—IEPRELD.OCX

The Pre-loader control downloads a single URL and then fires an event. It can be used to pre-load large data files (such as images) so that by the time the user actually gets to a page, much of the data is already in the cache. It is not displayed on the reader's screen.

The Pre-loader accepts two properties:

URL | The URL to be downloaded
enable | Enable (1) the pre-loader or disable (0) it

It allows for the following scriptable events:

Complete | Downloading is completed.
Error | Error was encountered.

The CLASSID of the Pre-loader is as follows:

    classid="{16E349E0-702C-11CF-A3A9-00A0C9034920}"

If the following HTML were in a page, the next page of which contained the movie welcome3.avi, then while the user was reading the initial page, the video clip would be in the process of loading. A message would also pop up when the video had finished pre-loading.

    <OBJECT

      id=movie

      classid="{16E349E0-702C-11CF-A3A9-00A0C9034920}"

      width=1

      height=1>

      <PARAM NAME="_extentX" VALUE="1">

      <PARAM NAME="_extentY" VALUE="1">

      <PARAM NAME="URL" VALUE="welcome3.avi">

      <PARAM NAME="enable" VALUE="1">

    </OBJECT>

    <script language="VBS">

    sub movie_complete

      MsgBox "Movie ready, proceed when ready"

    end sub

    </script>

####
The Intrinsic Controls—HTMLCTL.OCX (Registered During Internet Explorer 3.0 Setup)

The following control names can be used on any form within an HTML document. They accept the properties typical of the normal form element's attributes.

Control | Element
ButtonCtl Object | INPUT TYPE=BUTTON
CheckboxCtl Object | INPUT TYPE=CHECKBOX
ComboCtl Object | SELECT MULTIPLE
ListCtl Object | SELECT
PasswordCtl Object | INPUT TYPE=PASSWORD
RadioCtl Object | INPUT TYPE=RADIO
TextAreaCtl Object | TEXTAREA
TextCtl Object | INPUT NAME

####
The Active Movie Control—AMOVIE.OCX

Together with ActiveVRML, this represents the most advanced ActiveX control. Active Movies use the Active Movie Streaming format, which essentially is a single data stream that contains time-stamped media. That is, the ASF format is an architectural wrapper, defining a file format that contains the various media elements (which can include video, sound, and URLs), all being time-stamped so that they display synchronized as authored. The major advantage of this format is that it is a streaming format; that is, the data contained in the .ASF file is transmitted and played across networks in real time, instead of the Web browser having to download the entire file before playing can begin.

As would be expected, the ActiveMovie control supports a vast array of properties, 37 in total (only considering those unique to itself), three methods, and four events. It's recommended that you obtain the ActiveMovie SDK/add-on example files from Microsoft if you wish to pursue use of this data format. See http://www.microsoft.com/advtech/ActiveMovie/Amstream.htm for more information.

The CLASSID of the ActiveMovie control is as follows:

    CLASSID="{05589FA1-C356-11CE-BF01-00AA0055595A}"

As an example, the following would include a file called STEVE.ASF within an HTML document. The ActiveMovie data stream will start automatically and return to the start of the file when playing has finished. The playing controls are also shown within the page.

    <OBJECT CLASSID="{05589FA1-C356-11CE-BF01-00AA0055595A}"

      HEIGHT=400

      WIDTH=340

      ID=ActiveMovie

      align=left>

      <PARAM NAME="FileName" VALUE="steve.asf">

      <PARAM NAME="AutoStart" VALUE="1">

      <PARAM NAME="ShowControls" VALUE="1">

      <PARAM NAME="ShowDisplay" VALUE="1">

      <PARAM NAME="AutoRewind" VALUE="1">

    </OBJECT>

If the user has the ActiveMovie player installed, ActiveMovie stream format files can also be forced to play by using standard client-pull techniques.

####
The ActiveVRML Control—AVVIEW.DLL

The ActiveVRML control allows the embedding of Active VRML animation scripts within HTML documents. ActiveVRML is Microsoft's attempt to further the VRML specification, by adding even scripting capabilities to VRML. It allows for animated VRML objects. For more information, visit the ActiveVRML Web site in the following Note.

The ActiveVRML control requires Internet Explorer 3.0 and the DirectX support files to be installed. A "lite" version of the DirectX SDK is available from the AvtiveVRML Web site
http://www.microsoft.com/intdev/avr/

The ActiveVRML control accepts the following properties:

DataPath | This points to the .AVR ActiveVRML animation script.
Expression | An expression written into the ActiveVRML which provides control information.
Border | This can be true or false, and it determines the appearance, or non-appearance, of a border around the scene.

The CLASSID for the ActiveVRML control is as follows:

    classid="{389C2960-3640-11CF-9294-00AA00B8A733}"

The HTML including an ActiveVRML scene, entitled steve.avr, would be as follows:

    <OBJECT

      CLASSID="{389C2960-3640-11CF-9294-00AA00B8A733}"

      ID="AVView"

      WIDTH=300

      HEIGHT=250>

      <PARAM NAME="DataPath" VALUE="steve.avr">

      <PARAM NAME="Expression" VALUE="model">

      <PARAM NAME="Border" VALUE=FALSE>

    </OBJECT>

###
Visual Basic Script

Visual Basic Script recently introduced by Microsoft represents a step further towards active Web pages. Like JavaScript, Visual Basic Script provides scripting, automation, and customization capabilities for Web browsers. It is a subset of the Visual Basic programming language that is fully compatible with Visual Basic and Visual Basic for Applications.

To use Visual Basic Script within an HTML document, the code needs to be wrapped in <SCRIPT> ... </SCRIPT> elements, just like in JavaScript. As with JavaScript, the LANGUAGE attribute is required, in this case needing the value "VBS". Visual Basic Script comes into its own when used in conjunction with ActiveX OLE controls, which allow for full automation with any OLE-compliant application and can be used for almost any purpose on a page, allowing for truly interactive Web sites to be created relatively easily.

The following code assumes that a button named btnHello has been created somewhere on the HTML document:

    <SCRIPT LANGUAGE="VBS">

    <!— These comment delimiters ensure the code is hidden from those browsers

    that do not support Visual Basic Script

    Sub btnHello_OnClick

       MsgBox "Hello, it's a fine day"

    End Sub

    —>

    </SCRIPT>

The btnHello button responds to being clicked by displaying a message box with the text Hello, it's a fine day. For information on how to embed ActiveX controls, see the <OBJECT> element. (The button in the above example can be embedded into an HTML document using a standard <INPUT TYPE=BUTTON> element. For more details, see Appendix B, "HTML Language Reference," in the section "Forms.")

As with JavaScript, a complete description of Visual Basic Script is well outside the scope of this reference, and you are encouraged to visit http://www.microsoft.com/vbscript/ for more information and a complete copy of the language documentation.