Dynamic Properties

This document describes technologies available in the Internet Explorer 5 Beta. While we encourage you to evaluate these features and to send us your feedback, please note that these features are subject to change.

Microsoft® Internet Explorer 5 offers an easy-to-use new feature that enables Web authors and developers to vastly improve the appearance and rendering of their Web pages. Using the power of dynamic properties, it is now possible to declare property values not only as constants, but also as an expression or formula. The expressions used in a dynamic property can reference property values from other elements, thereby allowing authors unique opportunities for designing their Web pages.

A few examples of the behavior dynamic properties enable include:

Create a spreadsheet-like TABLE that recalculates totals when a user enters a change in a cell.
Position elements relative to a moving mouse pointer.
Move elements based on a timer.

Innovative Web authors can easily expand beyond this list of simple examples and create impressive and clever Web pages by exploiting the capabilities of dynamic properties.

This article covers the following topics:

Benefits of Dynamic Properties

Dynamic properties simplify and minimize the amount of code required to implement behaviors in a document. Authors can use dynamic properties to implement functionality formerly possible only with scripting. This frees authors from the requirement of learning script programming before they can design advanced behaviors for their pages.

Dynamic properties are similar to a spreadsheet's implementation of a formula. In a spreadsheet, a cell's value can be a constant or a formula. A formula can include references to any number of other cells in the spreadsheet. Likewise, a dynamic property can reference other properties on the same document.

Dynamic properties enable authors to implement declarative programming for their Web pages instead of the more complex imperative (or procedural) programming. To produce a result, imperative programming specifies explicit sequences of steps to follow. Declarative programming, on the other hand, describes relationships between variables in terms of functions. Whereas imperative programmers must maintain a mental model of the current program state, declarative programmers need merely concentrate on functions.

Handling events with imperative programming can get fairly involved and inefficient. Implementing event handlers on a document that is not fully known at author time (database driven Web pages or pages with data binding, for example) is only possible with event bubbling. As a result, authors frequently implement a single global handler at the top of the event chain to update everything. On the other hand, with dynamic properties, authors can automatically determine a minimal and optimal recalculation of properties and evaluate only the expressions that really need to be evaluated.

Implementing Dynamic Properties

Dynamic properties are implemented through four new methods in Internet Explorer 5, outlined briefly in this section. These methods are getExpression, recalc, removeExpression, and setExpression. Visit these reference pages for in-depth discussions on method behavior and syntax.

Expressions are assigned in script with the setExpression method. They can also be assigned inline through the STYLE object. For example, given the following division:

<DIV ID="div1"STYLE="background-color:red;width:10;height:10"></DIV>

dynamic properties can be used to define the width and height of the following division to be twice the height and width of div1.

<DIV ID="div2"STYLE="width:expression(div1.offsetWidth);height:expression(div1.offsetHeight)"></DIV>

Whenever the height or width of div1 is changed, the height or width of div2 is recalculated and repainted automatically.

The following script can be used in place of the declarative expression syntax above:

div2.style.setExpression("width", "div1.offsetWidth", "jscript");
div2.style.setExpression("height", "div1.offsetHeight", "jscript");

For scripting, the dynamic property can be any legal JScript™ (compatible with ECMA 262 language specification) or Visual Basic® Scripting Edition (VBScript) statement. The third parameter of setExpression can be used to identify the scripting language used in the second parameter; JScript is the default. For the inline implementation, the expression must be written in JScript. When the expression is recalculated, identifiers in the string will be resolved to the actual properties on the current page.

The recalc method is used to recalculate dynamic properties in a document. Calling the recalc method with the parameter set to false (the default) will recalculate all expressions in the current document that reference properties that have changed since the last recalc. Calling recalc(true) will recalculate all expressions in the current document, regardless of whether or not referenced properties have been changed. After a dynamic property has been recalculated, references to that property will retrieve the new calculated value.

The getExpression method returns a variant representing the expression for the current property. It also will recalculate the expression for the current property.

The removeExpression method deletes the expression for the given property and comprises the only way to clear values set using setExpression. The value of the property after the expression has been removed is equal to the last calculated value of the expression. This method returns a Boolean value indicating whether or not the removal was successful.

Click the Show Me button to see how dynamic properties can be combined with a timer to create a model of the planetary orbits:

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Using currentStyle in expressions

The expressions on dynamic properties are re-evaluated any time the dependencies in that expression change (or when document.recalc(true) is called). IE relies on property change notification (via IPropertyNotifySink) to determine when dependency properties change. The beta 2 release of IE 5 does not fully support property change notification on the currentStyle object, expressions that reference currentStyle properties may not update automatically. This will be addressed before the final release of IE 5.

Notes on implicit dependencies

Implicit dependencies refer to properties that may be altered by changes in other properties. For instance, the offsetWidth of an element depends on the style.width, runtimeStyle.height and possibly even the height value in a stylesheet. In most cases the author does not need to worry about these dependencies, IE 5 knows about most implicit dependencies and handles the case automatically. This is done by mapping certain properties to a canonical property for purposes of dependency tracking. For instance, the canonical property for all width properties is offsetWidth. A dependency on any one of clientWidth, style.width, style.posWidth, style.pixelWidth, currentStyle.width and (in the case of images) width will imply a dependency on offsetWidth. Although IE automatically handles implicit dependencies for the most obvious cases, there are still some cases where the dependency is more obscure. Because the actual property still fires property change notification, the recalc engine usually knows to re-evalauate the expression. However circular expressions involving these properties can only be detected at runtime (and not when the expression is set on the property). Probably the most complex dependency is on the clientHeight of a DIV. The final computed clientHeight of the DIV depends on the innerHTML, the margin properties, the padding properties and of course the width.