Disclaimer: Before I start this I should note that the syntax you see here is for the Beta 2 release of Internet Explorer 5. Significant changes have been made between Beta 1 and Beta 2, including changing the suffix of the Behavior file from SCT to HTC. I personally think the new syntax is more straight forward.

Introduction to IE5 DHTML Behaviors:

Dynamic HTML behaviors are the most exciting addition to Internet Explorer 5. Behaviors are an outgrowth of scriptlets from Internet Explorer 4. Both are an attempt to separate scripting code from HTML. This breakdown of web development into many parts or components is a logical outgrowth of increasing differentiation in the web development community. Real world developers rarely provide the design of the page, the HTML and the scripting. Design is now controlled by Cascading Style Sheets, HTML goes to the HTML coder and now scripting is contained in the behavior component.

Microsoft has been applying this component structure to all their development platforms and its emergence on the web is a sign that the "web application" is coming of age. Behaviors can distributed much more easily the previous scripting and can be incorporated into pages by HTML developers with no scripting knowledge. True application development needs to make use of reusable code and components to cut costs and speed delivery time. Having design, HTML and scripting poured together into one large file makes for poor division of labor. These changes by Microsoft are an attempt to move beyond just browsing the web and make the browser a true development platform.

Microsoft has also included a number of built in Behaviors to IE5 Beta 2. These provide some very useful functions that were previously unavailable including:

Some developer may have had experience working with external javascript files (.JS files) or with scriptlets (.SCT files) in IE4. DHTML behaviors are stored external to the HTML file in a new file type called an HTML Component (.HTC file). The HTC file contains the script in either VBScript or JScript. While it isn’t documented the HTC file will also take Javascript as a script language, though not ECMAScript.

Several problems should be mentioned. If the HTML page downloads before the HTC finishing downloading errors can occur in the script. New error handling routines in IE5 can be used to handle these problems. Also IE’s cross-frame security rules do not apply to Behaviors. In other words, developers can refer to HTC files on different domains.

Using DHTML Behaviors:

Declaring and using Behaviors in your HTML document is done through Cascading Style Sheets 2 (CSS2). The addition of the behavior property to CSS2 has been proposed to the W3C by Microsoft and is still in evaluation. In style sheets this appears as follows:

<style>

<!--

.tabdiv {behavior:url(pop2.htc);

}-->

</style>

The example I’m going to show you is used to create easy popout menus. Let’s take a look at the full HTML document:

<html>

<head>

<title>Popout Menu</title>

<style>

<!--

.tabdiv {

behavior:url(pop.htc);

position:absolute;

top:20px;

left:-150px;

width:164;

z-index:1;

}

}-->

</style>

</head>

<body>

<div class=tabDiv startlocationx=-150 startlocationY=20 endlocationx=0 endlocationy=20>

<img src="tab.gif" width=164 height=164 alt="" border="0">

</div>

</body>

</html>

As you can see the Behavior called pop is attached in the style sheet in the <HEAD> tag. The contents of the <DIV> tabdiv will gain the functionality of the pop behavior. In this case the ability of the <DIV> to pop out from the side of the page. The pop behavior can be applied to any number of HTML objects on the page. All will gain the same functionality and all will use the same HTC code! So how do you make different menus pop out at different places? When a behavior is applied to an element, the element’s properties, methods and events are exposed to control by the behavior. Behavior properties are defined inline with the HTML element. In our case we’ve defined four properties:

startlocationx, startlocationY, endlocationx, endlocationy

These properties control the location of the element before and after it is clicked on. The properties are passed to the HTC file when the page loads.

The HTC file:

<PROPERTY NAME="startlocationx" />

<PROPERTY NAME="startlocationy" />

<PROPERTY NAME="endlocationx" />

<PROPERTY NAME="endlocationy" />

<ATTACH EVENT=onclick HANDLER=event_onclick />

<script language="JScript">

var tabShow=0;

function event_onclick(){

if (tabShow == 1) {

style.left = startlocationx;

style.top = startlocationy;

tabShow = 0;

return;}

if (tabShow == 0) {

style.left = endlocationx;

style.top = endlocationy;

tabShow = 1;

}

}

</script>

The first thing that is done is the definition of the properties so that they can be received from the HTML document and used in the script.

The ATTACH element is used next to set the HTC file up to receive notification of firing of the onclick event. This allows the HTC to change the position of the element when it is clicked on.

The script itself is only slightly modified from the original JScript. Notice that the location of the menu was changed by referring to the style property directly and not to the element. This allows the Behavior to deal with all elements equally and not refer to one specific element. The script itself simply moves the element, in this case the graphic menu, from it "collapsed state" partly off the screen to its "open state" where users can select a menu item. This is done by setting the tabShow variable to an on or off state.

Conclusion:

DHTML Behaviors offer new power and flexibility to normal scripting. By making scripting into components web developers will be able to implement more control development environments and be able to make use of reusable code more frequently. It will also help to make Dynamic HTML into a development platform on a par with older programming languages.

 

Jeff Rule is a principal at RuleWeb Development specializing in DHTML, SMIL, Shockwave and Java based multimedia enhancements for advanced media sites. His first book, Dynamic HTML: The HTML Developer's Guide will be published in November 1998 by Addison Wesley Longman. It features many DHTML multimedia examples from his popular DHTML Demo's web site.