Windows NT Internet and Intranet Development

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

Previous chapterNext chapterContents


- 8 -

Developing Web Pages with the ActiveX Control Pad


The ActiveX Control Pad is a very powerful Web-page development tool for creating multimedia-rich, interactive, and visually attractive Web pages. This chapter covers the basics of the ActiveX Control Pad and how it can be used to create Web pages that function equally well on Internet Explorer and Netscape Navigator. After discussing benefits and applications of the ActiveX Control Pad, you will learn how to install it on your computer and develop the ActiveX version of the classic Hello World! application.


URL: You can download the latest version of the ActiveX Control Pad free of charge from the following Web page:

http://www.microsoft.com/workshop/author/cpad/cpad.htm




Note:Netscape users can use a special plug-in for Netscape Navigator and the HTML Layout control to view Web pages created using the ActiveX Control Pad.

There are countless Web-page development tools for Windows NT. So what's so special about the ActiveX Control Pad? Most Web-page development applications create Web pages in standard HTML. Although the ActiveX Control Pad can be used to create standard HTML Web pages, its strength lies in its capability to integrate HTML with ActiveX controls and automate them with scripting languages such as VBScript and JavaScript. Web pages created using the ActiveX Control Pad are compatible with Microsoft Internet Explorer. At the time of this writing, Netscape Navigator does not natively support ActiveX controls. Netscape users must install a special plug-in (ScriptActive) developed by NCompass Labs to browse ActiveX-enhanced Web pages.


URL:Visit the NCompass Labs Web page to learn more about the ScriptActive Netscape plug-in. This plug-in allows Web-application developers to build ActiveX-enhanced Web applications that run under Internet Explorer and Netscape Navigator.

http://www.NCompasslabs.com/

Applications of the ActiveX Control Pad

Before developing interactive Web applications with the ActiveX Control Pad, let's examine some of the benefits of using it. You will then better understand how its capabilities can be used to create interactive and visually appealing Web pages.


URL:Visit this Web page to browse applications developed using the ActiveX Control Pad:

http://www.microsoft.com/ie/most/howto/layout.htm

Interactive Presentations

The ActiveX Control Pad is well suited for projects that require complete control over the placement of objects on a Web page. See Figure 8.1 for an interactive educational application developed using the ActiveX Control Pad. Although the Winston's Playhouse application looks like a single graphic file, it is actually a collection of ActiveX controls linked together using VBScript. This provides Web-page developers with more control over the behavior of the Web application. For example, an ActiveX control can be used to trigger a VBScript subroutine into opening Miss Megabyte's door when the mouse is placed over it.

Figure 8.1. The Winston's Playhouse application, developed using the ActiveX Control Pad.

You might want to experiment with the Winston's Playhouse application to explore the capabilities of an ActiveX application developed using the ActiveX Control Pad. The Winston's Playhouse application is a fine example of a highly interactive Web page that can be developed using the ActiveX Control Pad. When the user moves the mouse over various objects of Winston's Playhouse, certain actions occur.


URL:Browse the following Web page to experiment with the Web application in Figure 8.1:

http://www.microsoft.com/ie/most/howto/layout/winston/go.htm

Fun and Games

Visitors are attracted to Web sites that entertain while providing informative and compelling content. Figure 8.2 illustrates the classic Solitaire application, developed using the ActiveX Control Pad. The application in Figure 8.2 demonstrates some of the capabilities of the ActiveX Control Pad and how it can be used to develop complex, graphically rich Web applications. The Solitaire application in Figure 8.2 behaves very much like the one shipped with Windows. Visit the ActiveX Solitaire Web page to experiment with the Solitaire application shown in Figure 8.2.


URL:The ActiveX version of the classic Solitaire application can be found at

http://www.microsoft.com/ie/most/howto/layout/solitaire/sol.htm


Figure 8.2. Solitaire application developed using the ActiveX Control Pad.

You might also want to find out how the classic Mr. Potato Head (or Mr. Eggplant in this case) application is implemented using the ActiveX Control Pad. I recommend that you first try out the non-ActiveX version of the Mr. Potato Head (Mr. Edible Starchy Tuber Head in this case) application to realize how ActiveX enhances the Web browsing experience.


URL:The non-ActiveX version of the Mr. Edible Starchy Tuber Head application can be found at

http://winnie.acsu.buffalo.edu/cgi-bin/potato-cgi


Be sure to view the source of the following applications to learn how VBScript is used to glue together ActiveX controls to create interactive and intelligent Web applications.


URL:The ActiveX version of the classic Mr. Potato Head application can be found at

http://www.microsoft.com/ie/most/howto/layout/eggplant/begin.htm



Point-and-Click Addition of ActiveX Controls to Web Pages

Although ActiveX controls are very powerful components for building richly interactive Web applications, it is not always easy to insert an ActiveX control into a Web page. For example, the text in Listing 8.1 is required to insert the Microsoft Forms 2.0 ActiveX Image control. The ActiveX control identification string is "CLSID:4C599241-6926-101B-9992-00000B65C6F9", which is considerably harder to remember than your social-security or driver's license number.

Listing 8.1. Text required to add the Microsoft Forms 2.0 ActiveX Image control.

<OBJECT ID="Image1" WIDTH=96 HEIGHT=96
 CLASSID="CLSID:4C599241-6926-101B-9992-00000B65C6F9">
    <PARAM NAME="Size" VALUE="2540;2540">
</OBJECT>

Thanks to the Active Control Pad, Web-page developers do not have to remember ActiveX control identification strings or cut and paste them from the Windows NT Registry. Instead, developers can use the dialog box shown in Figure 8.3 to insert an ActiveX control by selecting Edit | Insert ActiveX Control from the ActiveX Control Pad main menu. The ActiveX Control Pad automatically inserts the text necessary to add the selected ActiveX control to the Web page.

Figure 8.3. Use the Insert ActiveX Control dialog box to easily insert ActiveX controls into a Web page.

Develop More Efficient Web Pages

Prior to the ActiveX Control Pad, Web-page designers had to embed graphics into Web pages to make the pages visually appealing. There are many drawbacks to taking this approach. The greatest disadvantage is that a new HTTP connection needs to be established for each image that is embedded into a Web page. This is particularly time-consuming when the HTTP connections need to be established over a busy network. As shown in Figure 8.4, six different HTTP connections must be established to display a Web page containing five images.

Figure 8.4. Typically, a separate HTTP connection must be established for each object embedded within a Web page.

The ActiveX Control Pad solves this problem by providing a way to insert images using an ActiveX control. An ActiveX control can be used to embed images in a Web page to avoid establishing separate HTTP connections for each image.

Develop Web Page Templates

The ActiveX Control Pad can also be used to develop templates for Web pages. As new information is added to the Web site, templates created using the ActiveX Control Pad can be used to format the information and present it to users in a visually appealing manner. Using templates not only saves time for Web- page developers, it also ensures that the Web site is easy to navigate by providing users with a consistent and familiar user interface. See Chapter 26, "VBScript Programming with the ActiveX Control Pad," to learn how to create Web-page templates using the ActiveX Control Pad.

Installing the ActiveX Control Pad

Follow these directions to install the ActiveX Control Pad:

1. Download the latest version of the ActiveX Control Pad from the ActiveX Control Pad Web page. After you download the distribution file, copy it to a temporary directory and execute it.


URL:Visit the ActiveX Control Pad Web page for the most up-to-date information about the ActiveX Control Pad and download a copy of it. The site is located at

http://www.microsoft.com/workshop/author/cpad/




2. The Microsoft ActiveX Control Pad License dialog box appears. Read it and click the Yes button to continue.

3.
The Microsoft ActiveX Control Pad Setup dialog box appears. Click the Continue button.

4.
The Microsoft ActiveX Control Pad Setup dialog box shown in Figure 8.5 appears. Click the Change Folder button to select the destination directory of the ActiveX Control Pad, and click the large button with a computer icon to install the ActiveX Control Pad.

Figure 8.5. This Microsoft ActiveX Control Pad Setup dialog box allows you to select the destination directory.

5. Use the Microsoft ActiveX Control Pad--Choose Program Group dialog box (see Figure 8.6) to select the Windows NT Start Menu folder of the ActiveX Control Pad. You can select an existing Start Menu folder or create a new one.

6.
The Microsoft ActiveX Control Pad is now installed and ready for use. At the end of the installation process, the Microsoft ActiveX Control Pad Setup application creates a Windows NT Start Menu folder similar to the one shown in Figure 8.7. Execute the Microsoft ActiveX Control Pad icon to develop the ActiveX Control Pad version of the Hello World! application in the next section.

Figure 8.6. Selecting the Windows NT Start Menu folder of the Microsoft ActiveX Control Pad.

Figure 8.7. The Windows NT Start Menu folder of the Microsoft ActiveX Control Pad.

7. Double-click the Microsoft ActiveX Control Pad icon, located in the Windows NT Start Menu folder shown in Figure 8.7, to verify that the Microsoft ActiveX Control Pad is properly installed on your system. You will see the ActiveX Control Pad application shown in Figure 8.8.

Figure 8.8. The Microsoft ActiveX Control Pad application.

Developing Web Pages with the ActiveX Control Pad

When working with a new programming language or application, it is customary to develop an application that greets the user with the message Hello World! The following section demonstrates how to develop an ActiveX application that, among other things, displays this message to the user.


Note:The complete Hello World! application is contained in the CD-ROM kit that accompanies this resource library (\Chap-08\HelloWorld.html). Experiment with it before you proceed to understand how the Hello World! application responds to user input.

Hello World!

The Hello World! application will be implemented as an HTML layout. This ensures that the application is compatible with both Internet Explorer and Netscape Navigator, because the Netscape plug-in by NCompass allows Netscape Navigator to host ActiveX controls, such as the Microsoft ActiveX HTML Layout control. Follow these instructions to create the ActiveX Control Pad Hello World! application. An HTML layout is a file created using the ActiveX Control Pad. The HTML Layout control is used to view HTML layouts created using the ActiveX Control Pad.

1. If you have not done so already, locate the ActiveX Control Pad Windows NT Start Menu folder and execute the ActiveX Control Pad icon.

2.
When the ActiveX Control Pad application appears, place the cursor between the <BODY> and </BODY> HTML tags and select Edit | Insert HTML Layout... from the menu bar. The dialog box shown in Figure 8.9 appears. Select the location for the new HTML layout and click the Open button.

Figure 8.9. Select the location for the new HTML layout.

3. If the location you select does not exist, the dialog box shown in Figure 8.10 appears to confirm that you want to create a new HTML layout. Select Yes to acknowledge the dialog box shown in Figure 8.10.

Figure 8.10. Confirm the creation of a new HTML layout.



Note:Note the extension of the HTML layout in Figure 8.10. HTML layouts end with the extension .alx. Think of an HTML layout as a collection of ActiveX controls, linked together with a scripting language such as VBScript. The HTML Layout control, distributed free of charge with Internet Explorer, is required to view HTML layout files. Netscape Navigator users can use the same HTML Layout control, along with the ActiveX plug-in for Netscape Navigator by NCompass labs, to view HTML layout files.
4. The ActiveX Control Pad inserts a new HTML layout (see Figure 8.11) by inserting the text shown in Listing 8.2. Note the string CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF". If it weren't for the ActiveX Control Pad, you would have to locate the Class ID of the HTML Layout control by using the Windows NT registry, and manually cut and paste it to your Web page. Also, note the string VALUE="file:C:\Internet Development\ActiveXControlPad\HelloWorld\HelloWorld.alx". This string points to the location of the HTML layout text file (it ends with the extension .alx). When publishing the Hello World! application on the Web, copy the HelloWorld.alx file to a subdirectory of the document root directory of your Web server. You will then need to modify the VALUE string to point to the location of the HelloWorld.alx file. For example, if the document root directory of your Web server is c:\WWW and you copy the HTML layout file (HelloWorld.alx) to the directory c:\WWW\ActiveX, you will need to modify the VALUE string to VALUE="/ActiveX/HelloWorld.alx".

Listing 8.2. Text inserted for the new HTML layout.

<OBJECT
CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"
ID="HelloWorld_alx" STYLE="LEFT:0;TOP:0">
<PARAM NAME="ALXPATH" REF VALUE="file:C:\InternetDevelopment\ActiveXControlPad\
¬HelloWorld\HelloWorld.alx">
</OBJECT>


Note:To ensure that your users have the HTML Layout control installed on their systems, insert the following HTML tag in the <OBJECT> tag of Listing 8.2. The CODEBASE tag points to the location of an ActiveX control so the Web browser can download and install it on the user's computer, if it is not already installed. If you are developing CD-ROM or intranet ActiveX applications that need to work even if a user is not connected to the network, download the HTML Layout control and copy it to a local directory. Of course, you will then need to modify the CODEBASE tag to point to the local location of the HTML Layout control.

CODEBASE="http://activex.microsoft.com/controls/mspert10.cab#version=1,0,4,8020"



5.
To begin editing the HTML layout, click the icon next to the text inserted by the ActiveX Control Pad at the left of the Web page's border (see Fig- ure 8.11).

Figure 8.11. The new HTML layout inserted by the ActiveX Control Pad.

6. The windows shown in Figures 8.12 and 8.13 are used to create HTML layouts. Use the Toolbox window (shown in Figure 8.12) to select and insert ActiveX controls to an HTML layout. The HTML layout workspace window (shown in Figure 8.13) provides a WYSIWYG environment for creating HTML layouts.

Figure 8.12. The Toolbox window.

Figure 8.13. The workspace window.



Tip: You can insert ActiveX controls into the HTML layout by dragging a control from the Toolbox window (refer to Figure 8.12) and dropping it on the HTML layout workspace window (refer to Figure 8.13).
7. The Hello World! application displays the string Hello World! and the current date, and allows the user to change its background and text color. If all this sounds a bit too complicated for your first ActiveX Web application, don't worry. The ActiveX Control Pad makes it easy to develop interactive Web applications. Use the HTML Toolbox window to insert four labels, three combo boxes, and two command buttons (as shown in Figure 8.14). After you place a control on the HTML layout workspace window, you can resize it using the mouse.

Figure 8.14. Insert four labels, three combo boxes, and two command buttons into the HTML layout workspace window.

8. Properties of ActiveX controls on the HTML layout workspace window can be modified by selecting an ActiveX control using the mouse, clicking the right mouse button, and selecting Properties from the pop-up menu that appears (see Figure 8.15).

Figure 8.15. Use the right mouse button to select pop-up menu options of ActiveX controls in an HTML layout.

9. After you perform this step, the HTML layout will look similar to the one in Figure 8.16. Modify the values of the following ActiveX control properties (provided that you placed the ActiveX controls as shown in Figure 8.14).
Label1.Caption   = Hello World
Label1.Font      = 24pt MS Sans Serif, Bold
Label1.TextAlign = 2 - Center
Label1.ID        = HelloWorldLbl
Label2.Caption   = Background Color
Label2.Font      = 8pt MS Sans Serif, Bold
Label2.BackStyle = 0 - Transparent
Label3.Caption   = Text Background Color
Label3.Font      = 8pt MS Sans Serif, Bold
Label3.BackStyle = 0 - Transparent
Label4.Caption   = Text Foreground Color
Label4.Font      = 8pt MS Sans Serif, Bold
Label4.BackStyle = 0 - Transparent

Figure 8.16. HTML layout after the properties of the Label controls are modified.


Tip: Properties of more than one ActiveX control can be modified at one time. To do so, press the Control key while choosing several ActiveX controls and selecting to modify their Properties using the right mouse button.
10. After you perform this step, the HTML layout will look similar to the HTML layout in Figure 8.17. Modify the values of the following ActiveX control properties (provided that you placed the ActiveX controls as shown in Figure 8.14).
CommandButton1.Caption = Hello World!
CommandButton1.Font    = 8pt MS Sans Serif, Bold
CommandButton1.ID      = HelloWorldBtn
CommandButton2.Caption = What time is it?
CommandButton2.Font    = 8pt MS Sans Serif, Bold
CommandButton2.ID      = TimeBtn
ComboBox1.Style        = 2 - DropDownList
ComboBox2.Style        = 2 - DropDownList
ComboBox2.Style        = 2 - DropDownList

Figure 8.17. HTML layout after the properties of the Command Button and Combo Box controls are modified.

11. Before you proceed, save the HTML layout as HelloWorld.alx and the HTML file containing the HTML layout as HelloWorld.html by selecting File | Save from the main menu. You are finished designing the Hello World! application. All you must do is complete the programming portion of the project. This is done with the aid of the Script wizard, which provides a powerful environment for developing VBScript or JavaScript code for your application. Select Tools | Script Wizard from the main menu to invoke the ActiveX Control Pad Script wizard (see Figure 8.18).

Figure 8.18. The ActiveX Control Pad Script wizard.



Note:When designing an application with the ActiveX Control Pad, you typically spend almost the same amount of time designing the layout of the application as you do writing the source code of the application--if you are familiar with Visual Basic, you already know this. This is because the ActiveX Control Pad is a user-interface-centric application. As the application is developed, you see the application the same way your users see it. This feature allows application developers to create user-friendly applications using powerful features of the programming language.
12. Users change colors of the Hello World! application using ComboBox1, ComboBox2, and ComboBox3. Values are added to a combo box using the AddItem() function. Select the OnLoad event of the Hello World! object and click the Code View radio button. Type the code shown in Listing 8.3 onto the script pane of the Script wizard (as shown in Figure 8.19). The code in Listing 8.3 adds the colors red, blue, yellow, black, and white to each combo box.

Figure 8.19. Code required to insert values to combo boxes.


Listing 8.3. Inserting values to combo boxes.

ComboBox1.AddItem ("Red")
ComboBox1.AddItem ("Blue")
ComboBox1.AddItem ("Yellow")
ComboBox1.AddItem ("Black")
ComboBox1.AddItem ("White")
ComboBox2.AddItem ("Red")
ComboBox2.AddItem ("Blue")
ComboBox2.AddItem ("Yellow")
ComboBox2.AddItem ("Black")
ComboBox2.AddItem ("White")
ComboBox3.AddItem ("Red")
ComboBox3.AddItem ("Blue")
ComboBox3.AddItem ("Yellow")
ComboBox3.AddItem ("Black")
ComboBox3.AddItem ("White")
13. After you perform this step, users can change the background color of the Hello World! application using ComboBox1. Select the Change event of the ComboBox1 object and type the code shown in Listing 8.4 into the script pane (as shown in Figure 8.20). Document.bgColor refers to the background color of the Web page in which the ActiveX control is contained; HelloWorld.BackColor refers to the background color of the Hello World! application. See Chapter 16, "Operators, Control Structures, and Iterative Structures," to learn how the Select/Case structure is used to transfer program flow based on the value of a certain expression.

Figure 8.20. VBScript code used to change the background color of the Hello World! application.


Listing 8.4. Code required to change the background color of the Hello World! application.

Sub ComboBox1_Change()
Select Case ComboBox1.Value
  Case "Red"
    HelloWorld.BackColor = RGB (255,000,000)
    Document.bgColor     = "Red"
  Case "Blue"
    HelloWorld.BackColor = RGB (000,00,255)
    Document.bgColor     = "Blue"
  Case "Yellow"
    HelloWorld.BackColor = RGB (255,255,000)
    Document.bgColor     = "Yellow"
  Case "Black"
    HelloWorld.BackColor = RGB (000,000,000)
    Document.bgColor     = "Black"
  Case Else
    HelloWorld.BackColor = RGB (255,255,255)
    Document.bgColor     = "White"
End Select
14. After you perform this step, users can change the text background color of the Hello World! application using ComboBox2. Select the Change event of the ComboBox2 object and type Listing 8.5 into the script pane (as shown in Figure 8.21). HelloWorldLbl.BackColor refers to the background color of the Hello World! label.

Listing 8.5. Code required to change the text background color of the Hello World! application.

Sub ComboBox2_Change()
Select Case ComboBox2.Value
  Case "Red"
    HelloWorldLbl.BackColor = RGB (255,000,000)
  Case "Blue"
    HelloWorldLbl.BackColor = RGB (000,00,255)
  Case "Yellow"
    HelloWorldLbl.BackColor = RGB (255,255,000)
  Case "Black"
    HelloWorldLbl.BackColor = RGB (000,000,000)
  Case Else
    HelloWorldLbl.BackColor = RGB (255,255,255)
End Select

Figure 8.21. VBScript code used to change the text background color of the Hello World! application.

15. After you perform this step, users can change the text color of the Hello World! application using ComboBox3. Select the Change event of the ComboBox3 object and type Listing 8.6 into the script pane (as shown in Figure 8.22). Users can choose colors of the Hello World! application using the combo boxes. Save the HTML layout and browse it with a Web browser before you proceed.

Listing 8.6. Code required to change the text color of the Hello World! application.

Sub ComboBox3_Change()
Select Case ComboBox3.Value
  Case "Red"
    HelloWorldLbl.ForeColor = RGB (255,000,000)
  Case "Blue"
    HelloWorldLbl.ForeColor = RGB (000,00,255)
  Case "Yellow"
    HelloWorldLbl.ForeColor = RGB (255,255,000)
  Case "Black"
    HelloWorldLbl.ForeColor = RGB (000,000,000)
  Case Else
    HelloWorldLbl.ForeColor = RGB (255,255,255)
End Select

Figure 8.22. VBScript code used to change the text color of the Hello World! application.

16. Select the Click event of HelloWorldBtn and type Listing 8.7 into the script pane (as shown in Figure 8.23).

Listing 8.7. VBScript code used to display the string Hello World! in a message box.

Sub HelloWorldBtn_Click()
MsgBox "Hello World!"

Figure 8.23. VBScript code that displays the string Hello World! when the Click event of HelloWorldBtn is triggered.

17. Select the Click event of TimeBtn and type Listing 8.8 into the script pane (as shown in Figure 8.24). The Hello World! application is now complete!

Listing 8.8. VBScript code used to display the current time and date in a message box.

Sub TimeBtn_Click()
MsgBox "It is now " & Time & " on " & Date

Figure 8.24. VBScript code that displays the time and date when the Click event of TimeBtn is triggered.


Testing the Hello World! Application

Test the Hello World! application by loading it into Internet Explorer (or another ActiveX-compatible Web browser), as shown in Figure 8.25.

Figure 8.25. The Hello World! application.

The combo boxes of the Hello World! application are used to modify the application's colors. Compare Figure 8.25 with Figure 8.26; notice how the background and text colors are changed using the combo boxes.

Click the Hello World! button to invoke the dialog box shown in Figure 8.27. This dialog box is created by the code in Listing 8.7.

Figure 8.26. Combo boxes are used to modify colors of the Hello World! application.

Figure 8.27. The Hello World! dialog box.

Click the What time is it? button in Figure 8.26 to invoke the dialog box shown in Figure 8.28. This dialog box is created by the code in Listing 8.8.

Figure 8.28. The time and date dialog box.

The full source code of the Hello World! application is listed next for your reference. Listing 8.9 lists the contents of the HTML layout file (HelloWorld.alx) generated by the ActiveX Control Pad.

Listing 8.9. Source code of the Hello World! application.

<SCRIPT LANGUAGE="VBScript"> <!-- Sub
TimeBtn_Click() MsgBox "It is now " & Time & " on
" & Date end sub --> </SCRIPT> <SCRIPT
LANGUAGE="VBScript"> <!-- Sub HelloWorldBtn_Click() MsgBox
"Hello World!" end sub --> </SCRIPT> <SCRIPT
LANGUAGE="VBScript"> <!-- Sub HelloWorld_OnLoad()
  ComboBox1.AddItem ("Red")
  ComboBox1.AddItem ("Blue")
  ComboBox1.AddItem ("Yellow")
  ComboBox1.AddItem ("Black")
  ComboBox1.AddItem ("White")
  ComboBox2.AddItem ("Red")
  ComboBox2.AddItem ("Blue")
  ComboBox2.AddItem ("Yellow")
  ComboBox2.AddItem ("Black")
  ComboBox2.AddItem ("White")
  ComboBox3.AddItem ("Red")
  ComboBox3.AddItem ("Blue")
  ComboBox3.AddItem ("Yellow")
  ComboBox3.AddItem ("Black")
  ComboBox3.AddItem ("White")
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub ComboBox1_Change()
Select Case ComboBox1.Value
  Case "Red"
    HelloWorld.BackColor = RGB (255,000,000)
    Document.bgColor     = "Red"
  Case "Blue"
    HelloWorld.BackColor = RGB (000,00,255)
    Document.bgColor     = "Blue"
  Case "Yellow"
    HelloWorld.BackColor = RGB (255,255,000)
    Document.bgColor     = "Yellow"
  Case "Black"
    HelloWorld.BackColor = RGB (000,000,000)
    Document.bgColor     = "Black"
  Case Else
    HelloWorld.BackColor = RGB (255,255,255)
    Document.bgColor     = "White"
End Select
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub ComboBox2_Change()
Select Case ComboBox2.Value
  Case "Red"
    HelloWorldLbl.BackColor = RGB (255,000,000)
  Case "Blue"
    HelloWorldLbl.BackColor = RGB (000,00,255)
  Case "Yellow"
    HelloWorldLbl.BackColor = RGB (255,255,000)
  Case "Black"
    HelloWorldLbl.BackColor = RGB (000,000,000)
  Case Else
    HelloWorldLbl.BackColor = RGB (255,255,255)
End Select
end sub
-->
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
<!--
Sub ComboBox3_Change()
Select Case ComboBox3.Value
  Case "Red"
    HelloWorldLbl.ForeColor = RGB (255,000,000)
  Case "Blue"
    HelloWorldLbl.ForeColor = RGB (000,00,255)
  Case "Yellow"
    HelloWorldLbl.ForeColor = RGB (255,255,000)
  Case "Black"
    HelloWorldLbl.ForeColor = RGB (000,000,000)
  Case Else
    HelloWorldLbl.ForeColor = RGB (255,255,255)
End Select
end sub
-->
</SCRIPT>
<DIV ID="HelloWorld" STYLE="LAYOUT:FIXED;WIDTH:339pt;HEIGHT:107pt;">
    <OBJECT ID="HelloWorldBtn"
     CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" STYLE="TOP:74pt;LEFT:173pt;WIDTH:72pt;HEIGHT:24pt;TABINDEX:0;ZINDEX:0;">
        <PARAM NAME="Caption" VALUE="Hello World!">
        <PARAM NAME="Size" VALUE="2540;847">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="ParagraphAlign" VALUE="3">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="TimeBtn"
     CLASSID="CLSID:D7053240-CE69-11CD-A777-00DD01143C57" STYLE="TOP:74pt;LEFT:256pt;WIDTH:74pt;HEIGHT:24pt;TABINDEX:1;ZINDEX:1;">
        <PARAM NAME="Caption" VALUE="What time is it?">
        <PARAM NAME="Size" VALUE="2611;847">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="ParagraphAlign" VALUE="3">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="ComboBox1"
     CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3" STYLE="TOP:8pt;LEFT:91pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:2;ZINDEX:2;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="BackColor" VALUE="16777215">
        <PARAM NAME="DisplayStyle" VALUE="7">
        <PARAM NAME="Size" VALUE="2540;635">
        <PARAM NAME="MatchEntry" VALUE="1">
        <PARAM NAME="ShowDropButtonWhen" VALUE="2">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="ComboBox2"
     CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3" STYLE="TOP:41pt;LEFT:91pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:3;ZINDEX:3;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="DisplayStyle" VALUE="7">
        <PARAM NAME="Size" VALUE="2540;635">
        <PARAM NAME="MatchEntry" VALUE="1">
        <PARAM NAME="ShowDropButtonWhen" VALUE="2">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="ComboBox3"
     CLASSID="CLSID:8BD21D30-EC42-11CE-9E0D-00AA006002F3" STYLE="TOP:74pt;LEFT:91pt;WIDTH:72pt;HEIGHT:18pt;TABINDEX:4;ZINDEX:4;">
        <PARAM NAME="VariousPropertyBits" VALUE="746604571">
        <PARAM NAME="DisplayStyle" VALUE="7">
        <PARAM NAME="Size" VALUE="2540;635">
        <PARAM NAME="MatchEntry" VALUE="1">
        <PARAM NAME="ShowDropButtonWhen" VALUE="2">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
    </OBJECT>
    <OBJECT ID="HelloWorldLbl"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0" STYLE="TOP:17pt;LEFT:174pt;WIDTH:149pt;HEIGHT:33pt;ZINDEX:5;">
        <PARAM NAME="BackColor" VALUE="12632256">
        <PARAM NAME="Caption" VALUE="Hello World!">
        <PARAM NAME="Size" VALUE="5256;1164">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontHeight" VALUE="480">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="ParagraphAlign" VALUE="3">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="Label2"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:8pt;LEFT:8pt;WIDTH:72pt;HEIGHT:18pt;ZINDEX:6;">
        <PARAM NAME="ForeColor" VALUE="0">
        <PARAM NAME="VariousPropertyBits" VALUE="8388627">
        <PARAM NAME="Caption" VALUE="Background Color">
        <PARAM NAME="Size" VALUE="2540;635">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="Label3"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:41pt;LEFT:8pt;WIDTH:83pt;HEIGHT:25pt;ZINDEX:7;">
        <PARAM NAME="ForeColor" VALUE="0">
        <PARAM NAME="VariousPropertyBits" VALUE="8388627">
        <PARAM NAME="Caption" VALUE="Text Background Color">
        <PARAM NAME="Size" VALUE="2928;882">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
    <OBJECT ID="Label4"
     CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0"
     STYLE="TOP:74pt;LEFT:8pt;WIDTH:72pt;HEIGHT:18pt;ZINDEX:8;">
        <PARAM NAME="ForeColor" VALUE="0">
        <PARAM NAME="VariousPropertyBits" VALUE="8388627">
        <PARAM NAME="Caption" VALUE="Text Foreground Color">
        <PARAM NAME="Size" VALUE="2540;635">
        <PARAM NAME="FontEffects" VALUE="1073741825">
        <PARAM NAME="FontCharSet" VALUE="0">
        <PARAM NAME="FontPitchAndFamily" VALUE="2">
        <PARAM NAME="FontWeight" VALUE="700">
    </OBJECT>
</DIV>

Summary

ActiveX is a powerful Internet technology that enables Web-page developers to create interactive and multimedia-rich Web pages with the greatest of ease. It is somewhat complicated to manually insert ActiveX controls into Web pages and automate them with a scripting language. The ActiveX Control Pad makes it easier to insert ActiveX controls by offering Web-page developers a powerful environment for creating ActiveX Web pages.


Previous chapterNext chapterContents


© Copyright, Macmillan Computer Publishing. All rights reserved.