Some of the main topics in this chapter are
Controling your Web page's layout Many people are wandering around mumbling something like, "ActiveX--what is ActiveX?" Nobody knows for sure. You can check day to day with Microsoft to learn the latest definition of ActiveX, but you'll soon tire of doing that.
ActiveX is a big umbrella that Microsoft uses to encompass all its Internet-related technology. It's not a product. It includes technologies that programmers can use to build Internet-enabled applications, products that end users can use to access the Internet, and technologies that content developers can use to build terrific Web sites.
Among the most exciting ActiveX technologies are ActiveX controls. These controls let you add diverse functionality to your Web site by inserting a control right in the Web page. You can insert a control that pops open a menu, for example, or you can insert a control that performs a query on a database and displays the result. Thousands of controls are available; you need only find one to fit your needs.
Microsoft provides a basic collection of ActiveX Controls with Internet Explorer. You need only install Internet Explorer to get them. However, Microsoft packages some controls only with the complete installation of Internet Explorer, while providing other controls through its ActiveX Gallery Web site at http://www.microsoft.com/activex/gallery. Each control you find on this Web site has a page that shows you a demo and provides instructions for using it. In some cases, controls on this Web site are commercially available, so you must pay for them.
After you've found a control you want to use, download it onto your computer and place it in the same folder as your Web page. That way, you don't have to turn flips to tell Internet Explorer where to find the control. After downloading the control, you need to insert it in your Web page by using the <OBJECT> tag and possibly associate scripts with it.
You use the <OBJECT> tag to insert a control into your Web page. The <OBJECT> tag identifies the control you're using. When the Web browser opens your Web page, it takes note of the control in the <OBJECT> tag and checks to see whether the user already has it installed. If not, the browser downloads the control and installs it on the user's computer per the instructions you give in the <OBJECT> tag. You also give the control a unique name so that you can control it with scripts (JavaScript or VBScript).
TIP: If you're using Word to build your Web page, you can type the HTML described in this section directly into the page; then format it by using the HTML Markup style you find in the style list.
In its simplest form, the <OBJECT> tag looks similar to this:
<OBJECT
CLASSID="clsid:1A771020-A28E-11CF-8510-00AA003B6C7E"
ID=Track1
WIDTH=400
HEIGHT=2
ALIGN=left>
<IMG SRC="noobject.gif">
<PARAM NAME="Image" VALUE="image.gif">
</OBJECT>
The CLASSID attribute uniquely identifies, on the user's computer, the control you're using. The control's CLASSID is the number that Windows uses to identify that control. You can think of CLASSID as a name that's guaranteed to be unique. In this case, I'm using the View Tracker control. You use the id attribute to identify the control so that you can associate scripts with it. width, height, and align work the same as with other types of tags; they specify the size and location of the control on the Web page. You can add the CODEBASE attribute to the <OBJECT> tag to specify the URL of the control on the Web server. This helps the Web browser find the control if it's not already installed on the user's computer.
The <OBJECT> tag provides a way out for browsers that don't support it. Browsers that do support the <OBJECT> tag ignore anything between <OBJECT> and </OBJECT> that isn't a <PARAM> tag (you learn about this in the next section). Browsers that don't support the <OBJECT> tag ignore it and the PARAM tags and use the content sandwiched between the <OBJECT> and </OBJECT> tags instead. In this case, if the user's Web browser supports the <OBJECT> tag, she sees the View Tracker control inserted into her Web page. Otherwise, she sees an IMAGE.GIF image inserted using the <IMG> tag.
NOTE: Some sources refer to the content sandwiched between the <OBJECT> and </OBJECT> tags as the apology section, as in, "I'm sorry you don't support this object; here, try these tags instead." You can also refer to this content as alternative content and still sound smart.
TIP: Search the Windows 95 or Windows NT Registry for a CLASSID to find the entry that defines the control. Doing so, you can actually track down the control's file.
You need to set the properties of the ActiveX control you put on the Web page to control its appearance or functionality. For example, you need to give the Stock Ticker control the URL of the text file it should use for data. You need to provide the Label control the text it should display. The only way to know for sure which properties each control requires is to check the control's documentation. You can also use the ActiveX Control Pad to set a control's properties, as described in "Introducing the ActiveX Control Pad" later in this chapter.
So how do you set these properties? You use the <PARAM> tag to assign a value to a named property within the control. This works very much like Visual Basic property sheets. Note that the <PARAM> tag has no closing </PARAM> tag. This tag has many attributes, but you frequently need to use only the NAME and VALUE attributes:
<PARAM NAME=ENABLED VALUE=TRUE>
In this case, the value you're setting is called ENABLED, and the value you're setting it to is TRUE.
The following is an example of inserting an ActiveX control. The CLASSID attribute specifies the Popup Menu control, and each <PARAM> tag adds a menu item to the menu.
<OBJECT
ID=iemenu1
CLASSID="clsid:0482B100-739C-11CF-A3A9-00A0C9034920"
WIDTH=1
HEIGHT=1
ALIGN=left
HSPACE=0
VSPACE=0
>
<PARAM NAME="Menuitem[0]" VALUE="First Choice">
<PARAM NAME="Menuitem[1]" VALUE="Second Choice">
<PARAM NAME="Menuitem[2]" VALUE="Third Choice">
<PARAM NAME="Menuitem[3]" VALUE="Fourth Choice">
<PARAM NAME="Menuitem[4]" VALUE="Fifth Choice">
</OBJECT>
Now, we're getting to the meat of the matter. You've learned how to insert ActiveX controls into your Web page by using the <OBJECT> tag. Now you need to learn how to interact with those controls by using a scripting language. In the sections that follow, you learn how to handle the events that are triggered by a control. You also learn how to get and set a control's properties from your scripts. Incidentally, the scripting language of choice is VBScript for these examples. The JavaScript versions of these examples, however, aren't much different.
ActiveX controls act like and quack like other elements on a form. You interact with each ActiveX control's properties, methods, and events exactly the same way you interact with a form's elements. You handle a control's events when the control needs attention, you call a control's methods, and you get and set the control's properties.
In a Web page, an object causes events in response to the messages the object receives from Windows. When you click inside an object, Windows sends a message to the object telling it that you've clicked. In turn, the object causes a click event, and the browser looks for a special script procedure or function called an event-procedure to handle that event.
You can use a couple of different methods of handling events for forms and elements (event-procedures, inline event-handlers, and so on), but there's really only one way to handle an ActiveX control's events: using the FOR and EVENT attributes of the <SCRIPT> tag.
The FOR and EVENT attributes let you associate a script with any named object in the HTML file and any event for that object. Take a look at the following:
<SCRIPT LANGUAGE="VBScript" FOR="btnButton" EVENT="Click">
<!--
window.alert( "Ouch! You clicked on me." )
-->
</SCRIPT>
<OBJECT ID="btnButton" WIDTH=96 HEIGHT=32
CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
<PARAM NAME="Caption" VALUE="Click Me">
<PARAM NAME="Size" VALUE="2540;847">
</OBJECT>
This defines a button (with an ID of btnButton) that executes the script when the user clicks it. The <SCRIPT> tag contains the FOR and EVENT attributes that define the object and event associated with that script. FOR="btnButton" EVENT="Click" says that when an object named btnButton triggers the Click event, every statement in this script is executed. The HTML comment tags keep older browsers from displaying the unintelligible script as content on the Web page.
Some events pass arguments to the event handlers. How do you handle arguments when you're handling the event by using the FOR/EVENT syntax? This way:
<SCRIPT LANGUAGE="JavaScript" FOR="btnButton" ÂEVENT="MouseMove(shift, button, x, y)">
The enclosed script can then use any of the parameters passed to it by the MouseMove event.
TIP: After you've specified a language in your HTML file, you don't need to do it again. Your browser defaults to the most recently used language in the HTML file. You can put <SCRIPT LANGUAGE="VBScript"></SCRIPT> at the beginning of your HTML file one time and forget about it. The rest of the scripts in your file will use VBScript.
You've just seen the Click event. ActiveX controls support a wide variety of other events. The only way to know for sure which events a control supports is to consult the control's documentation or the ActiveX Control Pad's documentation.
NOTE: Often, the easiest way to see the events, properties, and methods that an ActiveX control supports is to insert the control into a Web page by using the ActiveX Control Pad and open the Script Wizard. The Script Wizard lists all the control's events in the left pane. It lists all the control's properties and methods in the right pane.
Many objects let the user input data. For example, the user can select an item from a list, type text in an edit box, or click a check box. What good are objects if you can't get and set their value? Not much. You read the value of most elements by using the object's value property in an assignment or logical expression. The following example assigns the text that the user typed into the txtTextBox control to a variable named str and then compares the text that the user typed into txtTextBox with the word Howdy:
str = txtTextBox.value If txtTextBox.value = "Howdy" Then
You can also set the value of an element by assigning a string to the element's value, as follows:
txtTextBox.value = "New Contents of the Text Box"
The VALUE property is the default property for most ActiveX controls that accept user input. Thus, you can use the control's value in an expression without explicitly using the VALUE property, such as:
alert txtTextBox txtTextBox = "New Contents of the Text Box"
There's certainly a better way to add ActiveX controls to your Web page: Use the ActiveX Control Pad. This free product from Microsoft makes short work of adding controls to a Web page. You get it through Microsoft's Site Builder Workshop at http://www.microsoft.com/workshop/author/cpad/. Figure 55.1 shows the Control Pad's HTML editor with an HTML file in it.
The Editor window shows you only the contents of your HTML. Save the file to disk and open it in your Web browser to preview what the Web page looks like.
TIP: The Control Pad uses VBScript by default. If you want to use JavaScript, you need to set it up to do so. Choose Tools, Options, Script from the main menu and select JavaScript. The Script Wizard will now generate JavaScript language scripts instead of VBScript language scripts.
The HTML file you see in Figure 55.1 contains an object. You click the object icon next to it to change the properties of that object. You click the script icon, next to the script shown in the figure, to change the script using the Script Wizard.
You can type any text you want in the Editor window. You can add forms to the file, for example. You can also add everyday text and tags, such as headings, lists, and so on. If you're really into punishment, you can add objects to your HTML by typing them in the Editor window. Considering the features you'll learn in the next section, you're strongly discouraged from doing the preceding steps.
Position your mouse pointer to the point at which you want to insert an object and right-click. Choose Insert ActiveX Control to reach the dialog box shown in Figure 55.2. The Insert ActiveX Control dialog box enables you to pick one of the many controls available on your computer.
Select one of the controls in the list and close it. The Control Pad then opens the Object Editor and property sheet for the control, as shown in Figure 55.3. You can change each of the control's properties by using the property sheet shown in the figure. You can also adjust the size of the control by grabbing one of its handles in the Object Editor and dragging it. When you close both windows, Control Pad saves your changes to the HTML file.
Not all the controls shown in this list will work within a Web page.Select a property, change its value at the top of the property sheet, and click Apply to save your changes.
Using a control in this manner is called using it at design time. You're designing how the control is going to look on your Web page. The user uses the control at runtime because all he's doing is using a page built with that control. Many controls require that you have a license to use them at design time. The controls you see in this chapter do not require a license, however, because they all come with Internet Explorer.
TIP: You can change the control's properties in the HTML (<PARAM> tags) by using the Control Pad's text editor. The next time you open that control's property sheet, the property sheet will reflect any changes you've made.
The Script Wizard provides two different ways you can edit scripts: List view and Code view. List view is a bit easier to use. Click the Script Wizard button in the toolbar to open the Script Wizard (see Figure 55.4). Then select the List View option at the bottom of the window.
You associate an object's event with another object's methods and properties. Select an event on the left pane of the wizard. Choose a method or property in the right pane. When you click the Insert Action button, the Script Wizard prompts you for the value of the property or for any parameters you want to pass to a method. You can rearrange the order of the actions in the bottom pane of the Script Wizard. Close the Script Wizard, and it adds your script to the HTML file.
In most cases, List view is all you ever need to create exciting Web pages.
NOTE: The Control Pad creates a script block with the FOR and EVENT attributes for each event you handle. Alternatively, you can write a VBScript or JavaScript function that handles an event the way you want and then associate an event with the function by using the Script Wizard.
If you're more comfortable with the traditional programmer's view of life (optimistic about everything), you can use the Script Wizard's Code view (see Figure 55.5). This works just like List view, except you don't see a list of associated events and actions in the bottom pane. You instead see the actual code the Script Wizard creates. Click the Script Wizard button in the toolbar to open the Script Wizard. Then click the Code View button at the bottom of the window, add your script, and close the Script Wizard.
You have to use Code view if you want to use compound statements such as If in your scripts.
TIP: Keep your Web browser running with the Web page you're working on open in it. Then you can save the changes, flip to the browser, and refresh the Web page to see your changes while you're working in Control Pad.
Microsoft created the ActiveX HTML Layout control to give you precise two-dimensional control over the layout of your Web page. You can place an object at a specific coordinate, for example. You can also overlap objects and make parts of some objects transparent so that objects in the background show through.
The HTML Layout control is similar to all the other objects you've seen in this chapter. You insert the HTML Layout control into your Web page by using the <OBJECT> tag.
The HTML Layout control is a container--this is the primary concept you need to understand about this object. It's an object you put in your Web page that can contain other objects. Think of the HTML Layout control as a form. It works just like forms you create in Visual Basic. You drop an HTML Layout control on the Web page and then arrange objects within it in any way you want.
W3C to the Rescue
In the meantime, W3C (World Wide Web Consortium) is developing a standard for HTML that will give you complete control over how you position objects in a Web page. You'll be able to specify the exact horizontal and vertical coordinates of each object on a Web page. Until its release, though, use the HTML Layout control.Bear in mind that the HTML Layout control is a temporary solution that will go away eventually. When the W3C defines its standard and browsers such as Internet Explorer and Netscape support it, you won't need to use the HTML Layout control to have 2-D placement of objects.
Microsoft has committed to providing a utility that you can use to convert your ActiveX HTML Layout control layouts to the new HTML standard for 2-D layouts when that standard becomes available. You can get more information about this standard at http://www.w3.org/pub/WWW/TR/WD-layout.html.
A layout has two components. First, you insert the actual HTML Layout control into your Web page by using the <OBJECT> and <PARAM> tags. This looks similar to the following:
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="example" STYLE="LEFT:0;TOP:0"> <PARAM NAME="ALXPATH" REF VALUE="file:example.alx"> </OBJECT>
The other component is the layout itself. You store a layout in a separate text file that has the ALX file extension. The ALXPATH property that you see in the preceding example tells the HTML Layout control where to find this file. You can set this property to any valid URL, including a Web server. You do have to copy the ALX file onto the Web server with all your other files. You learn more about the contents of the ALX file later in this chapter.
You don't have to insert the <OBJECT> tag or create the ALX file by hand because the ActiveX Control Pad does it automatically. To add the HTML Layout control, right-click at the location where you want to add the control and choose Insert HTML Layout. The Control Pad asks you for a file name. Type the name of the ALX file and close the dialog box.
After you've inserted an HTML Layout control into your Web page, you can open it for editing. This allows you to place other ActiveX objects inside the HTML Layout control. Click the Layout button (in the margin next to the HTML Layout control), and the Control Pad opens the layout in the Layout Editor.
The Layout Editor lets you drag controls from the toolbox to the layout. Then you can rearrange the controls, write event handlers for controls, and so on. When you close the Layout Editor, the Control Pad saves your layout to the ALX file.
You drag a control from the toolbox and drop it on the layout in the Layout Editor. After you've added a control to the layout, you can change its properties by using the control's property sheet. You can also resize the control by dragging its handles.
TIP: You can create control templates in the Layout Editor. Create a new page in the toolbox, right-click a tab, and choose New Page. Drag a control from your layout onto the new page. You can then use this template at any time by dragging it onto a layout.
You can add scripts to a layout just as you add scripts to an HTML file. You use these scripts to handle the events fired by the objects in the layout. Click the Script Wizard button in the Control Pad's toolbar. In this case, the Script Wizard works exactly as you learned earlier in this chapter.
NOTE: ActiveX controls that you put on an HTML Layout control have many more events, properties, and methods than the ActiveX controls you use directly on the Web page. Also, when you open the Script Wizard in an HTML Layout control, you don't see the events, properties, and methods for ActiveX controls on your Web page or the browser's object model.
When you create a form by using the HTML Layout control, the user can't tab between each field if you haven't set up the tab behavior for each field. First, double-click each control in the layout and set the TabStop property to True and TabKeyBehavior to False (if the control supports this). Then, change the TabIndex property for each control in the layout. Set TabIndex to 0 for the first control in the tab order, set TabIndex to 1 for the next control in the tab order, and so on.
TIP: You can leave the property sheet open all the time. When you select a different object on the layout, the property sheet changes to the one for that object.
TROUBLESHOOTING: Many older browsers don't support ActiveX Controls or scripting, which can lead to unexpected interpretations of your Web page. It's essential to provide alternative content for each <OBJECT> tag that you insert into your Web page. That is, in addition to <PARAM> tags within the <OBJECT> container, include plain HTML tags that other browsers will display when they don't understand the <OBJECT> or <PARAM> tags. Also, surround the scripts you put in a <SCRIPT> tag with the beginning and ending HTML comment tags (<!-- and -->) so that older browsers don't mistakenly display the scripts as content.
© Copyright, Macmillan Computer Publishing. All rights reserved.