|
|
by Stephen LeHunte
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:
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'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.
| Note |
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.
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>
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.
| Note |
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.
The ActiveX control pack, available from the Microsoft Web site, contains the following controls:
Also, separately available are the ActiveMovie and ActiveVRML controls. Presented here are the unique CLASSID identification numbers, together with a list of properties. For the latest 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.
The <OBJECT> element provides a way for the ActiveX controls and other media to be embedded directly into HTML documents. It assumes 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.
| Note |
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 CLASSID 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 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 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 (that is, 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 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 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 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>
| Note |
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 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 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 |
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 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.
| 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 ActiveVRML 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 represents a further step toward 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 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.
