HTML—Hypertext Markup
Language
Chapter 16
Installing ActiveX
Controls
You now have a basic familiarity with OLE, COM, and
DCOM and how they relate to ActiveX controls, and you are ready to start using some of
that power in your own Web Pages. In this lesson you will learn:
- About the <OBJECT> container tag.
- How to use an ActiveX Control within a Web page.
- How to add an ActiveX Control to a Visual Basic
project.
You will also go through the steps involved in:
- Creating a basic Web site for a fictitious company.
- Building your first, and possibly most exciting,
ActiveX Visual Basic application—a Web browser.
HTML—Hypertext
Markup Language
Web pages are simple text documents with special
commands that you can put within brackets (such as <COMMAND>). These commands tell a
Web browser information about the page, such as it's title and type, and formatting
information, such as what characters are bold or italic.
There are a few commands, or tags, that are
common to every HTML document. The basic structure of an HTML document should contain the
following information:
<TITLE>Title of your document</TITLE>
</HEAD>
<BODY>
Document information…
</BODY>
</HTML>
As you can see, the document begins with
<HTML> and ends with </HTML>. These container commands tell the browser
where the document begins and where it ends. Also, within the head container tag are the
title tags, defining Title of your document as the title of this HTML document. The
body container comes after the head container, and defines Document information...
as the body of the document. On a standard, graphical Web browser, the document would be
displayed as in Figure 16.1. This is discussed in greater detail in earlier chapters.
Figure 16.1. Web view of a
basic HTML document.
Frames Support
A standard for displaying several different pages (or frames) within one window was
introduced by Netscape and adopted by the WWW Consortium. This feature has also been
adopted in the Microsoft Internet Explorer beginning with version 3.x.
Using a few additional container tags (<FRAME>, <FRAMESET>,
<NOFRAMES>)in place of the <BODY> container, an HTML author can customize the
height, width and placement of these disparate pages.
Now you will create the Web page for your fictitious
company. The scenario for creating this page follows:
- You are the newly hired Webmaster for Wonderland
Industries—a manufacturer of a variety of products. Your job is to set up a Web
presence for the company.
- The directory from which visitors will browse the
site is on your personal machine in the C:\W3 directory.
- The default page for your particular Web server's
software is index.aspl.
There are a few steps you must complete to create
your Web page.
- Create a directory on your hard drive called C:\W3.
- Install the ActiveX Control Pad by double-clicking
SetupPad.EXE on the enclosed CD-ROM. Windows Notepad is an excellent HTML editor, but
Microsoft has developed the ActiveX Control Pad to make the insertion of ActiveX controls
and scripting easier.
- Open a window to the C:\W3 directory, then right
click the empty directory and select New from the pop-up menu.
- You will see a menu with the selection of items you
can create anew. Select the one titled Internet Document (HTML) and name the new document
index.aspl. You might be prompted as to whether or not you are sure you want this name.
The answer is yes.
- Right-click the file you just created and select the
option titled Edit with ActiveX Control Pad. The ActiveX Control Pad will be launched to
edit your new document.
- Edit the document so it appears exactly as in Figure
16.2.
Note
If you do not see Internet Document (HTML) as a choice from the pop-up menu, install the
HTML Wizard from the enclosed CD-ROM.
Figure 16.2. Home page
viewed with ActiveX Control Pad.
Now you have created the initial home page for your
company. Double-click the desktop icon for C:\W3\index.aspl to launch your Web browser,
and you will be able to see the document as it will appear on the Web (see Figure 16.3).
Figure 16.3. Home page
viewed with a Web browser. Bare as it might seem, many businesses start with a page much
like this one.
This is a fairly simple page, and is similar to the
first page with which many businesses begin their Web presence. HTML provides many more
typesetting and other formatting options to customize the display of text. However, even
with an e-mail hyperlink, the page lacks activity.
The <OBJECT> Tag
The <IMG> tag was the first to enable basic
multimedia within an HTML document. Using a command such as <IMG SRC=image.gif>
allows you to place a static image within a document.
The <OBJECT> tag , once known as the
<INSERT> tag, is a container tag. This means that whenever it is used within a
hypertext document, there will be an <OBJECT> tag at the beginning of the object and a </OBJECT> tag at the end of the object. The space between
the tags is where you code the properties and parameters of the object.
NOTE
The home of the World Wide Web Consortium is located at http://www.w3.org.
You can find Internet specifications and other information at this site.
The World Wide Web Consortium (the organization that
defines the standards for Internet operations) established the <OBJECT> tag to
enable rich forms of media content within Web pages. Using the object tag, one can specify
the MIME (Multimedia Internet Mail Extension) type for the object.
Using the <OBJECT> tag, you can add active
content to your home page. In your Wonderland example, you will add a PowerPoint
Presentation to enhance the look and feel of the page.
The <OBJECT> Tag
<OBJECT> </Object>
The object tag is part of the HTML 3.2 specification
for hypertext documents. It is used to make OLE and multimedia content available in HTML
pages over the Internet or over an intranet. Within this container tag, any parameters for
the current instance of the control are defined.
<Object
ID="MyControl"
Width=640
Height=480
ClassID="CLSID:hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh"
CODEBASE="ftp://ftp.domain.net/mycontrol.ocx#version=xx,xx,xx,xx x"
Type="application/x-oleobject">
<Param Name="Enbaled" Value="True">
</Object>
To do this, you must first copy the PowerPoint
animation that your Public Relations Director, White Rabbit, gave you for your Web
directory. (You'll find a copy on the enclosed CD-ROM at \W3\wndrland.ppz. Copy that file
to C:\W3 on your local hard drive.)
Now that you have a copy of the presentation, you
need to write an HTML document within which browsers can view the animation. To do this,
create a basic HTML document with a basic <OBJECT> tag defining the presentation's
properties.
First, define the ClassID parameter for a PowerPoint
Animation. Then, define the size of the presentation. The format for the ClassID is
ClassID = "clsid:[Class ID]"
The <OBJECT> tag for the White Rabbit's
Powerpoint animation within the HTML document should look like this:
<OBJECT
CLASSID="clsid:EFBD14F0-6BFB-11CF-9177-00805F8813FF"
WIDTH=640
HEIGHT=480>
<PARAM NAME="File" VALUE="wndrland.ppz">
</OBJECT>
How to Determine an Object's
ClassID
There are a variety of methods one can use to determine an object's ClassID
In the wndrLand.ppz example, you used the free Internet Assistant for Powerpoint
(IA4PPT95.exe on the enclosed CD-ROM) to determine the ClassID for a PowerPoint animation
(.PPZ). After you created your presentation, you selected Export for
Internet—Powerpoint Animation from the File menu.
Another way to determine the ClassID of a control or object is to use the Visual Basic IDE
to create a project and add the item reference or control to it. Then, viewing the project
file with a text editor, such as Notepad, you can see what CLSID was used in the .VBP
file.
If you are familiar with the registry settings, you can use Windows RegEdit to look for
the CLSID of the control you wish to use.
The best way to get the CLSID of an ActiveX Control is to use the ActiveX Control Pad to
insert your control into a Web page. The Control Pad will insert the CLSID and any
necessary parameters into your document.
Now you will create a Web page for Mr. Rabbit's
presentation and create a link to it in the Wonderland home page. To do this, create a
basic HTML document and insert the <OBJECT> tag for the presentation into the page.
Call the HTML document wndrland.aspl. Use the following code to create the new page.
<HTML>
<HEAD><TITLE>About Wonderland</TITLE></HEAD>
<BODY>
<CENTER>
<OBJECT
CLASSID="clsid:EFBD14F0-6BFB-11CF-9177-00805F8813FF"
WIDTH=640
HEIGHT=480>
<PARAM NAME="File" VALUE="wndrland.ppz">
</OBJECT>
</CENTER>
<HR>
Click <A HREF="wndrland.ppz">here</A> to view the presentation with
Powerpoint
</BODY>
</HTML>
Internet Explorer
ActiveX Controls
When you have made it this far, you will be able to
insert very powerful active content into an HTML document. The preceding example, using a
PowerPoint animation, is fairly simple and, as you can see, requires no scripting.
However, it requires the user to have the very large PowerPoint Viewer (or PowerPoint
itself) installed on the local machine.
Lets work with some slightly smaller, but more
commonly used, ActiveX controls. These controls are installed from the AXDist.exe file in
the ActiveX SDK on the enclosed CD-ROM. The latest versions can be downloaded from
Microsoft's ActiveX Server (the URL is http://www.microsoft.com/intdev/sdk).
These controls provide dialog, display and command features that are not normally part of
an HTML document.
The
CyberTime Page
Three useful ActiveX controls are the label, timer
and pop-up window controls.
To learn how these controls are used, you'll create
an HTML file that displays the current time, and retrieves the current time from the U.S.
Department of Commerce Atomic Time Server (cool, eh?). Using Windows Notepad or the
ActiveX Control Pad, you will create a text file that begins like this:
<HTML>
<Head> <title>CyberTime</Title> </Head>
<Body>
Next, insert a label control called,
"lblClock" into the document. Notice that you use the type attribute to identify
the MIME type of the control as an OLE object. The CODEBASE attribute tells the user's
browser where it can obtain a copy of the control. All this is done using the
<OBJECT> container tag:
<OBJECT
ID="lblClock"
WIDTH=400
HEIGHT=25
CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx">
After you finish, this the control is automatically
created on the local machine. However, you still need to define the parameters of the
particular object like so:
<HTML>
<HEAD>
<PARAM NAME="Caption" VALUE="Dept. of Commerce Time Server">
<PARAM NAME="FontName" VALUE="Arial">
<PARAM NAME="FontBold" VALUE="1">
<PARAM NAME="FontSize" VALUE="12">
<PARAM NAME="backcolor" VALUE="1">
<PARAM NAME="forecolor" VALUE="1">
Finally, don't forget to use the closing
</Object> tag to avoid unpredictable results. That's all there is to inserting an
ActiveX control.
Warning
Although you can create and edit controls and
scripts by clicking the left margin, you may still need to edit the properties, values,
and parameters manually in the Control Pad window. To do this, click the Script or Object
icon in the left margin, set any values allowed through the Control Pad’s interface,
then exit the Control Editor and return to the Control Pad window. Now you can modify, add
or delete whichever properties you need. Also, be careful about going back to the
left-margin icon to edit your control or script. The wizard may zap any changes you made
that it doesn’t recognize.
Now you'll add a timer control to the page . Both
the label and the timer controls should be very familiar to Visual Basic programmers. The
timer control is added in much the same way as the label control:
<Object
ID="Timer"
ClassID="clsid:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"
CodeBase="http://activex.microsoft.com/
controls/iexplorer/ietimer.ocx"
Type=application/x-oleobject"
Align=Middle>
<Param Name="Interval" Value="100">
<Param Name="Enbaled" Value="True">
</Object>
Finally you'll add a new control, the pop-up window.
This cute little utility displays an HTML file in a temporary window. The window will
display all the formatting correctly, and disappears when the user clicks the screen. The
<OBJECT> tag for this control looks like this:
<Object
ID="PopUpWindow"
ClassID="clsid:A23D7C20-CABA-11CF-A5D4-00AA00A47DD2"
CodeBase="http://activex.microsoft.com/
controls/iexplorer/iepopwnd.ocx"
Type="application/x-oleobject"> </Object>
After you have all the objects in place, add a bit
of code that displays the information from the U.S. Department of Commerce's atomic clock
when the user clicks the time:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub lblClock_Click
PopUpWindow.Popup "http://132.163.135.130:14/"
End Sub
Sub Timer_Timer()
lblClock.caption=time
End Sub
-->
</SCRIPT>
When you've entered all this code, you will have a
Web page that displays the local time and, when the user clicks the time, information from
an atomic clock is displayed in a pop-up window (See Figure 16.4). A working example of
this page can be found in the \W3\ directory of your CD-ROM in the file titled
CyberTime.aspl.
Figure 16.4. A browser view
of a CyberTime page using ActiveX controls.
Programmatic
Installation of ActiveX Controls
Now that you know
how an HTML author uses ActiveX controls, you can get acquainted with how a programmer
uses them. Remember, though, that the use of ActiveX controls is not limited to Web
browsers and programming languages. They can be used by any program that uses OLE (such as
Word or Excel).
Visual Basic
Installation of an ActiveX control into a Visual
Basic project is exactly the same as with any other custom control. In this section, you
will create a Web browser using the HTML control from the Internet Control Pack (ICP) on
the enclosed CD-ROM. If you have not already installed the ICP, simply double click the
MSICPB.exe file on the CD-ROM, and when the installation is complete, reboot your computer
to allow changes to take effect.
After you install the ICP, create a new Visual Basic
project called WebView.vbp. This will be Wonderland's corporate Web browser.
With the project loaded into Visual Basic, press
Ctl+T to see what objects and controls are referenced (see Figure 16.5). Clear the check
box next to each control except for the Microsoft HTML Client Control control—that
one should be checked. This will remove any unnecessary controls from, and add the HTML
control to, the Visual Basic toolbox.
Figure 16.5. Visual Basic
project with the Microsoft HTML Client Control loaded.
Next, insert the control into a form. You should
also change the form's caption, identifying it as the Wonderland Web Browser. Add two menu
items, File Exit and View Source, an empty text box, and a command button labeled &Go.
The form should appear as in Figure 16.6.
Figure 16.6. Form layout
for the Wonderland Web Browser.
Add a bit of code to support the browser activities.
The code for the important subroutines of the Web browser follows, but you can add other
features to meet your needs.
Private Sub Command1_Click()
HTML1.RequestDoc Text1.Text
End Sub
Private Sub mnuFileExit_Click()
End
End Sub
Private Sub mnuViewSource()
Select Case mnuViewSource.Checked
Case True
mnuViewSource.Checked=False
HTML1.ViewSource = False
Case False
mnuViewSource.Checked = True
HTML1.ViewSource = True
End Select
End Sub
As you can see, most of the work is done by the HTML
control. The only thing you really needed to code was one menu option to exit the program,
and another menu option to toggle between Code View, and Web View modes.
Registering Controls with
RegSvr32.exe
Before most other applications can use the features of a control (.DLL or .OCX), the
control must be added to the system registry. You can manually view and edit the system
registry using the RegEdit.exe file that comes with Windows.
The system registry contains a great deal of information about your system, it's
configuration, and the software installed on it. Editing the registry can be quite
complicated—especially if you are not very familiar with it.
To make the registration of OLE controls easier, Microsoft provides the RegSvr32.exe
utility. There might be several copies of this file on your machine, so make sure that the
most recent one is in your C:\Windows directory.
The rules for using the utility are pretty much self explanatory. To register the OLE
server, use: RegSvr32 [DLL or OCX Filename]
This will register the OLE Server.
You can also use the optional command line parameter to unregister an OLE Server as
necessary:
RegSvr32 /u [DLL or OCX Filename]
Finally, you can use a parameter to force the program into "silent" mode. This
is useful for processes where you may not want the user to be bothered with the results of
the registration process. Use this option sparingly, though. You wouldn’t have tried
to register a control unless you expected it to succeed. If it doesn’t work there may
be other actions you will want to take.
When you have added all the controls and coded the
program, you are ready to browse simple Web documents. Because this program uses the
simple Microsoft HTML control, the program does not yet support all of ActiveX. This is
not a bug, though. The HTML control is a very powerful ActiveX control, and you can
program many advanced features into the project using it.
For example, you added a menu item to allow the
viewing of source code for HTML pages. By clicking the View|Source menu item, you can
toggle between Code View and Web View. For those of you who have learned HTML by observing
the ways that other people do it, this can be a very valuable learning tool!
Other Languages
Installation of an ActiveX control into IDE's other
than Visual Basic projects is different for each language. If you can use a custom control
in your favorite programming language, you should have no problem using ActiveX controls
because they install like any other custom control.
Using ActiveX Controls
within Active Documents
As I mentioned earlier, the quickest, cheapest,
easiest way to acquire ActiveX controls is by browsing an ActiveX document with an ActiveX
browser, such as MSIE. To better understand this, you will create a Web document for your
fictitious company that contains a redistributable ActiveX control.
In the example with the PowerPoint presentation, you
used an inserted control and a linked object. Remember that an object (such as a
Powerpoint presentation) must be controlled by something (such as the PowerPoint program
or the free PowerPoint viewer). In that example, you referenced the control via the
ClassID (already installed on the user's machine), then pointed toward the specific
animation via the File parameter .
In the following scenario, the powers that be at
Wonderland Industries have asked you to create another Web page.
Business Case
The queen of hearts has asked you to develop a page
for her gaming division. She would like a home page that allows users to select a site to
view from a list of sites.
On this Web page, she wants a list box showing
several other entertainment sites. Your task is to create a Web page that allows users
with ActiveX browsers to select a site from the list and be transported to the new site .
This can be done with HTML alone, but for learning purposes, you'll do it in ActiveX. To
accomplish this, complete the following steps:
- To begin, create a blank HTML page (hearts.aspl).
Include the basic HTML tags (<HTML>, <HEAD>, <TITLE> and <BODY>).
The title of the document is Hearts Gaming.
The <HTML> Tag
<HTML> </HTML>
This container tag defines the beginning and ending
of a hypertext document. Each HTML document should have <HEAD>, <TITLE> and
<BODY> containers:
<HTML>
<Head>
<Title>My Document</Title>
</Head>
<Body>
My Content
</Body>
</HTML>
In place of a <BODY> container, your document
can have a <FRAMESET> container:
<HTML>
<Head>
<Title>My Document (Frames Version)</Title>
<Base Target=_top>
</Head>
<FrameSet Rows="85%, 15%">
<FrameSet Cols="15%,85%">
<Frame
SRC="TopLeft.aspl"
Name="fmTopLeft">
<Frame
SRC="TopRight.aspl"
Name="fmTopRight">
</FrameSet>
<Frame
SRC="Bottom.aspl"
Name="fmBottom">
</FrameSet>
<NoFrames>To view this page, you must have "Frames"
enabled.</NoFrames>
</HTML>
- Now, using the ActiveX Control Pad, add a list box
control to the file. To do this, select the menu option Edit|Insert ActiveX Control. This
displays a window that lists all ActiveX controls and OLE objects currently installed on
your system. Select the Microsoft Forms List Box control from the list of object types.
When you select the control you want to insert into your document, the Object Type dialog
box is replaced by two new windows, Properties and Edit ActiveX Control. For the list box
control, only customize a few of the properties—height and width, and ID.
- Set the height and width properties to 128 and 256
respectively. This gives the list box the correct proportions to show all of the sites
you'll be listing. Change the ID property to URLList.
- When you've set these properties, close both the
Properties and the Edit ActiveX Control windows to return to the ActiveX Control Pad's
editing window. You should see that an <OBJECT> tag container has been added with a
variety of parameters defined (see Figure 16.7).
Figure 16.7. The
<OBJECT> tag for the list box control as created within the ActiveX Control Pad.
Next, add code to fill the list box. You'll use this
control to list the sites that the queen wants her visitors to be able to view.
Even though you've added these objects to the form,
there is no code behind them. You must add a script that will populate the list box with
the queen's URLs. For this, you'll add a bit of VBScript (which you learned about
earlier).
<SCRIPT LANGUAGE="VBScript">
<!--
Sub Window_onLoad()
URLList.Enabled = True
URLList.Additem "Yahoo Games"
URLList.Additem "Nintendo"
URLList.Additem "Sierra On-Line"
URLList.Additem "Disney"
end sub
-->
</SCRIPT>
Finally, add a bit of code to tell the browser to
jump to the associated URL when the user double-clicks an item within the text box:
<SCRIPT LANGUAGE="VBScript">
<!--
Sub URLList_DblClick(ByVal Cancel)
Select Case URLList.text
Case "Yahoo Games"
Dim strLocation as String
strLocation="http://www.yahoo.com/Entertainment/Cool_Links/Games/"
Window.location.href = strLocation
Case "Nintendo"
Window.location.href = "http://www.nintendo.com"
Case "NCompass Labs"
Window.location.href = "http://www.sierra.com"
Case "WWW Consortium"
Window.location.href = "http://www.disney.com"
End Select
end sub
-->
</SCRIPT>
When you finish with the HEARTS.aspL page, your
completed project should resemble the \W3\HEARTS.aspL file on the on the enclosed CD-ROM.
You will have created an ActiveX-enabled Web page with an embedded control. For this page,
the user must have the list box control already installed on his machine. The next chapter
discusses ActiveX control downloading to distribute controls over the network.
Summary
In this chapter, you have learned about the
<OBJECT> container tag and how it is used to insert active content into an HTML
page. This feature allows an HTML author to reference objects that are installed on a
user's machine. It also provides an object against which a VB or Java script can act.
You have also learned the basics of using an ActiveX
control within a programming environment such as Visual Basic. Using an ActiveX control
exactly like any other custom control you can create your own proprietary, standalone
Internet applications and distribute them to your users.
Q&A
- Q What is the significance of a ClassID?
- A A ClassID is the unique code assigned to an
OLE control. This lengthy number is used by OLE-enabled applications to identify its
installation on a local machine.
- Q Can I use ActiveX controls in any old
programming language?
- A No. ActiveX controls are usable in an OLE
container application such as MSIE, Visual C++ or Visual Basic, not within programming
environments that do not support of OLE functionality, such as Turbo Basic version 1.
- Q How can I tell whether or not a custom control
is an ActiveX control?
- A It's very difficult for the new programmer
to tell whether a custom control is based on the DCOM model. Basically, you must rely on
the developer to identify it as such. If you are familiar with building OLE controls, you
can determine whether a suspect control is ActiveX compatible by checking for the
existence of the Iunknown interface, and seeing whether it has self-registering routines
within it.
- Q Must a control on a Web page be an ActiveX
control?
- A No, but other controls can be unreliable
over a network connection—especially a slow connection. ActiveX (or DCOM OLE)
considers the unavailability of remote data or data sources, whereas other controls might
not. In the hearts example in this chapter, you used a list box control that is not a true
ActiveX control. Because the data you used to work with the control was contained within
the HTML page, you did not need to worry about whether or not data at a remote site would
be available and could therefore use the control safely.
Workshop
Create a Web page with the following items inserted
as ActiveX Objects:
- List box
- Text box
- Video (.AVI)
Quiz
- What are the 4 container tags required in every HTML
document?
- Which of the required container tags can be replaced
by the <FRAME> tags?
- What container tag, formerly known as the
<INSERT> tag is required for the use of ActiveX Controls?
- What are two items in an HTML page that have a
graphical icon in the margin of the ActiveX Control Pad?
- What two parameters within the <OBJECT> tag
define the size of the object?
- What was the first tag to allow multimedia content
within an HTML Document?
- What organization publishes the standards for HTML
tags?
- What hotkey combination within Visual Basic allows a
programmer to define what controls are loaded into a Visual Basic project?
- What utility is used to register and unregister
controls on a PC?
- Must an ActiveX HTML author define the location where
an ActiveX Control can be downloaded?
|
