On Your Best Behavior

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Rebecca Norlander
Sara Williams
Microsoft Corporation

March 18, 1999
(Updated June 2002)

Meet the DHTML Divas
A Quick Recap
On to the Winners
WebSpeak
Stacked Menus
Tabbed Folder

Meet the DHTML Divas

You're probably wondering, "What happened to the Dude? Has he forsaken DHTML and abandoned us forever?" Fear not, Michael Wallent will be back next month. He's just taking some well-deserved time to explore the finer points of walking, talking, and DHTML programming with his now-toddling daughter. In his stead, this month's column is penned by a pair of DHTML Divas, Rebecca and Sara.

In the meantime, you get us: the DHTML Divas. While Michael's off to points unknown, we're here minding the ranch—and having quite a time of it, we must say. First thing you've probably noticed is that we shipped Internet Explorer 5! That's right, we've dotted the i's and crossed the t's, and put it out on the Web for your enjoyment. You can download the final version from the Microsoft Windows Web site. We sure hope that you enjoy it, and that you find the new features we've added useful and helpful.

Michael's already introduced you to many of these new features, so we thought we'd use this opportunity to show you some of the winners of the DHTML Behaviors Contest, and to talk about how the winners used their crafty development prowess to create some pretty nice components. Hopefully, they will inspire you to do the same.

The Site Builder Network sponsored the DHTML Behavior Contest earlier this spring. They awarded prizes, such as new laptops and software, to encourage developers to dig their teeth into DHTML behaviors. The contest is over, but you can still use behaviors to add functionality and to componentize your Web development.

A Quick Recap

First, a quick refresher on DHTML behaviors. As you may recall, DHTML behaviors provide three basic features:

DHTML behaviors enable you to extend the functionality of existing tags. If you've ever subclassed a Windows control, we're talking about the same thing here. The existing tag does almost what you want; using behaviors, you can modify its functionality (by attaching to an event, exposing a method or property, or firing your own event) to get exactly what you want—without having to write the whole thing from scratch.
DHTML behaviors enable you to extend HTML by creating your own tags. You can author a completely new tag, implement that tag's functionality in an HTML Component (.HTC file) or as a binary behavior, and then use XML syntax to include the tag in your HTML page. Creating a new tag makes it easy to incorporate new functionality into HTML—using syntax that's old hat to anyone who has used HTML and CSS.
DHTML behaviors enable you to encapsulate and componentize your code. You can write your code once, put it in a separate file, and then use it from as many pages as you want. Much easier to maintain and update—and better for users as well, because they have to download those bits only once.

On to the Winners

The three grand prize winners were WebSpeak, by John and Eleanor Abbott , Stacked Menus by Bryant Likes, and a Tabbed folder system by Scott McAndrew.

WebSpeak

WebSpeak makes it easy to have all or part of your Web page spoken when the user loads it. You can apply the WebSpeak behavior to the <BODY> tag to have the whole page read, or you just as easily choose to read only certain tags. Additionally, it would be easy to extend the behavior to expose a read method, so that you could read some content in response to user interaction. It's easy to think of all sorts of applications for this behavior—making pages accessible, making fun interactive sites for kids, and teaching a foreign language are just a few possibilities. WebSpeak is a great example of how you can use behaviors to extend the functionality of an existing tag.

Stacked Menus

The Stacked Menus were built with four separate HTCs. (Editor's note: Sorry, this sample is unavailable on the Web as of November 2007.) By using all of them together, you can create a professional-looking menu for your page. Take a look at the example on Bryant's Web page, where he has created a composite menu to show off his work. He has four expanding menus, each with sub-items. When a top-level menu is clicked, the sub-items for that menu are exposed. Clicking on a different top-level menu closes the previous top-level menu, hiding the items in it, and expands the new top-level menu, showing the user the items associated with that menu.

For the Stacked Menus behavior, Bryant uses each HTC as a building block for part of his menu functionality. This allows him to reuse the components in other places by dividing functionality into logical pieces—a key to building component-based Web applications. It is also a great example of how you can extend the functionality of HTML by creating custom tags that can be easily used by content authors.

Tabbed Folder

Finally, the Tabbed Folder behavior allows you to create a tabbed folder collection, or a way of easily grouping and displaying information. (Editor's note: Sorry, this sample is unavailable on the Web as of June 2002.) Scott uses two HTC files to create the Tabbed Folder functionality. The first one, folderBuild.htc, creates a tabbed folder based on the parameters supplied by the page author; the second one, folderHandler.htc, is responsible for handling the click events on the tabbed items. Scott uses the class= syntax to apply the tabbed folder functionality on top of a <UL> element. The folderBuild file uses a table to create a tab for each <LI> in the <UL>. The <LI> elements contain a property that points to the HTML file that holds the content for that tab. Then folderBuild calls addBehavior to add the click-handling functionality that allows the user to select the different tabs. The Tabbed Folder behavior is a great example of how you can use behaviors to extend the functionality of existing HTML. In this case, Scott uses the <UL> tag to describe structure, but uses behaviors to control the display of the content.

WebSpeak, Stacked Menus, and Tabbed Folder are all inventive uses of DHTML behaviors. They all show how you can extend what you already do with DHTML, and do so in a way that's easy to for you and other people to reuse and build from. Big Kudos to John and Eleanor, Bryant, and Scott for their great behavior (okay, so we had to slip in just one bad play on words). We hope that this has given the rest of you some motivation and inspiration to kick the tires and build your own behaviors. If you come up with something that you're really proud of, send it our way, and you could find yourself as the star in an upcoming column.

Next month, back to your regularly scheduled programming: the DHTML Dude returns with wild and wooly tales from his leave, and he'll even show you how to build a trebuchet, using only a pocket knife, your bare hands, and DHTML, of course.

DHTML Dude

Rebecca Norlander and Sara Williams are Lead Program Managers for DHTML.