A progress bar displays a color bar like this:
-----------------------------
| ------------------- |
| |*********** | |
| ------------------- |
-----------------------------This bar usually indicates the status of an operation; when the operation is complete, the bar fills the control:
-----------------------------
| ------------------- |
| |*******************| |
| ------------------- |
-----------------------------We add a progress bar, PBar1, to our Web page this way:
<HTML>
<HEAD>
<TITLE>OCX Control Page</TITLE>
</HEAD>
<BODY LANGUAGE = VBScript ONLOAD = "Page_Initialize">
<CENTER>
<H1>OCX Control Page</H1>
</CENTER>
.
.
.
<!- ProgressBar>
<PRE>
--> ProgressBar: <OBJECT CLASSID="clsid:0713e8d2-850a-101b-afc0-4210102a8da7"
HEIGHT=20 WIDTH=200 ID=PBar1></OBJECT>
</PRE>
.
.
.We specify the progress bar's setting by using its Value property. In addition, we set the progress bar's Min (default = 0) and Max (default = 100) properties to determine its range. If we set the Value to Max, the color bar will fill the control. Let's set the Value property to 50, which means the progress bar will appear half filled:
<SCRIPT LANGUAGE = VBScript>
Sub Page_Initialize
Cmd1.Caption = "Hello"
Frame1.Caption = "Frame"
Panel1.Caption = "Panel"
Grid1.Rows = 3
Grid1.Cols = 3
Grid1.Row = 1
Grid1.Col = 1
Grid1.Text = "5"
Graph1.GraphData = 2
Graph1.GraphData = 4
Graph1.GraphData = 5
Graph1.GraphData = 3
--> PBar1.Value = 50
End SubThe results appear in Figure 6.4. We can tie the displayed value to the 3-D button and the 3-D checkbox this way:
Sub Cmd1_Click()
--> PBar1.Value = 100
End Sub
Sub SSCheck1_Click(OnOff)
--> PBar1.Value = 80
End SubWhen the user clicks those controls, the color bar in the progress bar will change to match. We can even tie the value displayed in the progress bar to the slider position:
Sub Cmd1_Click()
PBar1.Value = 100
End Sub
Sub SSCheck1_Click(OnOff)
PBar1.Value = 80
End Sub
Sub Slider1_Change
--> PBar1.Value = 10 * Slider1.Value
End SubNow as the user moves the slider, the progress bar will change to match it.
That completes our ActiveX control overview. We've looked at 14 ActiveX controls that we can embed in Web pages and use with VBScript. Our Web page is a success. The entire Web page appears in Listing 6.1.
Listing 6.1 ocx.htm
<HTML>
<HEAD>
<TITLE>OCX Control Page</TITLE>
</HEAD>
<BODY LANGUAGE = VBScript ONLOAD = "Page_Initialize">
<CENTER>
<H1>OCX Control Page</H1>
</CENTER>
<!- SSCommand>
<PRE>
SSCommand: <OBJECT CLASSID="clsid:0ba686b4-f7d3-101a-993e-0000c0ef6f5e"
HEIGHT=30 WIDTH=70 ID=Cmd1></OBJECT>
</PRE>
<!- SSFrame>
<PRE>
SSFrame: <OBJECT CLASSID="clsid:0BA686AF-F7D3-101A-993E-0000C0EF6F5E"
HEIGHT=30 WIDTH=70 ID=Frame1></OBJECT>
</PRE>
<!- SSPanel>
<PRE>
SSPanel: <OBJECT CLASSID="clsid:0BA686B9-F7D3-101A-993E-0000C0EF6F5E"
HEIGHT=30 WIDTH=70 ID=Panel1></OBJECT>
</PRE>
<!- Grid>
<PRE>
Grid1: <OBJECT CLASSID="clsid:a8c3b720-0b5a-101b-b22e-00aa0037b2fc"
HEIGHT=100 WIDTH=150 ID=Grid1></OBJECT>
</PRE>
<!- Graph>
<PRE>
Graph1: <OBJECT CLASSID="clsid:0842d100-1e19-101b-9aaf-1a1626551e7c"
HEIGHT=100 WIDTH=300 ID=Graph1></OBJECT>
</PRE>
<!- SSCheck>
<PRE>
SSCheck: <OBJECT CLASSID="clsid:0ba686aa-f7d3-101a-993e-0000c0ef6f5e"
HEIGHT=40 WIDTH=200 ID=SSCheck1 Click = SSCheck1_Click>
</OBJECT>
</PRE>
<!- AVIfile>
<PRE>
AVIfile: [Free Floating] <OBJECT
CLASSID="clsid:00022602-0000-0000-C000-000000000046"
HEIGHT=50 WIDTH=50 ID=avi1></OBJECT>
</PRE><!- MMControl>
<PRE>
MMControl: <OBJECT CLASSID="clsid:C1A8AF25-1257-101B-8FB0-0020AF039CA3"
HEIGHT=50 WIDTH=400 ID=MMControl1></OBJECT>
</PRE>
<CENTER>
<INPUT TYPE = BUTTON NAME = "MMButton" VALUE = "Activate MM Control">
</CENTER>
<!- Spinbutton>
<PRE>
Spinbutton: <OBJECT CLASSID="clsid:B16553C0-06DB-101B-85B2-0000C009BE81"
HEIGHT=50 WIDTH=50 ID=SButton1></OBJECT>
</PRE>
<!- 3D Option Button>
<PRE>
3D Option: <OBJECT CLASSID="clsid:0BA686BE-F7D3-101A-993E-0000C0EF6F5E"
HEIGHT=50 WIDTH=50 ID=Option1></OBJECT>
</PRE>
<!- Slider>
<PRE>
Slider: <OBJECT CLASSID="clsid:373FF7F0-EB8B-11CD-8820-08002B2F4F5A"
HEIGHT=50 WIDTH=250 Change = Slider1_Change ID=Slider1></OBJECT>
</PRE>
<!- Keystate>
<PRE>
KeyState: <OBJECT CLASSID="clsid:B9D22270-0C24-101B-AEBD-04021C009402"
HEIGHT=50 WIDTH=50 ID=Keystate1></OBJECT>
</PRE>
<!- RichText>
<PRE>
RichText: <OBJECT CLASSID="clsid:3b7c8860-d78f-101b-b9b5-04021c009402"
HEIGHT=40 WIDTH=300 ID=RichText1></OBJECT>
</PRE>
<!- ProgressBar>
<PRE>
ProgressBar: <OBJECT CLASSID="clsid:0713e8d2-850a-101b-afc0-4210102a8da7"
HEIGHT=20 WIDTH=200 ID=PBar1></OBJECT>
</PRE>
<SCRIPT LANGUAGE = VBScript>
Sub Page_Initialize
Cmd1.Caption = "Hello"
Frame1.Caption = "Frame"
Panel1.Caption = "Panel"
Grid1.Rows = 3
Grid1.Cols = 3
Grid1.Row = 1
Grid1.Col = 1
Grid1.Text = "5"
Graph1.GraphData = 2
Graph1.GraphData = 4
Graph1.GraphData = 5
Graph1.GraphData = 3
PBar1.Value = 50
End Sub
Sub MMButton_OnClick
MMControl1.DeviceType = "CDAudio"
MMControl1.Command = "Open"
End Sub
Sub Cmd1_Click()
PBar1.Value = 100
End Sub
Sub SSCheck1_Click(OnOff)
PBar1.Value = 80
End Sub
Sub Slider1_Change
PBar1.Value = 10 * Slider1.Value
End Sub
Sub SButton1_SpinUp
RichText1.Text = "Hello World!"
End Sub
</SCRIPT>
</BODY>
</HTML>Now that we've reviewed ActiveX controls, let's take a look at some of the more powerful controls in detail, beginning with the grid control.