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. |
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.
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.
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.
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.
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.
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. |
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. |
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:
| 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. |
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.
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. |
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. |
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. |
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:
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.
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:
| 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. |
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:
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:
| 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. |
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: