by Brian Johnson
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.
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:
This section discusses these components in general and then describes in detail how to use the ActiveX Control Pad.
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.
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.
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.
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.
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.
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:
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>
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.
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.
| 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.
| 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.
| 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.
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.
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.
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.
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.
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 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.
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.
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.
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>
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.
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.
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.
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
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.
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.
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.
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>
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.