Microsoft Corporation
June 5, 1996
Download Microsoft Word (.DOC) format of this document (zipped, 73.4K).
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
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:
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.
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:
Creating a new HTML file opens a window with HTML text, as shown in Figure 1.
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.
Without a tool to help insert ActiveX controls into an HTML document, users must manually enter the HTML <OBJECT> syntax for each control, including:
<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.
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.
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.
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.
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:
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.
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.html).
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.
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.
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:
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.
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.html), 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.
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.
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:
Back to the Microsoft ActiveX Control Pad home page
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