Schongar P.VBScript unleashed.1997

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>