The Microsoft ActiveX Control Pad

Microsoft Corporation
June 5, 1996

Download Download Microsoft Word (.DOC) format of this document (zipped, 73.4K).

Contents:

Introduction
ActiveX Controls
Using the ActiveX Control Pad
   The Text Editor
   The Object Editor
   The Script Wizard
   Authoring for 2-D Layout: Adding Advanced Layout Regions
   Compatibility and Future Support
Distribution and Licensing of the ActiveX Control Pad
Conclusion


Introduction

The Microsoft® ActiveX™ Control Pad is a utility that makes it easier to author Web pages that incorporate leading-edge, ActiveX content. Specifically, the ActiveX Control Pad makes it easy to add ActiveX controls and ActiveX scripting (Microsoft Visual Basic® Scripting Edition [VBScript] or JavaScript™) to HTML pages for viewing in Microsoft Internet Explorer 3.0 or other Web browsers that support ActiveX controls. The ActiveX Control Pad also includes WYSIWYG support for authoring 2-D layout regions in conjunction with the Microsoft HTML Layout Control. (Please see the Microsoft HTML Layout Control white paper for more information on 2-D-style authoring using the HTML Layout Control.)

The ActiveX Control Pad consists of the following core components:

UpBack to top of page


ActiveX Controls

ActiveX controls are interactive objects created by programmers that can be embedded in Web pages to enhance the experience of a Web site. For example, an ActiveX video control could be used to enhance a Web page with real-time video sequences.

The controls are language-independent and can be programmed using programming languages such as C++, future versions of the Microsoft Visual Basic® programming system, or Java. Over 1,000 ActiveX controls are available today from a wide variety of software vendors.

While the ActiveX Control Pad includes a number of Microsoft-supplied ActiveX controls, the toolbox can also be customized with third-party ActiveX controls, such as the Macromedia® Shockwave™ for Director™ control, the Adobe™ Acrobat™ control, or any other available ActiveX control.

UpBack to top of page


Using the ActiveX Control Pad

The ActiveX Control Pad is based on a document authoring metaphor, using document types of .HTM, .HTML, and .ALX. Users create, open, edit, and save these document types within the ActiveX Control Pad. The ActiveX Control Pad uses a multiple document interface so that authors can open and edit multiple documents within a single running instance of the application. The main window displays an HTML document in text form and includes a navigation bar along the left side with buttons that launch specific editors for adding the following features to the HTML document:

UpBack to top of page


The Text Editor

Creating a new HTML file opens a window with HTML text, as shown in Figure 1.

[APA2388B  8282 bytes ]

Figure 1. The ActiveX Control Pad Text Editor window

The author can edit the raw HTML (which may have been created in any WYSIWYG HTML editor, such as Internet Assistant for Microsoft Word, or Microsoft FrontPage™) within the text window. The Text Editor includes basic editing functions, including drag/drop of selected text blocks within the text document, multiple level undo/redo, cut, copy, paste, and basic file manipulation operations.

UpBack to top of page


The Object Editor

Without a tool to help insert ActiveX controls into an HTML document, users must manually enter the HTML <OBJECT> syntax for each control, including:

Manually entering this data in a text editor can be time-consuming and difficult, especially when one considers that each ActiveX control has its own CLSID that must be entered. In addition, the process is even more difficult because there is no visual metaphor for setting control properties. Listed below is a typical entry for a single ActiveX control within a blank HTML document:

<HTML>
<BODY bgcolor="#804000">
<BGSOUND SRC="file:c:\winston\sounds\bbtrans.mid">

<CENTER>
<OBJECT CLASSID="CLSID:812AE312-8B8E-11CF-93C8-00AA00C08FDF" ID="winclub" 
WIDTH=600 HEIGHT=380> 
<PARAM NAME="ALXPath" VALUE="http://www.myserver.com/winclub.alx"> </OBJECT>
</CENTER>

</BODY>
</HTML>

The Object Editor makes inserting ActiveX controls significantly easier. The Object Editor lets users insert and edit individual ActiveX objects in an HTML file using a simple visual metaphor similar to a Visual Basic form. The Object Editor includes a modal form and a property table for the control to be inserted.

Inserting an ActiveX control into an HTML document

To invoke the Object Editor, the user simply positions the text input cursor at the point in the HTML stream where he or she wants to insert an ActiveX control and then chooses Insert Object from the Edit menu. The Object Editor appears with a dialog box offering a list of controls registered on the user's system. To insert an ActiveX control, the user simply selects it from the dialog box. The control appears on the Object Editor Form, and can be resized appropriately. The user visually sets properties on the control using the property table, which can be invoked and dismissed by double-clicking the control. Many of the available controls also support WYSIWYG in-place editing for adding text. When the user closes the Object Editor, the ActiveX Control Pad automatically generates the HTML <OBJECT> syntax in the appropriate location in the HTML document, including locating and copying the CLSID for the control from the registry and generating syntax for <PARAM property-name VALUE property-value> based on the property values visually set by the user.

[APA2388C  14022 bytes ]

Figure 2. Inserting an ActiveX control with the Object Editor

Because HTML follows a stream-based metaphor, you can use the form-based Object Editor to add only a single control at a time. HTML as specified today cannot recognize exact positioning information for multiple controls within a document (in other words, HTML has no mechanism for specifying exact x, y, and z coordinates for objects). Thus, adding multiple controls with a single instance of the Object Editor is not allowed--instead, the user must invoke a separate instance of the Object Editor for each ActiveX control to be added to an HTML document. These controls can then be positioned within the HTML stream to the extent possible using available HTML formatting options.

Microsoft has also provided an early implementation of exact, 2-D-style layout for HTML, similar to Visual Basic forms and popular desktop publishing tools. This early implementation is based on an early draft specification by the World Wide Web Consortium (W3C) for a future version of HTML. Using 2-D-style layout, authors and developers can use the ActiveX Control Pad to create forms that contain multiple controls, exactly placed within the Web browser (including x and y coordinate placement and z-ordering for object layering). When inserting a 2-D region by using the ActiveX Control Pad, authors are allowed to place and position multiple ActiveX controls on a form, which is to be displayed using the Microsoft HTML Layout Control within the Web browser. For information on 2-D-style authoring with the ActiveX Control Pad, read the section Authoring for 2-D Layout: Adding Advanced Layout Regions below.

Tracking ActiveX controls within the HTML document

The Text Editor contains a vertical left pane that provides a visual icon for each ActiveX control placed in the document. This visual representation helps track objects added to an HTML document, and allows users to easily invoke the Object Editor to make changes to previously added objects. Clicking the icon from the Text Editor invokes the Object Editor and displays the ActiveX control for further editing and revising properties.

UpBack to top of page


The Script Wizard

The purpose of the Script Wizard is to make it easy to add interactivity to Web pages, based on actions and events associated with ActiveX controls. The Script Wizard includes a user interface for easily connecting an event (such as a mouse click) with an action (such as playing a video clip). The interface provides a choice between two modes--designer mode and developer mode--for users with different levels of programming experience.The Script Wizard supports both VBScript and JavaScript. To invoke the Script Wizard, the user simply selects Script Wizard from the main Options menu. The following window will appear:

[APA2388D  12844 bytes ]

Figure 3. The Script Wizard

In list view, the Script Wizard lists, in the left-hand pane, all of the events associated with a given object in the HTML document. The user can double-click an event in the left pane to select an associated action in the right pane. Multiple actions can be added in this manner to a single event, without requiring any programming. In code view, actions are shown as actual lines of VBScript or JavaScript code. In code view, the user can use the text entry window to insert any number of lines of custom scripting. In both views, the Script Wizard automatically adds the appropriate scripting information into the HTML document.

UpBack to top of page


Authoring for 2-D Layout: Adding Advanced Layout Regions

The ActiveX Control Pad is the first tool that makes it possible to author 2-D layout regions using new style sheet attributes specified in a W3C draft specification for HTML (see http://www.w3.org/pub/WWW/TR/WD-layout.htmlinternet link). 2-D HTML Layout Control regions provide developers with a form upon which they can place, and exactly position, any number of ActiveX controls. Scripting within HTML Layout Control regions is also possible by using the Script Wizard. HTML Layout thus makes it possible to build rich, interactive user interfaces for Web pages. In this early, preview implementation of 2-D authoring, 2-D regions are displayed using a special run-time control called the Microsoft HTML Layout Control. As the W3C finalizes the specification for 2-D layout in HTML, support for browsing 2-D regions will become native to Microsoft Internet Explorer and to other Web browsers. Please refer to the Microsoft HTML Layout Control white paper for more technical information on Microsoft's preview implementation of 2-D-style layout for HTML.

To insert a 2-D region into an HTML document, users simply choose Insert, HTML Layout Region from the Edit menu. This will insert an instance of the HTML Layout Control into the HTML document based on the HTML <OBJECT> tag syntax. Next, the user must identify a file that will contain the 2-D layout information (in text form, as specified in the draft W3C specification). The HTML Layout Control will use this file to read and display the 2-D layout region within the Web browser. The 2-D HTML Layout file has an ".ALX" extension.

Adding content to 2-D regions is accomplished by using ActiveX controls. Each open .ALX file has its own toolbox containing a standard set of ActiveX controls that allow the author add text, graphics, user interface elements, and other multimedia objects to the region (see the table below for a list of these controls). Users can customize the toolbox with other controls registered on their machines by right-clicking on the toolbox and choosing the "Custom Control" function from the shortcut menu.

The following ActiveX controls are provided with the Microsoft ActiveX Control Pad and the HTML Layout Control.

Option button Textbox
Tab strip Listbox
Scrollbar Combobox
Spinner Checkbox
Label Command button
Image Toggle button
Hot Spot HTML Browser Control (for displaying HTML documents)

Note that many of the controls support in-place editing.

[APA2388E  14999 bytes ]

Figure 4. Adding a command button to a 2-D region

A property table can be displayed for any selected control placed in the 2-D region by right-clicking on the control and choosing Properties from the shortcut menu. Values for object properties are stored as <PARAM> tags in the <OBJECT> tag within the .ALX file. The illustration above shows an example property table displayed in the HTML Layout Control Editor.

The object code generated within the .ALX file for the Command Button illustrated above will look like this:

   <OBJECT ID="CommandButton1" STYLE="TOP:240;LEFT:160;WIDTH:176;HEIGHT:32;"
       CLASSID="CLSID:978C9E23-D4B0-11CE-BF2D-00AA003F40D0">
      <PARAM NAME="Caption" VALUE="New Caption">
   </OBJECT>

Each control hosted by the ActiveX Control Pad for inclusion in a 2-D region inherits properties, methods, and events from the HTML Layout Control. The tables below give these possible values:

Property Description
ID The identifier for the control (this is used to reference the control in scripting)
Width Width of the object (in pixels)
Height Height of the object (in pixels)
Top Position from top edge of object in 2-D region (in pixels)
Left Position from left edge of object in 2-D region (in pixels)
Visible A Boolean property: True = visible; False = hidden
TabStop A Boolean property: True = user can tab into
TabIndex Position of object in tab order stack (integer)
CodeBase String value that allows user to specify where the code that embodies the ActiveX control lives (as a URL)

Method Description
Z-order(level) (level = 0,1) enumerated to mean (Top, Bottom)

Events Description
AfterUpdate Occurs after data in a control is changed through the user interface
BeforeUpdate Occurs before data in a control is changed
Enter Occurs before a control actually receives the focus from a control on the same form
Exit Occurs immediately before a control loses the focus to another control on the same form

The HTML Layout Control also exposes a navigation object via a Window.Location.href object that takes the value of a URL as a string. When read, this object returns the name of the HTML file that hosts the HTML Layout Control (using the complete URL). When written (set), this object changes the URL to which the browser is pointing, replacing the HTML page that is currently being viewed. This object can thus be used with the Script Wizard to create navigation functionality within a 2-D HTML Layout Control region.

For an example of how HTML Layout can be used to create compelling, interactive designs, please refer to the samples included on the HTML Layout Control Web site. After installing the ActiveX Control Pad or HTML Layout Control, you can browse through these samples using Microsoft Internet Explorer 3.0.

Other features of the HTML Layout Control Editor

The HTML Layout Control Editor included with the ActiveX Control Pad also has a number of other useful features for designing 2-D regions. These include:

How is the HTML Layout Control distributed?

The final release of the HTML Layout Control will be fully integrated into the final release of the Microsoft Internet Explorer 3.0 Web browser. The first HTML Layout Control beta release is being supplied as a free, downloadable control by Microsoft. For user to view 2-D regions, they must have the HTML Layout Control installed on their computer, along with a browser that supports ActiveX controls, such as Microsoft Internet Explorer 3.0. The control can be freely redistributed by any customer or software vendor. Once installed, the HTML Layout Control does not need to be re-installed as users navigate to subsequent pages that use 2-D layouts.

UpBack to top of page


Compatibility and Future Support

As the W3C finalizes its specification for 2-D-style layout in HTML, Microsoft plans to incorporate support for 2-D layout directly into future versions of Microsoft Internet Explorer, as well as a variety of authoring and development tools. Once this support becomes native, the need for a separate .ALX file and HTML Layout Control will be eliminated. Our early preview implementation of 2-D layout for HTML follows the current W3C draft specification (http://www.w3.org/pub/WWW/TR/WD-layout.htmlinternet link), and we will continue to work closely with the W3C as they move forward with this specification. Microsoft plans to provide a conversion utility for the file format of the HTML Layout Control, if this is required by the final, adopted W3C specification for 2-D-style layout. This utility will convert Web pages created with the ActiveX Control Pad (or another editor) to be rendered in future browsers (such as Microsoft Internet Explorer) that support 2-D layout with approved W3C standards. The utility will also integrate existing .ALX files directly into the HTML stream. This conversion utility will be free to the public.

UpBack to top of page


Distribution and Licensing of the ActiveX Control Pad

The beta release of the ActiveX Control Pad can be downloaded today. Microsoft will also make the final release available for free downloading to all users.

UpBack to top of page


Conclusion

The ActiveX Control Pad is a tool that makes it easier to author Web pages that incorporate leading-edge, ActiveX content.

The ActiveX Control Pad consists of the following core components, discussed in this paper:

UpBack to top of page

UpUpBack to the Microsoft ActiveX Control Pad home page


The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.

This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.

© 1996 Microsoft Corporation. All rights reserved.

Microsoft and Visual Basic are registered trademarks, and ActiveX and FrontPage are trademarks of Microsoft Corporation.

Adobe and Acrobat are trademarks of Adobe Systems, Inc. Macromedia is a registered trademark of Macromedia, Inc. JavaScript is a trademark of Sun Microsystems, Inc.

© 1996 Microsoft Corporation