Developer Forums | About Us | Site Map
Search  
HOME > TUTORIALS > CLIENT SIDE CODING > JAVASCRIPT TUTORIALS > CREATE RICH CLIENT APPS WITH THE DOM


Sponsors





Useful Lists

Web Host
site hosted by netplex

Online Manuals

Create rich client apps with the DOM
By Mike Padilla - 2004-03-24 Page:  1 2 3 4 5 6 7 8 9

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:

  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.

Listing 2. The HTML code

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

Listing 3. The CSS class

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

Listing 4. The HTC file code (file named highlightingCellBehavior.htc)

<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:

Listing 5. Code for addEventListener method


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:

Listing 6. Code for attachEvent method

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.



View Create rich client apps with the DOM Discussion

Page:  1 2 3 4 5 6 7 8 9 Next Page: The rich get richer

First published by IBM developerWorks


Copyright 2004-2017 GrindingGears.com. All rights reserved.
Article copyright and all rights retained by the author.