Web based School

User Interaction with ActiveX Controls

The <FORM> Container Tag
The <INPUT> Tag
Image Maps
User Input Via HTML Scripting
- User Input with VBScript

User Input Via Visual Basic
Summary
Q&A
Workshop
Quiz

Chapter 19

User Interaction with ActiveX Controls

By now you have a pretty good idea of how to insert controls into Web pages and Visual Basic applications. You also know how to modify the properties of these controls—both programmatically and within the <OBJECT> tag. In this chapter, you will take the next step and learn how to enable people who access your ActiveX utility to interact with these controls.

When you are finished with this chapter, you will be able to create:

an interactive ActiveX HTML document.
an interactive ActiveX Visual Basic application.

Interactive HTML

When you create a Web page, there is nothing but content—some words and maybe some graphics. When you insert a control, be it ActiveX or something else, you do little more than enhance the content.

To truly activate your page, you must allow the user to interact with it. HTML provides a few different ways to allow user input: the <FORM> and <INPUT> tags.

The <FORM> Container Tag

When you want to code a user-input interface, you use the Form object. It is defined within the <FORM> tag, and has several attributes that define what the interface does (actions) and how it does it (methods).

Note
Different programming environments have different ways of allowing user input. Unfortunately, each one uses the word form to define a different part of the user input interface.
Where the word form is used in this chapter, make sure to understand the context in which it is used. For example, a Visual Basic form has a Caption attribute, but an HTML form does not.

The Action attribute points to the URL of the Web item that will perform the selected function. This Web item can be just about anything that can be passed as a URL or preferably, as a named object. If you do not specify a URL to handle the action, it is assumed that the current document will be handling the request.

The Method attribute defines whether the user request is for receiving information or for submitting it. The value for the Method attribute can be either Post or Get.

Note
Text should be contained within the <FORM> container tags to describe the purpose of the form (unless the purpose is going to be obvious to the user).

If you have an HTML document loaded, and want to load another page using the <FORM> tag to retrieve that document, it looks something like this:

<FORM Method = GET Action = "http://www.domain.net/other.aspl">
Load other HTML Document
</FORM>

The <FORM> Container Tag
<FORM
Method = [Get/Post]
Action = [URL]>
<INPUT
Name = [String Value]
Type = [Form Type]
Value = [String Value]>
</FORM>

The <FORM> container tag is used to define an area that allows for user input. The <INPUT> tags within the <FORM> container tag specify what type of input the user may enter.
<FORM> tags define the action taken upon submission of user input as either "GET" (append data to the Action URL with a # prefix) or "POST"(append data to the Action URL with a ? prefix). GET Example:

This submits a request for the URL http://www.domain.net/MyIndex.aspl#MyHeading.
The pound (#) sign is automatically added because the Get method is used.
POST Example:

This submits a request for the URL http://www.domain.net/MyIndex.aspl?Info=MyData.
The question mark (?) sign is automatically added because the Post method is used.

The <INPUT> Tag

The <INPUT> tag allows you to specify the type of user input to be allowed in the form. It does this through the Type and Value attributes of the <INPUT> tag. Several of these types can be seen in Figure 19.1.

Figure 19.1. Several different input types on a Web page.

The Type attribute specifies what kind of input the user will provide. To select how the data input form is to be presented, use submit, checkbox, radio, or text as the value of the Type attribute. textarea, password, reset and image are also input types that you can use.

Input Type: submit

In the earlier example, you created a form that commanded that another Web page be loaded, but did not give the user a way to launch that action. To rectify this, add a submit button to tell the browser to perform the action:

<FORM Method = GET Action = "http://www.domain.net/other.aspl">

<INPUT TYPE=submit VALUE="Load other HTML Document">

</FORM>

In this example, a Submit button is displayed on the page and the text "Load other HTML Document" is displayed on the face of the button. When the user clicks the button, other.aspl is loaded. An example of this page can be seen in Figure 19.2.

A sister to the Submit button is the Reset button. It is used in exactly the same way as the Submit button, except that when this button is pressed, all of the values on the current form are reset to their defaults.

Figure 19.2. An HTML form's Submit button.

Input Type: checkbox

Another input type is checkbox, which allows user input of a simple True/False status. This feature allows you to get simple yes/no answers out of your users. In the following example, the user can answer the question Are You Sure? by clicking the box:

<FORM>
<INPUT TYPE=checkbox NAME=ckCertainty VALUE=False>Are You Sure?
</FORM>

A sample of how this checkbox form would look in a Web browser can be seen in Figure 19.3.

Figure 19.3. An HTML form's check box.

The preceding sample defaults to a value of False—the user is not sure. An ActiveX object can be programmed to set the value of this item with the command ckCheckbox = True or ckCheckbox = False. It can also read the value by referencing the value of ckCheckbox as if it were any other true/false variable.

Input Type: radio

Another input type is the radio button. Several radio buttons can be placed within one <FORM> container tag to allow the user to select from a series of options; however, the controls do not have to be grouped together. To specify that a radio button is part of a group, assign the same value in the Name attribute to every button in the group. Then the user will only be able to select one of them.

In this example, the user can select a value that will represent the state he is in by selecting the appropriate radio button (see Figure 19.4).

<FORM>
<INPUT TYPE=radio NAME=" State" Value="TX" >Texas<br>
<INPUT TYPE=radio NAME="State" Value="NJ">New Jersey<br>
<INPUT TYPE=radio NAME="State" Value="IL">Illinois<br>
<INPUT TYPE=radio NAME="State" Value="GA">Georgia<br>
<INPUT TYPE=radio NAME="State" Value="HI">Hawaii
</FORM>

Figure 19.4. Radio buttons on an HTML form.

Input Type: text

Another input type is called text. The text box allows users to input a string of characters instead of selecting from predefined options. This input type uses two additional attributes: SIZE and MAXLENGTH. SIZE defines how many characters the text box can display. MAXLENGTH defines the maximum number of characters allowed in the text box.

The Size attribute can be set to one number, such as 24, while the user can still enter more than 24 characters into the form. This is because the Size attribute only defines how many character can be shown. The MaxLength attribute defines how long the character string can be, and in this case, if it is set to more than 24 characters, the user will be able to enter a data string that is longer than the text box can display.

If you do not specify the MaxLength value, there will be no limit to the length of the string. Actually there is, but depending on the environment, you won't want to use a string longer than 255 characters, and the maximum is close to 65,000 characters. If you want to send an information stream that long, you should consider breaking it up into parts, or submitting it as a binary file.

In the following example, the text box is set to request the user's name. The text box will show 24 characters, and will allow a maximum of 32 characters:

<FORM>
User Name:
<INPUT TYPE="textT NAME="txtUserName" SIZE=24 MAXLENGTH=32>
</FORM>

Using the Yahoo! Search Form
Yahoo!, Inc. allows users to place a HTML on its pages to perform a search on its database of Web sites. This code uses the default text type and the Submit button:

<FORM METHOD=GET ACTION = "http://search.yahoo.com/bin/search">

Yahoo Search:
<INPUT SIZE=30 NAME=p>
<INPUT TYPE="submit" VALUE="Submit">
</FORM>

An alternative to the text type of input is the textarea type. This works exactly the same as text, except that it allows multiline entries by the users.

If the text that the user is expected to enter is of a sensitive nature, use the password type of input form. This one also works exactly like a text box, except every character is replaced by an asterisk (*).

By no means does this cover all types of user input used within forms, but it gives a good summary of some of the ways users are able to input data. As the HTML specification grows and the market comes up with new ways to request user input, one day there just might be an input type called RetinaScan!

Note
Any Form object input type can have a name. In fact, if it does not have a name, other objects cannot interact with it.

The previous chapter talked about giving each Form object a name and conforming to a naming standard, such as frmForm. Input types should also follow a naming convention. Here are a few suggestions, but there are many, many more controls as well:

Table 19.1. Naming conventions: Form object input types .

Object	Prefix	Sample
Button	cmd	cmdCommand
Ani button	ani	aniButton
Image	img	imgImage
Vertical line	lin	linVertical
3D panel	pnl	pnlPanel
Check box	chk	chkBox
Slider	sld	sldProgressBar
Combo box	cbo	cboListBox
List box	lst	lstListBox
Horizontal Scroll	hsb	hsbHorizontalScrollBar
Vertical Scroll	vsb	hsbVerticalScrollBar
Spinner	spn	spnSpinControl
Text box	txt	txtTextBox
Label	lbl	lblLabel

Warning

If the user puts information into an HTML form, later pages might be able to reference the History object and retrieve this information—even though the user never meant for the new page to have access to it. The wise HTML author does his users a great service by ensuring that this information is cleared, obscured or otherwise made unavailable to later pages. This can be done by scripting some code in the onUnLoad event in the HTML document. When the page is unloaded, the code can set the values of the form to other values from what the user supplied. Be sure to do this after any processes that reference the form values are complete.

Input types allow a variety of ways for the user to enter information. Even if the user enters his data, the value of these data input features can still be rendered null without something to retrieve the information. Then the item that retrieved the information must either store it for future use (such as in a Cookie), or acts on it before or while the user passes on to the next page (such as through a bit of VB Script).

Because input types such as the textarea and password do not in and of themselves DO anything, some sort of client or server script or an ActiveX control must reference the information provided. If the METHOD attribute of the <FORM> tag is POST instead of GET, information in named objects contained within the named form are passed to another HTML item, such as a CGI script or Web page.

In a Post (or Query) method, named values are sent after a ?, and each value is separated from the others by an &. A URL would look something like this:

http://www.cnct.com/~davidk/cgi/search.exe?Name=David&Daughter=Shaina

This URL would access the fictional server script search.exe on the server www.cnct.com in the directory /~davidk/cgi/. It would then submit the value of the Name and Daughter variables (David and Shaina, respectively) and wait for a confirmation or other document to be returned to the browser.

Image Maps

A very graphical method of providing user input is the clickable image map . Users can click a portion of an image, and the HTTP server or client will use the coordinates within the image on which the user clicked. To enable this feature you need, along with your Web page, an image and a defined map of that image.

The <IMG> Tag

As you begin writing with HTML, one of the first things you become familiar with is the <IMG> tag . This tag allows you to insert a graphic (usually .GIF or .JPG) into your document. The following example would insert an image called sample.gif into your document:
<img src="http://www.domain.net/sample.gif">

Specify the dimensions of the graphic with the height and width attributes like so:

<img src="http://www.domain.net/sample.gif" height=64 width=64>

Let's assume that 128x128 is the actual size of the graphic so you don't need to bother with these sizing attributes. Just remember that you are not restricted to the original size of the graphic.

ISMAP and UseMap Map Name

To identify an image as a server-side clickable map, add the ISMAP attribute to the <IMG> tag :

<img src="http://www.domain.net/sample.gif" ISMAP>

To identify an image as a client-side clickable map, add the USEMAP="mapname" attribute to the <IMG> tag:

<img src="http://www.domain.net/sample.gif" USEMAP="sample.map">

After you designate your image as a clickable image map, define the attributes of the map. These attributes define which portions of the map perform which actions. This map information can be contained within the Web page itself, or the data could be in an external .MAP file.

Warning

If you don't define the location of the map information within the document using the USEMAP attribute, make sure that the HTTP server software supports the passing of the click coordinates correctly, and use the ISMAP attribute.

Map Information Within HTML

To place map information within an HTML document , use the <MAP> </MAP> container tag. Ideally, this should appear in the <HEAD> of the document.

One or more <AREA> tags should appear within the <MAP> container tags. <AREA> tags define the shape of each area within the image, and what action will be taken when the user clicks within those areas. The <AREA> tag uses 3 attributes to do this: SHAPE, COORDS and HREF.

SHAPE

There are three shapes you can use in an image map—rectangle (RECT), polygon (POLY) and circle (CIRC). If no SHAPE attribute is specified, the default is rectangle.

COORDS

Coordinates are determined based on the standard x,y format. In our example, the graphic is 128x128 pixels in size. So, the coordinates for the upper-left corner of the image are 0,0, and the coordinates for the lower-right corner of the image are 128,128.

The COORD attribute to define the entire rectangle of an image would appear as 0,0,128,128. To define only the left side of the image, use 0,0,64,128. To define only the right side of the image, use 64,0,128,128.

Note
The x1,x2,x3,x4 (left, top, bottom, right) format is good for a rectangle.
A circle would use x,x,x (CenterX, CenterY, radius).
A polygon would use x1, x2, x3, x4...x1 (each point of the polygon, ending with the original point).

Do/Don't
Do remember that the order of these numbers is left, top, bottom, right.
Do not get the numbers out of order, or you will experience unexpected results.

HREF

Finally, the <AREA> tag uses the HREF attribute . This defines the action that will be taken when a user clicks the specified area. In its simplest form, the HREF attribute points to an HTML document, such as gohere.aspl. Alternatively, it could point to a named anchor in the current document (such as <A NAME = gohere>). To specify one of these anchors, preface the name with the pound sign (#) (such as <a href="#MyLocation">My Location</a>.

The UseMap Image Attribute

<IMG SRC = [Image File] UseMap = [Map File]>

The UseMap attribute of the <IMG> tag is used to assign hyperlinks to regions defined within an image map. The image map can be contained in the current document or in an external .MAP file.
Example:
<IMG SRC=MyImage.JPG Height=64 width=64 UseMap="MyMap.MAP">

This tag inserts a 64x64 image into the current position in the page. When the user clicks an area within the image, an action will be taken based on the <AREA> tags in the map file "MyMap.MAP".

Now let's take a look at the maps themselves. Figure 19.5 has a 128x128 graphic containing four distinctive areas. The event that is performed depends on which quadrant is clicked by the user's mouse.
<MAP NAME="FourSquare">
<AREA SHAPE="RECT" COORDS="0,0,32,32" href="TopLeft.aspl >
<AREA SHAPE="RECT" COORDS="0,32,32,64" href="BottomLeft.aspl >
<AREA SHAPE="RECT" COORDS="32,0,64,32" href="TopRight.aspl >
<AREA SHAPE="RECT" COORDS="32,32,64,64" href="BottomRight.aspl >
</MAP>
<IMG SRC="foursquare.gif" USEMAP="#FourSquare">

Figure 19.5. A clickable image map. Each quadrant is identical in size, and the entire graphic is 128x128 pixels.

The <MAP> Container Tag
<MAP NAME=[Map Name]>
<AREA SHAPE=[Shape] COORDS= [Left],
[Top], [Bottom], [Right] HREF=[HyperLink]>
</MAP>

The <MAP> container tag defines a hyperlink for different areas within an image. These areas, or hotspots, are defined with one or more <AREA> tags.
Example:

<MAP NAME="MyMap">
<AREA SHAPE="Rect" COORDS= "0,0,64,64"
HREF="NewPage.aspl">
</MAP>

This map specifies a rectangle, 64x64 pixels, in the top-left corner of the image. When the user clicks this rectangle, "NewPage.aspl" is loaded.

Map Information Within an External .MAP File

To place map information within an external .MAP file, you must create a text file. The extension for the map file can be anything you want, but the file itself must be a text file. The map file consists of the same <AREA> tags found in the attributes of a <MAP> container described previously.

Warning

If you use an external map file, you will not be able to test your page locally. You must post the test pages on a live server so that the server can process your mouse clicks. The only way to test your image maps locally is to use the <MAP> </MAP> tags within the document so the browser can process the mouse clicks.

Hint
A good reason to use client-side processing rather than server-side processing is that it's just plain good writing to keep the demand on server resources to a minimum. Distributed data processing is almost always more efficient than centralized data processing.

User Input Via HTML Scripting

Let's briefly discuss some ways that you can obtain user input via a scripting engine, such as JavaScript (JScript) or VBScript. Bear in mind that whether you use VBScript, JavaScript, Perl, LISP, or a generic public domain script, each requires a scripting engine (usually a .DLL or two). These engines are based on the guidelines published by the WWW Consortium (http://www.w3.org).

User Input with VBScript

VBScript offers several different methods for providing user input. The more complex ones involve using embedded objects, but I want to focus on how to provide objects with user input, or how to get data from the objects themselves. This means you will be dealing with very basic forms of user input.

Intrinsic Events

Each object has its own built-in intrinsic events. These events are routines that are run whenever the user performs a given action, or when a particular state that is being monitored changes.

Some of these events, such as onLoad and onUnload, are pretty obvious. The ones I want to cover those related to the Form's collection object.

OnClick—Fires within a mapped image that the user clicks.
OnFocus—Fires within the select, input or textarea object when the user clicks or tabs to it.
OnBlur—Fires within the select, input or textarea element when the user focuses on an object outside the Form object.
OnSubmit—Fires within the Form object when the user selects the submit action
OnSelect—Fires within the input or textarea element when the user highlights (or selects) text.

Warning

A script can perform almost any of these functions, even if the user does not actually request it through the pushing of a button or whatever. The script can do this by sending a command, such as Button_Click, instead of waiting for the user to actually click a button. This adds a level of power to the script writer, but has no way of proving that the user wants the data sent. You must verify that another way—by using code that has been validated through a trust verification service, for example.

Intrinsic Events

Sub [Object]_[Event] End Sub

Several events are built into most, if not all, ActiveX controls. These events can be scripted through an engine, such as VBScript, to respond to a particular event in a particular way.
Example:
If, for example, you want to play a tick sound every time the user selects an object, and a tock sound whenever he deselects it, create a subroutine for each event that looks something like the following bit of code:

Sub MyControl_OnFocus PlaySound(Tick) End Sub Sub MyControl_OnBlur PlaySound(Tock) End Sub

User Input Via Visual Basic

Although HTML forms provide programmers with a rich set of tools with which a user input interface can be created, they don't hold a candle to the ones available from within a programming language like Visual Basic (see Figure 19.6). This is because HTML was developed to be usable on any and every computer. Visual Basic is used to program only within the Windows environment.

The beauty of Visual Basic, when it comes to ActiveX programming, is that you are no longer limited to performing Internet functions through a Web browser or a command-line utility (blech!). All of the parts and pieces of Windows are exposed to Visual Basic, and the programmer can reference these objects in conjunction with the appropriate WinSock interfaces. These parts and pieces include the Common Dialog controls and the routines in the Visual Basic RunTime library, as well as any other very complex and powerful libraries that may be installed on the user's machine, like remote access.

Remote Access Service
A Windows NT domain can be managed completely over TCP/IP connections. Powerful as this is, it also provides a path for malicious guests to spray virtual graffiti all over your servers.
To minimize this risk, there is a set of APIs called Remote Access. The Remote Access service provides an interface where an NT server and all of its workstations can make the other system services available, while limiting control of security operations to those with appropriate access permissions.
When creating Visual Basic applications that will be run over a WAN, LAN or other NT domain, it is a good idea to use the features of RAS (Remote Access Service) whenever possible. Your program will then be usable by folks who are limited to RAS access to their systems, while still being usable to those with Internet connections.

Figure 19.6. The Visual Basic IDE provides the programmer with a variety of rich features for facilitating user input.

Figure 19.6 is a Visual Basic form. From it, you can see that Visual Basic has a number of different methods for providing user input. Drop-down and scrolling lists, images, and buttons are all familiar from standard HTML forms. There are also a few others: tree view and directory view are part of the user's Windows environment, not part of the HTML specification (yet).

This bit of code in a Visual Basic project will display a message box when the user presses a command button named cmdPressMe.

Private Sub cmdPressMe_Click()
MsgBox ("I'm Pressed")
End Sub

Activate your own Visual Basic I/O interfaces through the simple addition of an ActiveX control, such as one that comes in the Internet Control Pack. These controls allow you to create standalone applications that work over your machine's WinSock to support FTP, NNTP, HTTP, SMTP/POP3, and so on within your own application.

Summary

This chapter familiarized you with the available user-input mechanisms that allow the use of user-supplied data with ActiveX controls.

In HTML, INPUT items are contained within the <FORM> </FORM> container tags. Each INPUT item has a Name and a Type, as well as a Value. The first two are defined within the HTML document. The third, Value, is defined either programmatically (through a script) or by the users when they click a button or enter text.

Some input types that you can use include

reset—Clears all data from the current form.
submit—Sends all data from the current form to the URL defined in ACTION.
checkbox—Toggles a value as True or False
radio—Allows an interface to select "One of Many"
text—Allows entry of a string of characters by the user.
textarea—Same as a text box, but allows multiline entry.
password—Allows entry of "masked" text.

Q&A

Q There are a lot of different browsers made by a lot of different companies. What browser supports ActiveX objects?
A To create a clickable image map, your Web page must be hosted by an HTTP server that supports this feature. In all other cases, the objects reviewed in this chapter require only that the browser supports ActiveX. Microsoft Internet Explorer supports ActiveX controls as well as HTML, Java and VBScript.
Q What makes a browser or utility "ActiveX enabled"?
A A browser or application is ActiveX enabled when it supports the object and scripting conventions of ActiveX.
Q Where can I find support for the specifications of ActiveX objects and controls?
A The best site for up-to-date information on ActiveX specifications is at http://www.microsoft.com/intdev. This is the Microsoft ActiveX Developers Web Site.
Q. How is ActiveX different from Java or HTML?
A. HTML provides the framework under which OOP is implemented in Web pages. Java was one implementation of that framework. ActiveX provides the framework under which a client machine is defined, as well as its component objects. This allows a Web page to call on features within the user's machine (such as PowerPoint, Word, Excel, Access, Project, Schedule+, and so on) as well as within objects on the Net (through FTP, HTTP, and so on).

Workshop

Create a Web page to be used for sending mailing-list information. Include the following features within a form:

Text boxes for first name and last name.
Radio button to select state.
Text boxes for address, city, ZIP code and phone number.
Spinner button for age.

Add a submit button to the document, and code it to send the information from the form to an imaginary CGI called MailList.exe.

Quiz

Which container tag is used to define a Form object?
What tag and attributes define an input item, such as a command button or a text box?
What object returns the data entered by the user?
What would you name a list box called AllOfUs?
Which object is used to allow a basic True/False input?
What property defines the maximum input for a text box?
Which methods of an HTML form allow the posting and requesting of data?
Which attribute of the <INPUT> tag defines the I/O control to be used?
Which attribute of the <IMG> tag defines an image as being associated with a clickable map?
When defining the coordinates of a mouse click, with what do the positions in the x1,x2,x3,x4 format correspond?