Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Special Edition Using Jscript

chapter 19 -- The ActiveX Control Pad

Chapter 19

The ActiveX Control Pad

CONTENTS


In Chapter 12, "Scripting and ActiveX," you learned how to insert ActiveX controls into your Web pages using the OBJECT and PARAM tags, but doing this by hand is nasty. First, you have to find the controls CLSID. Then, you have to type the OBJECT by hand and, worse yet, set all those properties using those PARAM tags. If you're inserting more than a few ActiveX controls in your Web page, you'll quickly become frustrated.

The ActiveX Control Pad (from Microsoft, of course) makes the process a whole lot easier. It has three primary features for JScript developers, as follows:

Tip
The ActiveX Control Pad contains the complete VB Script reference and a complete HTML reference. It also contains a reference for all of Microsoft's ActiveX controls and the Internet Explorer Object Model. Unfortunately, it doesn't include a JScript reference. To access these references, choose Help from the Control Pad's main menu. Choose either VB Script Reference, HTML Reference, or Control Pad Help Topics.

Downloading and Installing the ActiveX Control Pad

Before you can take advantage of all this wonderment, you need to download the ActiveX Control Pad onto your computer. It's a free download available through the Microsoft's Site Builder Workshop at http://www.microsoft.com/workshop/author/cpad/download-f.htm.

Click Download (in the middle of the Web page) to download the self-extracting, self-installing file that contains the ActiveX Control Pad, SETUPPAD.EXE, into a temporary directory on your hard drive. Then run SETUPPAD.EXE and follow the instructions you see on the screen.

After you've installed the Control Pad, you need to set it up to use JScript. Run the Control Pad. Then, choose Tools, Options, Script from the main menu. Select _JavaScript, and click OK to save your changes. The Script Wizard (described later in this chapter) will now generate JScript language scripts instead of VBScript language scripts.

Getting Acquainted with the HTML Editor

Figure 19.1 shows you the Control Pad's HTML editor with an HTML file in it. You can open many HTML files in Control Pad because it's an MDI (Multiple Document Interface) application. You switch between each open HTML file using the Window menu.

Figure 19.1 : The Editor window shows you only the contents of your HTML. Open the HTML file in your Web browser to preview what the Web page looks like.

The HTML file you see in Figure 19.2 contains an object. You see an <OBJECT> tag. You also see the object icon in the margin of the Editor window. Click this icon to change the object next to it in the Editor window. Just below the object, you see a script. You can also see the script icon in the margin of the Editor window. You can edit the script using the Script Wizard by clicking this button.

You can type any text you like 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 learn in the next section, however, I strongly discourage you from doing that.

Placing Objects into Your HTML File

Inserting an object into an HTML file is easy. Position your mouse pointer to the point at which you want to insert an object, and right-click. Choose Insert ActiveX Control, and you'll see a dialog box similar to the one shown in Figure 19.2. The Insert ActiveX Control dialog box lets you pick one of the many controls that are available on your computer.

Figure 19.2 : The usable ActiveX controls are called things like Microsoft ActiveX something or Forms 2.0Something.Don't use the objects whose names end with Ctl.

Select one of the controls, such as the Label Object, and click OK. The Control Pad opens up the Object Editor and property sheet for the control, as shown in Figure 19.3. You can change each of the control's properties 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.

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, however, because all she is doing is using a page built with that control. Many controls require that you have a license to use it at design time. The controls you see in this chapter don't require a license, however, because they all come with Internet Explorer.

Figure 19.3 : Select a property, change it at the top of the property sheet, and click Apply to save your changes.

After you've made your changes to the control's property sheet, close both windows. After you close both windows, the Control Pad inserts the <OBJECT> and <PARAM> tags into your HTML file, which match how you filled in the property sheet.

You can change the properties in the HTML 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 made.

Tip
The Control Pad has its own way to format the <OBJECT> and <PARAM> tags. You might as well make all of your tags consistent with the way the Control Pad formats them, as shown in this chapter's figures, so that your scripts will be easier to read.

Editing Scripts Using the Control Pad's Script Wizard

The Visual Basic and Visual C++ integrated development environments make the process of writing code as pleasant as possible. They provide text editors, graphical editors, and other tools to make managing objects much easier. If you've ever used these environments, you'll appreciate the Control Pad's features that make editing scripts easier.

The Control Pad's Script Wizard helps you point and click your way to some terrific scripts. The best part about it is that you don't have to know anything about the browser's object model; a control's properties, methods, and events; or even the runtime functions the browser provides. The Script Wizard displays them for you, so that you can automatically insert statements in your scripts that use them. Point and click-literally.

To call it a wizard is a bit misleading, however, because it doesn't act or quack like other wizards in Windows 95. It does give you a smooth interface for editing the events of each object in your HTML file, though. In fact, it lets you edit an object's events in two different ways, as follows:

The following sections show you how to use both methods for editing event handlers in your HTML file. You can't use the Script Wizard to edit other types of scripts, though, such as support functions and subprocedures. That is, you can't use the Script Wizard to edit a function that's not an event handler. You can create event handlers that call your JScript functions, however.

Tip
Are you unsure which properties, methods, and events a particular object in your HTML file supports? Click the Script Wizard button in the toolbar, and select that object in the left pane to see its events. Select that object in the right pane to see its properties and methods.

List View

The Script Wizard's List view lets you edit an event handler with the greatest of ease. Click the Script Wizard button in the toolbar to open the Script Wizard. Then click the List View button at the bottom of the window. You see the window shown in Figure 19.4.

Figure 19.4 : In most cases, the List view is all you ever need to create exciting Web pages .

Here's how it works. You associate an object's event with another object's methods and properties by taking the following steps:

  1. Expose the events for an object in the left pane by clicking the plus sign (+) next to the object. Select an event that you want to handle. You can select the window object's onLoad event, for example.
  2. Expose the methods and properties for an object in the right pane by clicking the plus sign (+) next to the object. Select a method or property that you want to associate with the event you selected in the left pane.
  3. Click the Insert Action button below the bottom pane. If you select a property, Control Pad prompts you for the value you want to assign to that property in the event handler. If you pick a method that has arguments, Control Pad prompts you for the arguments you want to use. If you pick a method that doesn't have arguments, Control Pad doesn't prompt you for anything at all. After you've answered any questions that Control Pad asks, it inserts the association in the bottom pane.
  4. You can rearrange the order of the actions in the bottom pane by selecting an action, and clicking the up and down arrow buttons to move it around in the list. You can also remove an action by selecting it and clicking the Delete Action button.
  5. When you're happy with the way you're handling that particular event, you can move onto another object and another event, or close the Script Wizard by clicking OK.

Note
The Control Pad creates a script block with the FOR and EVENT tags for each event that you handle. Alternatively, you can write a JScript function that handles an event the way you want, and then associate an event with the function using the Script Wizard.

Code View

If you're more comfortable with the traditional programmer view of life (optimistic about everything), you can use the Script Wizard's Code view. This works just like the List view, except that you don't see a list of associated events and actions in the bottom pane. You see the actual code the Script Wizard creates, instead.

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. You see the window shown in Figure 19.5.

You can insert actions into the bottom pane of the Code view just as you do in the List view. That is, you select an event in the left pane and select an action in the right pane. This view doesn't have an Insert Action button, however, so you double-click the action in the right pane to add it to the bottom pane.

After you've added a few actions to the event handler by double-clicking them in the right pane, you can edit the code in any way you like. You can add or change the arguments for each method you use, add conditional and looping statements, or whatever you want.

Figure 19.5 : You have to use the Code view if you want to use compound statements such as If in your scripts.

When you're happy with the way you're handling that particular event, you can move on to another event, or close the Script Wizard by clicking OK.

Tip
Keep your Web browser running with the Web page you're working on open in it. Then, you can flip to the browser and refresh the Web page to see your changes while you're working in Control Pad.

Controlling Page Layout with the HTML Layout Control

Web browsers position the content of an HTML file in a stream. That is, the Web browser reads the contents of an HTML file-left to right, top to bottom-and displays its contents in the order it encounters it. The only real control you have over the placement of an HTML file's content is through tags such as TABLE, PRE, and so on. Even these require that you understand the stream orientation of HTML.

On the other hand, 2-D placement gives you complete control over the positioning of objects on a Web page. You've seen 2-D placement in many different kinds of products: Visio, Micrografx Designer, and most publishing tools give you complete placement control. You can position text so that it wraps around a graphic object in Microsoft Publisher, for example. In fact, the exception to 2-D placement seems to be HTML and the Web browsers that display it.

Microsoft created the ActiveX Layout Control expressly for this purpose. It gives you complete control over how you place objects on a 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 Layout Control is similar to all the other objects you've seen in this book. See Chapter 12, "Scripting and ActiveX," for more information about using objects. You insert the Layout Control into your Web page using the OBJECT tag. It's a container, however, that can host other objects. You'll learn more about this later in this chapter.

W3C to the Rescue
In the meantime, W3C (World Wide Web Consortium) is developing a standard for HTML that will give you compete control over how you position objects in a Web page. That is, you will be able to specify the exact horizontal (x) and vertical (y) positions (coordinates) of each object on a Web page. The problem is that they haven't finished their work yet, so, you need to use the Layout Control for now.
You should know that the Layout Control is a temporary solution. It goes away eventually. Thus, when the W3C defines its standard and browsers such as Internet Explorer and Netscape support it, you won't need to use the Layout Control to have 2-D placement of objects.
Microsoft has committed to providing a utility that you can use to convert your ActiveX 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.

Understanding the Layout Control

The 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. If you think of your Web page as a grocery bag, the controls you put in it are the groceries. With a Layout Control, you're going to put your groceries inside plastic bags (the Layout Control); then you drop the plastic bag into your grocery bag. Bet you didn't think of the Layout Control as produce, did you?

Another way to think of the Layout Control is as a form. It works just like forms you create in Visual Basic or in Visual C++. You drop a Layout Control on the Web page, and then you can arrange objects within it in any way you like. You can, in fact, use the Layout Control to create virtually any form using the Visual Basic form editor.

Following are some of the other things the Layout Control brings to the party:

Note
If you don't really need to control the exact location of the objects you're putting on a Web page, don't use the Layout Control. It comes with a heavy price (download time, compatibility with other browsers, and so on) that's hard to justify when you're just trying to be cute.

Inserting the Layout Control into an HTML File

A layout has two components. First, you insert the actual Layout Control in your Web page using the <OBJECT> and <PARAM> tags. This tag looks very much like this: 

<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 saw in the previous example tells the layout control where to find this file. You can set this property to any valid URL, including a Web server. You'll 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, however, because the ActiveX Control Pad does it automatically. This tag simply loads an ActiveX object into your Web page that defines a region in which you can place other ActiveX objects or a layout. You don't use the insert ActiveX Object menu item; you do use the Insert HTML Layout menu item-by taking the following steps:

  1. Position your mouse pointer where you want to use a Layout Control, right-click, and choose Insert HTML Layout.
  2. When the Control Pad asks you for a file name, type the name of the file in which you want to store the layout, and click Open. If the file doesn't exist, Control Pad will ask you if you want to create it.

As a result, the Control Pad inserts an OBJECT tag in your HTML file. Take a look at Figure 19.6-it shows what the tag looks like.

Editing the Layout

After you've inserted a Layout Control into your Web page, you can open it for editing. This allows you to place other ActiveX objects inside the Layout Control. Click the layout button (shown in Figure 19.6), and the Control Pad opens the layout in the Layout Editor, as shown in Figure 19.7.

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.

Understanding What's in the ALX File. As you've seen, the Control Pad stores layouts in separate files with the .ALX file extension. It gives the name of a layout file to the Layout Control using the ALXPATH property.

Figure 19.6 : Insert the Layout Control using a plain old OBJECT tag.

Figure 19.7 : The Layout Editor is very similar to VB's Form Editor.

The contents of the layout file aren't too mysterious. Each layout region begins and ends with the DIV and /DIV tags. You can give a region a name using the ID attribute, and you specify the style of the region using the STYLE attribute. Following is what the tag looks like: 

<DIV STYLE="LAYOUT:FIXED;WIDTH:240pt;HEIGHT:180pt;">
</DIV>

What you do between the DIV tags is your business. You can insert objects into the layout by putting an OBJECT tag inside the layout's DIV tag. Inserting an object into a layout is not very different from inserting an object directly into your HTML file. The only difference is that you can specify the location of the object using the properties inherited from the Layout Control. Following is what a label control looks like in a layout file: 

<DIV STYLE="LAYOUT:FIXED;WIDTH:423pt;HEIGHT:265pt;">
    <OBJECT ID="MyLabel" CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
         ÂSTYLE="TOP:83pt;LEFT:74pt;WIDTH:72pt;HEIGHT:18pt;ZINDEX:0;">
        <PARAM NAME="Caption" VALUE="MyLabel">
        <PARAM NAME="Size" VALUE="2540;635">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="0">
    </OBJECT>
</DIV>

You don't need to worry about understanding or setting the DIV tag's attributes or the attributes of the objects you put in the Layout Control, though, because the Control Pad does it for you. I don't recommend editing a layout by hand anyway. It just doesn't make sense considering the tools that are available to you.

Note
You can also put scripts in an ALX file. You can put them before or after the <DIV> tag, but not inside the tag, however.

Adding Controls to a Layout. Adding controls to a layout is easy. You drag a control from the toolbox and drop it on the layout in the Layout Editor. The following steps show you how to create a simple form using the Layout Editor:

  1. an HTML Layout Control into an HTML file and click the Layout button next to it. You'll see the Layout Editor, as shown in Figure 19.8.
  2. Drag a control from the toolbar and drop it onto the layout. Change the control's ID and any other properties that make sense for how you're using the control. If the control's property sheet isn't open, you can open it quickly by double-clicking the control. This property sheet is the same one you learned about earlier in this chapter.
  3. Repeat step 2 for each control you want to add to your layout.
  4. Save the layout by clicking the Save button. Then, open the Web page in your browser by double-clicking the HTML file in Explorer. Figure 19.9 shows you what a layout looks like in Internet Explorer.

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.

Figure 19.8 : You now have two files: an HTML file and an ALX file.

Figure 19.9 : It works! It works!.

Adding Scripts to Your Layout. You can add scripts to a layout just as you would add scripts to an HTML file. You use these scripts to handle the events fired by the objects in the layout. You can validate the user has entered valid text in each field, for example. Click the Script Wizard button in the Control Pad's toolbar. In this case, the Script Wizard works exactly as you learned it would in the previous chapter.

Note
ActiveX controls that you put on a 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.

Changing a Layout's Tab Order. When you create a form using the HTML Layout Control, the user can't tab between each field. That's because you haven't set up the tab behavior for each tab box. We'll deal with that nonsense here. First, double-click each control in the layout, and set the TabStop property to True and TabKeyBehavior to False (if the control supports it). 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.

Learning by Doing

As always, the best way to learn something like the Control Pad is to try an example. This section contains a few examples that'll help you become an expert at using Control Pad to create classy Web pages. Here are the examples you find in this section:

Hello Jerry

Remember the example in Chapter 12, "Scripting and ActiveX"? You'll create this example using the ActiveX Control Pad. In this example, the user types her name in a textbox, clicks the Display button, and receives a warm greeting from the browser. In Chapter 12, you had to insert the OBJECT and PARAM tags into the HTML file yourself-kind of a pain in the browser. Creating this Web page using the Control Pad is a snap, however, using the following steps:

  1. Open the ActiveX Control Pad and create a new HTML: Click the New button, choose Internet Document (HTML) from the list, and click OK.
  2. Position the cursor inside the BODY tags, and insert a Microsoft Forms 2.0 TextBox control. That is, right-click in the area inside the BODY tags, choose Insert ActiveX Control, choose Microsoft Forms 2.0 TextBox from the list, and click OK. You'll see the Control Editor, as shown in Figure 19.10.

    Figure 19.10: You learned about the Control Editor in "Placing Objects into Your HTML File" earlier in this chapter.
  3. In the Control Editor, select the TextBox control and stretch it by dragging the control's handles so that it's long enough to accept a user's name. In the property sheet, change the ID property of the TextBox control to txtName. Then close the Control Editor. Your HTML file should look similar to Figure 19.11.

    Figure 19.11: Get used to the way the Control Pad formats OBJECT and PARAM tags, because you can't change it.
  4. Position the cursor inside the BODY tags again, and insert a Microsoft Forms 2.0 Command Button control. That is, right-click in the area inside the BODY tags, choose Insert ActiveX Control, choose Microsoft Forms 2.0 CommandButton from the list, and click OK.
  5. In the Control Editor, select the Command Button control. In the property sheet, change the ID property to cmdDisplay and change the Caption property to Display. Then close the Control Editor. Your HTML file should look similar to Figure 19.12.

    Figure 19.12: The Control Pad inserts more PARAM tags than you did in Chapter 12, "Scripting and ActiveX" .
  6. Add a script that handles the button's Click event, displaying a message box when the user clicks it. Click the Script Wizard button in the toolbar, and change to the Code view. Select the Click event for the cmdDisplay object in the left pane, double-click the alert method for the Window object in the right pane, and change window.alert(msg) to window.alert("Hello " + txtName) in the bottom pane. Your Script Wizard window should look very similar to Figure 19.13. Click OK to save your changes.

Note
In the Script Wizard, the only way to see absolutely all of the methods and properties for a control is to change to the Code view. The List view hides many methods and properties of most controls.

  1. Save your HTML file, and open it in Internet Explorer 3.0. Your Web page should look something like Figure 19.14.

Figure 19.13: After you've edited an event using the Script Wizard's Code view, you can't go back to the List view.

Figure 19.14: You can resize the Command Button Control so that it looks better beside the TextBox control.

Pop-Up Help (Tooltips)

If you're not sure what tooltips are, try this little experiment: Pop open WordPad and hold the mouse pointer over one of the buttons in the toolbar. What do you see? A little window that displays the purpose of the button. Microsoft calls these tooltips. You can use tooltips on your Web pages to provide additional help to users when they hold their mouse pointer over a link. To add tooltips, take the following steps:

  1. Open the Control Pad and create a new HTML file. Add a link to the body of the HTML file.
  2. Add an ID to the link using the ID attribute for anchors. That is, add ID=Name to the A tag. Figure 19.15 shows what this example looks like with a link that contains an ID of lnkHome.

    Figure 19.15: You can also add tooltips for images, objects, and forms.
  3. Insert the Microsoft IE30 Popup Windows Control to your HTML file (if you don't have this control, see Chapter 12, "ActiveX and Script," to learn how to get it. That is, right-click above the link you added in step 2, choose Insert ActiveX Control, select Microsoft IE30 Popup Windows control from the list, and click OK. Change its ID to popTip using the control's property sheet. Change its size so that it has no height and no width. Close the Control Editor.
  4. Add the following script to your HTML file. This handles the MouseMove event for the link called lnkHome. In this case, it pops up the Popup Window with the contents of LNKHOME.HTM found on my Web site. You can replace this with an HTML file on your Web site as described in the next step.

    <SCRIPT LANGUAGE="JavaScript" FOR="lnkHome" EVENT="MouseMove(Button,
    Shift, X, Y)">
    <!--
    popTip.Popup( "http://rampages.onramp.net/~jerry/lnkHome.htm", 1 );
    //-->
    </SCRIPT>
  5. Create a file called LNKHOME.HTM that contains the formatting and text you want to display in the tooltip. You need to provide only the HTML and BODY tags, as well as the text you want to display in the Window. You can use the BODY tag's TOPMARGIN, LEFTMARGIN, BGCOLOR, and TEXT attributes to change the size of the tooltip window and its colors. Here's what the file I created looks like:

    <HTML>
    <BODY TOPMARGIN=0 LEFTMARGIN=0 BGCOLOR=YELLOW TEXT=BLACK>
    Click this link to go to Jerry's home page
    </BODY>
    </HTML>
  6. Save your new HTML file and load it in Internet Explorer 3.0. Move the mouse pointer over the link, and you should see a small window pop up that contains the words Click this link to go to Jerry's home page as shown in Figure 19.16. When you click the mouse pointer outside the pop-up window, the pop-up window goes away.

    Figure 19.16: The Popup Window control only works with files using HTTP. That is, you can't use it with local files.