XML —

DHTML Behaviors

Internet Explorer 4 introduced DHTML scriptlets-components written in script that are an extension of the DHTML object model. Although scriptlets will still work with Internet Explorer 5, they are being replaced by DHTML Behaviors that offer functionality that scriptlets do not have. DHTML Behaviors allow us to associate behaviors to the events belonging to the HTML elements. Just as we associated DHTML script functions with the HTML element events, we will associate DHTML Behaviors with HTML element events. As is the case with DHTML, you can either include DHTML Behaviors in your HTML code or place them in separate files.

DHTML Behaviors are lightweight components that extend the functionality of the HTML elements and enable encapsulation and code reuse. DHTML Behaviors can be referenced in Internet Explorer 5 by using styles. A behavior can be defined anywhere a style is defined-for example, in a separate document, in a special section in the head element, or as an attribute of an HTML element. You can implement DHTML Behaviors in script using HTML Components (HTC). Let's look at an example of an HTC containing two behaviors. First create an HTC file called Color.htc using the following code:

  <component>
      <attach event="onmouseover" for="element"
          handler="MouseOver"/>
      <attach event="onmouseout" for="element" handler="MouseOut"/>
      <script language="JScript">
          function MouseOver()
              {
              element.color="blue";
              element.align="center";
              }
          function MouseOut()
              {
              element.color="red";
              element.align="left";
              }
      </script>
  </component>

This file is written in XML. A The root element of the HTC file is the component element. Next, two attach elements allow us to create two behaviors: one to attach the MouseOut function to the onmouseout event and one to attach the MouseOver function to the onmouseover event. The rest of the HTC file is just regular JScript, which will appear as text content of the script element. The JScript functions define what the behaviors will do. Below is an example that uses the HTC document:

  <html>
  <head>
  <title>Behaviors</title>
      <style type="text/css">
                  .colorchange { behavior:url(color.htc);}
      </style>
  </head>
  <body>
      <font color="green" class="colorchange">
          <h1>Behaviors</h1>
      </font>
  </body>
  </html>

When you open this document in a browser, the color of the text in h1 will change to blue as you move your mouse within the h1 text area and to red when you move out of the text area. The two behaviors we have defined have allowed us to change the color of the text in response to the onmouseover and onmouseout events.

Notice that the behavior was also supposed to change the align attribute, but this did not work. The behavior did not work as it was supposed to because we associated the style with the font element that contains the h1 element. The font element allows us to set the color of the content of the h1 element. Since the font element does not have an align attribute, it is just ignored. To fix this problem, change the HTML code so that you add the style to the h1 element as follows:

  <h1 class="colorchange">

You will now find that when the mouse cursor is over the h1 text it will jump from being left to center justified, and from center to left justified. The second part of the behavior is working because align is the attribute of the h1 element. We can use behaviors to extend the functionality of any of the elements in the HTML document. We will use HTC to create business services components in Chapter 14.

Now that we've examined how to use DHTML to create dynamic user services components, we'll look at how to use the XML DSO to bind elements in a DHTML page to XML data.