All Categories :
ActiveX
Chapter 2
Using VBScript with HTML Controls
CONTENTS
Adding active content to your Web site doesn't mean that you have
to scrap the pages you've probably spent a long time writing,
maintaining, and developing. In fact, you can do a lot very quickly
and easily to improve your Web site with active content utilizing
your current Web pages and HTML controls.
Your current Web pages are probably filled to the brim with HTML
controls and objects. Submit buttons, text boxes, and so on-anything
that you added to the page using the HTML <INPUT>
tag (and more besides)-are known as intrinsic HTML controls, and
you can interface them with VBScript using the ActiveX Control
Pad.
HTML controls and objects don't give you anything that approximates
the functionality of an ActiveX control, but they have the advantage
of always being immediately available to every user, which means
they will load faster. Anyone with a browser capable of handling
scripts gets the full benefit of your Web page, and even those
Web surfers with browsers that don't know an ActiveX control from
a hole in the ground still see the complete page, albeit without
the scripted functionality.
As the Web continues its never-ending but ever-quickening development,
you can avoid excluding certain visitors to your site by using
a mixture of straightforward HTML Web pages, pages that combine
HTML objects and active scripting, and pages that make full use
of ActiveX controls. This chapter is devoted to the middle ground,
helping you to recycle some of your current pages and bring them
up to date using HTML intrinsic controls and objects linked to
active scripting.
If you've spent more than five minutes using HTML, then you've
probably used HTML intrinsic controls-but you might not have called
them intrinsic controls. HTML intrinsic controls are usually associated
with a <FORM> tag and defined in the HTML page
using the <INPUT> tag, although it is possible
to use them outside the <FORM> tag. For example,
hyperlinks can be treated as controls. HTML intrinsic controls
are not as flexible as ActiveX controls; after all, they were
never designed to do more than gather simple input from the user
and pass this input to the server. For example, you can't change
the font sizes and colors of an HTML intrinsic control. The following
list outlines the main HTML intrinsic controls:
- Text box: A single-line text box for data input.
- Password: A single-line area to enter text; the screen output
is replaced by asterisks.
- Submit button: A command button that instructs the browser
to send the matched data field names and values to the server.
- Reset button: A command button that instructs the browser
to reset all controls in the form to their default values.
- Button: Rarely used in normal HTML documents because it requires
an attached script to give it functionality.
- Audio or radio button: A round option button used in sets
when you're asking the user to make a choice of one from many.
- Checkbox: A square button used either singularly or in sets
when you're asking the user to select fixed options.
- Select: A drop-down list of options; although it is not specified
with the <INPUT> tag, it is still treated as an
intrinsic control.
You can also treat HTML hyperlinks and anchors as intrinsic controls,
although in the strict sense, they aren't controls. What I mean
by this is that you must attach code to them manually because
the ActiveX Control Pad doesn't recognize them as programmable
controls.
HTML intrinsic controls have programmable events; that is, you
can attach a subroutine or event handler to the control so that
when the user clicks a button, for example, the program or script
executes. Again, HTML intrinsic controls do not give you the depth
of functionality that an ActiveX control does, but you will find
them adequate for most situations.
To demonstrate how simply and quickly you can add ActiveX scripting
to an HTML page, you're going to create a page that allows you
to type a text or numerical value in one text box and then shows
it in another text box when you press the button. You've got to
start somewhere!
First, open the ActiveX Control Pad and, using the template it
offers, create an HTML page with some HTML intrinsic controls
on it. The following code shows the first part:
<HTML>
<HEAD>
<TITLE>The easy peasy VBScript page</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<CENTER>
<H2>Wow...this is easy!!</H2><P>
Start the definition of an HTML form; as you can see, this is
a form with a difference.
<FORM NAME="Form1">
The first thing that you notice about the preceding <FORM>
tag is that it has a name, which you do not usually give to an
HTML form. You provide the name here so that you can easily reference
the form within the Script Wizard. The other thing to note is
that the ACTION and METHOD elements of the form
tag are missing; because the data in this form isn't submitted
anywhere, these elements are irrelevant.
Enter the first of the HTML intrinsic controls, text1.
The definition is exactly the same as you would enter for any
HTML text box within an HTML form:
<INPUT TYPE=TEXT NAME="text1">
Include a paragraph break, the second text box, and another paragraph
break:
<P>
<INPUT TYPE=TEXT NAME="text2">
<P>
Add an HTML button. Although you're probably accustomed to using
SUBMIT or RESET buttons, you can use the straightforward
BUTTON type rather than SUBMIT because you don't
want the data to be sent anywhere. Call it cmdButton1.
Set the caption on the face of the button to Click Me
using the VALUE element:
<INPUT TYPE=BUTTON NAME="cmdButton1" VALUE="Click Me">
Finish the rest of the normal HTML as follows:
</FORM>
</CENTER>
</BODY>
</HTML>
Save the file as vbeasy.htm, and open it in your Microsoft
Internet Explorer 3.0 browser. It should look like the file in
Figure 2.1.
Figure 2.1 : Your vbeasy.htm file as
it should look in the browser.
Create the VBScript subroutine that copies whatever you typed
in the top text box into the bottom text box when you click the
button. Attach the subroutine to the button, and because it should
execute every time the button is clicked, link the subroutine
to the button's OnClick event. Open the file you've just
created (vbeasy.htm) in the ActiveX Control Pad.
Open the ActiveX Script Wizard either by clicking the Script button
(which looks like an ancient scroll) or by selecting Script Wizard
from the Tools menu.
In the left Events pane, you can see that the Script Wizard recognizes
the Form1 HTML form as an object. You attach the script
to the click event of the cmdButton1, which is contained
within Form1, by performing the following steps:
- Click the plus sign to the left of the Form1 object.
The Script Wizard displays the contents of Form1, including
the only form event, OnSubmit.
- Click the plus sign to the left of the cmdButton1,
which displays the events (or should I say, event) available for
the cmdButton1 button.
- Select the OnClick event by clicking it once.
Your Script Wizard should look like the one in Figure 2.2.
Figure 2.2 : The Script Wizard displaying the events
and objects for your Form1 HTML object.
You want the button's click event to act upon the text2
text box, so specify the action that the event takes as follows:
- In the right Action pane, click the plus sign to the left
of Form1. The Script Wizard displays the objects within
the form along with the properties and methods available for the
form.
- Click the plus sign to the left of the Text2 object.
You can see the individual properties and methods for the Text2
object.
- Double-click the Value property.
The dialog box that is now displayed, shown in Figure 2.3, invites
you to enter a value to be displayed in the text box.
Figure 2.3 : Click on the Custom button to display the
custom value dialog.
However, you don't want to enter an explicit text string here
because you want to display whatever is held in the value of Text1,
which is a variable value. To enter a variable, perform the following
steps:
- Click the Custom button. You see the dialog box shown in Figure
2.4, which allows you to enter the variable name.
- Enter Form1.Text1.Value in the dialog box. This Value
property holds the text string that has been entered into the
Text1 textbox. When cmdButton1 is clicked, Text1's
Value property is assigned to Text2's Value
property, thereby displaying the contents of Text1 in
Text2.
- Click OK.
Figure 2.4 : The custom dialog lets you enter variable
names rather than explicit values.
The Script Wizard generates the required <INPUT>
tag for the button, which includes the language element that tells
the browser which scripting engine to use, the event (in this
case, OnClick), and the actual code itself (Document.Form1.text2.value
= Form1.Text1.Value). Your vbeasy.htm HTML source,
complete with VBScript code, should look like what you see in
Figure 2.5. I've dropped down part of the line containing the
button definition so that you can read it. (By default, ActiveX
uses a much wider screen.)
Figure 2.5 : vbeasy.htm in the ActiveX Control
Pad.
All you need to do is save the file and run it with your Internet
Explorer browser. Type some text in the top text box and click
the button, and if all goes well, the string from the top text
box is copied automatically into the bottom text box.
Now, you'll make a currently flat (by which I mean normal, inactively
HTML coded) HTML home page interactive using only VBScript and
HTML-not an ActiveX control for miles around. For an example,
you're going to use the fictitious home page shown in Figure 2.6.
You can find the current home page on the CD-ROM at \SOURCE\
CHAPTER2\INDEX1.HTM. Although the page is adequate, it's hardly
what you'd term interactive.
Figure 2.6 : The home page of the Apprentice Lumberjacks.
In this example, you add only a text box; the rest of the page
remains as it is, with the addition, of course, of some simple
VBScript. One of the main things this demonstrates to you is the
use of scripts attached to HTML hyperlinks, which can add great
value to any page.
Here's what you're going to do with this home page:
- Add a text box to display descriptions of the links.
- Add a custom procedure for each link to display the description
whenever the mouse passes over the link.
- Add a custom procedure to display an Alert box when the user
clicks a certain link.
First, load the file into the ActiveX Control Pad, as shown in
Figure 2.7.
Figure 2.7 : The HTML source for the home page.
Directly above the first hyperlink, create a simple HTML form
called Form1 and add an HTML text box with a width of
40 and the name Text1. This is the text box that is used
to display the descriptions of the links. The form is necessary
in HTML to let you reference the text box from a script.
<FORM NAME="Form1">
<INPUT TYPE="text" NAME="text1" SIZE=40><P>
</FORM>
To attach scripts to the hyperlinks, you must give them names
by including ID elements within the <A HREF>
tags. Call the first link Link1, the second Link2,
and so on, like this:
<A HREF="" ID="Link1">The Lumberjack Apprentices Song</A><P>
<A HREF="" ID="Link2">Tree Felling Jokes</A><P>
<A HREF="" ID="Link3">Axe Men in the News</A><P>
<A HREF="" ID="Link4">Chainsaw Tips and Tricks</A><P>
<A HREF="" ID="Link5">Other Lumberjack Websites</A>
To attach code to HTML hyperlinks, perform the following steps:
- Specify which scripting engine the browser must use.
- Specify the event that triggers the execution of a procedure.
- Specify the name of the procedure to execute.
After each ID reference, add the Language element
and the OnMouseOver event-as though it too is an HTML
element. Finally, reference the soon-to-be-created ShowDesc
custom procedure:
LANGUAGE="vbscript" OnMouseOver="ShowDesc()"
The parentheses after ShowDesc contain a value that is
passed to the procedure and used to determine which of five different
descriptions should be displayed. Number these from 0 to 4. Your
links section should now look like the following code:
<A HREF="" ID="Link1" LANGUAGE="VBScript" OnMouseOver="ShowDesc(0)" >
The Lumberjack Apprentices Song</A><P>
<A HREF="" ID="Link2" LANGUAGE="VBScript" OnMouseOver="ShowDesc(1)" >
Tree Felling Jokes</A><P>
<A HREF="" ID="Link3" LANGUAGE="VBScript" OnMouseOver="ShowDesc(2)" >
Axe Men in the News</A><P>
<A HREF="" ID="Link4" LANGUAGE="VBScript" OnMouseOver="ShowDesc(3)" >
Chainsaw Tips and Tricks</A><P>
<A HREF="" ID="Link5" LANGUAGE="VBScript" OnMouseOver="ShowDesc(4)" >
Other Lumberjack Websites</A>
As far as the HTML alterations go, that's really all you need
to do. The next thing you need is a procedure that is executed
every time the mouse passes over a link.
Launch the Script Wizard either by clicking the Script button
or by selecting Script Wizard from the Tools menu. You'll notice
that the left Events pane contains only the window object and
the text box control because the hyperlinks are not treated as
controls or objects.
Because hyperlinks are not treated as controls or objects, you
must attach the code by hand as a custom procedure as follows:
- Right-click anywhere in the right Actions pane to display
the Actions pop-up menu.
- Select New Procedure from the pop-up menu. The caption above
the code window reads "Procedure1 performs the following
Actions."
- Select the Code View option button at the bottom of the Script
Wizard dialog. The code window changes to allow you to type in
code directly, as shown in Figure 2.8. It is in fact two separate
sections if you look closely; the top section contains only the
name of the procedure, known as the procedure prototype, and the
lower section is where you type the script.
- Change the procedure name from Procedure1 to ShowDesc,
and inside the parentheses, enter the word LinkNo.
Figure 2.8 : The script section of the Script Wizard
in Code View mode.
Sub ShowDesc(LinkNo)
- Move to the lower section of the code window and enter the
following code:
Document.Form1.Text1.Value = LinkDesc(LinkNo)
I'll explain the right side of the preceding code. LinkDesc
is the name you give to an array that holds the descriptions.
LinkNo is the name that you give to a variable that stores
the number, which enters the procedure from the link definition.
Chapter 10, "Using the Power of Arrays," covers arrays
in detail. An array is a series of data values that can be accessed
individually by their ordinal numbers-that is, where they are
in the array. One twist is that arrays in VBScript can only start
at position 0. As a result, the first data element of an array
must be accessed using the number 0. Look back at the definition
you entered for the links:
<A HREF="" ID="Link1" LANGUAGE="VBScript"
OnMouseOver="ShowDesc(0)" >
The Lumberjack Apprentices Song</A><P>
Because this is the first link, you need to pass the
number 0 to the ShowDesc procedure, which then gets the
first description string from the LinkDesc array and
copies it into the Text1 text box.
- Add the following line of code, which effectively disables
the status message at the bottom of the browser window when the
mouse passes over one of the links.
Window.Status = ""
The procedure is now complete, and your window should look like
the one in
Figure 2.9.
Figure 2.9 : The completed custom procedure within the
Script Wizard.
You need to add the definition for the array that holds the description
strings for each link. You want the script engine to load the
data into the array only once as the page downloads to the browser;
therefore, you need to use a global variable for the array. A
global variable is available to all procedures in all scripts
within the same HTML document. Global variables are defined outside
any subroutine or function but inside the <SCRIPT>
tags. Variables in VBScript are covered at length in Chapter 4
"Using the VBScript Language." The ActiveX Script Wizard
makes it easy to define global variables as follows:
- Right-click in the right Actions pane of the Script Wizard
to invoke the Action pop-up menu.
- Select the New Global Variable option to display the New Global
Variable dialog box, as shown in Figure 2.10.
- Enter the name LinkDesc(4) into the New Global Variable
dialog box. This instructs the script engine to create an array
with five elements-which means 4 is the highest number. Click
OK.
Figure 2.10: Enter a name for the new global variable.
Before you leave the Script Wizard, click the plus signs to the
left of the Global Variables and Procedures items in the right
pane. You see that the items you entered are shown within the
object hierarchy for this page. Click OK for the Script Wizard
to generate the script, which should look like what you see in
Figure 2.11.
Figure 2.11: The Script Wizard generates all the code
for both the custom procedure and global variable.
The final stage of this makeover is adding the script that puts
the descriptions of the links into the array LinkDesc.
You have to do this manually because the Script Wizard doesn't
have a facility for generating script code outside a subroutine
or function. Directly under the definition of the array, dim
LinkDesc(4), enter the following code:
LinkDesc(0)="This is link One"
LinkDesc(1)="This is link Two"
LinkDesc(2)="This is link Three"
LinkDesc(3)="This is link Four"
LinkDesc(4)="This is link Five"
Because this section of code is outside a subroutine or function,
it is executed once as the HTML page is downloaded to the browser.
As the page is displayed, the array is full of data and ready
to be used. You can enter somewhat more interesting descriptions
than the ones I've shown here, which emphasize the care that you
must take with arrays starting with the element 0.
Save the file and run it through your trusty Internet Explorer
to instantly impress your friends and neighbors with your programming
prowess.
Using VBScript with HTML controls is the easiest way to quickly
build some active content into your Web pages without major disruption
to your Web site. It's also a great way to start learning about
what scripting and active content can do.
HTML intrinsic controls look and feel a little clunky after you've
been playing with ActiveX controls, but the fact that HTML intrinsic
controls load and run in the same time frame as the rest of the
Web page is still a major advantage until everyone has fast direct
or ISDN connections to the Web.
Now that you've seen how quickly and easily you can add VBScript
to any HTML Web page, you can work on improving your VBScript
skills to write more complex and meaningful scripts.
- Chapter 4 "Using the VBScript Language," discusses
more about VBScript itself. Depending on what you need to achieve,
consult any or all of the chapters in Part II, "Mastering
the VBScript Language."
- To learn more about the ActiveX Control Pad, see Chapter 13,
"Implementing an ActiveX Menu Control."
- Chapter 10, "Using the Power of Arrays," outlines
more information about arrays.
- To take another, in-depth look at using VBScript with HTML
objects, see Chapter 5 "Interfacing VBScript with an HTML
Form."
- Using VBScript with image maps is covered in Chapter 17, "Using
Client-Side Image Maps-the Easy Way."
Q: | I wanted to use ActiveX controls. Are you now saying I shouldn't?
|
A: | Not at all. What I am saying is don't rush into tearing down your current Web site to replace it all with ActiveX. Use VBScript and HTML intrinsic controls as a sort of halfway house to fully active content. The Web has changed very rapidly over the past few months (my head is still spinning), but that doesn't mean you need to update your Web site at breakneck speed. Relax. Decide which of your pages are best suited to becoming all singing, all dancing, state-of-the-art ActiveX pages and which ones you can progressively update with a little scripting first. Then, you can add some more ActiveX later on. Don't forget that most users are still on 14.4kbps or 28.8kbps modem connections and will soon tire of sites that try to force a multitude of ActiveX controls on them.
|