Clean and extensible implementations

Style sheets are a great way to link presentation display to a single source. Imagine if you could do the same with behaviors -- if you could just as easily assign behaviors to a table cell, like expand and collapse, highlight or scroll, as you could set its background color. Well guess what? You can.

The W3C has documented submissions for including behavioral extensions to the CSS specification. These extensions let you attach standalone behaviors to any HTML element through a CSS class. Although a universal standard has not been adopted, Microsoft has implemented a proposed solution using HTML components (HTC). Functionality specific to Internet Explorer 5+, HTC behaviors lets you add events and their corresponding actions all through a CSS-assigned class. For example, say you have a text field that highlights when the user mouses over it, expands when the user clicks it, and copies its content as the user types in it. Traditionally the HTML code for this would look like:

Using HTC behaviors, this all boils down to just:

That's right. You can control the behavior of HTML elements with the same simplicity and extensibility as controlling their appearance. Rich client development doesn't have to come at your code's expense. By utilizing HTC behaviors, your code can be just as clean and partitioned as before.

Using HTC behaviors entails three components:

1. CSS class
2. An HTC file
3. A Web page (HTML, JSP, ASP, and so on)

The CSS class links to a behavior in an HTC file. The HTC file specifies the event and functions to perform. By assigning a class to an HTML element in a Web page, the behavior as defined in the HTC file is seamlessly applied.

The following listings add a highlighting behavior to a text field through CSS and an HTC file.

<input type="text" class="highlightingCell">

.highlightingCell {
  behavior : url(/javascript/ highlightingCellBehavior.htc); 
      background-color:''; 
      border:none; 
      height:13; 
      width:100%; 
      text-align:right;
}

<PUBLIC:COMPONENT URN="projectOneBehaviorOne" >
   <PUBLIC:ATTACH EVENT="onfocus" ONEVENT="cellOn()" />

   <PUBLIC:ATTACH EVENT="onblur" ONEVENT="cellOff()" />
   <SCRIPT LANGUAGE="JavaScript">
        function cellOn()
        {
          window.event.srcElement.style.backgroundColor='#FFFF99';
        }
     
        function cellOff()
        {
          window.event.srcElement.style.backgroundColor='#FFFFFF';
         }
   </SCRIPT>
</PUBLIC:COMPONENT>

Of course, a Microsoft-only solution is not necessary for a clean implementation with DOM. Using the addEventListener method, you can add events and corresponding functions to any HTML element. Although not as clean and extensible as HTC behaviors, this method still lets you attach behaviors from one source without having to explicitly define which events and functions are associated to every HTML element. Here's how it works:

the HTML:
<td id="myCell"> 

the JavaScript:
   //define the object
var obj = document.getElementById("myCell");
   //attach the behavior to the object
obj.addEventListener("mouseover", highlight, false);

This results in the equivalent to:
<td id="myCell" onmouseover="highlight()">

Internet Explorer has not adopted this DOM standard; instead, it uses a similar method: attachEvent. For Internet Explorer, the code would be:

the HTML:
<td id="myCell"> 

the JavaScript:
   //define the object
var obj = document.getElementById("myCell");
   //attach the behavior to the object
obj.attachEvent("onmouseover", highlight);

By looping through multiple HTML elements, you can quickly and cleanly apply behaviors to each one. This is easily facilitated by using sensible IDs (such as TopCell1, TopCell2, and so on) or by navigating through the node structure of an HTML element (such as, looping through all the td elements in a specific tr node using childnodes.length). You may also use the getElementByTagName function to focus on HTML elements of certain types to which you may want to attach behaviors.