Microsoft Dynamic HTML Reviewer's Guide

Microsoft Corporation

October 17, 1997

Note The information contained in this document represents the current view of Microsoft Corp. 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.

Review Considerations

This guide outlines features of Dynamic HTML, a technology delivered in the final release of Microsoft® Internet Explorer 4.0. In this Reviewer's Guide, it is assumed that the reviewer understands the core principles behind object-oriented technology, including objects, properties, methods, and events. Dynamic HTML is based on several World Wide Web Consortium (W3C) working drafts and recommendations, as outlined further in this guide. See http://www.w3.org/ for more information about these specifications. For more information on Dynamic HTML, please see the DHTML, HTML & CSS section of Web Workshop.

Understanding Interactivity

It is important to define interactivity for the purposes of this guide. The following criteria are suggested for defining a truly interactive Web page:

• The page author must be able to update any element of the page at any time -- during and after the loading of the page.
• The page should capture all user actions and enable authors to respond to these events using simple scripts.
• The page should reflect the relationship among page elements. A change to one element in the page may require readjusting other elements. An interactive page should do this automatically.
• If authors so choose, users should be able to freely change any element in the page at any time.

Reviewer's Guide Demos

This Reviewer's Guide provides code samples to illustrate how "authors," that is, designers and developers, can use Dynamic HTML. To run these code samples properly, you must have Microsoft Internet Explorer 4.0 or later installed on your machine.

Dynamic HTML Summary

A feature of Microsoft Internet Explorer 4.0, Dynamic HTML is an innovative technology that enables new classes of interactive Web pages. With Dynamic HTML, Web applications can take on consumer appeal rivaling that of CD-ROM titles, and developers can create intranet applications with functional front-end interfaces for data entry or reporting.

Dynamic HTML is an open, language-independent object model for standard HTML. It enables scripts or programs to change the style, content, and structure of a Web page, even after the page has loaded, without requesting a new page from the server. Dynamic HTML features include the following:

• Dynamic styles
• Positioning
• Dynamic content
• Data binding
• Scriptlets

Microsoft developed Dynamic HTML technology with three design goals in mind:

• Provide unparalleled interactivity for the Web
• Make authoring interactive pages easy
• Be standards-based

Unparalleled Interactivity for the Web

HTML provides authors with rich layout capabilities for text. However, its static nature impedes authors from creating Web pages that are as interactive or appealing as CD-ROM titles or as functional as traditional business applications.

As a result, authors often use scripts for validating forms and basic animation, and components for client-side functionality. These scripts and components can access only a small subset of page elements and customize these elements only at load time, not in response to user actions. Once a page has loaded, page elements become static.

Changing a page's structure, content, or style after the page has loaded requires requesting a new page from the server. This slows the Web experience for end users and also requires authors to write multiple pages.

Dynamic HTML was designed to address this problem. It enables authors update page elements any time, even after a page loads, without requesting a new page from the server.

Author benefits

• Authors have much greater control over page appearance and behavior, which enables them to create rich, interactive Web pages.
• Authors can fulfill their creative vision with built-in dynamic style, positioning, and content effects.
• Authors can develop flexible front-end interfaces to data-driven applications using data binding.
• Dynamic HTML can help alleviate server loads and network traffic.

User benefits

• Web pages authored with Dynamic HTML are more responsive. Requests to the server are less frequent, which increases overall performance of the system.
• Users can experience rich content without having to download large files or executables.

Easy Authoring

Making Web pages dynamic used to require objects such as Java applets or ActiveX™ controls. Although these components perform useful tasks, they can be difficult to develop, especially when compared to writing HTML and script.

Dynamic HTML makes interactivity accessible to HTML authors, developers, and designers.

Author benefits

• Designers can make Web pages interactive with just a few lines of script. Developers can write more full-featured Web applications by leveraging the capabilities of Dynamic HTML.
• Scriptlets enable the convenient reuse of Dynamic HTML components. Through well-defined interfaces, authors can customize existing interactive content for specific Web applications, without having to understand implementation details.
• Dynamic HTML is language-independent. Authors can use JScript™, the Visual Basic® Scripting Edition (VBScript) or any other ECMAScript-compliant language to access Dynamic HTML. They can also extend the capabilities of Dynamic HTML using ActiveX Controls and Java applets.
• A wide variety of tools that support Dynamic HTML are available for Web site authors and developers.

Open Standards-Based

Authors have typically faced a difficult choice with proprietary HTML extensions. They've had to either forgo these extensions or develop multiple sets of pages to support competitive browsers.

Dynamic HTML is standards-based to promote interoperability among third-party products and to provide the industry with visibility for leading-edge technology.

Benefits

• Microsoft Dynamic HTML supports the following:

HTML 4.0 Working Draft

CSS1 Recommendation

CSS Positioning Working Draft

Document Object Model

• Authors can create rich content using HTML, Cascading Style Sheets (CSS), and CSS Positioning that gracefully degrades in other browsers, while taking advantage of Dynamic HTML in Microsoft Internet Explorer 4.0.
• Dynamic HTML will be featured in all versions of Microsoft Internet Explorer 4.0, including versions for the Macintosh®, Windows®, and UNIX operating systems.
• Microsoft will freely provide Dynamic HTML as a component for third-party use.

Dynamic HTML Object and Event Model

Before Dynamic HTML, scripts or components could only access and customize a small number of page elements at Web page load time. Through the Document Object Model, Dynamic HTML exposes all page elements and attributes, providing authors total creative control, even after a Web page has loaded.

Document Object Model

The Document Object Model is the foundation for Dynamic HTML. This object model is consistent with the W3C's direction; it provides many of the features listed in the Document Object Model Preliminary Requirements . The Document Object Model is a significant innovation. It makes all page elements programmable objects, individually and as part of various collections.

The all collection of the document retrieves a collection of element objects that represents all the elements in the HTML document. By providing an index value in this collection, authors can access and manipulate specific page elements.

In addition to the all collection on the document object, each individual element also exposes an all collection. An element's all collection contains all the elements contained by that element, except for the element itself. Each element also exposes a children collection. The children collection contains only the elements that are direct descendants of the element in the HTML hierarchy.

A variety of other collections are supported in Microsoft's implementation of the Document Object Model, including anchors, children, forms, frames, scripts, styleSheets, and more.

Event Model

Dynamic HTML provides events on every element in the document, without new HTML tags or a changed programming paradigm. Every element, at a minimum, exposes these events:

• Keyboard: onkeypress, onkeydown, onkeyup
• Mouse: onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, onclick, ondblclick

Authors can write scripts that take advantage of these events to interact with users. If the Web page has already loaded, the client need not request a new page from the server to respond to user actions.

Event Bubbling

Dynamic HTML supports event bubbling, a powerful new way to handle events in HTML. First, an event handler is called for the element that is the source of the event. Regardless of whether the event was handled, the event handler for the parent element is called automatically, until the event is bubbled up to the window object or an event handler cancels the bubbling.

Event handlers that otherwise would have to be written for each page element can now be handled by a parent element or the document. By canceling an event bubble, the author can ensure that the event never bubbles past the source element of the event. Please refer to object and event model specifications in the DHTML, HTML, & CSS section of the Workshop for more information.

Benefits

• Every element, every style and even every character on the screen is encapsulated in objects and can be manipulated through simple scripting.
• Dynamic HTML reduces server round-trips, so authors can create fewer Web pages.
• Dynamic HTML reduces the need to develop custom applets or controls, because authors can achieve equivalent functionality using a few lines of script.
• With event bubbling, authors can update page elements using generic, maintainable script.

Examples

• Table of contents. The online table of contents for the Dynamic HTML site (in the pane at left) automatically highlights top-level headings in the table of contents when the user moves a mouse over a heading. All this is possible without invoking a server round-trip or requiring the entire page to reload.

A table of contents is often provided within a frame in a frameset. In this example, all content is specified using a style sheet, and the display attribute of each <DIV> (group of second-level headings) element is set to display or hide content. New menu choices can be added easily within each <DIV>; no code needs to be changed to add a new menu choice or modify the order of menu choices within each <DIV>.

This table of contents works well in Netscape Navigator 3.0 and 4.0 and Microsoft Internet Explorer version 3.0. In these browsers, a standard set of anchors is displayed.

• Food rollover. This example illustrates the richness of the event model in Dynamic HTML and the power of event bubbling, which makes coding easier. Specifically, events are captured at the document level, so authors don't have to write event handlers for each element. Authors can add new elements easily, through the <SPAN> tag, with no extra scripting needed.

• Alien Head. This example illustrates the power of event bubbling, which makes coding this sample easier. User events are captured at the document level, so authors don't have to write event handlers for each graphic element. This sample also demonstrates Dynamic HTML's rich event model, which lets users drag images anywhere on the page. In this example, authors can add new images easily, with the <IMG> tag and a specific position. No extra scripting is needed.

Dynamic Styles

In the past, changing an element's style meant refreshing the page. With Dynamic HTML, any style attribute for any page element can be updated at any time. The Document Object Model of Dynamic HTML makes all CSS attributes programmable. By updating these attributes with some simple script, authors can change text color, size, spacing, and more.

Dynamic HTML also supports the application of visual filter and transition effects to HTML through CSS syntax (that is, the filter attribute). These filters can be applied to text, images, and any windowless object. A transition is a type of filter that enables a transition from one visual state to another based on a specified duration.

Through CSS, authors can separate page content from presentation, so a single style sheet can define the layout for an entire Web site. Changing the layout can be done through a single file without modifying every document.

Benefits

• Authors can now add or change styles in their Web pages without requesting a new page from the server.
• Authors can create smaller, more maintainable documents because documents no longer need to be littered with stylistic information.
• Users experience content faster because a style sheet is cached locally on a user's machine, similar to the caching of images.
• By applying filters through CSS, authors are assured that their HTML content is still rendered in browsers that don't support the visual filters CSS extension.

Style Options

Dynamic HTML enables authors to take advantage of CSS and Microsoft's object model in the following ways:

• Inline styles. Inline styles enable authors to make style changes to a specific area of the page or tag without affecting the entire site or all the pages linked to a style sheet. Because all page elements expose a style property, and thus CSS attributes, the author can change the inline style based on user events.
• Element class or ID. Defining element classes lets authors create different classes of styles for a particular page element. With Dynamic HTML, authors can immediately change the className property for any page element based on a user event.
• Style sheet management. Authors can add new style rules to style sheets on the fly through the addRule method. In addition, through methods on the styleSheet object, authors can change, add, and disable style sheets at any time.

Examples

• Dynamic styles. This is a very simple example of how authors can change an inline style or className property using Dynamic HTML. When the user moves the mouse around the page, text or buttons change in appearance. This also demonstrates how Dynamic HTML readjusts other elements on a page automatically, after one element has been changed. In addition, even the input controls, such as buttons and text boxes, support style sheets and can be changed dynamically.

• Filter effects. This sample demonstrates one of the new style effects supported by Internet Explorer 4.0, specifically a filter attribute.

• Table of contents. This sample shows how to build an interactive outline that expands and collapses when clicked. Elements are hidden or shown as their associated images are clicked by the user. A simple naming convention enables you to add items to your outline without changing the code that collapses and expands the outline.

Positioning

Historically, positioning elements required building and resizing complex tables. Authors couldn't control an element's position precisely, and users often had a less than compelling Web experience. Changing the position of an element meant refreshing the page with a new table.

Dynamic HTML supports the CSS Positioning working draft, making positioning easier and more precise. Positioning through CSS enables authors to position HTML elements using top, left, and
z-order attributes. By assigning objects different z-orders, authors can cause the objects to overlap, and they can specify which element should be on top of which.

Two types of positioning are supported through CSS Positioning:

• Absolute positioning. The absolute position is always relative to the top of the document, so the values assigned to left and top are relative to the upper-left corner of the document. The absolute position of an element can be assigned by using the STYLE attribute to set the position to "absolute" and to assign values to the LEFT and TOP style attributes.
• Relative positioning. The relative position is always based on the element's natural position, which is determined by the parent element and any preceding and following elements. The relative position can be assigned by setting the position attribute to "relative" and assigning values to the LEFT, TOP, WIDTH, and HEIGHT attributes.

Benefits

• Authors can position elements precisely on a Web page.
• Authors can move elements dynamically by changing coordinates on the fly.
• Multiple browsers (many support CSS positioning) can view pages defined using CSS Positioning.

Please see http://www.w3.org/pub/WWW/TR/PR-CSS1 to view the W3C CSS Recommendation and http://www.w3.org/pub/WWW/TR/WD-positioning.html to view the W3C Working Draft on Positioning HTML Elements with Cascading Style Sheets.

Example

• Asteroids . This game uses CSS to position all the graphics on the page. It also uses Dynamic HTML's rich object model to move the player's spaceship, dynamic content to update the score, and dynamic styles to toggle display on/off and change image sources on the fly.

Dynamic Content

To give the illusion of interactivity, authors have traditionally been required to build, and users to download, multiple Web pages. With Dynamic HTML and through the document object model, authors can now add, delete, and replace any page element at any time.

With the Microsoft Dynamic HTML object model, changes to one page element naturally affect other page elements. For instance, text surrounding a resized graphic rewraps around the graphic automatically. In addition, authors can create pages in which users can interact freely with any element. For example, users can decide what color or size a picture should be, with no limits on choice.

Benefits

• Creating interactive content is easy and takes only a few lines of script.
• Dynamic HTML readjusts and reflows updated content as needed.
• Authors can create pages that display only the content that users want to see. For example, when viewing a table of contents that dynamically contracts or expands, users can control the level of detail presented to them.

Accessing and Changing Content

Dynamic HTML provides two techniques for updating page content:

• innerHTML, outerHTML, innerText, outerText. These four new properties are supported in all block elements. By setting these properties, authors can replace existing element content and the element itself (outerHTML and outerText) with newly defined content.

With innerHTML and outerHTML, if the string contains HTML tags, the string is parsed and formatted as it is placed in the document. With innerText and outerText, the given string will be displayed in the Web page, HTML tags and all.

• Using the textRange object. Authors can more precisely access, find, and change document content by using the textRange object. The author can call the createtextRange method to return a textRange object for any document. This textRange object will contain the text within the body of the document. For example, suppose a Web page contains a heading of "Dynamic HTML," and this body text: "An innovative technology." The textRange object returned by the body object would include this string: "Dynamic HTML An innovative technology."

Using the start and end properties and range movement methods on textRange, authors can define the specific range of text to manipulate. Through the pasteHTML method, authors can insert an HTML string into the document.

Examples

• Clock. This example displays the current time. Content is updated and reflected immediately without any server interaction. This sample does not use animated images and does not require any images to be downloaded. The document automatically reflows based on content changes, and authors can implement this easily and quickly.

• Entry box. This sample shows how text can be replaced simply by user-defined content through the innerHTML property. The author need not know in advance what the user will type; Dynamic HTML enables users to freely choose how to update this element on the fly.

• Resize graphic. This sample shows how users can move the cursor over a graphic to replace it with a bigger graphic. Text surrounding the graphic reflows as a result. Note that the text is reflowed automatically, without any coding required.

Data Binding

Data-driven business applications are increasingly taking advantage of the Web, accessing existing data stored in server databases. These applications often require authors to construct many Web pages that users must navigate through to view and manipulate the data. This can frustrate end users, and also increase server loads.

Dynamic HTML provides data binding features that authors can use to integrate data with native HTML elements on the client. In addition, authors can create applications that present, manipulate (that is, sort or filter), and update data on the client without numerous server round-trips.

Dynamic HTML uses standard tags to define a template that is populated with data on the client and data source objects to supply data to the page. No specific data protocol or DBMS is required to use these data binding features.

Benefits

• Authors can use HTML to better display and collect data.
• Dynamic HTML decreases server load by manipulating data on the client.

Obtaining Data

Data source objects supply the data to the Web page. These objects can either be Java applets or ActiveX controls. The data source objects described below are installed with the standard installation of Internet Explorer 4.0.

• Tabular Data Control. The Tabular Data Control supplies data that is stored in a delimited text file to the page. The control uses a URL to locate the text file, enabling the data to be transmitted using standard Internet protocols. The file format is easily generated by most DBMS systems and applications. Given that the text files are cached on the client, the control can supply data in offline browsing scenarios.
• Remote Data Service (RDS), previously known as Advanced Data Connector (ADC). RDS enables authors to access data from and transmit data to ODBC-compliant databases. RDS is well suited to applications in which users need to update or input data because RDS provides direct, real-time access to server data. RDS also transmits data using the HTTP protocol, so RDS can work over the Internet and through firewalls.
• JDBC Data Source Object. JDBC implements a JavaBeans-compliant interface. Data is retrieved through JDBC and stored in a local cache implemented by the applet. Even though JDBC provides a forward-only cursor, the applet can provide random access to data when used with data binding. This applet does not expose the ability to update data, but does supply helper functions in Java. Developers can augment this applet with their own Java code to implement custom update functionality.
• Extensible Markup Language (XML) Data Source Object. XML provides a standards-based way to represent structured data in a text format. The data binding functionality of Dynamic HTML supports the display of XML data within a Web page by using a data source object that enables the XML data to be displayed in nested, repeated tables.
• HTML Data Source Object. In addition to using external components as data source objects, Web authors can define their data sets within an HTML document and use the Internet Explorer 4.0 HTML rendering engine to provide read-only data to a page. This enables parts of one HTML document to be included in another HTML document, and the processing of that inclusion takes place on the client rather than the server.

Authors can construct data source objects to be used with data binding by implementing the OLE-DB Simple Provider (OSP) interface. OSP is a simple, easily implemented interface specification, or API, for exposing data to HTML pages. A set of classes and interfaces are supplied for writing JavaBeans-compliant applets using OSP, as well as type libraries for authoring the interfaces using the Component Object Model (COM).

Thus, data source objects that implement the OSP API can be constructed using Java, Visual Basic, or the Visual C++® development system. Java applets that implement that OSP interface are available, including source code, in the data source object gallery located at http://msdn.microsoft.com/downloads/samples/default.asp . In addition, the source code for the Tabular Data Control, a COM implementation of OSP, is available in the Internet Client SDK.

Presenting Data

Data supplied by a data source object can be bound to HTML elements within the page. The bindings are specified using four new attributes that Microsoft proposed to the W3C: DATASRC, DATAFLD, DATAFORMATAS, and DATAPAGESIZE.

By specifying the DATASRC and DATAFLD attributes on a single-valued data consuming element of a Web page, the Web author fully specifies the binding of an element to data. By specifying DATAFORMATAS on a single-valued element, the Web author indicates how the data should be interpreted. DATAPAGESIZE enables the author to restrict the number of records that are displayed by an element that consumes tabular data. All these properties can be set at run time through the Document Object Model.

These attributes can be used on the following HTML elements: <A>, <APPLET>, <BUTTON>, <DIV>, <FRAME>, <IFRAME>, <IMG>, <INPUT>, <LABEL>, <MARQUEE>, <OBJECT>, <SELECT>, <SPAN> and <TEXTAREA>.

With data binding, authors can present data as follows:

• Repeated tables. Authors can merge data with an HTML table on the client, which serves as a template. The content of the table is repeated once for each record in the data set, and headers and footers can be displayed as well. HTML elements within the cells of the table can then be bound to columns from the data set.
• Current record binding. Authors can merge data from the columns of the current record of the data source with HTML elements on the client. The current record can be moved through the data set by calling methods in the Active Data Objects (ADO) model, supplied automatically to every data source object.

Examples

• Table repetition and data sorting. This sample displays a table that lists stock, quote, change, and volume data. By clicking a column header, users can resort the table by that column, without a server round-trip required. Authors need not write complicated scripts, server-side CGI processes or Java code.

• Current record. This sample enables a user to view and update the current record in a data set. Authors need not maintain client-state information or write CGI scripts. Current record binding is very much like the data-binding feature supported in Microsoft Visual Basic. The main difference is that data binding with Dynamic HTML does not require controls -- data can be bound directly to HTML elements.

Scriptlets

Scriptlets are simply Web pages that have been authored using HTML and script. On the 32-bit Windows platform, a scriptlet is a component that takes advantage of COM to define its methods and properties.

Before scriptlets, reusing HTML and script often meant cutting, pasting, and then customizing existing code. With scriptlets, content providers can author their content once, using the HTML and script they know today. They can then let others quickly reuse this scriptlet within other Web pages and applications by following simple conventions to expose well-defined interfaces. Through these interfaces, other authors can customize and reuse existing scriptlet content without having to understand implementation details.

Incorporating scriptlets into Web pages can also reduce performance delays. Given that scriptlets consist only of HTML and script, they are extremely lightweight and quick to download and run for end users. Once the scriptlet is downloaded to the client, it is cached for future use.

Benefits

• Scriptlets enable content providers to make optimal use of their existing knowledge of HTML and script to create reusable components.
• Scriptlets make Dynamic HTML even easier to use. Authors need not understand scriptlet details, only the interfaces required to customize the scriptlet. Authors can take advantage of this existing content in other Web pages and any application supporting COM.
• Scriptlets download and run quickly, thereby increasing Web application performance.

Defining the Scriptlet Interface

Define a scriptlet interface (specifically its methods and properties) by either of these mechanisms:

• ECMAScript Public_Description Object. This convention enables authors to define explicitly what properties and methods the scriptlet will make available. Any behavior that is not explicitly declared using the Public_Description object is not available.
• Default Interface Description. With this convention, content providers need not explicitly declare properties or methods. Instead, variables and functions that are prefaced with public_ become available as properties and methods. This convention can be used to create scriptlet properties and methods in an active scripting language other than ECMAScript.

With the release of Internet Explorer 5 Beta, Microsoft now recommends DHTML behaviors -- instead of the DHTML scriptlets supported in Internet Explorer 4.0 -- for adding componentized functionality to Web pages. DHTML behaviors provide similar functionality, but with greater speed, power and flexibility. Please note that DHTML behaviors are not supported in Internet Explorer 4.0 or earlier versions.