Introduction to Dynamic HTML

Contents

Overview 

Total Document Behaviour Control 

Which browser?

Browsers Technology comparison 

Key features of DHTML

Dynamic HTML Object Model

Dynamic Content

Dynamic Styles

Filters and Transitions 

Font Download

Positioning and Animation 

Data Binding

Scriptlets

Examples

Example # 1 - DHTML Object Model

Example # 2 - Dynamic Content

Example #3 - Dynamic Styles

Example # 4 - Second Dynamic Styles Page

Example #5 - Font download with DHTML

Example # 6 - Absolute Positioning with DHTML

Example #7 - Dynamic Positioning with DHTML (Animation)

Example # 8 - Data Binding with DHTML

Overview

Web authors today face significant challenges when making their Web pages interactive. The static nature of HTML pages limits their creative choices, and interactive components can be difficult to build and reuse. In addition, using proprietary extensions means authoring browser-specific Web pages. Adding dynamic behavior to Web pages formerly required writing complex applets or controls, and incorporating them in Web pages using scripts. Although these components perform useful tasks, many authors found them hard to develop compared with scripts or HTML.

Dynamic HTML technology helps to remove these barriers for content providers and offers users more engaging and interactive Web pages. Dynamic HTML provides authors with enhanced creative control so they can manipulate any page element at any time. Dynamic HTML is also the easiest way to make Web pages interactive, using open, standards-based technologies.

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.

Total Document Behaviour Control

By enabling authors to dynamically change the rendering and content of a document, Dynamic HTML gives authors the ability to create visually outstanding HTML documents that interact with the user without the burden of relying on server-side programs or complicated sets of HTML pages to achieve special effects. With Dynamic HTML, you can easily add effects to your documents that were previously difficult to achieve. For example, you can:

Hide text and images in your document and keep this content hidden until a given time elapses or the user interacts with the page.

Animate text and images in your document, independently moving each element from any starting point to any ending point, following a path that you choose or that you let the user choose.

Create a ticker that automatically refreshes its content with the latest news, stock quotes, or other data.

Create a form, then instantly read, process, and respond to the data the user enters in the form.

Dynamic HTML achieves these effects by modifying the current document and automatically reformatting and redisplaying the document to show changes. It does not need to reload the document or load a new document, or require a distant server to generate new content. Instead, it uses the power of the user 111i85b 's computer to calculate and carry out changes. This means a user does not have to wait for text and data to complete time-consuming round-trips to and from a server before seeing results. Furthermore, Dynamic HTML does not require additional support from applications or embedded controls to carry out changes. Typically, Dynamic HTML documents are self-contained, using styles and a little script to process user input and directly manipulate the HTML tags, attributes, styles, and text in the document.

In short, Dynamic HTML eliminates the shortcomings of previous browser technologies. Authors can create innovative Web sites, whether on the Internet or an Intranet, without having to sacrifice performance for interactivity and special effects. Not only does Dynamic HTML enhance the user's perception of your documents, it also improves server performance by reducing requests to the server and subsequently server load.

Which browser?

A standards-based approach enables content providers to create interactive pages that reach a broad audience. At a base level, content providers can take advantage of standards-based features, such as CSS and CSS Positioning that are implemented in today's popular browsers. This ensures that a majority of users, regardless of the browser they are using, have the same Web experience. Using proprietary extensions in Web pages invariably means that some users cannot fully experience these pages. To avoid this situation, authors either forgo these extensions altogether or develop separate pages for competitive browsers.

Web authors can also create a single set of pages authored with Dynamic HTML for all users. Users with any browser supporting the Document Object Model, such as Microsoft Internet Explorer 4.0, can fully interact with these pages. Other browser users, such as those running Netscape Navigator, could view much of this content statically, because Dynamic HTML uses standard HTML tags to render content. For instance, an interactive table of contents could expand and contract using Microsoft Internet Explorer 4.0. In a non-dynamic browser, the table would display in a fully expanded state. In some cases, content providers may decide to author separate sets of pages and take advantage of specific browser capabilities to ensure a truly engaging, rich experience.

Microsoft Internet Explorer - An Open Technology

Microsoft Dynamic HTML is based on the Document Object Model proposed to the W3C by Microsoft and SoftQuad, and closely follows the W3C preliminary requirements for the Document Object Model.

Microsoft is committed to following the standards process with Dynamic HTML and any resulting recommendation. Dynamic HTML complies with the following:

HTML 4.0 Working Draft

CSS1 Recommendation

CSS Positioning Working Draft

Different version of the Document Object Model requirements document

Microsoft is working with the World Wide Web Consortium (W3C) to help ensure interoperability and support for users on multiple systems with different browsers and to provide the best standards-based solutions that make the Web a better open environment for building efficient and interactive multimedia content. Dynamic HTML represents the next step in that effort - all the HTML and CSS extensions for Dynamic HTML conform to W3C specifications or have been submitted to the W3C for consideration. Microsoft will enhance future versions of Internet Explorer to conform to future specifications recommended by the W3C. Dynamic HTML will be featured in all versions of Microsoft Internet Explorer 4.0, including versions for the Windows® operating system and for the Macintosh and UNIX platforms.

Netscape Navigator

Browsers Technology comparison

How do Microsoft's and Netscape's implementations of Dynamic HTML compare? Both technologies support Cascading Style Sheets, specifically the CSS Recommendation and CSS Positioning Working Draft. Apart from CSS support, these two technologies fundamentally differ with respect to creative capabilities and standards support.

Microsoft Dynamic HTML provides Web authors with a powerful HTML layout engine and total creative control, so they can manipulate any page element at any time.

Netscape's implementation is not consistent with the Document Object Model, as described by the W3C Requirements Document. As a result, Netscape Navigator exposes few page elements as objects, limiting layout and creative capabilities for authors. Page elements can be manipulated only while the page is loading, not after load time. Netscape's nonstandard implementation consists of JavaScript Accessible Style Sheets (JASS), layers and dynamic fonts (TrueDoc). These technologies are not supported in Microsoft Internet Explorer 4.0.

JASS lets content providers specify document style only while the page is loading, not after load time. The Document Object Model, supported by Microsoft Dynamic HTML, provides Web authors greater flexibility and power by enabling them to change page content at any time. The Document Object Model also better meets author needs in that it is language-neutral, unlike JASS, which is JavaScript-dependent.

Layers technology consists of the proprietary <LAYER> and <ILAYER> tags. Given that these tags are not consistent with the long-term direction of HTML, which is to separate page content from presentation, Netscape's layers proposal has been rejected by the W3C. Both Microsoft Internet Explorer 4.0 and Netscape Navigator 4.0 support CSS positioning, a standard and cross-browser way to position page elements.

Netscape's dynamic fonts use proprietary TrueDoc technology and proprietary HTML extensions. Microsoft Internet Explorer 4.0 partially supports the W3C Web Fonts Working Draft.

Microsoft's implementation of Dynamic HTML, based on the Document Object Model, provides greater creative control than Netscape's implementation, which provides little support for the Document Object Model.

For instance, with Netscape's implementation of Dynamic HTML, an author could replace one graphic with another on a Web page. Because Netscape's technology does not include intelligence about the relationships among page elements, the text surrounding the replaced graphic would not reflow. For the same reason, authors cannot dynamically change the font size of selected text. An interactive document, such as a table of contents or an outline, could not be created using Netscape technology without reloading the page.

In-Depth Technology Comparison

Browser Comparison: W3C Document Object Model Features

The table below lists the features provided by Microsoft Internet Explorer 4.x and Netscape Navigator 4.x, with respect to the requirements outlined in the W3C's Preliminary Requirements for the Document Object Model

Which language?

The HTML elements, attributes, and styles in Dynamic HTML are based on existing HTML and cascading style sheet (CSS) specifications. Users can view your documents whether they use Internet Explorer version 4.0 (or higher), Netscape Navigator version 4.0 (or higher), Opera version 3.0 (or higher), or some other browser. Naturally, the dynamic and interactive features that you add to your documents may not be fully functional when viewed with a browser that does not support Dynamic HTML. But Dynamic HTML is designed to "degrade gracefully" - by following some basic guidelines, the content of your document can be viewable in other browsers.

Dynamic HTML works well with applications, ActiveXT Controls, and other embedded objects. You can use existing applications and controls, or you can create new ones that specifically take advantage of the features of Dynamic HTML. Applications and controls work best when you rely on them to do computationally difficult tasks, and use Dynamic HTML to display output and process user input. For example, you can create a document that lets the user query, display, and modify the content of a large, server-based database by combining the data binding features of Dynamic HTML with a data source object. The data source object retrieves and sets data in a database, and Dynamic HTML does the rest: processing user queries, displaying the data, and carrying out the necessary interaction with the object.

Dynamic HTML was designed so that Web builders can use the scripting languages - such as JavaScript and the Microsoft Visual Basic® programming system, Visual Basic Scripting Edition (VBScript) - to make their Web pages interactive. Developers can also write full-featured Web applications with controls and applets that use Dynamic HTML. Web builders can easily reuse Dynamic HTML-based content through support for Scriptlets in Microsoft Internet Explorer 4.0, using just HTML and script.

Key features of DHTML

Key features of Dynamic HTML include:

Document Object Model (DOM). Dynamic HTML provides a comprehensive object model for HTML. This model exposes all page elements as objects. These objects can easily be manipulated, by changing their attributes or applying methods to them at any time. Dynamic HTML also provides full support for keyboard and mouse events on all page elements. Support for the Document Object Model enables the following:

Dynamic content. Text or graphics can be added, deleted, or modified on the fly. For example, a Web page can display an updated headline, without refreshing the page. The text surrounding the headline will reflow automatically.

Dynamic styles. Internet Explorer 4.0 fully supports Cascading Style Sheets (CSS). As such, any CSS attribute, including color and font can be updated without a server round-trip. For instance, text can change color or size when a mouse pointer passes over it. Multimedia filters and transition effects can be applied to HTML elements simply by adding the filter CSS attribute.

Positioning and Animation. CSS positioning coordinates for existing page content can be updated at any time to create animated effects, without reloading the page.

Data Binding. Data-driven application front ends can be built that present, manipulate (e.g., sort, filter), and update data on the client without numerous round-trips to the server.

Scriptlets. A scriptlet is a Web page, authored with Dynamic HTML, which content providers can use as a component in their Web applications. With scriptlets, content providers can author content once, then easily reuse the content in other Web pages or applications.

Dynamic HTML Object Model

The object model is the foundation of Dynamic HTML, providing the interface that allows scripts and components to access Dynamic HTML features.

Using the object model, you can access and manipulate virtually anything within the document. The HTML elements in the document are available as individual objects, meaning you can examine and modify an element and its attributes by reading and setting properties and by calling methods. The text is available through properties and methods on the elements.

The object model also makes user actions, such as pressing a key and clicking the mouse, available as events. You can intercept and process these and other events by creating event handler functions and routines. The event handler receives control each time a given event occurs and can carry out any appropriate action, including using the object model to change the document.

The following simple HTML document shows how you can use the object model to modify a document. This document changes the color of the heading and adds a line of text when the user clicks the mouse in the document.

Example # 1 - DHTML Object Model

The example above contains an event handler, named "changeMe", which processes mouse clicks for the document. The handler uses the all collection of the document object to pick out the H3 and P elements using their ID values. It changes the color of the heading by setting the color property of the style object for that element. It replaces the text in the paragraph by setting the innerText property.

The object model is a superset of the JavaScript object model found in Netscape Navigator. This means that portions of the model are compatible with other browsers, even if they do not support Dynamic HTML. By following basic guidelines, you can write scripts that take full advantage of the object model when run in Internet Explorer and that provide reasonable results when run in browsers that do not support Dynamic HTML.

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.

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.

Dynamic Content

With Dynamic HTML, you can change the content of a document after it is loaded. Internet Explorer gives you a rich set of properties and methods to dynamically construct and alter documents, from inserting and deleting elements to modifying the text and attributes in individual elements.

The Dynamic HTML object model gives you access to all elements in the document. Consider the following simple document. You can replace and change elements as well as change colors and text by using a few lines of script.

Example # 2 - Dynamic Content

When the user clicks on the page above, the script replaces the H3 element with an H1 element, centers the paragraph, and inserts a new paragraph at the end of the document. Using script in this way, you can add, delete, and replace any elements and text in the document.

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.

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.

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.

Dynamic Styles

Dynamic styles are a key feature of Dynamic HTML. By using styles and style sheets, you can quickly change the appearance and formatting of elements in a document without adding or removing elements. This helps keep your documents small and the scripts that manipulate the document fast.

The object model gives you programmatic access to styles. This means you can change inline styles on individual elements and change style rules in a document's cascading style sheets (CSS) using simple script-based programming. These scripts can be written in JavaScript, JScript, or VBScript.

Inline styles are CSS style assignments that have been applied to an element using the STYLE attribute. You can examine and set these styles by retrieving the style object for an individual element. For example, if you want to highlight the text in a heading when the user moves the mouse over it, you can use the heading's inline style to enlarge the font and change its color, as in the following simple document.

Example #3 - Dynamic Styles

In the above example, the process (also known as an event handler) that responds when the onscreen cursor moves over an HTML tag that contains a onmouseover statement receives control when the user first moves the mouse into the heading (known as an event). The handler uses the srcElement property of the event object to determine which element is the source of the event (in this case, the H3 element). It then uses the color and fontSize properties of the style object for the element to change the color and font size. Setting these properties changes the CSS "color" and "font-size" attributes given in the STYLE attribute for the heading, and the browser immediately updates the onscreen text to show these new attribute values.

By using styles, you can create a simple document, such as the following, in which all items in a bullet list are hidden until the user clicks the mouse.

Example # 4 - Second Dynamic Styles Page

In the above example, the CSS display attribute is set to "none", causing the UL list to be hidden from view. When the user clicks the document, the event handler clears the value of this attribute, making the browser display the list onscreen. Notice how any content that comes after the list shifts down to accommodate the new text rendering.

Dynamic styles are based on the W3C Recommendation for Cascading Style Sheets (CSS) specification for static style sheets. 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.

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.

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.

Filters and Transitions

Internet Explorer 4.0 supports an extensible architecture that enables you to specify filters and transitions using CSS properties. Visual filters can be used to apply visual effects to an element without requiring any scripts. The syntax is:

filter: filter_name (param1, param2, ...)

Transitions are effects that can be applied when changing the display of an element-switching from one image to another, for example. Both interpage transitions and transitions on specific elements within a page are supported. Transitions are most commonly seen in "slide show" presentations. Filters are effects (such as text drop shadows) that can be applied to content on Web pages. In addition to the set of standard filters and transitions included in Internet Explorer 4.0, the standard filters and transitions can be supplemented by additional third-party filters and transitions.

Font Download

Internet Explorer 4.0 supports the use of dynamically downloaded fonts. Using the @font-face style attribute, a document can reference a font that is automatically downloaded, used for the page only, and discarded once the page is no longer displayed. The following example shows the use of downloaded fonts.

Example #5 - Font download with DHTML

Positioning and Animation

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.

Positioning is the ability to place an HTML element at a specific point in a document by assigning a x- and y-coordinate and a z-plane to that element. This means you can place elements-images, controls, and text-exactly where you want them and achieve special, overlapping effects by defining in what order elements at the same point should be stacked atop one another.

Positioning is an extension of cascading style sheets. This means that you set the position of an element by setting the appropriate CSS attributes for that element. The following simple document shows how you can set the absolute position of an image.

Example # 6 - Absolute Positioning with DHTML

In the above example, the image is placed at the top left corner of the document. Setting the z-index attribute to -1 causes the image to be placed behind the text on the page.

Internet Explorer 4.0 supports positioning and animation of elements even after a document has been loaded. Because the object model gives you access to styles and style sheets, you can set and change the position of an element as simply as you set and change its color. This makes it especially easy to change the position of elements based on how the user is viewing the document, and to even animate the elements. For animation, all you need is to slightly modify the position of an element on some interval. For example, the following document presents an image that glides across the top of the document and comes to rest at the upper-left corner.

Example #7 - Dynamic Positioning with DHTML (Animation)

In this example, the "StartGlide" function is called when the document is loaded. The function sets the absolute position of the "Banner" image to the top and far right edge of the document body, shows the image, and starts an interval. The "Glide" function is called repeatedly in 50-millisecond intervals. The function moves the image to the left by 10 pixels, and when the image is finally at the left edge, it cancels the interval.

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.

Dynamic positioning has many uses in consumer and business applications. By combining dynamic styles, positioning, transparent images, and transparent ActiveX Controls, you can present a rich set of animation effects in your documents.

Dynamic positioning and animation is based on the W3C Working Draft on Positioning HTML with Cascading Style Sheets and will be adapted as needed to conform to the final recommendation. Documents that use positioning will be compatible with browsers that support this standard.

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.

Data Binding

Data binding is a great feature of Dynamic HTML that lets you easily bind individual elements in your document to data from another source, such as a database or comma-delimited text file. When the document is loaded, the data is automatically retrieved from the source and formatted and displayed within the element.

One very practical way to use data binding is to automatically and dynamically generate tables in your document. You can do this by binding a TABLE element to a data source. When the document is viewed, a new row is created in the table for each record retrieved from the source, and the cells of each row are filled with text and data from the fields of the record. Because this generation is dynamic, the user can view the document even while new rows in the table are being created. Additionally, once all the table data is present, you can manipulate the data, such as sorting or filtering, without requiring the server to send additional data. The table is simply regenerated, using the previously retrieved data to fill the new rows and cells of the table.

Another practical use is to bind one or more elements in the document to specific fields of a given record. When the document is viewed, the elements are filled with text and data from the fields in that record, sometimes called the "current" record. A simple example is a form letter in which the name, e-mail address, and other details about an individual are filled from a database. To adapt the letter for a given individual, you simply specify which record should be the current record. No other changes to the letter are needed.

Yet another practical use is to bind the fields in a form to fields in a record. Not only can the user view the content of the record, but the user can also change that content by changing the settings and values of the form. The user can then submit these changes so that the new data is uploaded to the source-for example, to the HTTP server or database.

To provide data binding in your documents, you must add a data source object to your document. This invisible object is simply an ActiveX control or Java applet that knows how to communicate with the data source. Microsoft provides two data source objects with Internet Explorer 4.0: one to access comma-delimited data in text files, and another to access SQL data in SQL Server and other ODBC sources. Additional data source objects, such as a JDBC data source, will also be available from Microsoft and third parties.

The following simple document shows how easy it is to bind to a data source. When viewed, this document displays the first three fields from all the comma-delimited records of the file "sampdata.csv" in a clear, easy-to-read table.

Example # 8 - Data Binding with DHTML

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.

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.

Benefits

Authors can use HTML to better display and collect data.

Dynamic HTML decreases server load by manipulating data on the client.

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.

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, Microsoft 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. DHTML behaviors are not supported in Internet Explorer 4.0 or earlier versions.

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.