Dynamic HTML

IE4 delivers the next generation of Web Browser technologies including Dynamic HTML. Dynamic HTML is a collection of HTML and CSS specifications from W3C, forming part of the new HTML 4.0 standards, which provide the ability to dynamically update the contents and styles of a Web page without refreshing the page.

While Dynamic HTML still supports many of the tags and attributes available with the previous generations of browsers, what's new is that full access to all items in the browser is available from a scripting language. This also means that web pages designed for Dynamic HTML will degrade gracefully on earlier browsers such as IE3. It frees the user from the straitjacket of static pages, by providing many new features. The most significant of these are:

All of the elements on the page are now accessible to the scripting languages and also with some extra effort, so is any software component that has been installed on the desktop.
Extensions to the browser object model, in particular the document
object, mean that there's far more hooks for the scripting languages to use.
Extensions to style sheets to bring support in style sheets in line with the CSS1 recommendations.
Dynamic redrawing of any page or section of a page, without the need for a full-page refresh.
Absolute positioning of elements on the screen with x and y type coordinates, including a third dimensional coordinate, the zindex
, which allows a desktop publishing format of layout.
New event handling techniques, including a facility called event bubbling that reduces the amount of script code previously required. When an object is notified of an event it can either process it or delegate the processing to the parent object.

On top of this, most of IE4's new features, such as multimedia controls are directly programmable with Dynamic HTML, and we'll spend the rest of the first section of the book getting you up to speed with it.

Scriptlets

A late addition to IE4 was the innovation of scriptlets. These are reusable components that have been created in Dynamic HTML. These components are scripts that are written by the developer according to certain criteria. They can be added to web pages, with the

<OBJECT>

tag, in the same way that ActiveX controls and Java applets can. They can be written in either JavaScript or VBScript, but aren't limited to just these two languages. Effectively by embedding a scriptlet within a page, you are embedding a browser within a browser. These may not seem like an overly useful thing to do, but when you realize that you can follow these principles to embed a browser within any application from Word to Access, by using ActiveX, you can then see how almost any application can suddenly be Internet enabled. We look at scriptlets in more detail in section 3.

Dynamic HTML in action

While we shall be delving deeper throughout this book into Dynamic HTML technologies and the associated programming techniques – we'll now take a look at an example which demonstrates the following capabilities:

Dynamic styles - the menu options are displayed in a frame on the left hand side of the display - as the mouse pointer hovers over the option text, the menu text changes color and adopts additional decoration
Dynamic content - help text is displayed in a frame at the base of the display - as the mouse pointer hovers over various items, the help text is updated
Absolute positioning - the home page title text is displayed twice using two colors with the second copy slightly out of phase from the first - this gives a shadow effect and the impression of three dimensions
Multimedia controls - a music control is used to play some Beethoven style music and a visual effect control is used to invert the logo whenever the mouse pointer hovers over it
Data binding - we use the Microsoft Tabular Data Control (TDC) to retrieve information (a list of Wrox book titles) from a text file and insert the information in a table on the Web Page

The example is available from the Wrox web site at

http://rapid.wrox.co.uk/books/0707

. The opening page provides an ordinary looking two frame page, but the frame on left contains a menu which reacts dynamically to user interaction by highlighting an item when the mouse pointer moves over it.

If you click on the Order item, you'll be able to see data binding in action. The resulting list of books is dynamically generated from the database, and you can create an order for several books client-side, in the same way as you can with a CGI script or Active Server Pages and server interaction.

Take some time to browse the source code as well, from the View Source option, because while you might not understand it all yet, it demonstrates that many of the pages were generated with relatively little code.