Interactive HTML
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:
<FORM Method = "GET" Action =
"http://www.domain.net/MyIndex.aspl">
<INPUT Type = "Text" Value = "MyHeading">
<INPUT Type = "Submit" Value = "Submit">
</FORM>
<FORM Method = "POST" Action =
"http://www.domain.net/MyIndex.aspl">
<INPUT Name = "Info" Type = "Text" Value = "MyData">
<INPUT Type = "Submit" Value = "Submit">
</FORM>
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?
|
