Windows NT Internet and Intranet Development

To learn more about author Sanjaya Hettihewa, please visit the author's homepage.

Previous chapterNext chapterContents


- 26 -

VBScript Programming with the ActiveX Control Pad


VBScript applications can be easily developed using the ActiveX Control Pad. This chapter demonstrates some of the features of the ActiveX Control Pad and how they can be used to develop VBScript applications. The ActiveX Control Pad, shown in Figure 26.1, is very similar to the Windows Notepad. Unlike the Windows Notepad, however, the ActiveX Control Pad contains a toolbar, a Script wizard, and an HTML Layout control editing environment. If you are in the habit of using Windows Notepad to edit raw HTML files, consider switching to the ActiveX Control Pad. It does everything Windows Notepad does and more--especially if your Web pages contain ActiveX controls and VBScript/JavaScript code.

Figure 26.1. The ActiveX Control Pad.


Inserting ActiveX Controls

The code in Listing 26.1 is required to insert an ActiveX control into a Web page. Notice the hard-to-remember parameter CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02". The CLASSID parameter is unique to each ActiveX control.

Listing 26.1. Code required to insert an ActiveX control into a Web page.

<OBJECT ID="Calendar1" WIDTH=372 HEIGHT=279
 CODEBASE="http://www.server.com/directory/filename.ocx"
 CLASSID="CLSID:8E27C92B-1264-101C-8A2F-040224009C02">
    <PARAM NAME="_Version" VALUE="524288">
    <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="11">
    <PARAM NAME="Day" VALUE="11">
</OBJECT> 

The CODEBASE statement is used by the Web browser to download and install the required version of the ActiveX control if it is not already installed on the user's computer. The ActiveX Control Pad makes the task of inserting ActiveX controls into a Web page easier by automatically typing the CLASSID parameter and providing a visual user interface for changing the physical appearance of an ActiveX control. The following steps demonstrate how to insert an ActiveX control to a Web page using the ActiveX Control Pad.

1. Invoke the ActiveX Control Pad and select Edit | Insert ActiveX Control from the menu bar, as shown in Figure 26.2.

Figure 26.2. Select Edit | Insert ActiveX Control from the menu bar.

2. The Insert ActiveX Control dialog box, shown in Figure 26.3, appears. Use it to select an ActiveX control and click OK. For the purpose of this example, the Calendar ActiveX control is selected.

Figure 26.3. Select an ActiveX control to insert into the Web page.

3. The Edit ActiveX Control dialog box (shown in Figure 26.4) and the Properties dialog box (shown in Figure 26.5) appear. Use the Properties dialog box to change properties of the ActiveX control. The Edit ActiveX Control dialog provides a WYSIWYG user interface for modifying properties of the ActiveX control. The pop-up menu you see in Figure 26.4 is invoked by clicking the right mouse button.

Figure 26.4. The Edit ActiveX Control dialog box.

Figure 26.5. The ActiveX control Properties dialog box.

4. Select the Properties option of the pop-up menu shown in Figure 26.4 to invoke the Calendar Control Properties dialog box, shown in Figure 26.6. This dialog box provides a visual user interface for changing the appearance of the ActiveX control.

Figure 26.6. The Calendar Control Properties dialog box.

5. Dismiss the dialog boxes in Figures 26.4, 26.5, and 26.6 to insert the selected ActiveX control. The selected ActiveX control is inserted into the Web page, as shown in Figure 26.7. Notice how the CLASSID parameter of the Calendar control is automatically inserted by the ActiveX Control Pad.

Figure 26.7. The ActiveX Control Pad inserts the selected ActiveX control.


Using the Script Wizard

The Script wizard is a powerful tool for developing VBScript- and JavaScript-enhanced Web pages. The following example demonstrates how to use the Script wizard to develop a VBScript application. The VBScript application allows the user to use a command button to set the background color of the Web page. Follow these steps to build the VBScript application in Listing 26.3.

1. As demonstrated in the previous section, use the Edit | Insert ActiveX Control command to insert two Microsoft Forms 2.0 CommandButton controls into the Web page. Change the properties of the first command button to match the properties of the command button shown in Figure 26.8; change the properties of the second command button to match the properties of the command button shown in Figure 26.9.

Figure 26.8. Properties of the command button used to change the background color to black.

Figure 26.9. Properties of the command button used to change the background color to white.

2. Insert the text in Listing 26.2 immediately before the two ActiveX controls. The text in Listing 26.2 describes the purpose of the application and uses a table with a background color to ensure that the directions are always visible, regardless of the background color.

Listing 26.2. Directions to the user.

<TABLE BGCOLOR="FFFFCC">
<TR><TD>
<H1>Use the following buttons to change the background
color of this Web page</H1>
</TD></TR>
</TABLE>
3. Select Tools | Script Wizard from the menu bar or use the yellow script button (second button from the right) in the toolbar to invoke the Script wizard.

4.
Select the WhiteCommandButton.Click event and double click the window.document.bgColor action. Assign the value "FFFFFF" to window.document.bgColor, as shown in Figure 26.10. This sets the background color of the Web page to white.

Figure 26.10. Properties of the command button used to change the background color to white.

5. Select the BlackCommandButton.Click event and double click the window.document.bgColor action. Assign the value "000000" to window.document.bgColor, as shown in Figure 26.11. This sets the background color of the Web page to black.

Figure 26.11. Properties of the command button used to change the background color to black.

See Figure 26.12 for the VBScript code inserted by the Script wizard. Notice the two script icons in the left side margin. Modify VBScript source code by clicking the script icon right beside the VBScript source code.

Figure 26.12. The Script wizard inserts VBScript code to change the background color of the Web page.

The background color of the application in Listing 26.3 is black by default, as shown in Figure 26.13. The background color can be changed to white by clicking the White Background button, as shown in Figure 26.14. The complete source code of the application created using the Script wizard can be found in Listing 26.3.

Figure 26.13. The background color is changed to black.

Figure 26.14. The background color is changed to white.


Listing 26.3. Source code of the application developed using the Script wizard.

<HTML>
<HEAD>
<TITLE>VBScript Programming With The ActiveX Control Pad</TITLE>
</HEAD>
<BODY BGCOLOR="000000">
<BR><BR>
<TABLE BGCOLOR="FFFFCC">
<TR><TD>
<H1>Use the following buttons to change the background
color of this Web page</H1>
</TD></TR>
</TABLE>
<BR><BR>
<BR><BR>
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub BlackCommandButton_Click()
window.document.bgColor="000000"
end sub
-->
    </SCRIPT>
    <OBJECT ID="BlackCommandButton" WIDTH=203 HEIGHT=39
     CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
        <PARAM NAME="Caption" VALUE="Black Background">
        <PARAM NAME="Size" VALUE="5362;1023">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="280">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="ParagraphAlign" VALUE="3">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <SCRIPT LANGUAGE="VBScript">
<!--
Sub WhiteCommandButton_Click()
window.document.bgColor="FFFFFF"
end sub
-->
    </SCRIPT>
    <OBJECT ID="WhiteCommandButton" WIDTH=203 HEIGHT=39
     CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57">
        <PARAM NAME="Caption" VALUE="White Background">
        <PARAM NAME="Size" VALUE="5362;1023">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="280">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="ParagraphAlign" VALUE="3">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
</BODY>
</HTML>

Advanced Layout Capabilities of the ActiveX Control Pad

Advanced layout capabilities of the ActiveX Control Pad are used to create richly formatted Web pages with multimedia. Select File | New HTML Layout to use the advanced layout capabilities of the ActiveX Control Pad. As shown in Figure 26.15, the layout capabilities of the ActiveX Control Pad can be used to precisely control the location and physical attributes of Web-page elements. The advanced layout capabilities of the ActiveX Control Pad can be used to position images and ActiveX controls anywhere on a Web page, and to develop multimedia-rich Web applications.

Figure 26.15. The HTML layout capabilities of the ActiveX Control Pad.

The advanced layout capabilities can be used to design Web-page templates and separate the design and layout of a Web page from its content. For example, a graphics designer can use the advanced layout capabilities of the ActiveX Control Pad to design an attractive Web page that can be used over and over again with changing content--as in the case of a newsletter.

Summary

The ActiveX Control Pad is a powerful tool for VBScript application development. It can be used to directly type VBScript code. You can also use the included VBScript Script wizard to create VBScript code using an intuitive and visual user interface.


Previous chapterNext chapterContents


© Copyright, Macmillan Computer Publishing. All rights reserved.