June 1999

IE 5 Web Authoring Features--Behaviors and HTCs

Over the next several months, we'll start to look at some of the new Web authoring features that Microsoft has added to Internet Explorer (IE) 5. In this article, we'll take a first look at the new DHTML behaviors and HTML components that IE 5 offers.

Behavior basics

A DHTML behavior is applied to an element using a style sheet. With a behavior, you can create actions for an element in the same way that you can with scripts. However, behaviors have an advantage over the way that scripts are currently written, in that they allow you to separate your scripts from the contents of a page. Separating scripts from Web page content allows you to use the same scripts for any number of pages. It also simplifies the task of managing your pages. As an added bonus, Microsoft provides an entire library of default behaviors for IE 5, which we'll list later in this article. We'll introduce the concepts behind the technology.

Here are just a few of the new IE 5 features for Web authors:

Basically, to include a behavior for an element, you simply specify the path of the file containing the script you want to apply to that element. For example, if you have a button element on your page, as in 

<INPUT type = button id = stylebutton
	value = "Change style" >

you could add a behavior to the element's inline style sheet, as in 

INPUT type = button id = stylebutton
	value = "Change style" 
	style = "behavior:url(dostyle.htc)">

You could also add a behavior to a style sheet in the heading, either by creating a style class, as in 

<SYTLE>
.chgstyle{behavior:url(dostyle.htc)}
</STYLE>

and then specifying the behavior in the element like this 

INPUT type = button class = chgstyle 
id = stylebutton value = "Change style"
or, by specifying a style for all elements of a particular type, as in 

<SYTLE>
INPUT {behavior:url(dostyle.htc)}
</STYLE>
And, as with other style objects, you can also apply a behavior dynamically, as in 

function newstyle () {
	stylebutton.style.behavior = 
	"url(dostyle.htc)"
}

HTC s

Although they can be implemented using scriptlets or C++, probably the quickest and easiest way to implement DHTML behaviors is with HTCs. An HTC, saved in a file with a .htc extension, contains the script that implements a particular behavior. The script is enclosed in an HTC block with HTC-specific XML tags. These tags are used to create the connection between the script and the containing HTML page. Listings C and D, contain the complete code for two different HTCs. You'll notice that the structure of the HTC block and the script that it encloses looks like this: 

<PUBLIC:HTC>
<PUBLIC:ATTACH EVENT="onclick" 
	HANDLER="dostyle" />

<SCRIPT>
function dostyle() {
//script goes here
} 
</SCRIPT>

The ATTACH element allows the HTC to listen in on events trapped by the element and to handle the event appropriately. In our case, the event is an onclick, and the function handling the event is the dostyle function.

You can also define both properties and methods in the HTC's code, and expose those to the element on the containing page. That's done with the PROPERTY and METHOD elements in the HTC, as in 

<PUBLIC:PROPERTY NAME = "somestyle" />
<PUBLIC:METHOD NAME = "chgstyle" />
And, using the EVENT element, you can define custom events and expose them to the containing page, as well. These elements deserve a more-than-cursory treatment, so we'll go into depth, with an example application, in a follow-up article. For now, we'll stick with the basics.

Default behaviors

IE 5 has included a number of default behaviors as part of their new browser. A listing of the behaviors is included in Table A.

Table A: IE 5 default behaviors

Behavior Description
anchor Enables browser navigation to a folder view
clientCaps Provides information about IE-supported features and a means to install browser components on demand
download Provides a means to download a file and indicate when the download is complete
homePage Contains information about a user's homepage
httpFolder Contains script features that enable browser navigation to a folder view
saveFavorite Allows the current state of the page to be saved when it's added to Favorites
saveHistory Allows the current state of the page to be saved when the user navigates away from the page
saveSnapshot Allows a snapshot of an object to be saved
userData Allows user data across sessions to be saved

Default behaviors are specified in a style sheet like this: 

<STYLE>
.saveFavorite 
(behavior:url(#default#savefavorite);)
</STYLE>
Default behaviors, particularly in their ability to provide persistence for data and objects, rate their own article, and we'll follow up with one on this topic as well.

Conclusion

We've just gotten started on all the new Web authoring features that Microsoft has included in their newest version of Internet Explorer. In the coming months, we'll be providing lots of discussion on all of these new features, and we'll be creating plenty of Web applications that serve as examples of the new technology. So, stay tuned.

Copyright © 1999, ZD Inc. All rights reserved. ZD Journals and the ZD Journals logo are trademarks of ZD Inc. Reproduction in whole or in part in any form or medium without express written permission of ZD Inc. is prohibited. All other product names and logos are trademarks or registered trademarks of their respective owners.