Web Page Programming: ActiveX and VBScript

Visual Basic for Applications Unleashed

Chapter 21—Web Page Programming: ActiveX and VBScript

Working with HTML Layouts

HTML gives you only the most rudimentary control over the layout of your Web pages: You can align things to the left, right, or center; you can use the <PRE> tag to make the browser honor white space; and you can use tables to align text and graphics. However, if you've ever worked with a page layout program, or if you've ever added graphical elements to a document or worksheet, you know that precise control over the placement of objects is crucial for getting the best results.

NOTE: LEARNING HTML
If you're not familiar with HTML, head for Appendix D, "An HTML Primer," to learn the basics.

Happily, there is a way to position your ActiveX controls with precision: by using HTML layouts. An HTML layout is actually an ActiveX control that acts as a container for other controls. The idea is that you insert ActiveX controls into the layout control and then use its fine-grained X- and Y-coordinate grid to position the controls with precision. Then you insert the layout control into your Web page. The browser will show the controls that are embedded within the layout exactly as you placed them.

The other advantage of working with layouts is that they save you from reinventing the wheel. For example, suppose that you need to repeat a particular arrangement of ActiveX controls over many pages. Instead of inserting each control into all these pages, you would create a single layout control that encompasses the ActiveX components you need, and then you would just insert this layout into each page.

Creating an HTML Layout

To create HTML layouts, the ActiveX Control Pad offers the HTML Layout Control window. To display it, select File | New HTML Layout (or press Ctrl-E). As you can see in Figure 21.5, you get a new Layout window along with a Toolbox that contains buttons for various ActiveX controls. To insert a control, click it in the Toolbox, move the mouse pointer to where you want the control to appear, and drag the mouse pointer to make the control the size and shape you want. To adjust the properties for a control, double-click the control to display the properties sheet.

Screen shot of the HTML Layout Control window
Figure 21.5.
Use the HTML Layout Control window to create an HTML layout.

The controls you insert are much like the graphic elements you add in other programs. This means that you use the same basic techniques to format and work with the controls:

To select a control, click it.
To select multiple controls, either hold down Ctrl and click each one, or use the mouse to drag a selection box around the controls.
To move a control, place the mouse pointer over the control, hold down the left mouse button, and drag the mouse.
To size a control, click it and then drag the selection handles.

The Format menu boasts a number of commands that come in handy for positioning and sizing multiple controls at once. Most of these commands perform the same function as the equivalent commands in the Visual Basic Editor, so I'll just review them quickly here:

Align: Use the cascade menu that appears to line up the controls relative to each other. For example, choosing Left aligns the selected objects on their left edges.

Make Same Size: The cascade menu commands that appear let you make the selected objects the same size. In other words, all the other objects are sized the same as whatever object currently has the focus. (The object that has the focus is the one with the white selection handles, as shown in Figure 21.6.)

Screen shot of the HTML Layout Control window

Figure 21.6.
The HTML Layout Control with a couple of objects added.

Size: In the cascade menu, select To Fit to size the selected objects to fit the data inside them. Select To Grid to size the objects to the nearest grid points.

Horizontal Spacing: The commands on this cascade menu determine the left and right spacing between the selected objects.

Vertical Spacing: The commands on this cascade menu determine the top and bottom spacing between the selected objects.

Snap to Grid: When this command is activated, you can only move and size the objects along the grid. For more precise control over each object, deactivate this command.

Another technique you can implement with an HTML layout control that's impossible with HTML tags is overlapping multiple objects. The Format menu also has a few commands for managing overlapped objects:

Send To Back: If the current object sits on top of another object, selecting this command will move it behind the object. If the object overlaps multiple objects, this command moves the object behind all the other objects.

Move Backward: If the current object sits on top of another object, selecting this command will move it behind the object.

Move Forward: If the current object is behind another object, selecting this command will move it in front of the object.

Bring To Front: If the current object is behind another object, selecting this command will move it in front of the object. If the object is overlapped by multiple objects, this command moves the object in front of all the other objects.

Inserting an HTML Layout

When you're done, save the layout object and then close the Layout window. The ActiveX Control Pad saves the data into an .ALX file. This is a text file that contains the <OBJECT> and <PARAM> tags for the controls you added to the layout.

To insert the layout control into your Web page, position the cursor where you want the control to appear and then select Edit | Insert HTML Layout. In the dialog box that appears, highlight the .ALX file and click Open. The ActiveX Control Pad inserts a new <OBJECT> tag that refers to the layout control, as shown in Figure 21.7. If you need to make changes to the layout, use either of the following techniques:

Move the cursor between the <OBJECT> and </OBJECT> tags and select Edit | Edit HTML Layout.
Click the Edit HTML Layout button that appears to the left of the layout's tags (see Figure 21.7).

Figure 21.7.
An HTML layout is an ActiveX control with its own <OBJECT> specification.

Figure 21.8 shows how the layout appears when you display the page using Internet Explorer.

Screen shot of an HTML layout in Internet Explorer
Figure 21.8.
When you open the page in a browser, the objects embedded in the layout are displayed exactly as you laid them out.

Setting HTML Layout Defaults

The ActiveX Control Pad has a few default settings for the HTML layout control. To modify these settings, select Tools | Options | HTML Layout. You'll see the HTML Layout Options dialog box, shown in Figure 21.9. Here's a rundown of the available controls:

Grid Settings: The spinners in this group determine the number of pixels between each grid marker. You can set the Vertical Spacing and Horizontal Spacing.

Show Grid: This check box toggles the grid on and off.

Snap To Grid: This check box toggles the Format | Snap To Grid command on and off.

Click OK to put the settings into effect.

Screen shot of the HTML Layout dialog box
Figure 21.9.
Use this dialog box to set a few default options for the HTML Layout window.