The FORM HTML page previously shown in Figure 19.7 contains.all the controls you C~I place on a Web page to request information from the viewer. The FORM section. of the page is defined with the following tag:
<FORMACTION-‘ASPages/Register.asp· method-‘GET”>
The data collected on this page will be transmitted to the application REGISfER.ASP on the same server and they will be processed there. You’ll learn how to write ASP files (they are text files with VBScript commands) to process the data submitted by the client in the last chapter of the book. What you must keep in mind for now is
that the browser will automatically submit the controls’ values to the server. All you have to do is specify the URL of the program to intercept them on the server. The URL used In this example contains the path to ASPages folder (under the Web’s root folder). The first part of the URL is known to the browser from the address of the current document. The data will be transmitted to the server when the Submit button (Register Now) at the bottom of the Form is clicked.
The rest of the code is trivial. It uses the <INPUT> tag to display the various controls. Most of the controls are grouped into tables for alignment purposes. You can open the FORM HTML file on the CD to see the statements for creating the page shown in Figure 19.7. I will list the tags for the intrinsic controls only omitting the table tags in the interest of conserving space:
<FORMACTION-‘ASPages/Register.asp’ methud-‘GET’>
<FONTSIZE-4>
Last Name
<INPUT TYPE=Text SIZE ••20 MAXLENGTH:20 NAME””LName”>
First Name
<INPUT TYPE=text SIZE=20 MAXLENGTHu20 NAME=’FName’>
E-Mail Address
<INPUT TYPE=Text SIZE:46 MAXLENGTH:256 NAME:”EMail”>
My computer is:
My browser is:
<INPUT TYPE=Radio CHECKED NAME-‘hardware” VALUE=’PC”> PC
<INPUT TYPE=Radio CHECKED NAME=’browser’ VALUE=’IE’>Internet Explorer
<INPUT TYPE=radio NAME=’hardware’ VALUE:”MAC’> Macintosh
<INPUT TYPE=radio NAME=”browser” VALUE=”NETSCAPE”> Netscape
<INPUT TYPE-radio NAME:’hardware.” VALUE””OTHER’>Other
<INPUT TYPE-radio NAME-‘browser’ VALUE-‘OTHER”>Other
When I connect I want to see:
<INPUT TYPE-checkbox name-‘Sports’ value-‘ON”> <STRONG>Sports
<INPUT TYPE-Checkbox NAME=” News , VALUE-‘ON”> News.
<INPUT TYPE=Checkbox NAME=’Stock’ VALUE-‘ON”> Stock Prices
<INPUT TYPE:checkbox NAME-‘weather’ value-‘ON’> Weather
<INPUT TYPE·checkbox name-“bargains” value=”ON’>Our Bargains
Do you want to receive e-mail messages?
<INPUT TYPE-Radio CHECKEO’NAME-‘mail’ VALUE=’YES’>Yes
<INPUT TYPE-Radio NAME-‘MAIL’ VALUE-‘NO”>No
Click here to submit your registration
<INPUT TYPE=submit NAME-‘Register’ VALUE-‘Register Now!’>
</FORM>
If you click on the Register Now button, the-browser displays a warning indicating that it couldn’t find the REGISTER ASP application. This page can’t be tested without a Web server. You can view its contents like any other page, but it can’t contact the server unless it’s opened on a Web server. You’ll.see how to handle client requests through the Web server in the last chapter of this book. Since the REGISTER.ASP application on the server will be written in VBScript, it’s time to explore VBScript
Embedding a Script
The script is contained in the event handlers of the various controls, as well as procedures just like regular Visual Basic applications. You place scripts in the HTML file’s SCRIPT section, which is delimited with a pair of <SCRIPT> tags. Because there is more than one scripting language, you must also specify the script’s language
in the <SCRIPT> tag. Here’s a typical SCRIPT section:
<SCRIPT LANGUAGE” VBScript>
{your scripting code}’
</SCRIPT>
When the browser hits the <SCRIPT> tag it calls the VBScript interpreter to compile and execute the following code. The code is usually placed in event handlers but you can insert procedures that will be called from within event handlers. If some code appears outside any handler, as shown in the next listing. it is executed as soon as the page is downloaded and before the browser renders the document on the screen. The following script displays the current date as soon as the page that contains it is loaded:
<SCRIPT LANGUAGE-‘VBScr;pt’>
MsgBex ‘The date ;s ‘ & Date
</SCRIPT>
All intrinsic controls ha~e a Name property (or attribute) that can be used to identify them in the script. Since the intrinsic controls are always placed on Form their complete name is the name of the Form followed by a period and then the name of the control: The Button control placed on a Form called Register form with the following line:
<INPUT TYPE*BUTTON NAME-‘DateBttn’ VALUE-‘Show Date’>
can be accessed from within a script with this expression:
AppForm.DateBttn For example you can change the caption of the DateBttn with a statement such as the following:
AppForm.DateBttn.Value – ‘DATE’
All intrinsic controls with the exception bf the Select control have a VALUE attribute too. A button’s value is its caption and a Text control’s value is the text displayed on the control. The equivalent property of the Select control is the Selected Index property which is the index of the item currently selected You can manipulate the Value and Selected Index properties of the various controls from within your script.
Finally, the most common event in scripting Web pages is the on Click event which is generated when the user clicks a control. The Text TextArea and Select controls don’t recognize this event. The most common event for these controls is the on Change event which takes place when the text in a Text or TextArea control is changed or when the user makes a new selection in the Select control.
This is all the information you need to start scripting your Web pages. VBScript is similar to Visual Basic and we can look at an example right away.
Scripting an HTML Page
Scripting allows you to take control of the contents of a page and manipulate them. with your program. The first two scripting languages were JavaScript and VBScript.
JavaScript is based on SUN’s Java, and VB Script is based on Microsoft’s Visual Basic. As you can guess we are going to explore VB Script in this book. A script is a short program that manipulates the elements of a page and is inserted in an HTML document with the <SCRIPT> and </SCRIPT> tags: Typically you place the SCRIPT portion of a document in the HEAD section. Here’s a simple script that sets the page’s background color and displays a welcome message
<HTML>
<HEAD>
<TITLE>VBScr;pt Demo</TITLE>
<SCRIPT Language – VBS>
Document.fgColor-‘hFFOOOO·
Document.bgColor=’hOOFFFF’
MsgBox ‘Welcome to the VBStr;pt Demo Page’
</SCRIPT>
</HEAO>
<BODY>
<Hl>VBScript Demo</Hl>
</BODY>
</HTML>
The Document entry is an object that represents the document displayed in the browser’s window, and you can access the various properties of the document through the Document object. The properties fgColor and bg Color set (or read) the values of the document’s foreground and background colors. Te MsgBox() function isn’t new to you. There are many similarities between Visual Basic and VBScript and we need not look at the features of VBScript in detail
warnning
There is however a basic difference: VB Script is a type less language You can .declare variables of specific types they are all variants This has serious implications when you attempt to call Visual Basic functions (such as object methods) from within VB Script You must either use the proper data conversion functions
(discussed in Chapter 2) or enclose the arguments in parentheses to let VB Script and Visual Basic handle the conversion for you.
A scripting language such as VBScript made it possible for Web authors to develop dynamic content for their Web pages. But that isn’t all In less than a year after the introduction of VB Script Microsoft decided to “activate” Web pages hence the term Activt!X. Since you have the means to program a Web page why not add programmable objects to it at will? The programmable objects are nothing ActiveX controls. If there was a way to place ActiveX controls on a page you could access their methods and properties from within VBScript and thereby create an active page. An active page is similar to a small application that runs within Internet Explorer. .
The next step was to develop ActiveX controls that could be used on Web pages. And Microsoft released a number of those. Now with Visual Basic 6 you can create your own ActiveX controls for use on Web pages. In the next section we’ll test the controls we developed in Chapter 16. In the last section of this chapter we’ll look at DHTML which is nothing more than HTML enhanced with VBScript code segments.
Using Custom ActiveX Controls on Web Pages
You can use ActiveX controls both on Forms and Web pages. This statement is rather brave though because the Desktop and the Web have different requirements and it’s not always easy to develop controls for both environments. The basic difference in the requirements is in how the two types of applications are used. Desktop applications can safely assume that all the resources are on the local machine where they are executing. Web applications on the other hand are executed on a remote computer and any additional resources such as images and sounds must be downloaded as needed. Fortunately most controls you design for the Desktop will also work on Web pages, but don’t expect any control you design to work equally well in both environments
Microsoft has released a number of ActiveX controls for use on Web pages. Some of these controls come with Internet Explorer induding the Structured Graphics control, the Filter control, and the Sequencer control. You can find information on these controls and . Practically every ActiveX control “y’ .u can place on a Visual Basic Form can also be used on a Web page (of course, it must first be downloaded and installed on the client computer).In the next few sections, we are going to see how the custom ActiveX controIs we built in the previous chapters can be used on Web pages.
The ALARM HTML Page
In this section you’ll build a Web page that uses the Alarm ActiveX control of Chapter 16. Why bother-to place an alarm on a Web page (besides demonstrating how to program a custom control with VBScript that is)? Figure 19.8 shows one reason. This page contains a timer that lets the viewer read a page for 60 seconds. The user can always leave the page by entering another URL in the browser’s Address box or by clicking the Back button. If the user keeps this page open for· 60 seconds however the script takes him or her automatically to another page:
An alarm is handy in several situations. For example you can use an alarm to update a page with “live” data or to keep track of time in a game
YOu are familiar with Activex controls for Web development, you know that t ere is a Timer control you can use on a Web page, but it’s not as simple as the . I Alarm control. For one thing, when you use a Tuner control, you must count time from within your program. Ydu must specify the alarm’s time-out period in milliseconds and your script must process timer events many times before it actually decides to do something. Like Visual Basic’s Tuner control the ActiveX Timer control
has no visible components, and if you want your viewers to know what’s happening,
you must provide visual feedback from within your script.
Let’s start with the HTML tags for placing an instance of the Alarm control on a
Web page:
<OBJECT ID=’AlarmCtl’ NAME=’AlarmCtl’
classid=’cls;d:7282EB2E-B8A9-11CF-B2FB-005348C101FC’
border=’O”
width-‘120′ heighta’33’>
<PARAM NAMEz’CountDown~ values’True”>
</OBJECT>
The <OBJECT> tag inserts an ActiveX control on the page but its syntax is peculiar to say the least. However you don’t have to enter it manually. Each ActiveX control has a Name and an ID property just like the intrinsic controls. The CLASS ID property is a long string, which identifies the control in the Registry. To create the object definition on a page use a WYSIWYG HTML editor such as FrontPage Express (this one comes with Internet Explorer). Start a new HTML page and insert the desired ActiveX control as follows:
1.Choose Insert >Other Component >ActiveX Control to open the ActiveX Control Properties dialog box:
2. Expand the Pick a Control drop-down list and locate the AlarmProject. Alarm- Ctl entry: This is how the Alarm ActiveX control is listed in the Registry. (If the entry doesn’t appear in the list follow the instructions in the sidebar “Registering Custom ActiveX Controls. “)
3. Set the contrel’s name to AlarmCtl.
4. Click the Properties button to set additional properties for the custom control. For the Alarm control set its CountDown property to True.
5. Click the OK button to close the dialog box.
6. Choose View >HTML to open a text editor displaying the page’s source code. Select the definition of the <OBJECT> tag and copy it to the Clipboard.
7. Switch to the text editor with the HTML document and paste the definition of the <OBJECT> tag
Inserting the <OBJECT> tag for a custom control on a Web’page isn’t complicated after all. This definition doesn’t change even when it’s installed on another computer so you can copy the same definition from any Web page that contains it.
