DTH=385>Triggered when the Last method is called and passes the last message accessed by the client. MessageSize Occurs in response to a call to the MessageSize method. The size of the message is passed. ProtocolStateChange When the state of the protocol changes, this event is fired. Quit Occurs after a call to the Quit method. Reset When a Reset call is successful, this event is triggered. StateChanged When the State of the POP control changes, this event is thrown. TimeOut Occurs when a given event fails to occur within the time period specified in the TimeOut property.

Chapter 31 -- The ActiveX Control Pad

Chapter 31

The ActiveX Control Pad

CONTENTS

other systems apply to the PS/2, although some repairs are conducted differently. For example, because each PS/2 motherboard includes a built-in floppy disk controller, if you determine that this controller is defective (using the same troubleshooting techniques as for the earlier systems), you must replace the entire motherboard. In contrast, on a PC system with the same problem, you replace only the floppy controller card, a much less costly operation.

While the ActiveX Control Pad has no general support for WYSIWG HTML editing, inserting ActiveX Controls and adding client-side scripting like VBScript is straightforward.

You'll recognize many of the elements of the user interface from other applications you use like Lotus 1-2-3, or Microsoft Word. Most of the common items are there including the File toolbar for saving, creating, and opening new HTML files. However, there are also a couple of elements that you probably haven't seen before. The first of these two new items is found on the toolbar (the second button from the right) that uses a scroll as its icon. Pressing this button will bring up the Script Wizard. The second difference is in the document window. Take a look at the document window in Figure 31.1. Notice the gray vertical bar along the left side of the screen.

Since you'll be inserting objects and scripts into the HTML documents in this window, the margin bar makes keeping track of where objects and scripts are inserted in the document easy. The scroll icon indicates the start of a script. Pressing the scroll button in the margin bar opens the Script Wizard (which you'll use in a moment) and loads the appropriate script. ActiveX objects are indicated in the margin bar by a small cube icon. This kind indicates the start of an <OBJECT> declaration in HTML. Pressing the ActiveX object button in the gray margin bar brings up a window containing the object and a window containing its property sheet. The Control Pad uses a special icon for insertions of HTML layouts. HTML layouts are indicated in the margin bar by a small icon containing the letter A, a circle, and a square. Pressing this button brings up the HTML Layout Editor and its associated toolbar.

Figure 31.1: Objects and scripts in the Control Pad margin bar.

Creating an HTML Layout

The ActiveX Control Pad is not an HTML editing environment, per se. There are no built-in tools to make the general HTML coding easier. However, ActiveX includes a control called the HTML Layout control which is used for building forms, laying out toolbars, or making reusable elements in your Web pages. The ActiveX Control Pad provides a Visual Basic-like interface for creating HTML layouts. To create an HTML layout, follow these steps:

  1. Start the ActiveX Control Pad.
  2. Select File, New HTML Layout from the menu bar. This brings up two windows-the Layout window and the Toolbox windows. Your screen should resemble Figure 31.2.

    Figure 31.2: Creating an HTML layout.

  3. Try adding a command button to the layout. From the toolbox, select the command button tool. Then place your cursor over the Layout window and it changes to cross hairs. Press the left mouse button and draw in the control. When you're finished, the screen should resemble Figure 31.3.

    Figure 31.3: Adding a command button.

  4. To edit the properties of this control, select View, Properties. Select the Caption property and place your cursor in the Apply text box. Now type a suitable caption like Press Me. Your screen should resemble Figure 31.4.

    Figure 31.4: Changing the Caption property.

  5. Open the property sheet again, select the ID property, and place your cursor in the Apply text box. Now type a name like cmdPressMe.
  6. Now try adding a text box to your layout. Select the Text Control tool from the toolbox. Then place your cursor over the Layout window and it changes to cross hairs. Press the left mouse button and draw in the control. Your screen should look like Figure 31.5.
  7. Select View, Properties and change the ID and Text properties. Select the ID property and place your cursor in the Apply text box. Set the ID to something like cmdPressMe. Select the Text property and add some initialization text. When you're finished, your screen should look like Figure 31.6.

    Figure 31.5: Adding a Text control.

    Figure 31.6: The complete HTML layout.

  8. Save your layout to a file. The file extension for an HTML layout is ALX. If you open an ALX file with a text editor, you'll find that the code is itself HTML.

Using the ActiveX Control Pad Script Wizard

The ActiveX Control Pad provides a graphical user interface for adding VBScript to HTML pages and HTML layouts. In this section, you'll add two simple VB scripts to the
previously-created HTML layout using the Script Wizard. To add VB scripts using the Script Wizard, follow these steps:

  1. Start the ActiveX Control Pad, if it's not already running.
  2. Open the HTML layout you created previously.
  3. Start the Script Wizard. You can do this in two ways. Press the Script Wizard toolbar button (the one with the scroll icon) or select Tools, Script Wizard from the menu bar. Your screen will look something like Figure 31.7.

    Figure 31.7: Starting the Script Wizard.

    Notice that the Script Wizard has two different views. The List View is a graphical tool for making scripts. The Code View provides a method for entering custom scripts by typing in VBScript syntax.

  4. Now let's add a simple script using the List View. Adding a script element in the List View is a three-step process. Select an event to respond to, select an action to take, and (if necessary) provide a value or parameter. Let's take it one step at a time. From the Event list (the list box in the upper left third of the screen), expand the txtMessage item and select the KeyDown event. Your screen will look something like Figure 31.8.

    Figure 31.8: Selecting an event to respond to.

  5. Next expand the txtMessage item on the Action list (the list box in the upper right third of the screen). Select the BackColor property and double-click. The color selection window will come forward. Your screen will look something like Figure 31.9.

    Figure 31.9: Setting the BackColor property.

    Go ahead and select the color that you want to change the txtMessage box to when a key is pressed, and press OK. You'll see both the object and the action listed in the Script list.

  6. Now change the Script Wizard to the Code View by selecting the Code View radio button. From the Event list, expand the cmdPressMe object and select the Click event. Your screen will look something like Figure 31.10.

    Figure 31.10: Adding a script in the Code View.

  7. Next, add a simple VBScript in the code window. (You learned about VBScript in the previous two chapters.) But for now, enter MsgBox txtMessage.Text into the code window. Your screen will look like Figure 31.11.
  8. Finally, collapse all of the items in the Action list. You'll notice that there is now a Procedures object. Expand the Procedures object. You should see an entry for the two events you've now added scripts for (see Figure 31.12).
  9. Save the HTML layout to a file.

Figure 31.11: Entering the script.

Figure 31.12: The Procedures object.

The Script Wizard Interface

Now that you've had a quick test drive through the Script Wizard, there are a couple of features that require some additional explanation. This chapter takes the Script Wizard and breaks it down into its components to give you an in depth look at coding scripts using the Script Wizard. Specifically, you'll work through the following processes:

Navigating the Event Window

Many of the objects that you'll use in your Web pages will trigger various events. To make your Web page interactive with the user, you'll select events and assign actions that will execute in response to the selected event. VBScript makes events available to the browser window itself. When you start a new HTML document, you can respond to events that occur to the browser window.

When you add an ActiveX control to your HTML document, the Script Wizard adds an object entry to the Event window. In Figure 31.13, the Event window is shown after a Calendar control was added to the document.

Figure 31.13: An additional object in the Event window.

Notice that the Calendar control uses a small blue cube as its icon. The document window uses a small replica of a window as its icon. To select an event for creating a response procedure, expand the entry for the Window object in the Event window. The Window object triggers two events-OnLoad and OnUnload. Figure 31.14 shows a selection of the OnLoad event.

Each object that fires events will appear in the Event window. Of course, each object may have any number of different events associated with actions on the object (see Figure 31.15). For instance, the Calendar control fires several events. To add an action for any of these events, simply expand the Calendar1 object entry in the Event window and select the desired event.

Figure 31.14: Exposing the Window object's events.

Figure 31.15: Showing an object's events.

Navigating the Action Window

Once you've selected an object and an event, the next step is to select an action to be executed. The Action window provides an interface for selecting and entering the following actions:

Let's take each of these items in turn.

Invoking the Methods of ActiveX Objects.

Many ActiveX objects expose methods. In the Action window, methods are represented by a small exclamation point icon. For instance, say you placed a Calendar control in a Web page and wanted to invoke a Calendar method in response to some event. After selecting an event in the event window, expand the Calendar object's entry in the Action list. Figure 31.16 shows how the list of methods is displayed.

Figure 31.16: The Calendar object's Action list.

Setting the Properties of ActiveX Objects.

ActiveX objects also contain properties. In the Action window, properties are indicated by a small property sheet icon. The process of setting a property for an ActiveX object in the Script Wizard varies depending on the nature of the property itself. However, the process always begins when you double-click the property you want to change. Say you wanted to set the Year property of the Calendar control. Figure 31.17 shows the dialog box that the ActiveX Control Pad supplies in response to the double-click.

Figure 31.17: Setting a property.

Depending on the property, the dialog box may differ. Setting the TitleFont property in the Calendar control, for instance, brings forward the standard Windows Fonts dialog box. Any property that requires a color brings forward the standard Windows Color dialog box.

Entering and Setting Global Variables.

Many applications require global variables for storing information. Of course, global variables must first be added to the Web page before you can set them to a value. To create a global variable, place the cursor over the Action window and press the right mouse button. Select New Global Variable and you'll be presented with a dialog box something like what's shown in Figure 31.18.

Figure 31.18: Adding a global variable.

Once you've entered a name for your global variable, press OK. When you're done, expand the Global Variables object in the Action window and you'll see the global variable you just entered similar to that shown in Figure 31.19.

Figure 31.19: Expanding the Global Variables object in the Action window.

Now your global variable can be set and checked just like the property of an ActiveX control. Say that you wanted to set gAGlobalVariable to 10 when the page is loaded. Select the Window's OnLoad event and then double-click the gAGlobalVariable and enter the number 10 into the text box. The screen will look something like Figure 31.20.

Figure 31.20: Setting a global variable.

Editing Scripts in the List View

Once you press OK from Figure 31.20, the action will be entered in to the List View's action list as shown in Figure 31.21.

Figure 31.21: The List View editor.

The List View displays each of the statements from the script for the event you're handling. The List View provides the following several command buttons for editing the script:

Say that you wanted to select the next day on the Calendar control before setting gAGlobalVariable to 10. Select the NextDay action and then press the Insert Action button. When you've pressed the Insert Action button, a new command will appear above the command setting gAGlobalVariable (see Figure 31.22).

Figure 31.22: Inserting an action.

Perhaps the actions you've entered are in the wrong order in the List View. To change the order of actions, use the Up and Down arrow buttons. Figure 31.23 shows the List View after pressing the Up arrow key. Of course, pressing the Delete button would remove the action just added to the script.

Figure 31.23: Moving an action up.

Obviously, pressing the down arrow would return the script to the order shown in Figure 31.22.

Editing Scripts in the Code View

The List View is good for making simple scripts quickly and easily. However, many times the application will require more sophisticated programming. The Code View provides developers with a rudimentary editor for including VBScripts that you hand code. To take a look at the Code View, select the Code View radio button. Next press the right mouse and select New Procedure from the menu as shown in Figure 31.24.

Figure 31.24: Getting started with the Code View.

Typically, you will change the name of the procedure to a useful name and then code the logic for the procedure. Figure 31.25 shows a coded procedure.

Figure 31.25: A coded procedure in Code View.

Notice that MyProcedure is now included under the procedure item in the Action window. If you're familiar with Visual Basic or VBScript, you'll notice that MyProcedure has no End Sub. This is because the ActiveX Control Pad inserts the End Sub for you.

If you switch back to the List View or if you open a procedure developed in the Code View in the List View, the ActiveX Control Pad will only show a message as shown in Figure 31.26.

Figure 31.26: Code View procedures in the List View.

When you close the Script Wizard, the ActiveX Control Pad adds the VBScript to your HTML document. Depending on the procedures you've created, you may have several VBScript tag pairs within the HTML document. Listing 31.1 shows the HTML document you've been playing with throughout this chapter.

Listing 31.1  VBScripts Inserted by the ActiveX Control Pad

<HTML>
<HEAD>
    <SCRIPT LANGUAGE="VBScript">
<!--
dim gAGlobalVariable

-->
    </SCRIPT>
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub MyProcedure()
  Dim ALocalVariable As Integer

  If ALocalVariable = 1 Then
                msgbox "ALocalVariable has been set to 1"
  Else
                msgbox "ALocalVariable has not been set to 1"
  End If

end sub
Sub Window_onLoad()
call Calendar1.NextDay()
gAGlobalVariable = 10
end sub
-->
    </SCRIPT>
<TITLE>New Page</TITLE>
</HEAD>
<BODY>
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub Calendar1_KeyPress(ByVal KeyAscii)
call MyProcedure()
end sub
-->
    </SCRIPT>
    <OBJECT ID="Calendar1" WIDTH=372 HEIGHT=279
     CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02">
        <PARAM NAME="_Version" VALUE="458752">
        <PARAM NAME="_ExtentX" VALUE="9843">
        <PARAM NAME="_ExtentY" VALUE="7382">
        <PARAM NAME="_StockProps" VALUE="1">
        <PARAM NAME="BackColor" VALUE="12632256">
        <PARAM NAME="Year" VALUE="1996">
        <PARAM NAME="Month" VALUE="6">
        <PARAM NAME="Day" VALUE="30">
    </OBJECT>
</BODY>
</HTML>

This listing was copied directly from the ActiveX Control Pad, so you can see that the formatting of the code leaves a little to be desired. Notice how the procedures MyProcedure and Window_OnLoad are not even separated by a blank line. Most programmers prefer that procedures be separated by white space and easily readable. However, since the Script Wizard makes building and editing scripts easier and more graphical, this is a minor complaint.

Inserting an HTML Layout

An HTML layout can be inserted in a Web page quite easily. HTML layouts are excellent for elements that will be repeated in numerous Web pages on your Web site. You can simply build the HTML layout once and then include it in any appropriate Web page. To include an HTML layout, take the following steps:

  1. Start the ActiveX Control Pad, if it's not already running.
  2. Start a new HTML document by adding an H1 heading with some text like My HTML Layout. Also, add a <BR> tag to make a break between the heading and the HTML layout. When you're finished, the screen should resemble Figure 31.27.

    Figure 31.27: Adding the H1 tag and heading text.

  3. Insert the HTML layout that you created in the previous section. To do this, select Edit, Insert HTML Layout from the main menu. Then select the HTML layout you just created and press Open When You've Finished-your screen will look something like Figure 31.28.
    Notice that the gray margin bar now shows an HTML Layout button. Pressing this button launches the Layout Editor as described previously.
  4. Save your HTML page to a file.

Now that you've completed the HTML document, you can test your work using Microsoft Internet Explorer 3.0. These next steps take you through testing out your HTML document:

Figure 31.28: Adding an HTML layout.

  1. Start Microsoft Internet Explorer 3.0.
  2. Open your HTML document by choosing File, Open or by typing the fully qualified path to the document.
  3. If you've done everything correctly, the HTML document will look something like Figure 31.29.

    Figure 31.29: HTML layout in Microsoft Internet Explorer 3.0.

  4. Now enter some text in the text box. Notice when you type that the color of the text changes to the color selected previously.
  5. Next, press the cmdPressMe button. You get the alert box shown in Figure 31.30.

Figure 31.30: Pressing the cmdPressMe button.

Inserting an Object

An HTML layout is itself an object, so inserting other objects in a Web page is quite easy. HTML layouts are excellent for elements that will be repeated in numerous Web pages on your Web site. You can simply build the HTML layout once and then include it in any appropriate Web page. To include an object, follow these steps:

  1. Start the ActiveX Control Pad, if it's not already running.
  2. Select File, New HTML and start a new HTML file.
  3. Now add an H1 heading with some text like My Calendar. Also, add a <BR> tag to make a break between the heading and the HTML layout.
  4. Next you'll add an ActiveX object. Select Edit, Insert ActiveX Control from the menu bar. Select the Calendar control from the list. When you're finished, the screen should resemble Figure 31.31.

    Figure 31.31: Adding an object to a Web page.

  5. Save your HTML page to a file.

Now