All Categories :
ActiveX
Chapter 13
Implementing an ActiveX Menu Control
CONTENTS
As often happens with a new technology, the imagination begins
to run ahead of developments. After you start using VBScript and
ActiveX on your Web pages, the likelihood is that you will not
be content with the forms-type controls supplied with the ActiveX
Control Pad, and you'll want to do more.
So where do you find a source of extra controls to satisfy your
needs? Well, unlike Java applets, which are relatively new, ActiveX
controls (formerly OCX controls) have been in development and
use for quite some time. Consequently, hundreds or even thousands
of ActiveX controls are available on the Web. The best place to
start looking is the Microsoft ActiveX Gallery.
The Microsoft ActiveX Gallery is part of the Microsoft Site Builder
Workshop site at http://www.microsoft.com/workshop/.
There you'll find a large range of controls for a wide range of
applications and solutions.
The address of the gallery at the time of this writing is http://www.microsoft.com/activex/gallery/.
The site shown in Figure 13.1 lists controls available from Microsoft
and also controls available from third-party vendors. The Microsoft
controls are free to download and use, but before you use any
control within your own Web pages, it is wise to check the copyright,
usage, and other conditions of its use.
Figure 13.1 : The ActiveX Control Gallery.
To obtain a particular control from the Microsoft site, simply
click the control name in the left lower frame. A page is then
loaded to display a graphical snapshot of the control and a hyperlink
to download the control, as shown in Figure 13.2.
Figure 13.2 : Ready to download the menu control.
For the example used in this chapter, you need to obtain the Microsoft
Button menu control. When you click the hyperlink, a new page
that contains the control is loaded. If you don't have the control
loaded on your machine already, a control is downloaded to you
from the Microsoft control repository. Just prior to the completion
of the download, you are asked to confirm that you want to receive
this control into your machine (as shown in Figure 13.3). This
unique security feature ensures that users know what the source
of a control is before they accept it onto the hard drive.
Figure 13.3 : The safety certificate for the menu control.
Note |
A major concern regarding ActiveX controls and Java applets is the potential security risk. As you will see later in this chapter, this security certificate follows the control around so that it also displays on the machine of a user visiting your site when that user downloads the control from you.
|
After you accept the credentials of the control's author (in this
case, Microsoft), the control is registered onto your machine
and is ready to use.
The page to which you hyperlinked to download the control uses
the new control (shown in Figure 13.4) so that you can see it
in action. Before you leave the site, do two things:
Figure 13.4 : The Menu control installed and working.
- Look at the source of the page that downloaded and demonstrated
the control. Save the source to a text file for later reference.
- Click the "View Programming Information" hyperlink
to obtain a list of properties and methods for the control.
Now that you've acquired your shiny new Menu Button control, you
can access it from the ActiveX Control Pad and use it on your
own Web pages.
This example uses the Microsoft ActiveX Menu control, sometimes
known as the Button Menu. You will create a simple user interface
on a Web page, using two Menu controls and adding some straightforward
VBScript to implement the menu's functionality. This section shows
you how to use a newly downloaded control through the ActiveX
Control Pad. For details on how to do the same using the HTML
Layout control, see Chapter 14, "Using the HTML Layout Control."
Furthermore, in the first part of the example, you run both the
HTML page and the control locally. In the next section, you learn
how to place the control on your Web site for the use of your
site visitors.
- First, open the ActiveX Control Pad.
- Place your cursor between the <BODY> tags,
and select Insert ActiveX Control from the Edit menu.
- The Insert ActiveX Control dialog is displayed. Select the
BtnMenu object, as shown in Figure13.5.
Figure 13.5 : Select the Menu control from the ActiveX
Controls List.
When the Button Menu object loads in the object editor, it does
not have a default size. It looks rather odd, all crunched up
in the corner as shown in Figure 13.6.
Figure 13.6 : The Menu control when it first loads.
- Place your cursor on one of the handles, and drag the control
to a respectable size, as shown in Figure 13.7. The exact size
is not really important for this exercise.
Figure 13.7 : The Menu control resized.
- You don't need to set any properties other than the size at
this stage. The caption and menu items will be set by VBScript
code as the object loads. Therefore, all you need to do is close
the object editor, and the Control Pad automatically generates
the code for the menu object in the HTML page (see Figure 13.8).
Figure 13.8 : The definition code for the first Menu
control.
- Your sample menu page will contain two Menu controls; the
easiest way to generate a second object is to copy the code for
the first object and paste it directly under the first. Then simply
change the object ID to pMenu2, as shown in Figure 13.9.
Figure 13.9 : The definition code for both Menu controls.
The menu captions and menu items are added using VBScript code
in the Window object's OnLoad event. This means
that as the page loads, it loads the controls within the page
and then executes the code to fill in the menu options and caption.
If you place this code in an event that occurs prior to the loading
of the objects, you will generate a runtime error. Follow these
steps to add the onLoad event handler code:
- Open the ActiveX Script Wizard and click the plus sign to
the left of the Window Object in the left events pane.
- Select the onLoad event.
- Click the plus sign to the left of the pmenu1 object
in the right actions pane.
- A full list of the menu object's properties and methods is
now displayed. The method used to add menu items is called AddItem.
Double-click this method name, and a line of code is automatically
generated in the OnLoad event handler in the lower Script
Window. (See Figure 13.10.)
Figure 13.10: Starting the onLoad event
in the Script Wizard.
- You now need to manually edit the code you have been given
and replace the variable placeholders with your own literal values.
First, replace item with First Menu Option.
Then replace index with 1.
- Repeat steps 4 and 5 to generate lines of code for a total
of four menu options, as shown in Figure 13.11.
Figure 13.11: The menu options for Menu One.
- Now you need to specify a caption that will appear on the
face of the button menu. To do this, double-click the Caption
property, and edit the automatic code (as shown in Figure 13.12)
to read as follows:
Figure 13.12: The caption for Menu One.
pmenu1.Caption = "Menu One"
- To add menu options for Menu Two (pmenu2), click
the plus sign to the left of the pmenu2 object in the
right actions pane, and then repeat steps from step 4 through
6. Your event handler should then resemble the one in Figure 13.13.
Again, you might find it easier and quicker to simply cut and
paste the code for the first menu and manually amend the variables.
Figure 13.13: The complete onLoad event.
Now you have two menus on the page, both with captions and four
options. But what happens when you click one of these options?
The answer is that the menu object's select event is
fired. Your next task, therefore, is to write code that will execute
within the select event handler. The select
event handler has one argument: the index number of the menu option
that the user selected. Therefore, you have only one select
event handler for the whole menu, but it executes differently
for each menu option. The best way to achieve this is to use a
Select Case control block.
- Click the plus sign to the left of the pMenu1 object
in the left events pane.
- Choose the Select event.
- Enter the following code into the event handler for Menu One's
Select event:
Select Case item
Case 1
Alert "You selected Option One from Menu One"
Case 2
Alert "You selected Option Two from Menu One"
Case 3
Alert "You selected Option Three from Menu One"
Case 4
Alert "You selected Option Four from Menu One"
End Select
Now repeat this for pMenu2, amending the Alert captions
to read ...from Menu Two. The completed event handler
for Menu Two's select event is shown in Figure 13.14.
Figure 13.14: The complete event handler for Menu Two's
Select event.
For this example, the coding is completed. Now click OK at the
bottom of the Script Wizard window to make the Script Wizard generate
the code into the HTML page, as shown in Figure 13.15.
Figure 13.15: The completed script is automatically
generated and placed in the text editor.
Save the file as menudemo.htm, and test it through your
MSIE3.0 browser. You should have two menus with four options each
(see Figure 13.16). When clicked, the menus display an alert box
informing you of which option was clicked (see Figure 13.17).
Figure 13.16: Select a menu option.
Figure 13.17: The select event fires.
You can now run this page from your local hard drive, but what
happens if you place it on your Web site? On your machine it will
run OK. Internet Explorer first checks your hard drive for the
btnmenu.ocx file and, if found, loads it and away you
go. This is fine for you and the other users with the button menu
control, but what about users who don't have the button menu control
when they reach your page?
Every ActiveX control has a parameter property called CodeBase,
which tells Internet Explorer (and any other ActiveX-enabled browser)
where it can find a copy of the control if it cannot find one
locally (on the client machine).
CodeBase has one major restriction. It must point at
the same domain from which the page was loaded.The following list
shows you how to set the CodeBase and test downloading
the page from your Web site as though you are the user. For this
example, I've used one of my domains, which happens to be called
vbscripts.com (cheap promo!).
- To change the CodeBase property, load the menudemo.htm
file into the ActiveX Control Pad, and click the object icon next
to the pmenu1 object definition.
- Select the CodeBase property in the property editor
and enter the full URL of the domain, the directory where you
plan to store the control, and also the btnmenu.ocx filename.
(See Figure 13.18.)
Figure 13.18: Amending the CodeBase property.
- Don't forget to click the Apply button.
- Close the object editor in order to generate the new Object
definition, including the CodeBase, as shown in Figure
13.19.
Figure 13.19: The new control definition.
Repeat the amendment on the second menu object (pmenu2),
and save the file.
Now transfer the HTML file (menudemo.htm) and the btnmenu.ocx
file to your server, remembering to locate the OCX file in the
place you specified in the CodeBase property. You can
find the btnmenu.ocx file in your windows\occache\
subdirectory.
Before you do anything else, you must remove the btnmenu.ocx
file from your machine; otherwise, the browser simply runs your
local copy, and you haven't performed the test properly. Furthermore,
if you still have MSIE3.0 open with the menu control in it, you
must close the browser to free the control from memory. Just to
be on the safe side, rather than simply deleting the file, copy
it to another subdirectory and rename it.
You are now ready to test your first online ActiveX Web page (drum
roll
). Fire up the browser, and enter the URL of the menudemo.htm
file. As the file is loading, the status bar should tell you that
it is installing a component. Then the security certificate is
displayed as shown in Figure 13.20.
Figure 13.20: The controls security certificate.
Note |
One consideration when using ActiveX controls is the time that is taken to download from the Web site. As you know, this is unquantifiable because it depends upon the Internet connections for you, the client, and the server; the time of day; the wind direction; and a million other variables. However, don't forget that only those users who don't currently have this control will need to download it. And users who visit your site regularly or who have visited another site with the same control will have almost instant access to the control because the browser loads their local copy.
|
I tend to think that it's all right to accept this control. Click
OK, and the control completes its download and registers its presence
on your machine. The Menu controls then appear on the page, ready
to be used (as shown in Figure 13.21). Congratulations!
Figure 13.21: The completed Web page working online.
Here's the complete source code for the sample project menudemo.htm:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub window_onLoad()
call pmenu1.AddItem("First Option", 1)
call pmenu1.AddItem("Second Option", 2)
call pmenu1.AddItem("Third Option", 3)
call pmenu1.AddItem("Fourth Option", 4)
pmenu1.Caption = "Menu One"
call pmenu2.AddItem("First Option", 1)
call pmenu2.AddItem("Second Option", 2)
call pmenu2.AddItem("Third Option", 3)
call pmenu2.AddItem("Fourth Option", 4)
pmenu2.Caption = "Menu Two"
end sub
-->
</SCRIPT>
<TITLE>Menu Demonstration Page</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<SCRIPT LANGUAGE="VBScript">
<!--
Sub pmenu1_Select(item)
Select Case item
Case 1
Alert "You selected Option One from Menu One"
Case 2
Alert "You selected Option Two from Menu One"
Case 3
Alert "You selected Option Three from Menu One"
Case 4
Alert "You selected Option Four from Menu One"
End Select
end sub
-->
</SCRIPT>
<OBJECT ID="pmenu1" WIDTH=95 HEIGHT=35 TYPE="application/x-oleobject"
CLASSID="CLSID:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
CODEBASE="http://www.vbscripts.com/examples/btnmenu.ocx">
</OBJECT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub pmenu2_Select(item)
Select Case item
Case 1
Alert "You selected Option One from Menu Two"
Case 2
Alert "You selected Option Two from Menu Two"
Case 3
Alert "You selected Option Three from Menu Two"
Case 4
Alert "You selected Option Four from Menu Two"
End Select
end sub
-->
</SCRIPT>
<OBJECT ID="pmenu2" WIDTH=95 HEIGHT=35 TYPE="application/x-oleobject"
CLASSID="CLSID:52DFAE60-CEBF-11CF-A3A9-00A0C9034920"
CODEBASE="http://www.vbscripts.com/examples/btnmenu.ocx">
</OBJECT>
</BODY>
</HTML>
ActiveX controls open up a whole new world of possibilities for
your Web pages. Controls that used to be available only in Windows
applications now can be used in your Web pages-and, as you have
seen, you can add them quickly and easily. As you travel the Net,
keep your eyes open for new and interesting controls, many of
which are available for free.
Now that you've had a taste of what ActiveX can really do for
your Web site, you can find out more in these chapters:
- To see how to build incredibly cool Web pages using nothing
but ActiveX controls, read the next chapter, "Using the HTML
Layout Control."
- To learn more about using other controls, see Chapter 16,
"Real-Life Examples II."
- To learn more about the internal working of ActiveX, see Chapter
21, "Advanced ActiveX Techniques."
Q: | What happens if a user has a version of the control that is different from the one on my server?
|
A: | To ensure compatibility you can add the version number of the control with the CodeBase parameter, like this:
http://www.youdomain.com/subdir/btnmenu.ocx#Version=4,70,0,1161
|
Q: | Great, but how do I know what version number my control is?
|
A: | You can obtain the version number from the source of the page from which you obtained the control at the Site Builder workshop. Simply select View Source when you've downloaded a new control, and copy and paste the version number from their CodeBase parameter.
|