All Categories :
ActiveX
Chapter 16
Real-Life Examples II
CONTENTS
This chapter describes two sample Web pages created using VBScript,
with techniques introduced in Part III (Chapters 12 through 15).
The following examples are included:
Example 1. A game designed for young children learning
shape and color recognition.
Example 2. A multipage commercial Web site, navigated via
an ActiveX Tab Strip control.
Document title: Chesney Mouse
Files:
Page file: mouse.htm (Figures 16.1, 16.2, and 16.4)
Layout file: mouse.alx (Figure 16.3)
Images:
- bluesquare.gif
- bluecircle.gif
- bluetriangle.gif
- redsquare.gif
- redcircle.gif
- redtriangle.gif
- yellowsquare.gif
- yellowcircle.gif
- yellowtriangle.gif
- greensquare.gif
- greencircle.gif
- greentriangle.gif
- orangesquare.gif
- orangecircle.gif
- orangetriangle.gif
- mouse.gif
- cheese.gif
- hole1.gif
- hole2.gif
ActiveX controls:
- Label
- CommandButton
- IeImage
- IeTimer
Note |
The IeImage and IeTimer controls are part of the full installation of Microsoft Internet Explorer 3.x (MSIE 3.x) final version. If you have a beta version of MSIE 3.0 or you did not carry out a full installation, you can also find the preceding controls on the CD-ROM in the \SOURCE\CHAPTER16 directory.
|
Description: The Chesney Mouse example is a simple game,
designed with young preschool children in mind. The program randomly
selects a color and a shape from a predefined range. The child
has to click on the correct colored shape. If the correct object
is selected, the mouse graphic (which follows the cursor around
most of the time), collects the cheese from "behind"
the object and takes it off to the mouse hole.
The example demonstrates several important concepts (as well as
helping as refresher on color and shape recognition!). First,
the 2D HTML elements, the colored objects, the mouse, and the
cheese are on different layers of the display. Therefore, Chesney
Mouse appears to go behind the colored objects. Furthermore, the
mouse hole is built from two images-a front and a back. So as
Chesney scuttles off into the mouse hole, he appears to be going
inside a real hole; his image passes behind the front image but
is on top of the back image.
The example also introduces the IeTimer ActiveX control.
The timer event is fired at preset intervals while the timer is
activated. Code can be written within the timer event handler-in
this case, to move our friendly rodent and his favorite Emmantal
cheese by two pixels either up or across.
Even though the screen is filled with graphic images, the total
graphic content of the page is just over 11KB.
The simple animation is achieved by changing the image's top and
left properties at runtime. The Layout control itself doesn't
receive mouse events. Therefore, to control the movement of Chesney
Mouse around the screen, a single blank image has been used across
the entire background of the image, thereby giving you mouse move
events.
ActiveX controls: (See Chapters 1, 12, 13, and 14.) The
example uses a range of ActiveX controls. The example also demonstrates
changing properties at runtime-in this case, to produce a simple
animation.
HTML Layout control: (See Chapter 14, "Using the HTML
Layout Control.") The entire example is built within a Layout
control.
Layering: (See Chapter 14.) The mouse and cheese images
are on one layer, the colored objects are on another layer, and
the mouse hole is on two different layers.
Arrays: (See Chapter 10, "Using the Power of Arrays.")
The ranges of colors and shapes are held within single-dimension
static arrays.
Programming Elements: (See Chapter 9 "Making Your
Program Flow.") A range of VBScript language elements is
used, including conditional statements such as If...Then,
Select Case, and For...Next. The VBScript random
number generator is also used as shown in Figure 16.1.
Figure 16.1 : The program randomly selects a color and
a shape.
When the start button is clicked, a random number is generated,
which is then used to select a color and a shape. The color and
shape are then displayed in a message that gives a clue about
where the child can find the cheese.
The whole of the background is in fact an ActiveX image control,
which means that wherever the mouse pointer moves on the screen,
an event is fired. This event is used to position Chesney Mouse
next to the mouse pointer.
If the child clicks on the correct colored shape, a short animation
sequence takes control, allowing Chesney Mouse to run off to his
mouse hole with the cheese, as shown in Figure 16.2.
Figure 16.2 : The child's "reward".
Because the Layout control has been used (see Figure 16.3), the
various images are stacked in layers, which adds to the realism
of the animation. As Chesney Mouse enters his mouse hole, he appears
in front of the back of the hole and behind the front of the hole.
Figure 16.3 : mouse.alx.
Positioning images in this way is an everyday event in normal
Windows programming, but it would be impossible in normal HTML.
As you can see, the Layout control enables you to produce applications
that are usually the domain of Windows programmers. You can now
accurately position objects on the Layout canvas to create a reusable
file, which is quickly and easily added to your HTML page, as
shown in Figure 16.4.
Figure 16.4 : The object declaration for the Layout control
in the HTML page.
The Layout control file (shown in Listing 16.1) contains much
more than purely graphical and visual references. The file is
in fact the complete application for this example, containing
all the objects and the script that enables the objects to interoperate.
The script commences by defining and populating the arrays that
are used to hold the data for the colors and shapes. The user
begins the game by clicking the start button, which activates
the CommandButton1 click event handler. This event handler
generates random numbers for both the object color and object
shape, and it displays the clue message on the screen.
As the mouse is moved around the screen, the Image1_MouseMove
event handler is executed. This event moves the Chesney Mouse
image (Mousey) to the same location as the mouse pointer.
Each shape on the screen has its own event handler that is executed
when the mouse button is pressed over the shape. A special reference
name and the position of the shape are passed to the custom procedure
CheckForWin.
The CheckForWin procedure compares the reference name
of the stored shape with the reference name of the selected shape.
If they are the same, the procedure moves the cheese image under
the shape and activates the animation sequence by enabling the
timer control.
The IeTimer1_Timer event is fired at regular intervals
while the timer control is enabled. It moves the images of both
the mouse and the cheese upward to a predetermined position and
then across the screen until the mouse appears to enter his mouse
hole, at which point the timer is disabled. All the controls and
events are programmatically disabled during the animation sequence
by the use of a flag called Animating.
Listing 16.1. The mouse.alx
code.
<SCRIPT LANGUAGE="VBScript">
<!--
Dim Colors(4)
Dim Shapes(2)
Colors(0) = "Red"
Colors(1) = "Blue"
Colors(2) = "Green"
Colors(3) = "Yellow"
Colors(4) = "Orange"
Shapes(0) = "Square"
Shapes(1) = "Triangle"
Shapes(2) = "Circle"
Dim CurrentObject
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub CheckForWin(WhichObject, L, T, W, H)
If Animating = True Then
Exit Sub
End If
If CurrentObject = WhichObject Then
Cheese.Top = (T + (H/2) - (Cheese.Height/2))
Cheese.Left = (L + (W/2) - (Cheese.Width/2))
Mousey.Top = Cheese.Top + 11
Mousey.Left = Cheese.Left - 18
IeTimer1.Enabled = True
Animating = True
Else
Alert "OOPS!"
End If
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes0_MouseDown(Button, Shift, X, Y)
L = shapes0.Left
T = shapes0.Top
W = shapes0.Width
H = shapes0.Height
call CheckForWin("YellowTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub CommandButton1_Click()
If Animating = True Then
Exit Sub
End If
RANDOMIZE
CurrentColor = Int((4 - 0 + 1) * Rnd + 0)
CurrentShape = Int((2 - 0 + 1) * Rnd + 0)
Clue = "The cheese is hiding behind the "
Clue = Clue & Colors(CurrentColor) & " "
Clue = Clue & Shapes(CurrentShape)
Label1.Caption = Clue
CurrentObject = Colors(CurrentColor) & Shapes(CurrentShape)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Image1_MouseMove(Button, Shift, X, Y)
If Animating = True Then
Exit Sub
End If
Mousey.Left = X
Mousey.Top = Y
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes10_MouseDown(Button, Shift, X, Y)
L = shapes10.Left
T = shapes10.Top
W = shapes10.Width
H = shapes10.Height
call CheckForWin("OrangeCircle", L, T, W, H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes1_MouseDown(Button, Shift, X, Y)
L = shapes1.Left
T = shapes1.Top
W = shapes1.Width
H = shapes1.Height
call CheckForWin("OrangeSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes9_MouseDown(Button, Shift, X, Y)
L = shapes9.Left
T = shapes9.Top
W = shapes9.Width
H = shapes9.Height
call CheckForWin("OrangeTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes8_MouseDown(Button, Shift, X, Y)
L = shapes8.Left
T = shapes8.Top
W = shapes8.Width
H = shapes8.Height
call CheckForWin("GreenSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes7_MouseDown(Button, Shift, X, Y)
L = shapes7.Left
T = shapes7.Top
W = shapes7.Width
H = shapes7.Height
call CheckForWin("YellowCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes6_MouseDown(Button, Shift, X, Y)
L = shapes6.Left
T = shapes6.Top
W = shapes6.Width
H = shapes6.Height
call CheckForWin("RedTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes5_MouseDown(Button, Shift, X, Y)
L = shapes5.Left
T = shapes5.Top
W = shapes5.Width
H = shapes5.Height
call CheckForWin("RedCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes4_MouseDown(Button, Shift, X, Y)
L = shapes4.Left
T = shapes4.Top
W = shapes4.Width
H = shapes4.Height
call CheckForWin("RedSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes3_MouseDown(Button, Shift, X, Y)
L = shapes3.Left
T = shapes3.Top
W = shapes3.Width
H = shapes3.Height
call CheckForWin("BlueSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes2_MouseDown(Button, Shift, X, Y)
L = shapes2.Left
T = shapes2.Top
W = shapes2.Width
H = shapes2.Height
call CheckForWin("BlueCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes14_MouseDown(Button, Shift, X, Y)
L = shapes14.Left
T = shapes14.Top
W = shapes14.Width
H = shapes14.Height
call CheckForWin("YellowSquare",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes13_MouseDown(Button, Shift, X, Y)
L = shapes13.Left
T = shapes13.Top
W = shapes13.Width
H = shapes13.Height
call CheckForWin("GreenTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes12_MouseDown(Button, Shift, X, Y)
L = shapes12.Left
T = shapes12.Top
W = shapes12.Width
H = shapes12.Height
call CheckForWin("GreenCircle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub shapes11_MouseDown(Button, Shift, X, Y)
L = shapes11.Left
T = shapes11.Top
W = shapes11.Width
H = shapes11.Height
call CheckForWin("BlueTriangle",L,T,W,H)
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
dim Animating
Sub IeTimer1_Timer()
If Mousey.Top > 57 Then
Mousey.Top = Mousey.Top - 2
Cheese.Top = Cheese.Top - 2
Else
Mousey.Left = Mousey.Left + 2
Cheese.Left = Cheese.Left + 2
If Mousey.Left > 360 Then
IeTimer1.Enabled = False
Animating = False
End If
End If
end sub
-->
</SCRIPT>
<DIV BACKGROUND="#ffffff" ID="Layout3" STYLE="LAYOUT:FIXED;WIDTH:415pt;
HEIGHT:256pt;">
<OBJECT ID="IeTimer1"
CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
STYLE="TOP:30pt;LEFT:386pt;WIDTH:23pt;HEIGHT:41pt;ZINDEX:0;">
<PARAM NAME="_ExtentX" VALUE="820">
<PARAM NAME="_ExtentY" VALUE="1455">
<PARAM NAME="Interval" VALUE="5">
<PARAM NAME="Enabled" VALUE="False">
</OBJECT>
<OBJECT ID="Image1"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF" STYLE="TOP:0pt;
LEFT:4pt;WIDTH:409pt;HEIGHT:251pt;ZINDEX:1;">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="14429;8855">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Label1"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
STYLE="TOP:221pt;LEFT:8pt;WIDTH:323pt;HEIGHT:15pt;ZINDEX:2;">
<PARAM NAME="ForeColor" VALUE="16744448">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="Size" VALUE="11395;529">
<PARAM NAME="FontName" VALUE="Arial Rounded MT Bold">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="240">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
<OBJECT ID="Image2"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:34pt;LEFT:334pt;WIDTH:38pt;HEIGHT:35pt;ZINDEX:3;">
<PARAM NAME="PicturePath" VALUE="hole1.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1323;1217">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Label2"
CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:4pt;
LEFT:41pt;WIDTH:329pt;HEIGHT:22pt;ZINDEX:4;">
<PARAM NAME="ForeColor" VALUE="12615935">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="VariousPropertyBits" VALUE="268435483">
<PARAM NAME="Caption" VALUE="Help Chesney Mouse find the Cheese">
<PARAM NAME="Size" VALUE="11606;776">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="360">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
<OBJECT ID="Cheese"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:49pt;LEFT:379pt;WIDTH:17pt;HEIGHT:23pt;ZINDEX:5;">
<PARAM NAME="PicturePath" VALUE="cheese.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="582;794">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Mousey"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:26pt;LEFT:221pt;WIDTH:23pt;HEIGHT:26pt;ZINDEX:6;">
<PARAM NAME="PicturePath" VALUE="mouse.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="794;926">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes2"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:169pt;LEFT:105pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:7;">
<PARAM NAME="PicturePath" VALUE="bluecircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes4"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:98pt;LEFT:161pt;WIDTH:30pt;HEIGHT:28pt;ZINDEX:8;">
<PARAM NAME="PicturePath" VALUE="redsquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;979">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes0"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:56pt;LEFT:278pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:9;">
<PARAM NAME="PicturePath" VALUE="yellowtriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes1"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:38pt;LEFT:23pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:10;">
<PARAM NAME="PicturePath" VALUE="orangesquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes3"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:53pt;LEFT:98pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:11;">
<PARAM NAME="PicturePath" VALUE="bluesquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes5"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:113pt;LEFT:90pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:12;">
<PARAM NAME="PicturePath" VALUE="redcircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes6"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:98pt;LEFT:229pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:13;">
<PARAM NAME="PicturePath" VALUE="redtriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes7"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:98pt;LEFT:19pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:14;">
<PARAM NAME="PicturePath" VALUE="yellowcircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes8"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:154pt;LEFT:285pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:15;">
<PARAM NAME="PicturePath" VALUE="greensquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes13"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:154pt;LEFT:26pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:16;">
<PARAM NAME="PicturePath" VALUE="greentriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes11"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:101pt;LEFT:323pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:17;">
<PARAM NAME="PicturePath" VALUE="bluetriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes12"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:150pt;LEFT:165pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:18;">
<PARAM NAME="PicturePath" VALUE="greencircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes14"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:165pt;LEFT:341pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:19;">
<PARAM NAME="PicturePath" VALUE="yellowsquare.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1005">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes9"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:49pt;LEFT:173pt;WIDTH:41pt;HEIGHT:30pt;ZINDEX:20;">
<PARAM NAME="PicturePath" VALUE="orangetriangle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1455;1058">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="shapes10"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:165pt;LEFT:229pt;WIDTH:30pt;HEIGHT:29pt;ZINDEX:21;">
<PARAM NAME="PicturePath" VALUE="orangecircle.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1058;1032">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="Image3"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:35pt;LEFT:358pt;WIDTH:31pt;HEIGHT:38pt;ZINDEX:22;">
<PARAM NAME="PicturePath" VALUE="hole2.gif">
<PARAM NAME="AutoSize" VALUE="-1">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="1085;1323">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
<OBJECT ID="CommandButton1"
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"
STYLE="TOP:214pt;LEFT:338pt;WIDTH:68pt;HEIGHT:30pt;TABINDEX:2;ZINDEX:23;">
<PARAM NAME="ForeColor" VALUE="65280">
<PARAM NAME="BackColor" VALUE="16744576">
<PARAM NAME="Caption" VALUE="START!!">
<PARAM NAME="Size" VALUE="2399;1058">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="240">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="ParagraphAlign" VALUE="3">
<PARAM NAME="FontWeight" VALUE="700">
</OBJECT>
</DIV>
Document title: Qwerty Manufacturing Inc.
Files:
Page files:
- index.htm
- tabmenu.htm
- welcome.htm
- whatsnew.htm
- products.htm
- ordering.htm
- contacts.htm
Layout file: tabstrip.alx (see Figures 16.5 through 16.8)
Images:
- pencil.gif
- qwerty.gif
- bg2.gif
ActiveX control: Tab Strip
Note |
The Tab Strip control is part of the full installation of Microsoft Internet Explorer 3.x (MSIE 3.x) final version. If you have a beta version of MSIE 3.0 or you did not carry out a full installation, you can also find the control on the CD-ROM in the \SOURCE\CHAPTER16 directory.
|
Description: The Qwerty Manufacturing example shows the
implementation of an ActiveX Tab Strip control as a navigation
aid. The tab strip takes the place of hyperlinked or button-controlled
menus, allowing the user to quickly and easily navigate between
pages. The HTML Layout control containing the tab strip is held
in the top frame of a frameset.
ActiveX controls: (See Chapters 1, 12, 13, and 14.)
HTML Layout control: (See Chapter 14.)
Use of frames: The Tab Strip control in the top frame changes
the HTML page in the bottom frame.
The index page loads as shown in Figure 16.5. As it loads, two
frames are created: an upper frame containing the tabstrip.alx
file and a lower frame containing the first page (welcome.htm).
Figure 16.5 : The welcome page.
This example demonstrates the creativity you can use when designing
user interfaces with the Layout control. Again, you are making
use of controls and functionality that were once the reserve of
Windows programmers. As you can see from this example, by simply
clicking the tab strip headers, you can navigate around the Web
site (shown in Figure 16.6) as if it is a Windows dialog.
Figure 16.6 : Clicking the tab strip loads the next page.
You can make your Web site stand out from the crowd by using the
latest ActiveX controls as navigation tools (shown in Figure 16.7),
rather than using straightforward hyperlinks.
Figure 16.7 : Another page of the Web site.
Only two tabs are defined at design time, as shown in Figure 16.8.
The rest are added programmatically as the page loads.
Figure 16.8 : The Properties window for tabstrip.alx .
Listing 16.2 shows the complete source code for tabstrip.alx.
As the page loads, the OnLoad event handler is executed.
This creates three new tabs in positions 2, 3, and 4. When the
user clicks a tab, the tab strip's Click event is fired.
A straightforward Select Case block is used to execute
code that loads a given page based on the tab that was clicked.
Listing 16.2. The tabstrip.alx
code.
<SCRIPT LANGUAGE="VBScript">
<!--
Sub TabStrip1_Click(Index)
Select Case Index
Case 0
Top.bodyframe.Location.Href = "welcome.htm"
Case 1
Top.bodyframe.Location.Href = "whatsnew.htm"
Case 2
Top.bodyframe.Location.Href = "products.htm"
Case 3
Top.bodyframe.Location.Href = "contacts.htm"
Case 4
Top.bodyframe.Location.Href = "ordering.htm"
End Select
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Layout1_OnLoad()
call TabStrip1.Tabs.Add(thirdTab, "Product Index", 2)
call TabStrip1.Tabs.Add(fourthTab, "Contact Info", 3)
call TabStrip1.Tabs.Add(fifthTab, "Ordering", 4)
end sub
-->
</SCRIPT>
<DIV BACKGROUND="#ffffff" ID="Layout1" STYLE="LAYOUT:FIXED;WIDTH:480pt;
HEIGHT:33pt;">
<OBJECT ID="TabStrip1"
CLASSID="CLSID:EAE50EB0-4A62-11CE-BED6-00AA00611080"
STYLE="TOP:0pt;LEFT:0pt;WIDTH:480pt;HEIGHT:34pt;TABINDEX:0;ZINDEX:0;">
<PARAM NAME="ListIndex" VALUE="0">
<PARAM NAME="BackColor" VALUE="16777215">
<PARAM NAME="ForeColor" VALUE="128">
<PARAM NAME="Size" VALUE="16933;1199">
<PARAM NAME="Items" VALUE="Welcome - Home;What's New;">
<PARAM NAME="TipStrings" VALUE="Our Home Page;News from Qwerty;">
<PARAM NAME="Names" VALUE="Tab1;Tab2;">
<PARAM NAME="NewVersion" VALUE="-1">
<PARAM NAME="TabsAllocated" VALUE="2">
<PARAM NAME="Tags" VALUE=";;">
<PARAM NAME="TabData" VALUE="2">
<PARAM NAME="Accelerator" VALUE="W;P;">
<PARAM NAME="FontEffects" VALUE="1073741825">
<PARAM NAME="FontHeight" VALUE="200">
<PARAM NAME="FontCharSet" VALUE="0">
<PARAM NAME="FontPitchAndFamily" VALUE="2">
<PARAM NAME="FontWeight" VALUE="700">
<PARAM NAME="TabState" VALUE="3;3">
</OBJECT>
</DIV>