Previous Page TOC Next Page



Chapter 11


Using ActiveX Control Pad


The World Wide Web has made a dramatic impact on the computing paradigm in the last couple of years. It has changed the way people access information and communicate with each other. This is largely due to the development of technologies that enable the Web to interact with the user, leading to a more meaningful and fulfilling Web surfing experience.

Leading the way toward making the Web a powerful medium for accessing information, experiencing multimedia content, and enabling integration of the Web with the desktop is Microsoft's ActiveX technology. The core component of the ActiveX set of technologies is ActiveX Controls, which are used to author Web pages with active content.

The Microsoft Internet Explorer 3.0 Web browser and the Mosaic Web browser support Web pages with active content developed using ActiveX Controls. NCompass Labs, Inc. have developed an add-on called ScriptActive to the Netscape Navigator Web browser that adds ActiveX and VBScript support to the Navigator Web browser. More information about ScriptActive can be found at the NCompass Web site at http://www.ncompasslabs.com.

Microsoft Internet Explorer 3.0 will be available for the Macintosh and the various UNIX platforms soon, making ActiveX technology truly universal in appeal.

Web Pages with ActiveX Controls


ActiveX controls are software components that can be used to develop interactive, advanced Web pages that incorporate multimedia support, interface with back-end databases, and receive input from the user. The process of authoring ActiveX Web pages begins with the third-party developers who develop ActiveX Controls for use by Web designers and Web authors. These controls are distributed with a developer's license to Web site developers, who then incorporate the functionality provided by the controls into their Web pages.

ActiveX controls are source-code independent, and they can work with other controls developed in different languages. It is the Webmaster who orchestrates the interaction of the controls with each other and with the user.

ActiveX controls are binary objects having properties, events, and methods:

The communication between the browser and the ActiveX control is achieved through the use of snippets of code in a scripting language such as Visual Basic Scripting Edition (VBScript) or JavaScript. If you need more information, refer to Chapters 8, "VBScript" and 9, "JavaScript," of this book, which discuss these scripting languages.

Embedding ActiveX Controls in Web Pages


Web pages incorporate ActiveX controls using the HTML <OBJECT> tag. The syntax for the <OBJECT> tag when used for embedding ActiveX controls is as follows:


<OBJECT

CLASSID="CLSID:class-identifier"

CODEBASE="URL where control can be downloaded from"

DATA="url to control's object date"

ID=control_name

ALIGN=TEXTTOP | MIDDLE | TEXTMIDDLE | BASELINE | TEXTBOTTOM | LEFT | CENTER | RIGHT 

WIDTH=width of control

HEIGHT=height of control

BORDER=TRUE | FALSE

>

<PARAM NAME="parameter name" VALUE="parameter value">

.

.  (list of name-value pairs for controls having multiple parameters)

.

<PARAM NAME="parameter name" VALUE="parameter value">

</OBJECT>

The class-identifier is a unique 128-bit value that identifies each ActiveX control uniquely. This 128-bit value is stored in the registry on the system on which the ActiveX control was installed and registered. The Web developer has to specify this class-identifier in the HTML syntax for incorporating the control in the HTML document.

Interactive Web Pages: Overview of Scripting


Events that are generated by ActiveX controls are handled by procedures of code that are embedded in the HTML file in the form of a script. The two popular scripting languages are Visual Basic Scripting Edition (VBScript) and JavaScript.

The HTML syntax for embedding scripts in Web pages is


<SCRIPT LANGUAGE = "VBScript">

<!--

Sub SomeSubroutine(SomeParameter)

.

.

.

End Sub

-->

</SCRIPT>

Refer to Part 2, "ActiveX Scripting," of this book for more information on writing scripts.

ActiveX Control Pad


Using ActiveX Controls in Web authoring involves carefully noting the class-identifier for each ActiveX Control, specifying the property values for the control by enlisting them in the <PARAM> and <VALUE> tag pairs, and writing the necessary scripts to achieve the required interactivity. This process becomes extremely unwieldy after a while, especially if you are working with a considerable number of controls.

Another obstacle that Web designers are confronted with is that they cannot specify precise positioning information for various ActiveX controls on a Web page using pure HTML 3.2. HTML 3.2 does not support specifying coordinates for placing objects on Web pages.

Microsoft, sticking to its commitment of making life easier for developers, has come to the rescue. Recognizing the need for a development environment for authoring HTML pages using ActiveX Controls, it has developed the first version of what is called the ActiveX Control Pad.

The ActiveX Control Pad provides an integrated development environment for authoring Web pages with active content. The ActiveX Control Pad version 1.0 has the following features:

This chapter takes a tour of the ActiveX Control Pad and shows you how it makes authoring Web pages with active content easier than ever.

Note


ActiveX Control Pad does not support authoring HTML pages with Java applets in version 1.0. Microsoft will incorporate support for Java applets in a future version of ActiveX Control Pad. You can expect the newer version with support for Java applets soon after Visual J++ is released.


Getting Started


Let's begin by looking at the basic features of ActiveX Control Pad. We will familiarize ourselves with the ActiveX Control Pad environment first and proceed to developing a simple HTML page with an ActiveX control.

Installing ActiveX Control Pad


The ActiveX Control Pad is available on the accompanying CD-ROM. There are different versions for Windows 95 and Windows NT 4.0, so be careful to use the appropriate version. For using the ActiveX Control Pad, you must have the Microsoft Internet Explorer 3.0 browser installed on your system. If you do not have Internet Explorer 3.0 installed, the Setup will not install the ActiveX Control Pad. If you have not already done so, you can install Microsoft Internet Explorer 3.0 from the accompanying CD-ROM.

Double-click SETUPPAD.EXE to start the setup and installation program. The installation routine will check for the presence of Internet Explorer 3.0 and then guide you through the installation process. The ActiveX Control Pad is installed by default in the C:\PROGRAM FILES\ActiveX Control Pad folder. The ActiveX Control Pad will copy the required program files and online help, and it will register the various ActiveX Controls that are bundled with it on your system.

Launching the ActiveX Control Pad


You can start the ActiveX Control Pad from the Start|Programs|Microsoft ActiveX Control Pad menu. The Control Pad opens up with a blank new HTML file as shown in Figure 11.1.

Figure 11.1. ActiveX Control Pad with blank new HTML file.

You are now ready to begin using the Control Pad to author ActiveX Web pages.

Tip


You can right-click on any HTML file in the Windows Explorer or Folder view to edit it with ActiveX Control Pad. ActiveX Control Pad starts with the HTML file loaded for editing.

The Control Pad is an Multiple Document Interface (MDI) application, so you can edit multiple HTML files at the same time. This means you can cut, copy, and paste HTML tags, objects, and 2D layout regions across multiple files and edit them at the same time.

The Text Editor


The Text Editor has a vertical pane on the left of the HTML document where the ActiveX Control Pad places icons for easy access to ActiveX Controls and 2D layout regions that are embedded in the HTML file.

Tip


Create and edit your HTML file using an HTML editor such as Internet Assistant for Microsoft Word or Microsoft FrontPage. After you have your HTML tags in place, you can proceed to add active content using ActiveX Control Pad.


Adding ActiveX Controls


Place the cursor in the HTML file where you want to insert the ActiveX Control. Select Insert ActiveX Control on the Edit menu. The Control Pad shows a list box displaying all the controls registered on your system.

Table 11.1 lists the controls supplied with the ActiveX Control Pad. The examples in this chapter use several of the controls listed. It is easy to use any ActiveX control once you are familiar with a few of them. You can experiment with the Hot Spot and Web Browser controls yourself, after you are finished reading this chapter.

Table 11.1. ActiveX controls included with ActiveX Control Pad.

Control Description Microsoft ActiveX Image Control 1.0 Display images in common graphics file formats, including BMP, JPEG, and GIF Microsoft ActiveX Hot Spot Control 1.0 Create regions within an Image to respond in different ways Microsoft Forms 2.0 CommandButton Push-button control Microsoft Forms 2.0 CheckBox Check an option Microsoft Forms 2.0 ComboBox Select from drop-down list of options Microsoft Forms 2.0 Frame Group related controls together Microsoft Forms 2.0 Image Display , crop, size images Microsoft Forms 2.0 Label Labels for text and icons Microsoft Forms 2.0 ListBox Select from a scrollable list of options Microsoft Forms 2.0 MultiPage Display multiple pages Microsoft Forms 2.0 OptionButton Choose between multiple options Microsoft Forms 2.0 ScrollBar Basic horizontal and vertical scrollbars Microsoft Forms 2.0 SpinButton Button with Up and Down arrows Microsoft Forms 2.0 TabStrip Property-sheet style tabs for displaying multiple pages Microsoft Forms 2.0 TextBox Multiline text input and display Microsoft Forms 2.0 ToggleButton Button with two possible states Microsoft Web Browser Control View ActiveX documents such as Microsoft Word documents, Microsoft Excel spreadsheets, and so on

Select the Microsoft Forms 2.0 CommandButton Control from the list and select OK. The Control Pad brings up the Object Editor for letting you set the control's properties.

Using the Object Editor and Properties Window


Figure 11.2 shows the Object Editor invoked along with the Properties Window for editing the control and its properties.

Figure 11.2. Object Editor with the Microsoft Forms 2.0 CommandButton Control.

The control is shown on a grid, and the properties of the control are listed in the Properties window. You can adjust the size of the button by dragging the selection border drawn around the button. If you click on the button, you can edit the caption of the button. Many ActiveX controls support in-place editing. You can double-click on the button to toggle the display of the Properties window. You can also access the Properties window by right-clicking the control.

The Properties window lists the property names and values in a tabular form and enables you to edit them by double-clicking the property and clicking the Apply button. You can also set many properties by selecting appropriate values from the drop-down list at the top.

After you finish setting the properties for the control, close the Object Editor window, and voil[ac]a! The ActiveX Control Pad inserts the appropriate HTML syntax for embedding the control using the <OBJECT> tag. The Control Pad locates the class-identifier for the control from the registry and automatically sets the CLASSID for you. The properties you have set for the control are specified in pairs of PARAM NAME and PARAM VALUE tags. Figure 11.3 shows the HTML file in the Text Editor with the <OBJECT> tag inserted by the Object Editor.

Figure 11.3. HTML file with embedded CommandButton ActiveX control.

The vertical pane to the left of the HTML file provides you with a visual cue of the objects inserted in the HTML file. You can see a cube icon in Figure 11.3 to the left of the <OBJECT> tag in the Text Editor. If you scroll through the file, the Control Pad automatically repositions the icon adjacent to the <OBJECT> tag. You can click the cube icon to launch the Object Editor again, whenever you want to revise the control's properties.

ActiveX Control Pad thus maps a visual interface on top of the stream metaphor of HTML.

Using the Script Wizard


To experience the ease of using the Script Wizard, first add a Text Box ActiveX Control to your HTML file. After adding the CommandButton control in the previous section, repeat the procedure just described to add a Text Box control to the HTML file. ActiveX Control Pad assigns default Object IDs of CommandButton1 and TextBox1 to the controls respectively. Set the CAPTION of CommandButton1 as Click Me. You can also customize the font face and size of the caption. After you have both the controls embedded in your HTML file, invoke the Script Wizard from the Tools menu or from the toolbar icon. The Script Wizard starts as shown in Figure 11.4.

Figure 11.4. The Script Wizard window.

The Script Wizard consists of three panes, with a command panel at the bottom.

The left pane is the Event Pane, which displays a tree view of the objects and events to which you can assign scripts. The objects are listed in alphabetical order by ID name, and the events of that object are listed under that branch of the tree. To assign an action to a particular event, locate the object and click the event that you want to script. Thus you can choose the event handler you want to script.

The right pane is the Action Pane, which displays the various actions you can perform and the properties you can change in response to each event. If you have global variables and procedures in the script on your page, they are also listed in the Action Pane. To associate an action with the event you have selected, double-click the action. If you want to change the property of some object, double-clicking brings up a dialog box in which you can enter the new property value.

To define new global variables or write procedures, right-click in the Action Pane and select the appropriate option from the pop-up menu.

The bottom pane is the Script Pane, which lists in a sequential manner the actions you have assigned to specific events, giving you a lucid interpretation of the actions you have selected. You can reorder the sequence of actions, insert and delete actions, and modify property values by using the command buttons in the Script Pane. The Script Pane displays this simple list of actions, called List View by default. However, if you are comfortable with writing and editing scripts, you can also display the event-handler script by selecting the Code View radio button.

You would use Code View when writing event-handlers that do the following:

Note


ActiveX Control Pad does not support scripting of HTML <AHREF="..."> or <FRAMESET> tags.

Select the MouseUp event of CommandButton1 in the Event Pane, and double-click the Text property of TextBox1 in the Action Pane. Enter Hello World in the dialog box that appears. Close the Script Wizard, and you can see the following VBScript code added to your HTML file:


<SCRIPT LANGUAGE="VBScript">

<!--

Sub CommandButton1_MouseUp(Button, Shift, X, Y)

TextBox1.Text = "Hello World!"

end sub

-->

</SCRIPT>

Save the file as HELLO.HTM and view it in Internet Explorer 3.0. When you press the button, the text box displays Hello World.

You can return to the Script Wizard for editing the event handler directly by clicking the yellow icon next to the <SCRIPT> tag. The Script Wizard displays the Event Pane with a solid icon next to the MouseUp event of CommandButton1 in the event hierarchy indicating the presence of an event handler. Script Wizard also adds the event handler to the Procedures in the Action Pane.

Switch to Code View to see the event-handler code in the Script Pane.


Sub CommandButton1_MouseUp(Button, Shift, X, Y)

TextBox1.Text = "Hello World!"

The Sub statement is shown in a title at the top with the body of the event handler underneath. Notice that no End Sub statement is displayed. Script Wizard adds the End Sub statement for you after you finish writing the body of the event handler.

Caution


When working in Code View, do not type the End Sub statement at the end of your event handler, as this will result in duplicate End Sub statements being added to the script.

You can change the display font of the Script Pane Code View by right-clicking in the Script Pane.

You have just used the ActiveX Control Pad to develop an interactive Web page, using ActiveX technology, without writing code, with point-and-click ease!

Script Wizard can generate both VBScript and JavaScript code. You can select the code it generates from the Tools|Options menu. However, you may not mix both the languages in the same HTML file. If you have scripts in both languages in your HTML file, when you start Script Wizard, it will assume the language of the first <SCRIPT> block to be the default scripting language of the entire HTML file.

Note


ActiveX Control Pad does not support scripts external to the HTML file using the SRC= attribute of the HTML <SCRIPT> tag.


HTML Layout Control


Traditional HTML lacks 2D layout specification. In other words, there is no way for the Web author to specify the exact placement of images, text, and objects on a HTML page. For the most part, the browser is in control, not the author. Frames and tables have enhanced the interface of Web sites, but they are a far cry from the advanced layout capabilities that have turned desktop publishing into an industry.

Authors need to be able to specify exact placement of text, images, and other controls on a Web page to create well-defined interfaces. For more sophisticated Web page design, they need to be able to overlap text and images, use transparency effects, and specify the layering of the objects that are placed on the Web page.

As you might expect, these capabilities are soon to be incorporated in the W3C HTML specification. The World Wide Web Consortium, which defines HTML standards, has published a preliminary draft specification for 2D layout capabilities by evolving the stylesheet and frameset specifications. Microsoft has given ActiveX Web authors a head start in this direction by developing a special ActiveX Control for 2D HTML layout.

HTML Layout Control: Overview


The HTML Layout Control is an ActiveX Control that acts as a container for other ActiveX controls. It specifies a 2D layout region within the HTML file in which it is placed. The HTML Layout Control uses a separate file for referencing the controls that are placed within the layout. This file is a simple text file with an .ALX extension and is stored along with the HTML file. The HTML Layout Control is inserted in the HTML file using the <OBJECT> tag.

Note


This is an early implementation of the 2D layout capabilities to be supported in future HTML specifications. These layout specifications will be incorporated into native HTML syntax and will not require a separate file. Microsoft has promised to adhere to the W3C standards and accordingly incorporate layout support natively in Microsoft Internet Explorer in future versions.

Multiple HTML layout regions can be incorporated into a single HTML file. Multiple instances of the HTML Layout Control are created, and they can be individually aligned or placed in tables, and so on. These Layout Controls behave independently of each other and do not support scripting across multiple layout regions. This means that events occurring in one layout region are not visible to controls in other layout regions within the same HTML document.

Using the 2D-Style Layout Editor


This section explores how to incorporate a 2D-style layout region in an HTML file using the ActiveX Control Pad.

Start the ActiveX Control Pad from the Windows Start menu and when the new HTML file is being displayed in the Text Editor, select Edit|Insert HTML Layout. In the dialog box that appears, you can select a name and location for the .ALX file that would contain the 2D layout information. This file would normally be located in the same directory as the source HTML file. Specify new.alx for the filename and Control Pad confirms whether you want to create a new file. Click OK, and the HTML layout control is inserted in the HTML file.

Click the icon next to the <OBJECT> tag, and the ActiveX Control Pad launches the HTML Layout Editor as shown in Figure 11.5.

Figure 11.5. The HTML Layout Editor.

The HTML Layout Editor consists of a 2D region in which you can place the controls shown on a floating toolbox. The toolbox contains the ActiveX controls that you can place within the layout. This is similar to designing a form in Visual Basic.

You can specify default properties like the background color of the Layout region by either right-clicking on the empty region or by selecting Properties from the View menu. You can place a control in the 2D region by selecting it from the Toolbox and drawing it on the region. The Properties window displays the properties of the control that has the focus. You can also access the properties of a particular control by right-clicking the control. Experiment with using the various controls provided with ActiveX Control Pad.

As you become comfortable with using the Layout Editor, you will soon realize the incredible power you have for creating an attractively designed Web page. You can design an interface with command buttons, labels, text boxes, and list boxes. You can determine the exact placement of images and text, overlap controls, and set the layering of controls. Some of the subtle properties that are very effective in creating good Web pages are

After you finish drawing your controls, you can jump directly to the Script Wizard or you can return to Text Editor to view your HTML file. Control Pad will prompt you to save the file. The Text Editor window reappears, and the source HTML file now includes the <OBJECT> tag for the HTML Layout Control, as shown following:


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>

<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"

ID="new_alx" STYLE="LEFT:0;TOP:0">

<PARAM NAME="ALXPATH" REF VALUE="new.alx">

 </OBJECT>

</BODY>

</HTML>

When the browser parsing this file encounters the <OBJECT> tag, it instantiates the HTML Layout Control. The HTML Layout Control loads the .ALX file specified in the ALXPATH parameter. The HTML Layout Control in conjunction with the browser then displays the controls embedded in the .ALX file using the exact 2D layout as specified by you, the author.

Note


The complete URL for the ALXPATH parameter should be specified unless the .ALX file resides in the same directory as the source HTML file or in a directory underneath it.

You can view the resulting page by opening the source HTML file in Internet Explorer 3.0.

Tip


You can change the alignment of the HTML Layout region within the source file by surrounding in regular HTML formatting tags (such as <CENTER> or <p align = "right"> ... </p>) the <OBJECT> tag for the HTML Layout control. This is not achieved by setting the LEFT: and TOP: attributes of the STYLE parameter in the <OBJECT> tag used to insert the layout region.

Next, take a closer look at the .ALX file created for the Layout Control.

The .ALX File


The .ALX file is a text file and can be edited with a regular text editor. The .ALX file specifies the layout within the fixed 2D region—the controls embedded in it as well as the scripts associated with those controls. The layout is specified using the <DIV> tag, which is used by the W3C as a block tag for containing divisions in an HTML document. The <DIV> tag is used as shown in the following:


<DIV [ID=Layout_ID] STYLE = "layout-style-attributes">

   object-blocks

</DIV>

The <DIV> tag has two attributes.

The STYLE attribute further has the following attributes:

Inside the <DIV> tag are the <OBJECT> blocks specifying the controls placed within the 2D region.

Caution


The <OBJECT> tag may not be used to insert images, documents, or applets inside the .ALX file. The HTML Layout Control implementation currently supports only ActiveX Controls conforming to the ActiveX Controls '96 specification for windowless, transparent controls.

One or more <SCRIPT> blocks may be inserted before or after the <DIV> block, but not within it.

The limitation of this preliminary implementation of the layout region in the form of a separate .ALX file is that a transparent object hierarchy including the source HTML file and the controls within the layout region is no longer present.

The browser parses the HTML source file before the Layout Control renders the layout specified in the .ALX file. Hence, you cannot access any properties, events, or methods of the objects in the layout from scripts in the source HTML document.

Similarly, the scripts in the .ALX file cannot access all the methods and events of the window object of the HTML file. Scripts can only access the window.location.href property of the source HTML file so that the controls placed in the layout region can trigger navigation of the browser window.

Note


Some ways to bypass the inherent limitation of the .ALX layout implementation have been tried with mixed results, particularly for accessing the properties or methods of ActiveX Controls in the .ALX Layout file from the source HTML file.



In some circumstances, adding an OnLoad="InitALX" attribute to the <OBJECT> tag for the HTML Layout or referencing the ActiveX Control in the layout FILE.ALX as Control_ID.FILE.property may seem to work, but these are not officially supported and thus not recommended.


Using HTML Layout Control Effectively


The HTML Layout Control can be used to create a layout template that you can reuse in multiple Web pages. You might use this for making navigation toolbars, consistent interfaces for query forms, and style templates for electronic Web Magazines (Ezines).

You can achieve a dramatic improvement in the look of your Web pages by using transparent overlapping images. A basic understanding of images used in ActiveX Control Pad gives you the power to use these techniques effectively.

Several controls in the toolbox, such as the CheckBox, Command Button, and so forth, enable you to specify a PICTURE property. The PICTURE property specifies images that are embedded in the .ALX file. Embedded images of the .bmp, .cur, .wmf, .jpg, .gif, .ico image file types are read by the PICTURE property, converted into text format, and stored with the DATA attribute. You should consider the size of the images you select for the PICTURE property because using many large images will bloat the .ALX file. Use the PICTURE property for small icons and graphics so that the .ALX file is not large, and the user does not have to download a separate image file.

The other way you can use images on your Web page is using the Image Control. The Image Control is different than the other controls because it references the image URL specified in its PicturePath property at runtime. The PicturePath property of the Image Control can load .bmp, .jpg, .gif, .wmf format image files, but the user has to download the external image from the separate file at runtime.

Transparent images are ones in which a particular pixel color is rendered with the color of the background by the browser. Embedded images in ActiveX Control Pad are always transparent, whether the source file format supported transparency or not. In the case of file formats that do not support transparency like .bmp and .wmf, the HTML Layout Control assumes the color of the lower left pixel of the image to be the transparent color. Transparency in external images is determined by the file format of the image. The GIF89a image specification supports transparent images, but .jpg does not.

Note


The HTML Layout Control does not support animated GIF89a files.

If your Web page uses controls that are large in dimensions, you might want to improve the performance of your Web page by increasing the size of the off-screen buffer used for painting your page. The number of pixels reserved for off-screen painting is specified by the DrawBuffer property of the HTML Layout Control. The default size allows for 32,000 pixels, which is fine for most Web pages. If you use larger images, however, you can specify a higher value.

You saw how the HTML Layout control in conjunction with the ActiveX Control Pad lets Web authors develop interactive Web pages with precise control placement. The next section consolidates your knowledge of the ActiveX Control Pad and the HTML Layout Control to develop a simple ActiveX puzzle.

ActiveX Web Puzzle


After seeing the power and ease of use of the ActiveX Control Pad, it is time to develop a sample application of this powerful tool. Remember the game in which the numbers 1 to 8 appear randomly in a 3*3 matrix, and the player has to sort them using the empty slot in the matrix? Figure 11.6 shows just such a puzzle developed with the ActiveX Control Pad supplied on the accompanying CD-ROM. You can copy the source files from the SOURCE\CHAP13\ directory on the CD-ROM.

Figure 11.6. A puzzle developed using ActiveX Control Pad.

Developing such an application for the Web is quite easy using the ActiveX Control Pad. Continue through the steps needed to develop the puzzle.

Implementation Strategy


Here's an overview of the technique required for implementing the puzzle. The game starts with initializing the digits in a random order on the game board. A mouse click on a button horizontally or vertically adjacent to the empty slot should move the button into the slot, and all other invalid mouse clicks should be ignored. At every click, the program needs to check whether the puzzle is solved. It will also provide for restarting the game whenever desired.

The straightforward way of using eight buttons and moving them at every mouse click leads to the complexity of tracking the coordinates of buttons. A trick to avoid this is to use nine buttons instead of eight and simply change their caption. An invisible button simulates the empty slot. On a valid mouse click, you change the Caption of the invisible button to that of the clicked button and toggle the visibility of the two buttons.

To track the progress of the puzzle, you will maintain an array of eight Boolean values. Each element of the array corresponds to a button, and its value depends on whether the button is in the proper place. After the initialization in a random state, you evaluate the state and initialize the array.

You also keep a count of the number of moves so that you can display the number of moves in which the puzzle was solved.

Creating the Layout


Start by creating the layout for the puzzle using the ActiveX Control Pad. In a new HTML file, insert an HTML Layout Control and name the file as PUZZLE.ALX. Insert nine CommandButton controls, arranging them in a matrix similar to that shown in Figure 11.6. Change the default IDs for the buttons to CB1, CB2, and so on up to CB9.

Add two labels for displaying the winning message and the number of clicks at the top and then change their default IDs to LblWon and LblClicks. Next draw the Restart command button below the button array, setting its ID to btnRestart.

For enhancing the aesthetics of this puzzle, you can add an Image Control for displaying a background image. Add an Image Control, setting its Picture property to point to an image file. If you have an image that is small in size, you can set the PictureTilingMode to True. The Image Control is drawn in front of the other controls, so right-click it and choose Send to Back from the pop-up menu. Now select the LblWon, btnRestart, and LblClicks controls and change their BackStyle property to transparent.

Tip


Press the Control key while clicking for selecting multiple non-adjacent controls so that you can edit properties of multiple controls at a time.

Adjust the BackColor and ForeColor of the buttons in the grid to a suitable color. Close the Layout Editor and save PUZZLE.ALX. Also save the source HTML file as PUZZLE.HTM.

The resulting source HTML file PUZZLE.HTM is shown in Listing 11.1.

Listing 11.1. The source HTML file for ActiveX Puzzle (PUZZLE.HTM).


<HTML>

<HEAD>

<TITLE>New Page</TITLE>

</HEAD>

<BODY>

<CENTER>

    <OBJECT ID="puzzle_alx"

     CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF">

        <PARAM NAME="ALXPATH" REF VALUE="puzzle.alx">

    </OBJECT>

</CENTER>

</BODY>

</HTML>

You are done with the layout of your puzzle! Now you can add the scripting to make it functional.

Scripting the Puzzle


Before we embark on writing the script for the puzzle, make sure you are comfortable with using VBScript. If not, it might be a good idea to review Chapter 8, "VBScript," which discusses the VBScript language in detail.

While the PUZZLE.ALX is open in the Layout Editor, start Script Wizard by clicking on the Script Wizard Toolbar icon or by right-clicking in the background of the .ALX file and selecting "Script Wizard..." from the pop-up menu.

Start by defining the global variables to use. In the Action Pane right-click pop-up menu, choose Add Global Variable. Enter two variables in this way, named Click and Right(8). Click counts the number of moves, and Right is the array in which you maintain the progress of the game.

Next, script the custom procedures. Three procedures are used.

  1. 1. Call_To_Start_Fresh() initializes the puzzle.
  2. 2. Display_Buttons_At_Random() does just that.
  3. 3. Is_Over() checks whether the puzzle is solved.

Choose Add Procedure from the Action Pane pop-up menu, and add the three procedures shown in Listing 11.2.

Listing 11.2. Procedures for the puzzle.


' This Subroutine is used to to Initialize the Game

Sub Call_To_Start_Fresh()

Dim t

' Array Right() is Initialized to False :0:

    for t=1 to 8

        Right = 0

    Next

' Subroutine Display_Buttons_At_Random is used to

' initially start the game in random state

Call Display_Buttons_At_Random()

' Make the Label for "You Have Won" Invisible

    LblWon.Visible = False

    LblClicks.Visible = False

    LblClicks.Caption = ""

    Click = 0

' To check whether the game has been won by randomize!

    Call Is_Over()

End Sub

' Subroutine Display_Buttons_At_Random is used to

' Initially Start the game in random state

Sub Display_Buttons_At_Random()

Dim Number(8)

Dim Random_Number

Dim Button

Dim j

Dim Re_Generate

Button=1

j=1

Re_Generate=True

while Button <= 8

    While Re_Generate = True

        Re_Generate = False

        Randomize

        Random_Number= Int((8 * Rnd)+1)

        while Re_Generate = False And j <= Button-1

            if Number = Random_Number then

                Re_Generate = True

            End if

            j = j + 1

        Wend

        j=1

        if Re_Generate = False then

            Number(Button) = Random_Number

            Button = Button + 1

        End If

    Wend

    Re_Generate = True

Wend

' Make all buttons visible accept the last

CB1.Visible = True

CB2.Visible = True

CB3.Visible = True

CB4.Visible = True

CB5.Visible = True

CB6.Visible = True

CB7.Visible = True

CB8.Visible = True

CB9.Visible = False

' Assign the generated random numbers to all buttons

CB1.Caption = CStr(Number(1))

CB2.Caption = CStr(Number(2))

CB3.Caption = CStr(Number(3))

CB4.Caption = CStr(Number(4))

CB5.Caption = CStr(Number(5))

CB6.Caption = CStr(Number(6))

CB7.Caption = CStr(Number(7))

CB8.Caption = CStr(Number(8))

end sub

' Subroutine to check whether the puzzle is solved

Sub Is_Over()

Dim Total

Dim Num

If CB1.Caption = "1" then

    Right(1) = 1

End If

If CB2.Caption = "2" then

    Right(2) = 1

End If

If CB3.Caption = "3" then

    Right(3) = 1

End If

If CB4.Caption = "4" then

    Right(4) = 1

End If

If CB5.Caption = "5" then

    Right(5) = 1

End If

If CB6.Caption = "6" then

    Right(6) = 1

End If

If CB7.Caption = "7" then

    Right(7) = 1

End If

If CB8.Caption = "8" then

    Right(8) = 1

End If

for i=1 to 8

    Total = Total + Right

Next

If Total = 8 then

    LblWon.Visible = True

    btnRestart.Caption = "Play Again  ?"

    If Click <> 0 then

        LblClicks.Visible = True

        LblClicks.Caption = "          in " & CStr(Click) & " clicks"

    End If

End If

End Sub

After entering the procedures, you'll add the event handlers for the MouseUp event of the buttons in the grid. Here's what the event handler does:

The number of possible moves for a button is dependent on its location in the grid, for example, CB1 can move only to CB2 and CB4, whereas CB2 can move to CB1, CB5, and CB3. The third possibility is the center button, for which there are four possible moves.

The event handler for the button CB5 is shown in Listing 11.3; it is pretty simple to add similar ones for the others.

Listing 11.3. Event handlers for MouseUp event of buttons in puzzle.


Sub CB5_MouseUp(Button, ShIft, X, Y)

If CB5.Caption = "5" then

    Right(5) = 1

End If

If CB5.Visible = True then

    If CB2.Visible = False then

        CB2.Visible = True

        CB2.Caption = CB5.Caption

        CB5.Caption = ""

        CB5.Visible = False

        Click = Click + 1

    End If

    If CB4.Visible = False then

        CB4.Visible = True

        CB4.Caption = CB5.Caption

        CB5.Caption = ""

        CB5.Visible = False

        Click = Click + 1

    End If

    If CB6.Visible = False then

        CB6.Visible = True

        CB6.Caption = CB5.Caption

        CB5.Caption = ""

        CB5.Visible = False

        Click = Click + 1

    End If

    If CB8.Visible = False then

        CB8.Visible = True

        CB8.Caption = CB5.Caption

        CB5.Caption = ""

        CB5.Visible = False

        Click = Click + 1

    End If

End If

If CB5.Caption = "5" then

    Right(5) = 1

else

    Right(5) = 0

End If

Call Is_Over()

End Sub

Finally, you call the initialization procedure from the OnLoad event of the HTML Layout Control and also handle the MouseUp event for the Restart button as shown in Listing 11.4.

Listing 11.4. HTML Layout OnLoad and Restart button MouseUp event handlers.


' Subroutine called when the Layout is loaded

Sub Layout1_OnLoad()

Call Call_To_Start_Fresh()

End Sub

' Subroutine to be called when Button for "Re-start" or "Play Again" is Pressed

Sub btnRestart_MouseUp(Button, Shift, X, Y)

Call Call_To_Start_Fresh()

LblWon.Visible = False

btnRestart.Caption = "Restart"

End Sub

After you have the scripts in place, save the files PUZZLE.ALX and PUZZLE.HTM, and double-click PUZZLE.HTM to start Microsoft Internet Explorer. Figure 11.7 shows the winning screen after the puzzle is solved.

Figure 11.7. The ActiveX Puzzle winning screen.

Enjoy the game!

ActiveX Search Page


The ActiveX Puzzle application demonstrates the power of the Layout Control in creating interactive Web pages. Now see how you can use the ActiveX Control Pad to utilize the Internet Explorer Object Model interface for adding advanced capabilities to your Web pages.

A fairly common Web application is an all-in-one Internet search page where the user can type his keywords and select the source and/or type of search. Normal HTML forms that accomplish this generally present a cluttered interface to the user, because they are limited by the HTML form object implementation.

Using ActiveX, however, you can develop a sophisticated interface using ActiveX controls in HTML layout regions, and create an intuitive interface for the user. Your search page needs to collect data from the user and pass it on to the search engine of the user's choice.

To demonstrate how you can accomplish this using the ActiveX Control Pad, you'll develop a sample Search Page from which the user can select the search engine from a drop-down list box and enter his query keywords. When he activates the Go button, your Web page will pass the keywords along with any optional parameters to the appropriate search engine server. The browser will navigate to the site and display the query results on that site. The ActiveX Search Page as seen in Internet Explorer is shown in Figure 11.8. The source files for the ActiveX Search Page can be found on the CD-ROM accompanying this book in the \SOURCE\CHAP13 directory.

Figure 11.8. The ActiveX Search Page.

For your sample search page, allow the user to choose his search site between Yahoo, WebCrawler, DejaNews, and AltaVista. Note that your Web page has to supply the query data to the server script executing on these Web sites. In order to interface your page correctly with the server application on the search site, emulate the form used by that search site. Further, some search sites support additional parameters for customizing the results. For instance, the popular DejaNews Usenet search enables you to specify the number of hits requested, and AltaVista enables you to return results in Standard, Compact, or Detailed form.

Note


The server applications of search engines are modified from time to time, and if you are interested in implementing an ActiveX search interface on the Web, you should constantly monitor the sites accordingly.


Emulating an HTML Form Through ActiveX


The HTML FORM object lies below the Document Object in the Object Scripting Model. The HTML form that you create in your source file would have to be filled with the data from the controls in the HTML Layout Control. You create hidden input fields in your HTML form and transfer the data using scripts. When the user clicks the Go Button, you trigger the SUBMIT event of the form object.

Because each search engine uses a different FORM, you include an HTML form for each of them, with the appropriate number of input fields, which are given specific names used by the search engine. The trick to discover the number and names of input fields required by a search engine is to view the HTML source of the query page of the Web site.

To demonstrate the advantages of using ActiveX to create a form rather than using pure HTML forms, the next step is to alter the interface at runtime according to the search engine selected by the user. If this is done, the user easily can utilize the custom options that a particular search engine supports.

Developing the ActiveX Search Page


The source for the HTML file with unique forms for each search engine is shown in Listing 11.5.

Listing 11.5. Source HTML file for ActiveX Search page (SEARCH.HTM).


<HTML>

<HEAD>

<TITLE>ActiveX Search Page</TITLE>

</HEAD>

<BODY>

<!-- form for search in DejaNews -->

<FORM NAME="SearchFormIdDeja" METHOD=POST 

ACTION="http://xp5.dejanews.com/dnquery.xp">

    <INPUT TYPE="hidden" NAME="query">

    <INPUT TYPE="hidden" NAME="defaultOp" VALUE="AND">

    <INPUT TYPE="hidden" NAME="svcclass" VALUE="dncurrent">

    <INPUT TYPE="hidden" NAME="maxhits">

</FORM>

<!-- form for search in AltaVista -->

<FORM NAME="SearchFormIdAlta" METHOD=GET 

ACTION="http://www.altavista.digital.com/cgi-bin/query">

    <INPUT TYPE="hidden" NAME="pg" VALUE=q>

    <INPUT TYPE="hidden" NAME="what">

    <INPUT TYPE="hidden" NAME="fmt">

   <INPUT TYPE="hidden" NAME="q">

</FORM>

<!-- form for search in Yahoo -->

<FORM NAME="SearchFormIdYahoo" METHOD=GET 

ACTION="http://search.yahoo.com/bin/search">

    <INPUT TYPE="HIDDEN" NAME="p">

</FORM>

<!-- form for search in WebCrawler -->

<FORM NAME="SearchFormIdCrawler"  METHOD="POST" 

ACTION="http://www.webcrawler.com/cgi-bin/WebQuery" >

    <INPUT TYPE="hidden" NAME="searchText">

    <INPUT TYPE="hidden" NAME="maxHits">

    <INPUT TYPE="hidden" NAME="mode">

</FORM>

<!-- HTML Layout for ActiveX Search Page -->

<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF"

ID="query_alx" STYLE="LEFT:0;TOP:0">

<PARAM NAME="ALXPATH" REF VALUE="query.alx">

</OBJECT>

</BODY>

</HTML>

Creating the Layout for the ActiveX Search Page


The complete layout is illustrated in Figure 11.9.

Figure 11.9. Layout for the ActiveX Search page.

The layout development for the ActiveX Search page is fairly straightforward. Table 11.2 enlists and describes the controls used in the layout.

Table 11.2. Controls used in the ActiveX Search page.

Control_ID Description btnGo Command Button for starting the search lblEngine "Select Engine" Label lblGet "Get" Label lblHits "Hits" Label lblQuery "Enter Query" Label lblReturn "Return:" Label lblSearch "Search:" Label lblTitle "ActiveX Search Page" Label lbNames Drop-down list of Web Search Engines optbtnHitType1 Option (Radio) Button for selecting Format of Hits optbtnHitType2 Option (Radio) Button for selecting Format of Hits optbtnHitType3 Option (Radio) Button for selecting Format of Hits optbtnNews Option (Radio) Button for selecting Usenet search optbtnWeb Option (Radio) Button for selecting Web search txtboxHits Text Box for specifying number of hits to return txtboxQuery Text Box for entering the query text

A colorful background is selected for lblTitle, and the labels are made transparent for an enhanced appearance. You are now ready for adding scripts.

Scripting the ActiveX Search Page


You'll proceed by first adding the global variables as before. Add query_string, mode_str, maxhits_str, what_str = "Web" as four global variables, from the pop-up menu in the Action Pane. The global variables are used as follows:

The HTML Layout OnLoad event handler adds the names of the search engines to the list box at runtime and selects the first as default. This is shown following:


Sub Layout1_OnLoad()

    call lbNames.AddItem("Yahoo")

    call lbNames.AddItem("Web Crawler")

    call lbNames.AddItem("DejaNews UseNet")

    call lbNames.AddItem("Altavista")

    lbNames.Value = "Yahoo"

end sub

The script for handling the Change event for the drop-down list box, radio buttons, and text boxes is shown in Listing 11.6.

Listing 11.6. Change event handlers for ActiveX Search page controls.


Sub lbNames_Change()

 optbtnHitType1.Visible = True

 Dim comp

 comp = StrComp(lbnames.Value,"WebCrawler")

 if comp = 0 then

     optbtnHitType1.Caption = "Compact"

     optbtnHitType1.Visible = True

     optbtnHitType2.Caption = "Titles"

     optbtnHitType2.Visible = True

     optbtnHitType3.Caption = "Summaries"

     optbtnHitType3.Visible = True

     optbtnHitType1.Value = True

     optbtnWeb.Visible = False

     optbtnNews.Visible = False

     optbtnHitType3.Value = True

     lblReturn.Visible = True

     lblGet.Visible = True

     lblHits.Visible = True

     txtboxHits.Visible = True

     lblSearch.Visible = False

 End If

 comp = StrComp(lbnames.Value,"Yahoo")

 if comp = 0 then

     optbtnHitType1.Visible = False

     optbtnHitType2.Visible = False

     optbtnHitType3.Visible = False

     optbtnWeb.Visible = False

     optbtnNews.Visible = False

     lblReturn.Visible = False

     lblGet.Visible = False

     lblHits.Visible = False

     txtboxHits.Visible = False

     lblSearch.Visible = False

 End If

 comp = StrComp(lbnames.Value,"DejaNews UseNet")

 if comp = 0 then

     optbtnHitType1.Visible = False

     optbtnHitType2.Visible = False

     optbtnHitType3.Visible = False

     optbtnWeb.Visible = False

     optbtnNews.Visible = False

     lblReturn.Visible = False

     lblGet.Visible = True

     lblHits.Visible = True

     txtboxHits.Visible = True

     lblSearch.Visible = False

 End If

 comp = StrComp(lbnames.Value,"Altavista")

 if comp = 0 then

     optbtnHitType1.Caption = "Standard"

     optbtnHitType1.Visible = True

     optbtnHitType2.Caption = "Compact"

     optbtnHitType2.Visible = True

     optbtnHitType3.Caption = "Detailed"

     optbtnHitType3.Visible = True

     optbtnHitType1.Value = True

     optbtnWeb.Visible = True

     optbtnNews.Visible = True

     lblReturn.Visible = True

     lblGet.Visible = False

     lblHits.Visible = False

     lblSearch.Visible = True

     optbtnWeb.Value = True

     txtboxHits.Visible = False

 End If

end sub

Sub optbtnHitType3_Change()

 Dim comp

 comp = StrComp(lbnames.Value,"Altavista")

 if comp = 0 then

     mode_str = "d"

 else

     mode_str = optbtnHitType3.Caption

 End If

end sub

Sub optbtnHitType2_Change()

 Dim comp

 comp = StrComp(lbnames.Value,"Altavista")

 if comp = 0 then

     mode_str = "c"

 else

     mode_str = optbtnHitType2.Caption

 End If

end sub

Sub optbtnHitType1_Change()

 Dim comp

 comp = StrComp(lbnames.Value,"Altavista")

 if comp = 0 then

     mode_str = "."

 else

     mode_str = optbtnHitType1.Caption

 End If

end sub

Sub txtboxQuery_Change()

    query_string = txtboxQuery.Value

end sub

Sub txtboxHits_Change()

    maxhits_str = txtboxHits.Value

end sub

The Change event handlers for the type of results desired adapt the mode_str variable to the appropriate value. The Change event handlers for the txtboxQuery and txtboxHits Text boxes update the query_string and maxhits_str global variables respectively.

The search engine drop-down list box determines the controls that are visible after a particular search engine is selected. The Yahoo search doesn't support any parameters; WebCrawler enables you to select the format of the results and the number of hits. Similarly, DejaNews supports specifying the number of hits returned, whereas with AltaVista you choose the format of the results and the search field (Web or Usenet).

The lbNames_Change event handler makes the appropriate controls visible when a particular search engine is selected. Selection among the type of results desired (mode_str) is implemented by handling the Change event for each of the option buttons, whereas the field of query for the AltaVista search is scripted using MouseUp event-handlers. This is because mode_str is used by both WebCrawler and AltaVista, whereas the Web/Usenet choice of option buttons is only relevant to AltaVista.

Finally, the MouseUp event handlers for the AltaVista Usenet/Web Option Buttons and the Go Button are given in Listing 11.7.

Listing 11.7. MouseUp event handlers for ActiveX Search page controls.


Sub optbtnNews_MouseUp(Button, Shift, X, Y)

    what_str = "news"

end sub

Sub optbtnWeb_MouseUp(Button, Shift, X, Y)

    what_str = "web"

end sub

Sub btnGo_MouseUp(Button, Shift, X, Y)

 Dim frmSearchFormIdDeja

 Dim frmSearchFormIdYahoo

 Dim frmSearchFormIdCrawler

 Dim frmSearchFormIdAlta

 Dim comp

 comp = StrComp(lbnames.Value,"DejaNews UseNet")

 if comp = 0 then

     Set frmSearchFormIdDeja = Document.SearchFormIdDeja

     frmSearchFormIdDeja.query.Value = query_string

     frmSearchFormIdDeja.maxhits.Value = maxhits_str

     frmSearchFormIdDeja.Submit

 End If

 comp = StrComp(lbnames.Value,"Yahoo")

 if comp = 0 then

     Set frmSearchFormIdYahoo = Document.SearchFormIdYahoo

     frmSearchFormIdYahoo.p.Value = query_string

     frmSearchFormIdYahoo.Submit

 End If

 comp = StrComp(lbnames.Value,"Web Crawler")

 if comp = 0 then

     Set frmSearchFormIdCrawler = Document.SearchFormIdCrawler

     frmSearchFormIdCrawler.searchText.Value = query_string

     frmSearchFormIdCrawler.mode.Value = mode_str

     frmSearchFormIdCrawler.maxHits.Value = maxhits_str

     frmSearchFormIdCrawler.Submit

 End If

 comp = StrComp(lbnames.Value,"AltaVista")

 if comp = 0 then

     Set frmSearchFormIdAlta = Document.SearchFormIdAlta

     frmSearchFormIdAlta.what.Value = what_str

     frmSearchFormIdAlta.fmt.Value = mode_str

     frmSearchFormIdAlta.q.Value = query_string

     frmSearchFormIdAlta.Submit

 End If

end sub

The MouseUp event handler for the Go button checks for the string in the search engine drop-down list box, and accordingly it sets the hidden form variables to the global variables. After the required fields of the form are initialized, it calls the SUBMIT method for the form, submitting the query to the search engine.

You can test the ActiveX Search Page by copying the source files to a Web server and browsing the SEARCH.HTM file using Internet Explorer 3.0.

This example shows you the ready-made functionality that the ActiveX Controls supplied with the ActiveX Control Pad offer for developing customized superior interfaces for your Web pages. Now take a cursory look at some additional controls that Microsoft provides for developing superlative Web pages.

Additional ActiveX Controls Supplied by Microsoft


The ActiveX Controls shipped with the ActiveX Control Pad are standard controls that can be used for most application interfaces ported to the Web. However, to develop powerful compelling Web pages, you can make use of additional ActiveX Controls that are offered by Microsoft. These controls can be downloaded from the Internet at Microsoft's ActiveX Controls Web Page at http://www.microsoft.com/intdev/controls/ctrlref.htm. Table 11.3 lists sample controls available on the ActiveX Controls Web Page.

Table 11.3. Additional ActiveX Controls available at Component Gallery.

Control Description ActiveMovie Displays sound and video data with support for different file formats and streaming Animated Button Used for displaying various frame sequences of an AVI depending on the button state Chart Displays charts in different styles like bar-chart, pie-chart, and so on Gradient Draws shaded transition between colors Label Draws text in angles and along user-defined curves Marquee Displays scrolling and/or bouncing URLs Menu Displays a menu button or a pull-down menu Pop-up Menu Displays a pop-up menu Pop-up Window Displays specified HTML documents in a pop-up window Preloader Downloads a URL in the background to store in cache Stock Ticker Displays changing data in text or XRT format at regular intervals Timer Generates periodic events View Tracker Detects whether control is in the viewable area

Along with the above ActiveX controls, there are several controls from third-party vendors which are available at the ActiveX Component Gallery on the World Wide Web. The ActiveX Component Gallery at http://www.microsoft.com/activex/controls is an impressive assortment of powerful controls.

The next section addresses a few issues relevant to publishing Web pages developed using ActiveX Controls supplied along with ActiveX Control Pad or from third-party vendors.

Using Custom or Third-Party ActiveX Controls


There are over a thousand ActiveX Controls available today, and you can expect this figure to rise astronomically as ActiveX gains momentum. In order to use these custom controls to publish active Web pages, there is an important property that has to be specified in the <PARAM> attribute of the <OBJECT> tag used for the control. This is the CODEBASE property.

When users browse a Web page developed with an ActiveX Control that is not installed on their system, the CODEBASE property identifies the source URL where the browser can locate the ActiveX Control and automatically download it. Depending on the browser's security settings, the browser will either ask the user before installing the control or install the control automatically and then display the Web page.

If you are using one of the controls shipped along with the ActiveX Control Pad, you can download the Mspert10.cab file from Microsoft's Web site at http://activex.microsoft.com/controls/mspert10.cab. Copy this file to the Web server on which you are publishing your Web page. To set the browser for automatic downloading, you need to point the CODEBASE attribute of the controls that you use to point to this file on your server. Alternatively, you can set CODEBASE to point to Microsoft's Web site, but this would require additional overhead for the browser to establish a connection with Microsoft's Web server.

Caution


If you use ActiveX controls on your server and point the CODEBASE attribute to your server, be sure that the control is digitally signed and certified. Refer to the Microsoft ActiveX Code Signing Documentation in the ActiveX Software Development Kit (SDK) for details.

When using ActiveX controls from the Component Gallery or a third-party ActiveX Control, be sure to refer to the documentation of the control and specify the CODEBASE attribute correctly. Otherwise, users who do not have the control installed on their system may be unable to view your Web page.

Some examples of ActiveX Controls shipping today are

You can download and look for many more ActiveX Controls in the ActiveX Component Gallery at http://www.microsoft.com/activex/controls. New controls are being added to the ActiveX Component Gallery frequently.

These examples should give you a glimpse of the exciting possibilities offered by ActiveX technology.

Summary


This chapter gave you a glimpse of how you can exploit the power of ActiveX using the first development environment for using ActiveX Controls to build Web pages, the ActiveX Control Pad.

In the next chapter, you'll learn how to build advanced Web pages, including animation, using the techniques that were discussed in Part 2, "ActiveX Scripting," and 3, "Active Web Pages," of this book.

Previous Page Page Top TOC Next Page