In this section, you will place VBScript code in the bytecomp.alx file to make the web page interactive. Although the Script Wizard is available in ActiveX
Control Pad, you will find it easier to use a text editor to add the code for this project. The VBScript code you add will animate the icons for the selected products by moving them across the page when the products are selected. You will also use VBScript code to track the total cost for the purchase.
Open bytecomp.alx in Notepad.
The beginning of the script section defines several variables for use with the web page. One variable is defined for the total cost, and several variables are defined to mark the starting position for each image before it is animated. None of these variables is defined within a procedure, and therefore they all are global to the entire web page. Add the following code at the top of the bytecomp.alx file to define the variables:
<SCRIPT LANGUAGE="VBScript">
Dim intTotal
intTotal=0
Dim dblFloppy
Dim dblHardDrv
Dim dblCDROM
Dim dblMonitor
Dim dblKeyboard
Dim dblMouse
Dim dblModem
Dim dblJoystick
dblFloppy=154
dblHardDrv=154
dblCDROM=154
dblMonitor=154
dblKeyboard=154
dblMouse=154
dblModem=154
dblJoystick=154 When a button is clicked, the total cost of the purchase is computed. The timer on the web page is also started—if it is not already running—so that the product's image can be moved to the right-hand side of the form. Add the code beginning on page 380 to handle the Click events for each button:
Sub btnFloppy_Click
tmrBytes.Enabled=True
If btnFloppy.Value=True Then
intTotal=intTotal+200
Else
intTotal=intTotal-200
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnHardDrv_Click
tmrBytes.Enabled=True
If btnHardDrv.Value=True Then
intTotal=intTotal+400
Else
intTotal=intTotal-400
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnCDROM_Click
tmrBytes.Enabled=True
If btnCDROM.Value=True Then
intTotal=intTotal+400
Else
intTotal=intTotal-400
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnMonitor_Click
tmrBytes.Enabled=True
If btnMonitor.Value=True Then
intTotal=intTotal+250
Else
intTotal=intTotal-250
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnKeyboard_Click
tmrBytes.Enabled=True
If btnKeyboard.Value=True Then
intTotal=intTotal+125
Else
intTotal=intTotal-125
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnMouse_Click
tmrBytes.Enabled=True
If btnMouse.Value=True Then
intTotal=intTotal+60
Else
intTotal=intTotal-60
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnModem_Click
tmrBytes.Enabled=True
If btnModem.Value=True Then
intTotal=intTotal+150
Else
intTotal=intTotal-150
End If
lblTotal.Caption="$" & intTotal & ".00"
End Sub
Sub btnJoystick_Click
tmrBytes.Enabled=True
If btnJoystick.Value=True Then
intTotal=intTotal+35
Else
intTotal=intTotal-35
End If
lblTotal.Caption="$" & intTotal & ".00"
End SubWhen an item is selected, its icon is moved from the middle of the form to the right side. This movement is animated with a Timer control. The Timer control checks the location of each product image on the page and moves it as necessary. Add the following code to animate the product images:
Sub tmrBytes_Timer
Call Animate(btnFloppy,imgFloppy,dblFloppy)
Call Animate(btnHardDrv,imgHardDrv,dblHardDrv)
Call Animate(btnCDROM,imgCDROM,dblCDROM)
Call Animate(btnMonitor,imgMonitor,dblMonitor)
Call Animate(btnKeyboard,imgKeyboard,dblKeyboard)
Call Animate(btnMouse,imgMouse,dblMouse)
Call Animate(btnModem,imgModem,dblModem)
Call Animate(btnJoystick,imgJoystick,dblJoystick)
End Sub
Sub Animate(MyButton,MyImage,MyStart)
MyImage.ZOrder 1
If MyButton.Value=True and MyImage.Left<MyStart+240 Then
MyImage.Left=MyImage.Left+20
End If
If MyButton.Value=False and MyImage.Left>MyStart+20 Then
MyImage.Left=MyImage.Left-20
End If
End SubWhen a user wants more information about a product, he or she can simply click the right mouse button on the product image. The MouseDown event for each image triggers the appearance of a message box that offers additional product information. Add the following code to provide this information:
Sub imgFloppy_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "1.44MB Drive and Ten Disks",64,"ByteComp"
End If
End Sub
Sub imgHardDrv_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "1GB Internal IDE Drive",64,"ByteComp"
End If
End Sub
Sub imgCDROM_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "4X IDE CD-ROM Drive",64,"ByteComp"
End If
End Sub
Sub imgMonitor_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "14-Inch VGA Monitor",64,"ByteComp"
End If
End Sub
Sub imgKeyboard_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "128-Key Ergonomic Keyboard",64,"ByteComp"
End If
End Sub
Sub imgMouse_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "Two-Button Serial Mouse",64,"ByteComp"
End If
End Sub
Sub imgModem_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "28.8 Internal Modem",64,"ByteComp"
End If
End Sub
Sub imgJoystick_MouseDown(Button,Shift,X,Y)
If Button=2 Then
MsgBox "Aviation-Style Joystick",64,"ByteComp"
End If
End SubThe order form in your project should perform some simple data validation. You will use the KeyPress event to trap keystrokes sent to txtCardNumber and reject any keystrokes but numbers and hyphens. Add the following code to provide some simple validation:
Sub txtCardNumber_KeyPress(KeyASCII)
txtCardNumber.Locked=True
If KeyASCII=8 Then txtCardNumber.Locked=False
If KeyASCII=45 Then txtCardNumber.Locked=False
If KeyASCII>47 and KeyASCII<58 Then
txtCardNumber.Locked=False
End If
End Sub
</SCRIPT>