HTML 4 For Dummies - Bonus Chapters

DHTML, a la Microsoft


 

Microsoft calls this technology Dynamic HTML (notice the capital D on Dynamic -- they’ve trademarked this name as such -- note that DHTML refers to dynamic HTML in the general sense). In their view, DHTML consists of four principal components:

  1. An HTML document object model (or DOM), which creates a data structure for an entire HTML document. In this arrangement, each element in a document can be addressed by instance, by name, by type, or by position.

  2. A method for controlling how elements are positioned when displayed on a page, or to reposition them when a page is redrawn according to an altered set of HTML markup or according to an altered or different style sheet.

  3. A set of multimedia controls for animation, graphical displays, channel filtering, and other capabilities. The controls make it much easier to incorporate interactive forms of multimedia and to integrate multimedia with more static forms of content.

  4. A method to associate databases, or other orderly collections of data, with one or more HTML documents, called data binding; this permits a single Web document to manage multiple views of a single data set. For example, when viewing a stock portfolio, data binding permits users to manage the display of stocks by ticker symbol, date of purchase, absolute value, and so on.

Beyond these four components, Microsoft has also created a Scripting Object Model for Internet Explorer (starting with version 4.0), so that developers can use whatever scripting language they choose to control page elements within that browser. Today, the only such languages that Microsoft supports are Visual Basic, Scripting Edition (usually known as VBScript) and Jscript (Microsoft’s version of the popular JavaScript language originally defined by Netscape and Sun Microsystems).

The Document Object Model (DOM)

Basically, Microsoft’s document object model (DOM) takes an HTML document and turns it into a single hierarchical object, where the entire document is stored under a root named all. This object is implemented as a table-like data structure that Microsoft calls a variant array -- the data structure that represents an HTML document can contain an arbitrary number of subelements, and each element can be of a different type. This arrangement explains how the DOM can integrate HTML markup tags, textual content elements, plus scripts, graphics, multimedia files, and even pointers to databases, all within the same object.

The all object

The all object is created on the client side as the Web browser reads the HTML document file, and grabs associated elements from script and image references and from pointers to other files and data collections. The browser basically builds a tree-like representation of the HTML document that is ordered by how elements occur and by which elements are enclosed within other elements. In some sense, the DOM really does create a model of the HTML document it accommodates, which is probably how it got its name.

Web developers can navigate inside this hierarchy of elements and address or change the contents or attributes associated with any element in the hierarchy. Thus, you could get to the third level 2 head in your document by specifying the following object reference:

document.all.tags("H2").item(2)

Because all items are numbered ordinally, starting with zero (0), the third element appears as item(2) in the object reference. If you wanted to change the font size associated with that element, you could specify that as follows:

document.all.tags("H2").item(2).font.size = "x-large"

This resets the font size of the reference to whatever point size is associated with the x-large designation in the document’s related style sheet.

Events

Even more interesting, the Microsoft DHTML model includes support for numerous kinds of user events. An event represents some kind of user action or response, and creating a named set of events means that Web developers can instruct their Web documents to respond in specific ways to events as the Web browser recognizes them.

In other words, user actions such as mouseover, which the browser recognizes when the user’s cursor stays in position over an object or crosses an object on a Web page, can lead to specific responses (like a short, descriptive pop-up window that identifies navigation buttons or active regions on an image map). Likewise, mousedown represents what happens when a user clicks the left-hand mouse button on some object on a page; again, the document can be programmed to respond to this event in a specific fashion. (This is how hierarchical menus are supported: When the user clicks a higher-level menu entry, the response is to redraw the screen with the lower-level menu positioned next to the higher-level menu entry that’s been clicked.)

Because Web page developers can associate any kind of script they want with such events, the developers can cause all kinds of interesting things to happen when the browser recognizes events. These range from simply showing explanatory messages, to looking up terms in a glossary and displaying them elsewhere on screen or in a pop-up window, to opening a text entry box to solicit and handle user input. Remember, too, that all this activity happens purely on the client side of the Web connection, so this lets Web pages act like any other local application.

Web Icon

In many ways, the object model supplies the “magic” that makes Microsoft’s version of DHTML work, because it makes it possible to access and manipulate any element in an HTML document. For more information on this model, please visit Microsoft’s “Dynamic HTML: The Next Generation of User Interface Design” at
www.microsoft.com/workshop/prog/aplatfrm/dynhtml.htm.

Element positioning and control

The Microsoft concept of how to control element positioning on a Web page is drawn straight from the W3C’s work in the same area. In other words, you can use (and manipulate) standard CSS1 or CSS2 style sheets to control how and where elements appear on a Web page, precisely and directly. Because we cover this subject in Chapter 13, we won’t delve much into those details here.

The key elements of the CSS specifications include the ability to position elements precisely as they display. Those specifications even include support for numerous relative and absolute units of measure, so that you can determine where to put things in terms of pixel count relative to the upper-left-hand corner of the user’s display window, or relative to the fonts in use.

The CSS specifications also include the ability to organize and address elements in layers, so that elements can be associated not just with x and y coordinates for horizontal and vertical positioning, but also with a z coordinate for layer number. Because HTML elements can have associated transparency, clipping, and order attributes, you can micro-manage overlapping elements and use these attributes to create all kinds of cool effects on screen.

Cross Reference Icon
Web Icon

To learn more about this rich and powerful set of page controls, please consult Chapter 13 in the book. For the ultimate resource on the subject, consult the W3C’s draft specification “Positioning HTML Elements with Cascading Style Sheets” at
www.w3.org/TR/WD-positioning.

DHTML and multimedia

The Microsoft concept regarding multimedia for DHTML forms a kind of “wish list” for advanced on-screen display controls that other developers have often labored mightily to produce in customized form. The effects that Microsoft supports in this area include things such as animated color washes and textures, font morphing and transitions, screen shifts similar to those used for transitions in movies (such as fades, wipes, bleeds, and other common scene-shifting techniques), plus support for compact, scalable graphics displayed using a simple vector format.

For audio effects, Microsoft offers support for defining and creating multiple channels of sound. This support permits precision in mixing multiple channels together, and in transitioning from one set of channels to another, in much the same way that a multichannel audio mixer supports such effects. Such precision permits sounds and voiceovers to mix and blend, but also permits audio effects to be associated with user-triggered event and overlaid on other audio streams, or to replace them as needed.

All in all, Microsoft is attempting in this area to create a way of introducing and managing multiple streams of animation, video, and audio in a way that permits Web page designers to make such elements part of a truly interactive, dynamic environment. So far, the W3C’s work to take up DHTML includes significant attention to the Microsoft DOM and to element positioning and controls, but has not taken cognizance of this work on multimedia (nor on the data binding technologies of Microsoft, which are discussed in the next section).

Data binding in DHTML

The built-in database support that Microsoft includes with its version of DHTML is called data binding. This technology permits Web page designers to associate documents with data sets, so that a page can display some default organization of data when loading, but thereafter, users can sort and sift within the data set according to whatever kinds of controls the designer makes available to them. The beauty of this approach is that the data resides on the client side of the Web connection, so when users operate on or reorganize the data, all such operations occur locally without having to reload any data from the server.

Under the hood, reorganizing data on-the-fly requires that users have access to some kind of local data-management application, such as Excel or Access, to assist in the operations that appear on a Web page. This access is what makes it possible to reorganize and reformat data sets on-the-fly, and also explains why local performance is pretty fast. It also explains why search and edit operations on the client side are so easy to support (because most of the work’s already been done and is handled by another application -- a concept that almost lends new credibility to the old idea of helper applications for Web browsers!)

Summing up the Microsoft DHTML story

Microsoft and its adherents have already made effective use of this technology and have created some astonishing Web documents built around DHTML. If you visit Microsoft’s own Web site at www.microsoft.com and observe how page navigation and its pull-down menus work, you’ll see a compelling illustration of DHTML at work.

But you’ll find more to watch out for when you visit some of these pages: Because the browser builds a model of a document’s elements as they arrive, this hierarchy can be scanned, reorganized, and categorized as needed. This capability has led to some sites that can automatically construct “active” (in the sense that elements act as hyperlinks to associated documents) tables of contents, build graphical site maps on-the-fly, and create other infrastructure support (like an index) without having to construct such things in advance.

Dynamic HTML also has a fun side, too. It’s been used to build online, Web-based games such as Battleship, Mines, and Tetris; to create complete interactive, self-modifying screen forms (so an order for a shirt automatically pops up a subwindow that asks for collar size and sleeve length, for instance); and even to build “smart” requisition forms that calculate their own totals and figure sales taxes, delivery charges, and so on. The Microsoft approach does indeed appear to offer powerful, flexible interactivity to Web page designers. Although learning this technology is not a trivial job, the rewards seem to more than justify the effort involved. Table E3-1 lists some interesting examples of, and more information about, Microsoft’s DHTML.

Table E3-1: Microsoft Dynamic HTML Resources

Category Description URL
Overview Dynamic HTML home page www.microsoft.com/workshop/author/dhtml/default.htm
  Overview document www.microsoft.com/workshop/author/dhtml/default.htm
  Event Handling in IE 4.0 www.microsoft.com/sitebuilder/features/ie4event.asp
Examples Microsoft’s DHTML Gallery www.microsoft.com/gallery/files/html/

Extra 3 Main Page | Previous Section | Next Section


Home | Bonus Chapters | FTP Resources | Site Overview | Book Contents | Book URLs | Book Examples | Wayfinding Toolkit | Contact Info


URL: http://www.lanw.com/html4dum/h4d4e/extras/ex03/e03s02.htm
E-mail: HTML For Dummies

Webmaster: Natanya Pitts, LANWrights
Copyright Information
Revised -- January 16, 1998