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:
<input type="text" name="textfield" onMouseOver="highlight(this)" onClick="expand(this)" onKeyUp="copyText(this)">
Using HTC behaviors, this all boils down to just:
<input type="text" name="textfield" class="dataCell">
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:
- CSS class
- An HTC file
- 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.Listing 2. The HTML code
Listing 3. The CSS class
Listing 4. The HTC file code (file named highlightingCellBehavior.htc)
Of course, a Microsoft-only solution is not necessary for a clean implementation with DOM. Using the
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:
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:
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
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.