|  | Click Here!

Search the site:
EXPERT SEARCH

| Programming Languages
| Databases
| Security
| Web Services
| Network Services
| Middleware
| Components
| Operating Systems
| User Interfaces
| Groupware & Collaboration
| Content Management
| Productivity Applications
| Hardware
| Fun & Games

EarthWeb sites
Crossnodes
Datamation
Developer.com
DICE
EarthWeb.com
EarthWeb Direct
ERP Hub
Gamelan
GoCertify.com
HTMLGoodies
Intranet Journal
IT Knowledge
IT Library
JavaGoodies
JARS
JavaScripts.com
open source IT
RoadCoders
Y2K Info

# Chapter 8

# The ActiveX Control Pad

by Brian Johnson

CONTENTS

- Taking a Tour of the ActiveX Control Pad
  - Text Editor
  - Object Editor
  - Page Editor
  - Script Wizard
- Using ActiveX Controls
- Creating VBScript with the Script Wizard
- Using HTML Layouts
- Looking at the Available Controls
- Adding Controls to the Toolbox
- Creating Interactive Content
- Using VBScript with ActiveX Layouts
- Review

At a certain point, the potential complexity of the content you can create using ActiveX controls becomes so great that you need specialized tools to easily do what you want. To assist you in the creation of complex ActiveX content, Microsoft has released a tool that enables you to insert and script ActiveX controls in HTML. The name of that tool is the ActiveX Control Pad.

In this chapter, you'll look at the ActiveX Control Pad and how you can use it to create ActiveX-enabled HTML pages. You'll also learn how to use the ActiveX Control Pad to insert and script ActiveX controls. And, finally, you'll learn about HTML layout files and how you can use them to create precise control layouts in Web documents.

## Taking a Tour of the ActiveX Control Pad

The ActiveX Control Pad provides an editing environment that makes it easy for you to create or edit HTML files that contain ActiveX objects or ActiveX layouts. The ActiveX Control Pad is a Windows 95 application that runs in Windows 95 or Windows NT. Figure 8.1 shows the ActiveX Control Pad application. This section gives you a quick tour of the application and then discusses how you can use it to create ActiveX-enabled HTML documents and layouts.

Figure 8.1 : The ActiveX Control Pad application.

The ActiveX Control Pad consists of four major components:

- Text editor
- Object editor
- Page editor
- Script wizard

This section discusses these components in general and then describes in detail how to use the ActiveX Control Pad.

### Text Editor

The ActiveX Control Pad text editor is basically the same tool you get with Windows Notepad. A significant difference is that the ActiveX Control Pad editor doesn't suffer from the 64KB file size limit that Notepad does. Unfortunately, other than creating a skeleton HTML file by default when opening a new file, there aren't any added HTML helpers such as the ones found in commercial HTML tools. You might find it easiest to create your base HTML files in a program like Microsoft FrontPage and then insert your ActiveX controls into the HTML using the Control Pad.

### Object Editor

The object editor makes it easy for you to insert ActiveX controls into your HTML pages. The most difficult thing about using ActiveX controls usually is getting the CLSID numbers right in your HTML code. In addition, you usually need to look up and include the parameters of each control you put into your documents. The object editor automatically places the correct CLSID number into HTML and makes setting parameter values visual and simple.

### Page Editor

The World Wide Web Consortium specification for two-dimensional layouts describes methods you can use to place 2-D material into HTML pages. The page editor of the ActiveX Control Pad enables you to create HTML pages that behave and look very much like stand-alone applications created with a programming tool such as Microsoft Visual Basic. In addition to layout capabilities, the page editor contains its own set of ActiveX controls that you can use in special HTML files called HTML Layouts. HTML Layout files have an ALX extension and are embedded into standard HTML files.

### Script Wizard

The Script Wizard automates the creation of VBScript and JavaScript code in HTML or ALX files. The Script Wizard gives you easy, graphical access to the methods, properties, and events of ActiveX controls and ActiveX layout components. Figure 8.2 shows the Script Wizard in Code view. Users of Visual Basic will notice that the editing window is very similar to the editor in VB. You'll see later how an ActiveX control and VBScript code were added to the HTML page.

Figure 8.2 : VBScript in the Script Wizard.

## Using ActiveX Controls

Adding ActiveX controls to your HTML documents is fairly straightforward. You first need to open the HTML document in the ActiveX Control Pad and place the cursor in your HTML code at the point where you want the control to appear. You then choose Edit | Insert ActiveX Control and select the control that you want from the dialog that appears. Figure 8.3 shows the Insert ActiveX Control dialog. You can select any ActiveX control that's registered on your machine.

Figure 8.3 : Inserting an ActiveX control in HTML with the ActiveX Control Pad.

After you select a control, it appears in its own window along with a Properties dialog for the control. Figure 8.4 shows a Label control in a window. You can size the control inside the window and change the other properties in the Properties dialog. Closing the window containing the control places the control code in the HTML file.

Figure 8.4 : Editing control properties.

Figure 8.5 : Clicking the icon opens the ActiveX control.

After you have your control in place, you can open it again in the object editor by clicking the Object button next to the HTML code in the editor. (See Figure 8.4.)

Using these steps to insert ActiveX controls in your HTML documents is much faster and is more efficient than trying to manually insert a control, complete with CLSID number and parameters. The next section takes a look at how the ActiveX Control Pad can help you generate your VBScript code.

## Creating VBScript with the Script Wizard

After you have your controls in place, you can use the Script Wizard to create the VBScript code that will control the ActiveX objects. The Script Wizard is a tool that enables you to graphically manipulate and use the properties, methods, and events for ActiveX objects in HTML. To create a VBScript code block using the Script wizard, you first place your objects in HTML by choosing Edit | Insert ActiveX Control. You then invoke the Script Wizard by clicking the Script Wizard icon (the one that looks like a scroll at the end of the toolbar) or by choosing Tools | Script Wizard.

The Script Wizard window contains three panes. The first, Select an Event, lists the events available to the programmer based on the controls loaded in the document. Each element is listed in this window with its events shown in outline form.

The second pane, Insert Actions, offers properties and methods that you can access and manipulate. Like the Select an Event pane, Insert Actions is in outline form, and you can expand and collapse the objects listed to access their events.

The final pane in the Script Wizard is where the generated code is displayed and edited. Two radio buttons appear at the bottom of the window that enable you to select List View or Code View. You can see what your program is going to do by running through it in List View, but if you want to create more than very simple scripts, you'll want to use Code View.

Let's create a VBScript page that contains a Label control that changes after it's clicked.

To create a scripted event for the Label control using the Script Wizard, follow these steps:

1. Create a new page and insert a Microsoft IE30 Label Control.
2. In the Properties window, set the Angle property of the label to 90 and change the caption property to "My Cool Label." Set the font size to 35 and resize the control in the preview window so that it fits.
3. Run the Script Wizard. Open the IeLabel1 node in the Select an Event pane and then select click.
4. In the Insert Actions pane, open the IeLabel1 node and double-click caption. An input box appears.
5. In the input box, type `I've been clicked!`
6. Open the HTML file in Internet Explorer and click the label. You'll see the caption change.

This isn't a very heavy duty example, but it does show you some of the power of the ActiveX Control Pad. Without this tool, you would have to write all the code yourself. Take a look at Listing 8.1 to see how much actual code is generated.

> Listing 8.1. Code generated from the Label control example.

>     <HTML>

>     <HEAD>

>     <TITLE>New Page</TITLE>

>     </HEAD>

>     <BODY>

>         <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub IeLabel1_Click()

>     IeLabel1.Caption = "I've been clicked!"

>     end sub

>     -->

>         </SCRIPT>

>         <OBJECT ID="IeLabel1" WIDTH=100 HEIGHT=368

>          CLASSID="CLSID:99B42120-6EC7-11CF-A6C7-00AA00A47DD2">

>             <PARAM NAME="_ExtentX" VALUE="2646">

>             <PARAM NAME="_ExtentY" VALUE="9737">

>             <PARAM NAME="Caption" VALUE="My Cool Label">

>             <PARAM NAME="Angle" VALUE="90">

>             <PARAM NAME="Alignment" VALUE="4">

>             <PARAM NAME="Mode" VALUE="1">

>             <PARAM NAME="FillStyle" VALUE="0">

>             <PARAM NAME="FillStyle" VALUE="0">

>             <PARAM NAME="ForeColor" VALUE="#000000">

>             <PARAM NAME="BackColor" VALUE="#C0C0C0">

>             <PARAM NAME="FontName" VALUE="Arial">

>             <PARAM NAME="FontSize" VALUE="35">

>             <PARAM NAME="FontItalic" VALUE="0">

>             <PARAM NAME="FontBold" VALUE="0">

>             <PARAM NAME="FontUnderline" VALUE="0">

>             <PARAM NAME="FontStrikeout" VALUE="0">

>             <PARAM NAME="TopPoints" VALUE="0">

>             <PARAM NAME="BotPoints" VALUE="0">

>         </OBJECT>

>     </BODY>

>     </HTML>

## Using HTML Layouts

HTML layouts are an exciting new addition to the World Wide Web. These 2-D layouts give programmers precise control over the placement of objects, such as ActiveX controls, on the page. The ActiveX layout then is inserted into a standard HTML document and is displayed much like a floating frame. The layout itself is contained in a text file with an ALX extension. Using the ActiveX Control Pad to create layout files is very much like creating programs in Visual Basic. This section takes a look at how it's done.

You create a layout by choosing File | New HTML Layout. This opens an empty layout area and a toolbox. To add items to the layout, click the control in the toolbox and drag the item onto the layout with the mouse. You also can drag and drop controls from the toolbox to the layout. Figure 8.6 shows an ActiveX layout with a couple of controls added. You set the properties for the controls that you place on the page by double-clicking the control or by clicking the control and choosing Properties. After you set the controls and properties, you can run the Script Wizard to generate code for the layout.

Figure 8.6 : Creating a layout with the Control Pad.

The amount of control that layouts give you is really quite extraordinary. The rest of this chapter looks at HTML layouts and how you can tap some of the potential for your own Web documents.

## Looking at the Available Controls

The HTML Layout control has its own set of ActiveX objects that you can use in your layouts. Because these controls are different than any of the controls discussed so far, they are covered here. In cases in which an HTML Layout control has an intrinsic control counterpart, those characteristics unique to the HTML Layout control are discussed.

Tables 8.1 through 8.3 list the properties, methods, and events common to most of the HTML Layout controls. The size of the properties list alone gives you an idea of the richness of these controls.

Table 8.1. Common HTML layout properties.

Property | Description
`Accelerator` | Accelerator character for object
`Alignment` | Position of control relative to caption
`AutoSize` | Object sized to caption automatically
`BackColor` | Background color to object
`Caption` | Caption visible to user
`ControlTipText` | Hint text for object
`Enabled` | Control is enabled
`Font Object` | Font object for caption property
`ForeColor` | Color of caption text
`GroupName` | Group that contains control
`Height` | Height of object in points (1/72 inch)
`LayoutEffect` | Determines movement of object
`Left` | Left position of object in layout
`Locked` | Object locked into position
`MouseIcon` | Icon when mouse is over object
`MousePointer` | Sets pointer for object
`Name` | Name of object
`OldHeight` | Previous height of object in points
`OldLeft` | Previous left position in points
`OldTop` | Previous top position in points
`OldWidth` | Previous width of object in points
`Parent` | Name of parent object of control
`Picture` | Bitmap displayed on object
`PicturePosition` | Location of picture
`SpecialEffect` | Visual style of object
`TabIndex` | Index number in tabbing order
`TabStop` | Object is in the tabbing order (Boolean)
`Top` | Top position of object in layout
`TripleState` | Allows a True/False/Null selection
`Width` | Width of object in points
`Value` | Value for object

A few properties mentioned here deserve some explanation. First of all, the `Font` `Object` property refers to an object that describes the font used to display the `Caption` property or the `Value` property for the various controls.

The `Font` object has the properties `Bold`, `Italic`, `StrikeThrough`, `Underline`, `Weight`, and `Name`. You easily can specify the value of a font used for a control by setting these attributes individually and then accessing the `Font` object property by name, as shown in this code:

>     Dim BigFont

>     BigFont.Bold = True

>     BigFont.Size = 36

>     Label1.Font = BigFont

Remember that you can change the font of a control at design time by using the Properties dialog. Clicking the button adjacent to the value entry box for the font displays a Font dialog. You then can choose the font and style for the control.

`ControlTipText` refers to the small pop-up message that appears when the mouse pointer is held over a control at runtime. You should use this control only when necessary. You usually don't need to specify a value for this property in Label controls, for example. Labels, by definition, are self-explanatory. You might want to add a `ControlTipText` value to a button that contains only a picture or a `Picture` control with an associated `Click` event. Just try to imagine where your users might be looking for help.

The `TripleState` property refers to items that can contain a null value in addition to `True` or `False`. An example of this is when two or more radio buttons are grouped and none are selected.

Table 8.2. HTML layout control methods.

Method | Description
`Move` | Moves the item in the layout
`SetFocus` | Gives the item the focus
`Zorder` | Specifies the depth of the object in the layout

You can call the `Move` method with this argument:

>     Object.Move(Left, Top, Width, Height, Layout)

`Left` and `Top` refer to the position of the control within the layout. `Width` and `Height` refer to the size of the control. `Layout` refers to the parent's layout event and whether that event is initiated after the move.

The `SetFocus` method gives the calling control the focus in the layout.

The `Zorder` in the layout refers to the 3-D placement of controls within the layout. Setting the `Zorder` value of a control to `0` brings the control to the front. Setting this value to `-1` sends the control to the back. You can set or change this value at design time by right-clicking the control and choosing Bring to Front or Send to Back.

Table 8.3. HTML layout control events.

Event | Description
`AfterUpdate` | Event occurs after a change
`BeforeDragOver` | Event occurs before a dragover event
`BeforeDrop` | Event occurs before a drop event
`BeforePaste` | Event occurs before a paste event
`BeforeUpdate` | Event occurs before an update event
`Change` | Object has changed
`Click` | Object is clicked
`DblClick` | Object is double-clicked
`Enter` | Before object gets focus
`Error` | Error occurs
`Exit` | After object loses focus
`KeyDown` | Key code and Shift state pressed
`KeyPress` | Key code pressed
`KeyUp` | Key code and Shift state released
`MouseDown` | Mouse button is held down
`MouseMove` | Mouse is moved over object
`MouseUp` | Mouse button is released

The events for objects in HTML layouts are very rich. You can capture keys and Shift states the user presses in addition to standard events such as `Click` and `DblClick`.

Key and Shift state refer to the keycode of the key clicked by the user and the Shift state or Ctrl key being held down during that event. Suppose that you write code to capture the keys pressed when a particular object in the layout has focus. It might look something like this:

>     Sub object_KeyDown(KeyCode, Shift)

This procedure gives you the numeric code for the key pressed and returns information on the Shift state. If Shift is held down, the value of `Shift` is `1`. If the Ctrl key is held down, the value of `Shift` is `2`. Finally, if the Alt key is held down, the value of `Shift` is `4`. To retrieve the ANSI character that was returned, you can use the value returned from the key press event.

Where appropriate, this section points out added methods, properties, and events for the controls that follow. You should use the Help file for the latest version of the ActiveX Control Pad to learn about additions and corrections.

#### `OptionButton`

You use the `OptionButton` control to select a single item from a group of items. This control works just like the intrinsic `OptionButton` control. A single option usually is selected from a group of these controls. The item selected is determined through the `Value` property of the control; `-1` is `True` or selected, and `0` is `False` or not selected.

#### `TabStrip`

You use the `TabStrip` control to place content into layers accessed through tabs or buttons. You can choose between the two by using the Style option in the Properties dialog. You can set the placement of the tabs by choosing the Tab Orientation option. You can choose Top, Bottom, Left, and Right.

You set up your tabs by selecting a tab, right-clicking, and choosing Insert, Delete, Rename, or Move. Insert creates a new tab item. Delete removes the currently selected tab. You can change the caption, accelerator key, and hint text by choosing Rename. Finally, you can change the order of tabs by choosing Move. Getting your tabs straight is half the battle when you're using this control in your layouts. After you have everything set up, you just place the controls you want to display on the page that's in the front.

Figure 8.7 shows the `TabStrip` control in an HTML Layout. The controls on `TabStrip` control pages are displayed when the visible property for them is set to `true`. You can do this in the `Change` event for the `TabStrip` control.

Figure 8.7 : Using the TabStrip control in the ActiveX Control Pad.

#### `ScrollBar`

The `ScrollBar` control in a GUI environment such as Windows 95 generally is used to view areas larger than the display area. You also can use scrollbars to visually change numeric values. You do this by setting the `Min` and `Max` properties or setting the `Value` property. You can set the degree of change when the scrollbar is used with the `LargeChange` property. You can display the `ScrollBar` control horizontally or vertically. The event associated with the `ScrollBar` control is the `OnScroll` event.

#### `Spinner`

The `Spinner` control lets your user change a value using only a mouse. It's very handy when used to change values in a particular range. Like the `ScrollBar` control, the `Spinner` control has a `Min` and `Max` value. The increment of change is set through the `SmallChange` property.

#### `Label`

The `Label` control is very much like the `Microsoft IE30 Label Control` discussed earlier in this book. The major difference is that you can't change the display angle of this Label control, making it more like the standard VB Label control. This control is still very useful in ActiveX layouts, though. One property of note is the `BackStyle` property, which you can set to Opaque or Transparent. This is important when you want to make the label look like it's just letters over a background image, or you want it to have an opaque background for easier reading. Another very handy property is `Border`, which can be turned on or off. Figure 8.8 shows various labels in an HTML layout with different properties set for each.

Figure 8.8 : Various labels in an ActiveX layout.

#### `Image`

`Image` controls are very important in layouts because they not only display image information-they can be moved as well. This makes it possible to create `Shockwave`-like content using only ActiveX controls and layouts. `Shockwave` is a plug-in/ActiveX control from Macromedia that enables the use of Macromedia Director movies over the Web. The capability to control the movement of images on-screen is essential for creating truly compelling interactive content.

The movement of images inside a layout depends on three things: drawing, placement of the image, and timing. Take a look at Listing 8.2. It's an ActiveX layout that contains a command button, a timer, and an `Image` control. It uses the command button to start the timer and the `Timer` event to position the `Image` control. Figure 8.9 shows the two visible controls in the layout.

Figure 8.9 : An image movement example in Internet Explorer.

> Listing 8.2. Moving an image in an ActiveX layout.

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub CommandButton1_Click()

>     IeTimer1.Enabled = -1

>     end sub

>     -->

>     </SCRIPT>

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub IeTimer1_Timer()

>     Image1.Height = Image1.Height + 1

>     end sub

>     -->

>     </SCRIPT>

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub Image1_MouseDown(ByVal Button, ByVal Shift, ByVal X, ByVal Y)

>     IeTimer1.Enabled = False

>     end sub

>     -->

>     </SCRIPT>

>     <DIV STYLE="LAYOUT:FIXED;WIDTH:515pt;HEIGHT:277pt;">

>         <OBJECT ID="Image1"

>          CLASSID="CLSID:D4A97620-8E8F-11CF-93CD-00AA00C08FDF"

>          STYLE="TOP:0pt;LEFT:0pt;WIDTH:66pt;HEIGHT:50pt;ZINDEX:0;">

>             <PARAM NAME="PicturePath" VALUE="diamond.bmp">

>             <PARAM NAME="AutoSize" VALUE="-1">

>             <PARAM NAME="BorderStyle" VALUE="0">

>             <PARAM NAME="Size" VALUE="2328;1746">

>             <PARAM NAME="VariousPropertyBits" VALUE="19">

>         </OBJECT>

>         <OBJECT ID="CommandButton1"

>          CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

>          STYLE="TOP:173pt;LEFT:41pt;WIDTH:83pt;HEIGHT:33pt;TABINDEX:0;ZINDEX:1;">

>             <PARAM NAME="Caption" VALUE="CommandButton1">

>             <PARAM NAME="Size" VALUE="2911;1164">

>             <PARAM NAME="FontCharSet" VALUE="0">

>             <PARAM NAME="FontPitchAndFamily" VALUE="2">

>             <PARAM NAME="ParagraphAlign" VALUE="3">

>             <PARAM NAME="FontWeight" VALUE="0">

>         </OBJECT>

>         <OBJECT ID="IeTimer1"

>          CLASSID="CLSID:59CCB4A0-727D-11CF-AC36-00AA00A47DD2"

>          STYLE="TOP:124pt;LEFT:8pt;WIDTH:50pt;HEIGHT:33pt;TABINDEX:1;ZINDEX:2;">

>             <PARAM NAME="_ExtentX" VALUE="1746">

>             <PARAM NAME="_ExtentY" VALUE="1164">

>             <PARAM NAME="Interval" VALUE="1">

>             <PARAM NAME="Enabled" VALUE="False">

>         </OBJECT>

>     </DIV>

This example doesn't do that much. The VBScript code added is only three lines. It's fairly amazing, though, when you consider standard HTML. You simply can't move pictures around like this without special tools or plug-ins. ActiveX layout makes it fairly simple.

#### `HotSpot`

The `HotSpot` control is invisible to the end user, but it's an extremely useful tool when you're working with the type of content typical of layouts. Like image maps, hot spots enable you to write code in response to user interaction that wouldn't normally have its own events.

To use the `HotSpot` control, you just draw a rectangle with the control anywhere in your layout in the Control Pad. You then can access the methods, properties, and events of the control through the Script Wizard and the Properties dialog. Most often, you'll use this control with an `Image` control and the `Click` event. You'll find the `MouseOver` event to be quite useful also.

#### `TextBox`

The `TextBox` layout control works just like its intrinsic counterpart. You can use this control to retrieve data from your user. You can retrieve data from a text box through the `Text` property or the `Value` property.

For example:

>     MyString = Text1.Text

is the same as

>     MyString = Text1.Value

The other properties, methods, and events are similar to the intrinsic `Edit` control, but the HTML layout `TextBox` control provides a much larger set from which to work. These are all accessible from the Properties dialog and the Script Wizard.

You define the type of the `TextBox` control with the `Multiline` and `Wordwrap` properties. If `Multiline` and `Wordwrap` are set to `True`, you have a control that functions like a multiline entry field. Setting the `Autosize` property to `True` changes the size of the control depending on the size of its contents.

The HTML layout `TextBox` control is more like the VB `TextBox` control than the intrinsic `TextBox` control. It offers a few methods that are extremely handy if you're using the control for any sort of editing. The `SelText` method enables you to insert text into the `TextBox` control. If text inside the box is selected, it is replaced by the `SelText` value; otherwise, text is inserted at the cursor.

Finally, you'll notice a `SpecialEffect` property for the `TextBox` control. This property enables you to define the display characteristics for the control. Figure 8.10 shows TextBox controls with the various settings for the `SpecialEffect` set.

Figure 8.10 : An HTML layout containing various styles of TextBox controls.

#### `ListBox`

The HTML layout `ListBox` control is like the `TextBox` control because it has many value-added features you won't find in the intrinsic `ListBox` control. The `SpecialEffect` property is part of most of the HTML layout controls, and by using this property with all your controls, you can create a layout with a distinctive, consistent style. Besides the visual enhancements, there are features that make the `ListBox` control more useful and customizable.

One of the features of the HTML layout `ListBox` that really adds value to the control is the capability to divide the contents of the `ListBox` into columns. This is done by setting the value of the `Column` property. The contents of the `ListBox` are added and retrieved using a column, row value. You can add many items to a `ListBox` all at once by using a 2-D array.

Listing 8.3 contains the code for adding columns of data to a listbox. You need to set the ColumnCount property as in Figure 8.11 to make this work.

Figure 8.11 : A listbox with columns in HTML layout.

> Listing 8.3. Adding an array to a listbox.

>     <SCRIPT LANGUAGE="VBScript">

>     <!--

>     Sub CommandButton1_Click()

>     Dim ListArray(2, 5)

>     ListArray(0, 0) = "1"

>     ListArray(0, 1) = "2"

>     ListArray(0, 2) = "3"

>     ListArray(0, 3) = "4"

>     ListArray(0, 4) = "5"

>     ListArray(1, 0) = "Apples"

>     ListArray(1, 1) = "Bananas"

>     ListArray(1, 2) = "Grapes"

>     ListArray(1, 3) = "Oranges"

>     ListArray(1, 4) = "Pears"

>     Listbox1.List() = ListArray

>     ListBox1.Column() = ListArray

>     end sub

>     -->

>     </SCRIPT>

#### `ComboBox`

The `ComboBox` control is used like the `ListBox` control, but it has the added advantage of being more compact. It's called a `ComboBox` because a value can be retrieved from the `TextBox` portion of the control.

#### `CheckBox`

The `CheckBox` control is similar to the `RadioButton` control. The major difference is that the checkbox usually answers a simple yes/no question instead of being a choice among items. A checked checkbox returns a value of `-1`; an unchecked box returns `0`.

#### `CommandButton`

The `CommandButton`'s default event is the `Click` event. The button is fairly customizable, and you can use the features of the `CommandButton` control to create some interesting effects. If you set the `Wordwrap` property to `True`, you can display multiple lines of text on the button. One very useful property is `TakeFocusOnClick`, which enables you to write code that uses button clicks and keeps focus on the control where the user is entering information.

#### `ToggleButton`

The `ToggleButton` control works as a visual switch, like a `RadioButton` or `CheckBox` control. The `ToggleButton` control is sticky; when the button is clicked by the user, it stays down to indicate that it is in a state of selection. You'll recognize this control if you use a program such as a word processor, where the Bold button would be down to indicate that the characters typed will be bold until the button is clicked again.

The `Value` property determines whether the control has been activated or selected. If this property is `True` or `-1`, the `ToggleButton` is in its down state. If it is `False` or `0`, the `ToggleButton` is not selected. To use `ToggleButton`, you'll usually check for the state of the button and write different code for each state, as in this example:

>     If ToggleButton1.Value = True then

>     Do Something

>     Else

>     Do Something Else

>     End If

#### `WebBrowser`

The `WebBrowser` control enables you to insert HTML files into your HTML layout files. You do this through the `CodeBase` property for the `WebBrowser` control. This control works like an embedded frame, and can be controlled through scripting in a similar manner.

## Adding Controls to the Toolbox

You can add any ActiveX control you want to the HTML layout toolbox. To add a control, right-click the toolbox and select additional controls. From there, you can select the ActiveX controls you want to use. Figure 8.12 shows a control being added through the Additional Controls dialog.

Figure 8.12 : Selecting a control to add to the toolbox.

In addition to adding controls to the toolbox, you can add pages to the toolbox so that you can organize your controls. To add pages to the toolbox, right-click outside the tab area and choose New Page.

The new page is inserted into the toolbox with the default name `New Page`, as shown in Figure 8.13. To change the name, right-click the tab for the page and choose Change Name.

Figure 8.13 : The Control Pad toolbox with a new page added.

Now that you've seen how to customize the toolbox, keep in mind that one of the best ways to use custom toolbox pages is for storing controls that you've customized. After you place a control on a page, you can set the properties for the control and save those properties by dropping the control back on the page in the toolbox.

By customizing controls and saving pages of controls, you can keep HTML layout designs consistent across Web pages. Suppose that you make a Label control that uses a particular font and color style to display the name of your company. Instead of resetting the properties for the control each time you use it, you just drop in your saved control.

## Creating Interactive Content

At first glance, it might look like there isn't much that you can do with an HTML layout that you can't do in plain HTML and VBScript. As far as things like simple forms go, that's probably true. The strength of HTML layouts comes in the flexibility and maneuverability of the controls and objects in the layouts. You can't change an image in HTML without reloading the entire page, for example. It's very simple, though, to change an image in an HTML layout.

The one thing that's very easy to do when working with HTML layouts is to forget that what you create will be running and loading across the Internet. This means that you need to consider the size and availability of the controls that you're using in your layouts. You also need to keep in mind the size of the graphics used in the layout. People probably won't mind spending a couple of extra minutes downloading a game or a useful utility layout, but they might not care for a large layout that's simply embedded in your Web pages for decoration.

## Using VBScript with ActiveX Layouts

You probably should think of your HTML layouts as you would HTML documents in floating frames. If you think about your layouts this way, you'll have a better understanding of how things are working in the HTML page when it comes to scripting the layouts and controls on your pages.

When a layout is inserted into an HTML document, it has a `Name` property. Using the `ID` property, you can control the content of the layout from outside the layout, in the hosting HTML document. You do this by calling the object you want to access through its parent:

>     Parent.LayoutID.ContolID.Property = NewValue

Listing 8.4 uses this technique to change the value of a control inside an HTML layout from outside the layout. The HTML layout used is called `remote.alx`. The `remote.alx` file contains only one `TextBox` control with the ID `TextBox1`. The `On_Click` event for the Submit button, `MyButton`, in the HTML file contains the code that changes the `Value` property of `remote.TextBox1`.

> Listing 8.4. Changing the value of a layout control from outside the layout.

>     <HTML>

>     <HEAD>

>     <TITLE>Remote property change</TITLE>

>     </HEAD>

>     <BODY>

>     <H1>Remote control</H1>

>     <HR Color=Blue>

>     This example demonstrates changing the property of an item in an HTML layout

>     from outside the layout file. In this case, text is inserted into a TextBox control in an

>     HTML layout from an intrinsic button control.

>     <OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"

>     ID="remote" STYLE="LEFT:0;TOP:0">

>     <PARAM NAME="ALXPATH" REF VALUE="file: remote.alx">

>     </OBJECT>

>     <INPUT TYPE=SUBMIT NAME=MyButton VALUE="Send Text">

>     <SCRIPT LANGUAGE=VBScript>

>     Sub MyButton_OnClick

>     remote.TextBox1.Value = "This worked!"

>     End Sub

>     </SCRIPT>

>     </BODY>

>     </HTML>

## Review

In this chapter, you learned about the parts of the ActiveX Control Pad. You saw how to use the ActiveX Control Pad to insert ActiveX objects. You examined the Script Wizard and how you can use it to generate VBScript code. Finally, you looked at HTML layouts and how they can be created, scripted, and manipulated in your own HTML files.

| Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details.