by Jim O'Donnell
Implementing ActiveX controls in HTML Web pages requires the use of the HTML <OBJECT> and <PARAM> tags to include and configure each desired Control. While not too difficult, the syntax for using these controls and determining the correct configuration parameters for each-particularly now, with the technology in its infancy-can be an intimidating task.
Microsoft has made the process a lot easier through introduction of its ActiveX Control Pad. This HTML Web page authoring tool offers an automated, WYSIWYG interface to ActiveX Control configuration, and automatically generates the HTML code to implement the Control. The Control Pad supports any locally installed ActiveX Control and frees the programmer of the burden of knowing the class IDs and configurable parameters of each Control. It also supports the HTML Layout Control, for layering and precisely positioning objects on Web pages, and the Script Wizard, which allows you to create interactive, scripted Web pages without having to learn VB Script.
Chapter 49, "ActiveX Controls," discusses Microsoft's ActiveX Technologies, specifically the new capabilities that can be delivered using ActiveX controls in Internet Explorer, or any other compatible application. Including these ActiveX controls in HTML documents requires use of the <OBJECT> tag to embed the Control within the page. Controls are configured through the attributes of the <OBJECT> tag, and the configuration parameters are set using the <PARAM> tag within the <OBJECT>...</OBJECT> container.
ActiveX controls can be included in HTML Web pages by directly entering the code into the HTML document. Currently, none of the WYSIWYG HTML authoring programs, such as Microsoft FrontPage, include support for Web authoring with ActiveX controls. However, Microsoft has released a freeware program called the ActiveX Control Pad that does take a lot of the grunt work out of using ActiveX controls in Web pages.
Using the ActiveX Control Pad, any locally installed ActiveX Control can be placed within a Web page that uses a WYSIWYG interface. Individual Label controls can be displayed as they would appear, as will images and other elements. The Control Pad allows you to configure the many options of each embedded ActiveX Control-set the <OBJECT> and <PARAM> configuration values-using a simple dialog box customized for each Control. When Control configuration is complete, the HTML code needed to implement the Control in your Web page is written into the HTML document.
In addition to its ActiveX Control Web authoring capabilities, the ActiveX Control Pad also includes support for Microsoft's HTML Layout Control and a Script Wizard. The HTML Layout Control uses the draft standard of the World Wide Web Organization to precisely position, overlap, and layer HTML elements such as text, images, and other ActiveX controls in a Web page. You can create interactive Web pages by using the Script Wizard to implement actions that occur in response to events. This is done in the Script Wizard using a simple, point-and-click interface; the Wizard automatically generates the VB Script code to implement the action.
ActiveX controls are embedded in HTML documents through use of the HTML <OBJECT> tag; they are configured through use of the <PARAM> tag. Listing 50.1 is an example of using the ActiveX Marquee Control, embedded within an HTML Web page. The attributes of the <OBJECT> tag determine the ActiveX Control (or other Web object) used, as well as its size and alignment on the Web page. The <OBJECT>...</OBJECT> container tags also enclose the <PARAM> tags that are used to set the Control-specific parameters.
On its own, Netscape Navigator does not support ActiveX controls
and will ignore any controls embedded in a Web page through use
of the <OBJECT> tag. However, with one of the Ncompass
Labs plug-ins installed, Netscape Navigator also supports ActiveX
controls and will interpret embedded objects correctly.
| ON THE WEB |
http://www.ncompasslabs.com/ This site gives all the information you need and shows some examples of using Microsoft's ActiveX Technologies in Netscape Navigator through Ncompass Labs' plug-ins. |
The next sections discuss each of the important attributes of the <OBJECT> tag and also discuss some of the possibilities for using the <PARAM> tags.
Listing 50.1 Marquee.htm-Example Using the ActiveX Marquee Control
<HTML>
<HEAD>
<TITLE>Marquee Example</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<HR>
<OBJECT
ID="Marquee1"
CLASSID="CLSID:1A4DA620-6217-11CF-BE62-0080C72EDD2D"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/marquee.ocx
#Version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=100%
HEIGHT=100
>
<PARAM NAME="szURL" VALUE="queet.gif">
<PARAM NAME="ScrollPixelsX" VALUE="2">
<PARAM NAME="ScrollPixelsY" VALUE="2">
<PARAM NAME="ScrollStyleX" VALUE="Bounce">
<PARAM NAME="ScrollStyleY" VALUE="Bounce">
</OBJECT>
<HR>
</CENTER>
</BODY>
</HTML>
ID The ID attribute of the <OBJECT> tag is used to give the ActiveX Control a name that can be used within the Web browser (or other application) environment. This is the easiest way for the parameters of the ActiveX Control to be accessed and manipulated by other elements running within the Web browser (usually VB Script or JavaScript applications). For example, in Listing 50.1, a VB Script to change the background color of the Marquee Control to red, if clicked, would look like
Sub Marquee1_OnClick()
Marquee1.BackColor = 16711680
End Sub
CLASSID The CLASSID attribute is perhaps the most intimidating looking piece of the <OBJECT> tag of an ActiveX Control. However, it is simply the identification code for the ActiveX Control being used. It is what Internet Explorer uses to load the correct ActiveX Control code module from your computer, and its value is set for each control by the control's author. The code for the ActiveX Marquee Control, displayed in Listing 55.1, is "CLSID:1A4DA620-6217-11CF-BE62-0080C72EDD2D."
CODEBASE Unlike Netscape Navigator plug-ins,
ActiveX controls can be automatically downloaded and installed
when Internet Explorer 3 (or another compatible application) encounters
a document that makes use of them. The key to this feature is
the CODEBASE attribute. The CODEBASE attribute
defines the URL from which the ActiveX Control can be downloaded,
and defines the version of the Control used. Then, when Internet
Explorer attempts to render the Web page on a client machine,
the CODEBASE attribute checks if each ActiveX Control
embedded in the HTML document exists on that machine, and checks
if it is the latest version. If a more recent version exists at
the URL defined by the CODEBASE attribute, it is automatically
downloaded and installed, subject to the security settings in
place in the local copy of Internet Explorer being used.
| TIP |
Whenever possible, use only ActiveX controls that have been digitally signed by their vendors in your Web pages. This helps to ensure that these controls can be downloaded and installed on your users' machines without a problem. |
TYPE The TYPE attribute defines the MIME type of the ActiveX Control. In general, this will be application/x-oleobject. For other object types embedded in an HTML document using the <OBJECT> tag, the value of this attribute will be different.
WIDTH and HEIGHT The WIDTH and HEIGHT attributes of the <OBJECT> tag define the size of the ActiveX Control within the Web page. For hidden controls, such as Timer or Preloader, these attributes can be kept at their default values of 0. For controls such as Marquee or Label, these attributes need to be sized correctly for their desired appearance.
The <PARAM> tags are used to configure the appropriate parameters of each ActiveX Control. In general, the syntax of the <PARAM> tag is
<PARAM NAME="ParameterName" VALUE="ParameterValue">
For instance, in the Marquee Control example shown in Listing 55.1, the URL of the document being placed in the marquee is given by
<PARAM NAME="szURL" VALUE="queet.gif">
To effectively make use of ActiveX controls, you need to know the names and possible values of all of its parameters that can be set with the <PARAM> tag. One of the benefits of using Microsoft's ActiveX Control Pad for creating Web pages that use ActiveX controls is that the Control Pad knows what parameters are used by each control. Without the ActiveX Control Pad, this information needs to be obtained in the documentation provided with the control by its author. (The ActiveX Control Pad is discussed later in this chapter.)
The ActiveX Marquee Control example defined by Listing 55.1 is shown in Figure 50.1. The area of the marquee is defined horizontally to take up 100% of the width of the Web page, and vertically for 100 pixels. Because ScrollPixelsX and ScrollPixelsY are both non-zero, and ScrollStyleX and ScrollStyleY are set to "BOUNCE", the effect is to send the image Queet.gif bouncing around the marquee area.
Listings 50.2 through 50.4 show another example of using ActiveX controls in a Web page. In this case, Label controls and View Tracker controls are used to implement a context-sensitive navigation bar within the lower frame of a framed Web page. Listing 50.2 sets up the document, defining and naming the two frames, and giving their respective URLs.
Listing 50.2 Main.htm-Top-Level HTML Document for View Tracker Example
<HTML> <HEAD> <TITLE>JOD's Home Page</TITLE> </HEAD> <BODY> <FRAMESET ROWS="*,100" FRAMEBORDER=YES BORDER=2> <FRAME NAME="Top" SRC="top.htm" SCROLLING="auto" NORESIZE FRAMEBORDER=0> <FRAME NAME="Nav" SRC="nav.htm" SCROLLING="no" MARGINHEIGHT=0 FRAMEBORDER=0> </FRAMESET> </HTML>
Listing 50.3 shows the document to be displayed in the top frame. The long, vertically oriented ActiveX Label Control in this HTML document is just filled-the important parts of implementing the context-sensitive navigation bar are the two View Tracker controls and the VB Scripts that react to their OnShow() and OnHide() events.
The two View Trackers are named "TopOfPage" and "BottomOfPage" and are embedded, respectively, in the furthest top-left and bottom-right reaches of the Web page. The VB Scripts are used to react to the View Trackers coming into or going out of view by enabling or disabling the ActiveX Label controls, defined in Listing 50.3 as buttons in the navigation bar.
Listing 50.3 Top.htm-Top Frame HTML Document for View Tracker Example
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="jodback.gif">
<A HREF="#TopPage">
<OBJECT
ID="TopOfPage"
CLASSID="clsid:1A771020-A28E-11CF-8510-00AA003B6C7E"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ietrack.ocx
#Version=4,70,0,1161"
WIDTH=0
HEIGHT=0
ALIGN="left"
>
</OBJECT></A>
<OBJECT
ID="MyLabel"
CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
WIDTH=225
HEIGHT=1500
>
<PARAM NAME="Caption" VALUE="This is a really long label…">
<PARAM NAME="Angle" VALUE="270">
<PARAM NAME="Alignment" VALUE="0">
<PARAM NAME="ForeColor" VALUE="#000000">
<PARAM NAME="BackColor" VALUE="#C0C0C0">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontSize" VALUE="72">
<PARAM NAME="FontBold" VALUE="1">
</OBJECT>
<ADDRESS>
Jim O'Donnell, <A HREF="mailto:odonnj@rpi.edu">odonnj@rpi.edu</A>
</ADDRESS>
<A HREF="#BottomPage">
<OBJECT
ID="BottomOfPage"
CLASSID="clsid:1A771020-A28E-11CF-8510-00AA003B6C7E"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ietrack.ocx
#Version=4,70,0,1161"
WIDTH=0
HEIGHT=0
ALIGN="right"
>
</OBJECT></A>
<SCRIPT Language="VBScript">
Sub TopOfPage_OnShow
Parent.Frames(1).TopBut.Caption=""
End Sub
Sub TopOfPage_OnHide
Parent.Frames(1).TopBut.Caption="TOP"
End Sub
Sub BottomOfPage_OnShow
Parent.Frames(1).BotBut.Caption=""
End Sub
Sub BottomOfPage_OnHide
Parent.Frames(1).BotBut.Caption="BOTTOM"
End Sub
</SCRIPT>
</BODY>
</HTML>
Finally, Listing 50.4 shows the HTML code used to produce the navigation bar. The middle five buttons are always present and can be defined to take the user to any one of a set of Web pages. To the left and right of these buttons are two ActiveX Layout controls-the one on the left is meant to display the word "TOP", and the one on the right is meant to display "BOTTOM". However, the VB Scripts in the top window document can set this text label to be blank if the appropriate View Tracker is in view. In other words, if the top of the Web page is in view, the Top button is blanked.
The last step in creating this context-sensitive navigation bar is to attach VB Scripts to the OnClick() methods of each Label control, which move the document in the top window to its top or bottom, depending on which button is clicked.
Listing 50.4 Nav.htm-Bottom Frame HTML Document for View Tracker Control
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<CENTER>
<TABLE>
<TR ALIGN=CENTER>
<TR><TD>
<OBJECT
ID="TopBut"
CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx
#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=100
HEIGHT=60>
<PARAM NAME="Caption" VALUE="TOP">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontSize" VALUE="16">
<PARAM NAME="FontBold" VALUE="1">
</OBJECT>
</TD>
<TD><A HREF="top.html" TARGET="Top">
<IMG WIDTH=80 HEIGHT=60 SRC="hometh.gif"></A></TD>
<TD><A HREF="jod6.html" TARGET="Top">
<IMG WIDTH=80 HEIGHT=60 SRC="vrmlth.gif"></A></TD>
<TD><A HREF="me.html" TARGET="Top">
<IMG WIDTH=80 HEIGHT=60 SRC="gallth.gif"></A></TD>
<TD><A HREF="hockey.html" TARGET="Top">
<IMG WIDTH=80 HEIGHT=60 SRC="hockth.gif"></A></TD>
<TD><A HREF="que.html" TARGET="Top">
<IMG WIDTH=80 HEIGHT=60 SRC="quebth.gif"></A></TD>
<TD>
<OBJECT
ID="BotBut"
CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2"
CODEBASE="http://activex.microsoft.com/controls/iexplorer/ielabel.ocx
#version=4,70,0,1161"
TYPE="application/x-oleobject"
WIDTH=100
HEIGHT=60>
<PARAM NAME="Caption" VALUE="BOTTOM">
<PARAM NAME="FontName" VALUE="Verdana">
<PARAM NAME="FontSize" VALUE="16">
<PARAM NAME="FontBold" VALUE="1">
</OBJECT>
</TD></TR>
<TR ALIGN=CENTER>
<TD></TD>
<TD><A HREF="top.html" TARGET="Top">Home</A></TD>
<TD><A HREF="jod6.html" TARGET="Top">VRML Home</A></TD>
<TD><A HREF="me.html" TARGET="Top">Gallery</A></TD>
<TD><A HREF="hockey.html" TARGET="Top">Hockey</A></TD>
<TD><A HREF="que.html" TARGET="Top">Que</A></TD>
<TD></TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>
Figure 50.2 shows how this Web page appears when the document is first loaded. The Top-Of-Page View Tracker Control is in view, so the TOP navigation bar button is blanked out.
However, when the user begins scrolling down the Web page and the top of the page scrolls off the top, the Top button becomes visible (see Figure 50.3). When the bottom of the page is reached, the Bottom button disappears (see Figure 50.4).
So, the ActiveX View Tracker control can be used in a Web page anywhere you would like to provide different options of content based on the current context that is currently on-screen. The example given is for context-sensitive navigation, but the View Tracker can also be used to show a different image or different table of contents, depending on what part of a Web page is currently being displayed.
Microsoft has developed and made available its ActiveX Control Pad (see Figure 50.5) to make it easier to use and configure ActiveX controls within a Web page. The Control Pad does not have quite the capabilities of a program such as Microsoft FrontPage, Netscape Navigator Gold, or Adobe PageMill for WYSIWYG Web authoring. However, it does offer extensive support for creating ActiveX controls, including a WYSIWYG interface for the controls themselves, and automatically generates the HTML code necessary to embed the Control in the Web page.
The ActiveX Control Pad also has extensive support for the HTML Layout Control and offers a Script Wizard to simplify the script-writing procedure (each of these topics will be discussed later in this chapter).
The ActiveX Control Pad is available on the CD-ROMs included with this book, and also can be downloaded from Microsoft's ActiveX Control Pad Web site at http://www.microsoft.com/workshop/author/cpad/. It comes in the form of the self-installing file Setuppad.exe. Simply save this file into a temporary directory on your hard drive and execute it. After the installation procedure is complete, you can execute the ActiveX Control Pad by selecting Start, Programs, Microsoft ActiveX Control Pad, Microsoft ActiveX Control Pad.
When initially executed, the ActiveX Control Pad gives you a screen similar to that shown in Figure 50.5. The skeleton of an HTML file is created, into which you can add HTML code, HTML Layouts, scripts, and ActiveX controls.
An ActiveX Control is embedded in the Web page by placing the cursor in the HTML document listing at the appropriate spot and selecting Edit, Insert ActiveX Control. This prompts the dialog box shown in Figure 50.6. This dialog box will list all of the ActiveX controls that have been installed in your system. You can select which ActiveX Control to embed from this list. (In the example shown, we will select the Microsoft IE 30 Animated Button Control.)
Once the ActiveX control has been selected, two window panes appear on the screen. The first is the Edit ActiveX Control window, which gives a WYSIWYG representation of the current configuration of the ActiveX Control. This is most evident for controls such as the Label control-for hidden controls, this window merely shows the current size for which the control is configured, which may be zero by zero.
The other window is the Properties dialog box for the specific ActiveX control chosen. This dialog box gives you the ability to set all of the necessary parameters of the <OBJECT> and <PARAM> tags needed to configure the ActiveX control. You don't need to know the class ID code, and you don't need to remember the specific parameter names that must be configured. The ActiveX Control Pad does all of that for you. To change a parameter in the Properties box, click the parameter in the dialog box, type in a new value (or select one from a drop-down or popup menu, if one appears), and click the Apply button.
Figure 50.7 shows an example configuration of the Animated Button Control. Keep the following items in mind:
When you are finished entering the parameters for the ActiveX Control Pad, close the Edit ActiveX Control and Properties windows. At this point, the HTML code needed to implement the Control, using the parameters you selected, is automatically generated and placed in the HTML document (see Figure 50.8). The ActiveX Control icon displayed in the left-hand margin indicates the presence of the Control-clicking that icon gives you access again to the Edit ActiveX Control and Properties windows for that Control.
Listing 50.5 shows the completed listing for this example and the resulting Web page, including the animated button, which is displayed in Figure 50.9. As discussed in the last chapter, the Animated Button Control shows different sections of an animation in response to one of four events: default, mouse over the Control, left mouse button clicked and held, or focus on the Control.
Listing 50.5 Anibut.htm-Animated Button Control Using the ActiveX Control Pad
<HTML>
<HEAD>
<TITLE>New Page</TITLE>
</HEAD>
<BODY>
<OBJECT ID="AniBut" WIDTH=293 HEIGHT=73
CLASSID="CLSID:0482B100-739C-11CF-A3A9-00A0C9034920">
<PARAM NAME="_ExtentX" VALUE="7752">
<PARAM NAME="_ExtentY" VALUE="1931">
<PARAM NAME="URL" VALUE="win95.avi">
<PARAM NAME="defaultfrstart" VALUE="0">
<PARAM NAME="defaultfrend" VALUE="0">
<PARAM NAME="mouseoverfrstart" VALUE="0">
<PARAM NAME="mouseoverfrend" VALUE="17">
<PARAM NAME="focusfrstart" VALUE="0">
<PARAM NAME="focusfrend" VALUE="34">
<PARAM NAME="downfrstart" VALUE="18">
<PARAM NAME="downfrend" VALUE="34">
</OBJECT>
</BODY>
</HTML>
The HTML Layout Control is included with the full installation of Microsoft Internet Explorer 3. This Control, based on the draft layout standard of the World Wide Web Organization, is a means for Web authors to create Web pages with precisely positioned text, images, and other Web browser objects. The HTML Layout Control makes use of two files: the HTML file in which it is embedded, and a layout file with the .Alx extension, which defines the positions of the objects in the layout.
The ActiveX Control Pad supports the HTML Layout Control by providing a WYSIWYG interface to the Control itself. Objects can be placed very precisely, aligned with other objects, or aligned to a grid. Also, objects can be layered by specifying their z-order position with respect to one another. Objects can appear in front of or behind other objects.
What can the HTML Layout Control do for a Web author? The HTML Layout Control adds several new capabilities that have not previously been available to Web authors. In the past, a Web author would create the HTML code to implement his or her page, but many of the details of presentation were left to the individual Web browser. Using the Layout Control, a Web author can position graphics, text, and other HTML and ActiveX controls precisely on a Web page. Not only that, but z-level effects can be used to layer images and text on top of one another. This creates a whole new range of effects that are possible within a Web page.
To obtain the HTML Layout Control separate from full Internet Explorer 3 installation, you can download it from the Internet Explorer Additional Components Web site at http://www.microsoft.com/ie/download/ieadd.htm. Like other ActiveX controls, the HTML Layout Control automatically installs itself on your system when it is downloaded.
Like an ActiveX Control, an HTML Layout Control is included in an HTML Web page through the ActiveX Control Pad, via the Edit menu-in this case, by selecting Edit, Insert HTML Layout. You will be asked to specify the name of a new or existing HTML Layout file. Figure 50.10 shows an example of the resulting HTML file.
To configure and use the HTML Layout Control from within the ActiveX Control Pad, click the HTML Layout Control icon shown in Figure 50.10. For a new HTML Layout, this will bring up a new layout window and the HTML Layout Control Toolbox window, which gives a Visual Basic style interface to the process of building a layout. The layout window is a WYSIWYG representation of the objects you place in your HTML layout.
For the remainder of this chapter, we will go through an example of using the ActiveX Control Pad, HTML Layout Control, and the Script Wizard, to create a Web page that has layered HTML elements and interactivity, and animation through scripting.
HTML Layout Control Properties You can bring up the Properties of the HTML Layout Control by double-clicking an empty space in the layout, or by right-clicking and selecting Properties. You should see a Properties box similar to that for the other ActiveX controls, as shown in Figure 50.11.
For our example, we will set the background to a brown color (and also set the background color of the embedding Web page the same color), and name the Control "Layout." We don't need to set the height and width through the Properties box; this is done automatically when we resize the layout window.
Inserting Label Controls Any of the controls represented by icons on the Toolbox window can be inserted into the HTML Layout. Other ActiveX controls can also be installed by putting them into the Toolbox window-the procedure for doing this is shown later in this chapter. For the first step in the design of this HTML layout, we will place the letters "JOD" onto it using the ActiveX Label Control. Rather than placing the three letters in the layout using one Label Control, we will use three, one for each letter. This gives us greater control over the spacing of the letters, and also allows the letters to be accessed and manipulated separately.
After the "J" is configured, we do the same for the "O" and "D," placing them on the HTML Layout Control window. The HTML Layout Control uses the same ActiveX Control Pad Format menu to access the menu options for aligning elements with one another. Unfortunately, among these tools, there is not yet a way to group separate items-this would allow different objects to be grouped and then moved as one. Hopefully, this oversight will be corrected in future versions of the ActiveX Control Pad. Figure 50.12 shows the final placement of the initials in the HTML Layout Control.
| TIP |
By using multiple Label controls to create words, you have greater control over the spacing between characters and can create a tighter look. |
Layering of Elements in the HTML Layout Control For the next step in the design of the HTML Layout Control, we will include another Label Control, this one saying "The House Of...". This Label Control is created the same way as the previous ones we created. The difference is that we want to put this Label Control on top of, and overlapping, the Label controls that have already been placed in the layout window. This is accomplished by positioning the new Label Control (or other object), selecting Format (or right-clicking the object), and selecting Bring To Front. This will place the object above any other objects that it may overlap (see Figure 50.13).
Figure 50.13 : Labels, images, and other controls can be overlapped and layered.
Including and Layering Images The next step in our design is to include a couple of graphics in the layout. What we'd like to do with these graphics, however, is frame them with the "O" and "D" of the initials. The image is placed in the layout by clicking the Image Control button in the Toolbox and dragging it to include a region in the layout window. The Properties box will appear, which allows us to specify the file name of the image, name of the Control, and other items.
Next, we move this image so that it overlays the letter "O" and then size it correctly. Finally, we select Format, Send to Back to put the image behind the letter "O" (see Figure 50.14). Note that this process might need to be iterated a little to get the sizing correct on the image. Also, to precisely position the image, it might be necessary to turn the snap-to-grid mode off.
| NOTE |
Once you send an object to the back, there is no way to select it later if it is completely covered by other objects. Rather than move the covering object out of the way-and later need to replace it-the easiest thing to do is to select the covering object and send it to the back, and then work on the desired object that is now exposed. Once you have made the necessary adjustments, you can send the object to the back again to recover your desired layout. |
We can do the same thing with the other image, this time framing it with the "D," giving the result shown in Figure 50.15. Notice at this point that the layout has all of the visible objects in it that we will be using, so we can also size it (by sizing the layout window) appropriately.
Figure 50.15 : When the final HTML Layout is complete, it can be sized as desired for the Web page.
Viewing the Web Page Before we add anything else to the layout, let's take a look at it in Internet Explorer 3. We can save both the layout and HTML files by selecting the appropriate window in the ActiveX Control Pad and then selecting File, Save or clicking the Save toolbar button. We can then view it in Internet Explorer 3 by loading the HTML file; the result is shown in Figure 50.16.
| NOTE |
The listings for this example will be shown at the end of this chapter, after we have completed it. It is also available on the CD-ROMs that accompany this book. |
Figure 50.17 shows the HTML Layout Control Toolbox window, including the labels that identify the two controls used so far. The controls located under the Standard tab of this window are those included with the ActiveX Control Pad. For the most part, these controls are used to implement user interface elements such as those used in HTML forms.
Under the Additional tab, a few other ActiveX controls are shown (see Figure 50.18). Any of the locally installed ActiveX controls can be installed under either of these tabs by right-clicking the window and selecting the Additional controls item. This prompts the window shown in Figure 50.19-from this list, any of the installed controls can be enabled and placed in either Toolbox tab. To further organize the Toolbox tools, additional tabs can be created. This is performed by right-clicking the Toolbox window in the border around the existing tabs, and selecting New Page.
Figure 50.19 : Other installed ActiveX controls can be selected to appear in the Toolbox window.
For our example, we will use the ActiveX Timer Control, which we will place in the Toolbox. As shown in Figure 50.20, once this Control has been enabled in the Additional controls window, its icon appears in the Toolbox.
To add an ActiveX Timer Control, select the Timer Control icon from the Toolbox, drag it, and then position it in the layout window to represent the Timer Control. Since this is a hidden Control, it doesn't matter what size it is or where it is placed. In the Properties box, make sure the Enabled and Visible parameters are True (the latter doesn't make the Control appear on the Web page, it makes it invisible, which is useful to the rest of the Web browser environment), the ID is set to something appropriate, and the Interval is set to the desired number of milliseconds. In this case, we set it to 1000 so that a Timer event will be triggered once a second.
After the configuration has been completed, the HTML Layout Control window appears, as in Figure 50.21. Again, though the Timer Control appears on this screen, it will not be visible in the Web page.
The ActiveX Control Pad can be used to easily add ActiveX controls to your Web pages. It provides a simple interface to the process of setting the many parameters needed to implement an ActiveX control and allows you to see the results of what the control will actually look at in the Web page. Also, the ActiveX Control Pad offers a similar interface to the HTML Layout control, allowing you to easily create cool layering effects with images, text, and other Web objects.
We're not quite done, though. The last feature of the ActiveX Control Pad makes it easy to bring your pages to life. You can use its Scripting Wizard to add interaction to your Web pages. This is done in the Script Wizard by pointing and clicking to attach actions to events. The Wizard then automatically generates the VB Script code to implement the actions.
The Script Wizard, included with the ActiveX Control Pad, provides an easy way to include scripted interactivity and animation to your Web pages, without you having to program them in VB Script. The Script Wizard has an easy, point-and-click interface that allows events and actions to be tied together; the Script Wizard automatically generates the VB Script code to implement the events and actions. Additionally, if you know some VB Script, you can go into the Script Wizard's automatically generated scripts and make adjustments.
Figure 50.22 shows the Script Wizard in its List View. In this view, all of the objects are listed in the upper-left window pane, along with each of the events that the objects can generate or respond to. For instance, the LetterO Label Control object can respond to all of the events listed beneath it. In the right window pane, all of the objects are listed, along with each of the actions that will affect them. The actions shown in Figure 50.22 are also for the LetterO Label Control.
If we want to create an action for which clicking the "O"
Label Control will turn the letter a different color, all we have
to do is highlight the Click event in the left window
pane, the ForeColor property in the right window pane,
and click the Insert Action button. For this example, a standard
Windows 95 color selection dialog box appears-for other property
types, the appropriate dialog box will appear. Simply select the
desired color and click OK. The desired action will display in
the bottom window pane, as shown in Figure 50.22.
| NOTE |
For this example, clicking the letter "O" Label Control changes the color of that letter. However, there's no reason why clicking "O" can't perform an action on one of the other Label controls, or on any other defined object. |
We can create another action to turn the letter "O"
back to its original black color. At this point, if we save the
HTML and layout files and load them into a Web browser, we should
be able to single-click on the letter "O" and have it
turn orange, with a double-click to return it to black. This isn't
quite the result we got, as explained in the caution below.
| CAUTION |
At the time of this writing, some of the VB Scripts created by the Script Wizard do not operate correctly in Internet Explorer 3. In the previous example, clicking the letter "O" should turn the letter orange. Instead, it generates the script error shown in Figure 50.23. It turns out that the format used by the Script Wizard to specify the orange color was not understood correctly (even though the format for the return to the color black did attach to the double-click event). In order to fix this, select the action in the Script Wizard and go into Code View. The color can be specified in decimal format, as shown in Figure 50.24. |
Once the automatically generated VB Script used to implement these actions is adjusted to overcome the VB Script bug, the Web page works as intended. Clicking the letter "O" causes it to change its color from black to orange.
As we just saw, by using the Script Wizards Code View, it is possible to directly manipulate the VB Scripts attached to events and achieve more sophisticated effects. Continuing our example, we will create an animation based on the ActiveX Timer Control embedded in our HTML Layout.
We will attempt to add an additional period to the "The House Of..." Label Control, every second, until a limit is reached. Then, we will reset it to the original string and start over. (Not a very sophisticated animation, but it demonstrates what can be done using events triggered by the Timer Control.)
First, to achieve this effect, we need to define a couple of global variables that will keep track of our "dot count" and the current string used as the caption for the TheHouseOf Label Control. Global variables can be created by right-clicking the right window pane and selecting New Global Variable. After defining the two global variables DotCount and DotString, we use the Script Wizard to attach actions to the Layout Control's OnLoad event-this will initialize these variables when the Control is first loaded (see Figure 50.25).
However, in the Script Wizard's List View, there is no simple way to point-and-click to animate the TheHouseOf Label Control in the manner described. Therefore, select the Timer Control's Timer event and select the Code View radio button. We can then directly type in the VB Script that we want (see Figure 50.26). Notice that we do not need to add the End Sub at the end of the VB Script subroutine, as the Script Wizard will do that automatically.
Once this "custom" script is entered into the Script Wizard, if we return to List View, we can see that the Script Wizard informs us that a custom action has been entered, and we can no longer manipulate this action without being in Code View. The final listings for the HTML and layout files we have been building are included in the CD-ROMs that accompany this book. The HTML file is shown in Listing 50.6 and excerpts of the layout file are shown in Listing 50.7.
Listing 50.6 Layout.htm-HTML File Using the HTML Layout Control
<HTML>
<HEAD>
<TITLE>JOD's Home Page</TITLE>
</HEAD>
<BODY BGCOLOR=#804040>
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
ID="layout_alx" STYLE="LEFT:0;TOP:0">
<PARAM NAME="ALXPATH" REF VALUE="layout.alx">
</OBJECT>
</BODY>
</HTML>
Listing 50.7 Layout.alx-Excerpts of the HTML Layout Control Layout File
<SCRIPT LANGUAGE="VBScript">
<!--
dim DotString
dim DotCount
Sub Timer_Timer()
If (DotCount < 27) Then
DotCount = DotCount + 1
DotString = DotString & "."
Else
DotCount = 3
DotString = "The House Of..."
End If
TheHouseOf.Caption = DotString
end sub
-->
[other VB Scripts omitted... see the CD-ROMs for full listing]
<DIV BACKGROUND="#804040" ID="Layout" STYLE="LAYOUT:FIXED;WIDTH:452pt;
HEIGHT:178pt;">
<OBJECT ID="BabyPic"
CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"
STYLE="TOP:37pt;LEFT:149pt;WIDTH:85pt;HEIGHT:109pt;ZINDEX:0;">
<PARAM NAME="PicturePath" VALUE="baby.jpg">
<PARAM NAME="BorderStyle" VALUE="0">
<PARAM NAME="SizeMode" VALUE="3">
<PARAM NAME="Size" VALUE="2999;3845">
<PARAM NAME="PictureAlignment" VALUE="0">
<PARAM NAME="VariousPropertyBits" VALUE="19">
</OBJECT>
[other objects omitted... see CD-ROMs for full listing]
</DIV>