With the combination of HTML Layouts, standard HTML, ActiveX controls, JavaScript, VBScript and Java Applets, developing Web pages is getting increasingly complex.
In order to ease the process of developing Web-based applications for Internet Explorer, Microsoft has developed ActiveX Control Pad, which offers a degree of point-and-click simplicity to developing Web pages that include HTML Layouts and ActiveX Objects as well as scripts.
This chapter looks at using the ActiveX, focusing on the following:
This chapter doesn't attempt to cover all features of the ActiveX Control Pad and its components. Rather, it examines enough of the features of the ActiveX Control Pad so that someone familiar with HTML, JavaScript, or VBScript and the principles of ActiveX controls and HTML layouts will be able to take advantage of the application.
The ActiveX Control Pad provides four main tools for creating integrated Web pages:
Figure 25.1. The HTML Editor Window.
Figure 25.2. The ActiveX Control Editor.
Figure 25.3. The HTML Layout Editor.
Figure 25.4. The Scripting Wizard.
Like most Windows 95 and NT applications available today, the ActiveX Control Pad includes a toolbar with buttons for many frequent actions, such as opening and saving files, cutting and pasting, undoing and redoing actions, and adjusting the placement of objects in a layout.
Figure 25.5 highlights the functions of the buttons on the toolbar.
Figure 25.5. The ActiveX Control Pad Toolbar.
The ActiveX Control Pad isn't designed as an HTML editor. It contains none of the features of sophisticated HTML editors, such as syntax checking, toolbars for easily inserting tags, or WYSIWYG HTML editing and development.
Rather, because an HTML document is the core of building pages with objects and scripts, ActiveX Control Pad provides it's HTML editing window as a way to view—and change—the code automatically generated by the Control Pad's other development tools.
The HTML editing window acts as a simple GUI text editor similar to Windows' own Notepad text editor. The only functionality feature beyond this is that objects, layouts, and scripts in the file have a small icon next to them that can be used to directly edit the script or object using the relevant tool in the ActiveX Control Pad. Figure 25.6 shows an HTML file in the ActiveX HTML editing window with a script and an embedded object. Next to the script and object are icons that can be used to launch the relevant Control Pad editing tool. If the user clicks on the icon next to the <OBJECT> tag, the relevant window is opened (See Figure 25.7).
In addition to using the icon next to the relevant section of the HTML file, when the cursor is inside the relevant section of the HTML source code, the Edit menu includes a choice to launch the relevant editing tool. For instance, in the example in Figure 25.6, if the cursor were inside the JavaScript script, then the Edit menu would include an Edit Script entry, as shown in Figure 25.8.
Figure 25.8. The Edit menu can be used instead of the icons to launch editing tools.
The HTML Editor Window provides standard editing features such as cutting and pasting, available on the Edit menu, from the toolbar, and by using keystroke combinations. Table 25.1 shows how each of these commands can be invoked.
| Command | Edit Menu Selection | Keystroke | Toolbar Button |
| Undo Action | Undo | Ctrl-Z |
|
| Redo Action | Redo | Ctrl-R |
|
| Cut Item | Cut | Ctrl-X |
|
| Copy Item | Copy | Ctrl-C |
|
| Paste Item | Paste | Ctrl-V |
|
| Delete Item | Delete | Del |
|
In addition to these standard editing commands, The Edit menu also provides a Select All command that selects all the text in the HTML window or all objects in a layout.
The Control Pad provides two ways to include ActiveX controls. One is to include individual controls and the other is to build a layout that includes multiple controls in an HTML Layout.
To include a single control, the Control Editor is used.
An ActiveX Control is inserted into a document by choosing Insert ActiveX Control ... from the Edit menu. When this command is chosen it invokes the Control Editor. When inserting a new control, the Editor first provides a list of available controls, as shown in Figure 25.9.
Figure 25.9. When inserting an ActiveX Control, a list of available controls is presented.
Any control can be chosen from the list. Pressing the OK button opens the Control Editor for the selected ActiveX Control.
For instance, choosing PopupMenu Object from the control list and pressing OK opens an editor that looks like Figure 25.10.
Figure 25.10. The PopupMenu Object in the Control Editor.
Once an object is selected, the Control Editor is opened with two windows like those shown in Figure 25.10.
The first window is an Edit window. Here, the object can be resized and positioned. By dragging on the corners of the object box, the control can be resized. Dragging the object moves it.
The other window, the Properties Window, provides a table of the object's properties and their values. These values can be edited and changed in this window. To do this, simply select the field to be changed and enter a new value in the text entry field next to the Apply button at the top of the window. Finally, click on the Apply button to apply the changes.
In some cases, a field can take a fixed list of values, such as True and False. In these cases, the text entry field next to the Apply button becomes a drop-down list like the one shown in Figure 25.11.
Figure 25.11. The Text Entry field in the properties menu can become a drop-down menu.
In some cases, ActiveX Objects provide an alternative way to edit their properties. For instance, the UniCode editor control from Gamma Software provides an alternative interface, like the one shown in Figure 25.12, to change property values by selecting from forms.
Figure 25.12. Some controls have alternative property editing interfaces.
These alternative property editing boxes can be opened by right-clicking on the object in the editing window and selecting Properties.
Once all the properties have been set, the object can be inserted into a Web page by closing the editor window. When this is done, an <OBJECT> tag with the appropriate parameters is inserted wherever the cursor is in the HTML file. An icon appears next to the tag, enabling the Control Editor to be launched quickly if needed.
In order to edit the control, you can directly change the HTML code that appears in the HTML window or click on the icon next to the <OBJECT> tag to re-open the Control Editor and the Properties window.
The HTML Layout Editor is similar to the Control Editor you just looked at, but it provides the extra functionality needed to create an HTML Layout file to be subsequently inserted into an HTML document.
New HTML layouts are created by selecting New HTML Layout from the File menu. This opens the HTML Layout Editor, which consists of two main windows: a main layout window, which looks like the Control Editor window, used to insert an ActiveX control, and a Toolbox window like the one shown in Figure 25.13, with two tabbed lists of ActiveX controls that can be included in the layout.
Figure 25.13. The HTML Layout Editor includes a Toolbox.
The process of designing an HTML Layout is simple. Controls are selected from the Toolbox and are then placed into the layout by clicking and dragging the rectangular space they should occupy.
Once a control is inserted, its properties can be edited by right-clicking on the object and selecting Properties from the pop-up menu. This either opens the standard properties box used in the ActiveX Control Editor, or a custom properties box like the ones used by the UniCode Editor from Gamma Software.
The Toolbox itself has two tabs—each with a set of icons representing different controls that can be included in a layout. The two tabs are for "standard" and "additional" tools. Initially, the collection of controls in these sets may be limited. Additional controls can be added by right-clicking in the body of one of the tabs and selecting Additional Controls from the pop-up menu that appears.
This opens a dialog box with a list of controls like the one shown in Figure 25.14. Controls can be selected or removed from the list for the tab in question by clicking in the checkbox to the left of the control's name.
Figure 25.14. Users can add controls to the Toolbox in the HTML Layout Editor.
Once controls and objects are in the layout and their properties have been edited, the layout itself can be designed using the conventional principles of most Windows-based graphics-capable applications. Clicking and dragging with the left button of the mouse moves objects. Clicking on an object and then clicking and dragging one of the resizing controls allows the object to be resized.
The Format menu provides basic layout functions, including the following:
The Layout window can include a grid to help align objects and design pages. The grid can be set by selecting Options from the Tools menu and then selecting HTML Layout ... from the sub-menu. This opens a dialog box where the size of the horizontal and vertical grid can be set and checkboxes are provided to make the grid visible and to force objects to snap to the grid.
Scripts for events associated with objects in an HTML layout can be added by right-clicking on an object in the Layout window and selecting Script Wizard from the pop-up menu. This launches the Script Wizard described later in this chapter, which can be used to create and edit scripts for the various objects in the layout.
When a layout is ready, it can be saved by selecting the save button from the tool bar or the Save As ... entry or Save entry from the File menu. Layout files should be saved with an .ALX extension.
Once saved, a layout file is ready to be included in a document. First place the cursor in the appropriate place in an HTML document and select Insert HTML Layout ... from the Edit menu. This opens a file dialog box where you can choose the appropriate .ALX file. The layout is included in the HTML document as an <OBJECT> tag with a layout icon next to it to easily jump to the HTML Layout Editor to edit the layout.
The ActiveX Control Pad provides the Script Wizard, which can help minimize the amount of manual VBScript and JavaScript coding that needs to be done when interactive Web pages are being built.
The underlying assumption of the Script Wizard is that it's designed to write scripts to associate with events and event handlers of objects available in a page. Scripting can be done entirely by selecting from lists and answering questions in dialog boxes, if desired.
The Script Wizard Window is divided into three sections—an event list, a list of possible actions, and the script itself—as indicated in Figure 25.15.
Figure 25.15. The Script Wizard Window.
The Script Wizard can be operated in two modes: List View or Code View. In List View, scripts for various events appear as a list of actions to take for various objects (see Figure 25.16) while in Code view, the actual JavaScript or VBScript program code is displayed in the script section of the window (see Figure 25.17).
Note:
List View is well-suited to attaching simple actions or a series of actions to an event using a point-and-click interface. It prompts for most of the information it needs, such as values to be assigned to properties. The Code View, on the other hand, is designed for more detailed, extensive coding but provides an easy way to specify objects, methods, and properties without having to type their complete references. It allows for complete manual coding of a script or procedure if needed.
The List View can only create event handlers for the following actions: methods with no arguments, methods with the same number of arguments as the event handler, the special actions in the Script Wizard (which are discussed later in this chapter), and assigning values to properties or global variables. Anything beyond this needs to be done in the Code View.
Figure 25.16. List View of the Script Wizard Window.
Figure 25.17. Code View of the Script Wizard Window.
Note:
The Script Wizard can be used to create both VBScript and JavaScript scripts. The scripting language used by the Script Wizard is specified before invoking the Script Wizard. From the ActiveX Control Pad, select the Tools menu, select the Options menu, and then select Script .... This opens the Script Options window like the one shown in Figure 25.18. The window can be used to set the default view, the default scripting language and the font used by the Script Wizard.
Figure 25.18. The Script Options Window.
In order to demonstrate how to script an event, the following simple form is used:
<FORM NAME="testForm"> <INPUT TYPE=text NAME="testText"> <INPUT TYPE=button NAME="testButton" VALUE="Submit"> </FORM>
The form attempts to script one simple event: if focus is removed from the text field and there is no text, then the user is alerted to enter text and focus is returned to the field.
The Script Wizard is designed to help force scripts to be developed in a modular fashion. For instance, when an event is scripted, the Script Wizard is best optimized to assign a single action. When multiple actions need to be taken, they should be invoked by calling a single function or procedure. For this reason, the action list includes a list of all global procedures and variables available in a document.
It's possible to add a procedure or variable to the list by right-clicking inside the action list and selecting either New Global Variable ... or New Procedure from the drop-down menu.
If New Procedure is selected while in code view, the shell for a procedure appears in the bottom part of the window. Here the default name of the function can be changed and then the function can be created. In this case, you can change Procedure1 to CheckField.
First you can select the properties you're testing from the action list. Here you want to test the value property of the testField object. This causes Document.testForm.testField.value to appear in the script. Because conditions and commands such as if don't appear on the action list, they need to be written manually by typing them into the script, resulting in the following:
if (Document.testForm.testField.value == "") {
If the condition is true, you want to display an alert box, so you can select the alert action from the window object in the action list. When this is double-clicked, the following appears in the script:
window.alert(msg)
msg can be replaced with some text like the following:
window.alert("Please Enter Some Text")
Finally, to bring focus back to the field, the focus method of the text field is selected from the action list and the if statement is closed by typing } into the script. The final result looks like Figure 25.19.
Figure 25.19. The completed CheckField function.
As you can see in Figure 25.19, the procedure now appears in the action list. If you want to edit the procedure later, right-click on the procedure name in the action list and select Edit from the drop-down menu.
Note:
It's important to note that creating custom global procedures like this one can only be done in the Code View. The List View cannot display custom multi-line scripts.
The first step in scripting an event is to select an event from the event list. The event list includes all events associated with all objects, as well as ActiveX controls and HTML Layouts, in a document.
If the Script Wizard is opened from inside the HTML Layout Editor (rather than the source editor), then the objects in the particular HTML Layout are available.
In this example, the blur event of the text field needs to be scripted. This is done by selecting the onBlur event handler of the testText text field, as shown in Figure 25.20.
Figure 25.20. Selecting an event.
Now that the event is selected, you can script its action. In this case, the action is simple: the CheckField function created earlier in this chapter. All you need to do is double-click on CheckField in the event list and it appears in the script. This can be done in the Code View or the List View.
The List View is useful for attaching multiple simple actions to an event. For instance, after selecting CheckField from the action list, the same message could be displayed in the status bar by double-clicking on the status property of the window object in the List View. The Script Wizard prompts for the value to be assigned to status when this is done in List View (see Figure 25.21).
Figure 25.21. The List View prompts for values to assign to properties.
Notice that the order of the actions in the List View can be changed with the arrow buttons and that individual actions can be deleted with the Delete Action button. The final code generated for this event handler would look like the following:
CheckField() window.status = 'Please Enter Some Text'
When you create a script for an event, the diamond next to the event in the event list is filled in to indicate that an event handler is associated with an event. If you want to completely remove an event handler from an event, simply right-click on the name of the event in the event list and select Delete Event Handler from the drop-down menu.
Finally, the scripts can be added to the open HTML file by selecting OK in the Script Wizard. All the scripts will be generated and the end result will be similar to the following:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CheckField()
{
if (Document.testForm.testField.value == "") {
window.alert("Please Enter Some Text")
Document.testForm.testField.focus()
}
}
-->
</SCRIPT>
<TITLE>New Page</TITLE>
</HEAD>
<BODY>
<FORM NAME="testForm">
<INPUT LANGUAGE="JavaScript" TYPE=text ONBLUR="CheckField()
window.status = 'Please Enter Some Text'"
NAME="testField">
<INPUT TYPE=button VALUE="Verify" NAME="testButton">
</FORM>
</BODY>
</HTML>
The Script Wizard provides several features to ease certain common tasks. Specifically, these are shortcuts that provide the following functions:
The Action List includes a special entry called Go To Page .... By using this action, it is possible to assign a jump to another page as an action to an event.
In the List View, double-clicking on the Go To Page ... action causes a prompt to be displayed, asking for the URL of the destination page, as shown in Figure 25.22.
Figure 25.22. Scripting a jump to another page.
In the Code View, an empty assignment to window.location.href is inserted into the script, which can the be completed by the user building the script.
ActiveX controls can be dynamically displayed or hidden by a script. The Script Wizard provides a Hide Control and Show Control action for control objects in a document.
By double-clicking on either of these actions, it's possible to script this action for an event. In the Code View, the JavaScript code displayed for these actions would be objectName.visible = false or objectName.visible = true.
ActiveX controls all have a relative front-back position known as a z-order. Controls can be brought to the front or sent to the back by selecting the Bring to Front or Send to Back actions in the action list.
The current version of the Script Wizard has some limitations:
The help files that come with the ActiveX Control Pad provide detailed information about using the application as well as a complete developer's reference covering the Internet Explorer Object Model.
In addition, Microsoft's Web site includes the Site Builder Workshop, which offers information about the Control Pad at http://www.microsoft.com/workshop/author/cpad/cpad.htm.
The Control Pad itself can be downloaded from http://www.microsoft.com/workshop/author/cpad/download.htm.
This chapter covered the basics of using the ActiveX Control Pad to develop Web pages that take advantage of the features of both Internet Explorer 3 and Navigator 3.
Using the Control pad, it is possible to
The next chapter wraps up with a discussion of JavaScript's position for the future, in light of its acceptance by many industry players.
