Inside Technique : DHTMLLib 2.0 : How DHTMLLib Works

The DHTMLLib is designed from the ground-up to simulate Internet Explorer. Therefore, this library actually does nothing in Internet Explorer. Instead, the library does a lot of work analyzing the page when in Netscape to build as complete an object model as possible.

Since the object model differences are basically tied to CSS-Positioned elements, our first step is to walk the hierarchy of layers in Netscape to create the all collection. In Netscape, the layers in the page create a tree of documents. You start with your main document. If it contains two positioned elements, there are two child layers of the document. If the first positioned element contained another layer, this new layer is a child of the first positioned element and so on. This tree is exposed directly into the object model. This requires scripters to understand and walk this hierarchy of layers to access different properties. To further complicate matters, different events are exposed on the layer and on the document the layer represents. The easiest way to think of a layer is that it is very similar to a frame where the layer represents a window, and the contents represent a document.

If you were to look at DHTMLLib's source code, you will find the _extract() function. This function is called recursively for each layer to analyze and flatten in. When a layer is exposed by the all collection, all layers are treated equally. You no longer have to navigate through any hierarchies and instead can access any positioned element directly.

The _extract function serves another purpose. It builds a new event model that supports event bubbling around each element. Event bubbling is the concept where an event starts at the deepest node (eg., user clicks on an anchor) and bubbles through all its parent elements until it reaches the document (eg., if the anchor is in a positioned element, the click goes to the anchor, the positioned element, and then the document). We simulated event bubbling in Netscape by using their capture and route event methods. These methods are similar to event bubbling but they require manually wiring them with script and they occur in reverse order (the document, then the element receives the event). DHTMLLib hooks every relevant event and uses a little recursive magic to reverse the event order to simulate the event bubbling. Note that while the bubbling is very much like Internet Explorer it is nowhere near as comprehensive. Internet Explorer bubbles through every HTML element on the page while we are limited to a small set of elements in Netscape (form input elements, images, anchors, and positioned elements).

The last task for _extract is to expose new properties on the layer elements. Rather than expose the layer elements directly, we create proxy objects that represent the layer. When you set a property on a positioned element, you are actually setting a property on one of our objects. The property assignment is detected by the library and we update Netscape's real property on your behalf. The new properties are built using a new JavaScript feature currently supported only by Navigator 4.x, watch() and unwatch(). These two functions allow you to detect and respond to changes to any custom property. This is how we do the correct thing when you set properties on the style sub-object. For example, the library detects that you set the pixelHeight property and maps it to the height property on the element. A more powerful example is where we track assignments to the visibility property using Internet Explorer's supported values, "visible" and "hidden", and internally map them to Netscape's "show" and "hidden" values. All this happens transparent to you.

The last initialization step is to build an onscroll event in Netscape. Netscape does not have such an event but does expose enough properties that we can simulate it. The library runs a simple timer and manually checks if the page scrolls. When it does, the library fires the event.

Once the library is initialized, you can then go ahead and write scripts. The only function the library has after initialization is to track any assignments to the object model, and to handle the event bubbling. Whenever an event occurs, we automatically create a new event object on the window with properties representing the current state (eg., keys pressed, mouse position, etc.). This information is exposed as the event bubbles. In addition, you can manipulate the event object by canceling the bubbling or changing the return value. DHTML automatically maps all of this back to Netscape's object model behind the scenes.

[DHTMLLib Demo Index]

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.