Internet Explorer Behaviors | Inside JavaScript

Internet Explorer behaviors were introduced in version 5.0 of that browser, and they enable you to separate your JavaScript code from the data in a web page. Your code can still access elements in the web page and work with them, but that code resides in a separate file, with the extension .htc.

Tip

You can learn more about Internet Explorer behaviors at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/reference.asp.

Attaching Behaviors to Events

An example will make how Internet Explorer behaviors work clearer. In this example, I'll use an Internet Explorer behavior to make the text in a <DIV> element glow when you pass the over it, as you see in Figure 17.9.

Figure 17.9. Using an Internet Explorer behavior.

graphics/17fig09.gif

To make this happen, I'll give the <DIV> element a style class, class1 , that will have a behavior associated with it (we'll see how this works in Chapter 21):

 <DIV CLASS="class1" STYLE="top:100; left:40">      Move the mouse over this text.  </DIV>

I use the glow filter (see Chapter 16, "Dynamic HTML: Changing Web Pages On-the-Fly," for more on filters) in this style class, class1 , but disable it at first by setting its enabled property to 0. I also associate a behavior I'll call glower.htc with this style class, as you see here:

 <STYLE>      .class1 {font-size:36pt; font-weight:bold;      color:white; position:absolute; cursor:hand;      filter:glow(enabled=0);behavior:url(glower.htc)}  </STYLE>

In glower.htc, I start with the behavior <PUBLIC:COMPONENT> element to indicate that I'm creating a behavior:

 <PUBLIC:COMPONENT>          .          .          .  </PUBLIC:COMPONENT>

Then I attach event handlers to the element this behavior is connected to, which is the <DIV> element, using the behavior <ATTACH> element. In this case, I'll connect the JavaScript function doGlow to the onmouseover event and the function noGlow to the onmouseout event like this (the <ATTACH> element uses the XML style end tags, which means you can end a tag with /> and not need a closing tag):

 <PUBLIC:COMPONENT>  <ATTACH EVENT="onmouseover" FOR="element" HANDLER="doGlow" />   <ATTACH EVENT="onmouseout" FOR="element" HANDLER="noGlow" />  .          .          .  </PUBLIC:COMPONENT>

All that's left is to write the JavaScript to enable and disable the glow filter in the functions doGlow and noGlow , where I can just refer to the element the behavior is working on as element . Here's what those functions look like:

(glower.htc on the web site)

 <PUBLIC:COMPONENT>      <ATTACH EVENT="onmouseover" FOR="element" HANDLER="doGlow" />      <ATTACH EVENT="onmouseout" FOR="element" HANDLER="noGlow" />  <SCRIPT LANGUAGE="JavaScript">   <!--   function doGlow()   {   element.filters.glow.enabled = true   element.filters.glow.color = 256 * 255 + 255    //Cyan   }   function noGlow()   {   element.filters.glow.enabled = false   }   //-->   </SCRIPT>  </PUBLIC:COMPONENT>

That's all you need for glower.htc. Now you can use it in the Internet Explorer web page you see in Figure 17.9, turning the glow on and off as the cursor rolls over the text in the <DIV> :

(Listing 17-11.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Internet Explorer Behaviors          </TITLE>  <STYLE>   .class1 {font-size:36pt; font-weight:bold;   color:white; position:absolute; cursor:hand;   filter:glow(enabled=0);behavior:url(glower.htc)}   </STYLE>  </HEAD>       <BODY BGCOLOR="BLACK">          <H1 STYLE="color:white">              Internet Explorer Behaviors          </H1>  <DIV CLASS="class1" STYLE="top:100; left:40">   Move the mouse over this text.   </DIV>  </BODY>  </HTML>

Creating Behavior Properties, Methods , and Events

You also can add properties, methods, and events to behaviors. Here's an example. In this case, the behavior enlarges text as you watch. You can use the behavior's text property to set the text to enlarge, its enlargements property to determine the number of times to enlarge the text, and its enlarge method to enlarge the text. When the text has been enlarged enlargements times, the behavior will make its event, which I'll call oncomplete , occur; and we can handle that event in the main web page.

You can see this behavior at work in the main web page in Figure 17.10, where it's enlarging the text Hello! 20 times, making that text appear to grow as you watch. When the enlargements are done, we can handle the oncomplete event, displaying the text How's that? in the main web page, as you see in Figure 17.11.

Figure 17.10. Using a behavior with properties.

graphics/17fig10.gif

Figure 17.11. Using a behavior's event.

graphics/17fig11.gif

Here's the main web page. Note that I'm connecting this new behavior, behavior.htc, to the style class class1 , and then connecting that class to a <DIV> element. Now we can use the properties, methods, and events of the behavior as properties, methods, and events of the <DIV> element. Here's what the main web page looks like. Note that I'm using the JavaScript setInterval function to repeatedly call the behavior's enlarge method to keep enlarging the text:

(Listing 17-12.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Creating Internet Explorer Behaviors          </TITLE>  <STYLE>   .class1 {font-size:12pt; behavior:url(behavior.htc);}   </STYLE>  <SCRIPT Language="JavaScript">              <!--  var timerID1   var object1   function doBehavior()   {   object1 = document.all("div1")   object1.text = document.all("text1").value   object1.enlargements = document.all("text2").value   timerID1 = setInterval("object1.enlarge()", 100)   }   function finished()   {   timerID1 = null   document.all("div2").innerText = "How's that?"   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Creating Internet Explorer Behaviors          </H1>  Text to enlarge:   <INPUT TYPE="TEXT" ID="text1" VALUE="Hello!">   <BR>   Number of enlargements:   <INPUT TYPE="TEXT" ID="text2" VALUE="20" SIZE=4>   <BR>   <DIV CLASS="class1" ID="div1" ONCOMPLETE="finished()"></DIV>   <BR>   <DIV ID="div2"></DIV>   <BR>   <INPUT TYPE="BUTTON" VALUE="Enlarge Text" ONCLICK="doBehavior()">  </BODY>  </HTML>

You can see how we use the behavior here, how we can handle its oncom plete event with the ONCOMPLETE attribute, how to call its enlarge method, and how to use its properties.

All that's left is to create the behavior, behavior.htc, itself, and support its properties, methods, and events. I can create the text and enlargements properties with the behavior <PUBLIC:PROPERTY> element, naming the property with the NAME attribute. When a property value is set, the function specified by the PUT attribute is called and the new value passed to that function; when its value is read, the function specified by the GET attribute is called and you return the value of the property. Here's how I implement the text and enlargements properties in behavior.htc, storing the values for those properties in JavaScript variables :

 <PUBLIC:COMPONENT>  <PUBLIC:PROPERTY NAME="text" PUT="setText"/>   <PUBLIC:PROPERTY NAME="enlargements" PUT="setEnlargements"/>  <SCRIPT LANGUAGE="JavaScript">          <!--  var loopIndex, loopMax, text   function setText(value)   {   text = value   }   function setEnlargements(value)   {   loopIndex = 1   loopMax = value   }  .          .          .          //-->      </SCRIPT>  </PUBLIC:COMPONENT>

Each time the enlarge method is called, we want to enlarge the text, so I implement the enlarge method with the behavior <PUBLIC:METHOD> element this way:

 <PUBLIC:COMPONENT>      <PUBLIC:PROPERTY NAME="text" PUT="setText"/>      <PUBLIC:PROPERTY NAME="enlargements" PUT="setEnlargements"/>  <PUBLIC:METHOD NAME="enlarge"/>  <SCRIPT LANGUAGE="JavaScript">          <!--         var loopIndex, loopMax, text          function setText(value)          {              text = value          }          function setEnlargements(value)          {              loopIndex = 1              loopMax = value          }  function enlarge()   {   if (loopIndex < loopMax)   {   loopIndex++   element.innerHTML = text   element.style.fontSize = 5 * loopIndex   }   else {   raiseEvent()   }   }  .          .          .          //-->      </SCRIPT>  </PUBLIC:COMPONENT>

Note that in the code for this method, we check whether the number of enlargements we're supposed to execute have already been performed; if so, we call the raiseEvent function. That function makes causes the behavior's event, oncomplete , to occur, which we make happen with the event's fireEvent method:

(behavior.htc on the web site)

 <PUBLIC:COMPONENT>      <PUBLIC:PROPERTY NAME="text" PUT="setText"/>      <PUBLIC:PROPERTY NAME="enlargements" PUT="setEnlargements"/>      <PUBLIC:METHOD NAME="enlarge"/>  <PUBLIC:EVENT NAME="oncomplete" ID="completeEvent"/>  <SCRIPT LANGUAGE="JavaScript">          <!--         var loopIndex, loopMax, text          function setText(value)          {              text = value          }          function setEnlargements(value)          {              loopIndex = 1              loopMax = value          }          function enlarge()          {              if (loopIndex < loopMax)              {                  loopIndex++                  element.innerHTML = text                  element.style.fontSize = 5 * loopIndex              }              else {                 raiseEvent()              }          }  function raiseEvent()   {   var event1 = createEventObject()   completeEvent.fire(event1)   }  //-->      </SCRIPT>  </PUBLIC:COMPONENT>

That's all we need. Now we've added properties, methods, and events to a behavior and put them to work in a web page. Take a look at this example in some detail if you want to work with behaviors; it's not difficult to figure out.

Using Default Behaviors

A number of default behaviors come with the Internet Explorer, and you can use them with a little JavaScript coding. To use a default behavior, you specify a URL of the form #default# behaviorName in a style class, where behaviorName is the name of the default behavior you want to use. You can find how to use the various default behaviors at http://msdn.microsoft.com/workshop/author/behaviors/reference/reference.asp. Here are those behaviors in overview:

anchor . Lets the browser navigate to a folder.
anim . Creates a Microsoft Direct Animation viewer in an HTML document.
animation . Creates a timed animation element in an HTML document.
audio . Creates a timed audio element in an HTML document.
clientCaps . Holds information about the capabilities supported by the current version of the Microsoft Internet Explorer.
download . Downloads a file and calls a given function when the download has finished.
event . Creates a custom event.
excl . Creates a timed object that allows a child element to play at any given time.
homePage . Holds information about a user 's home page.
httpFolder . Holds scripting features that enable browser navigation.
img . Creates a timed image element.
media . Creates a generic, timed media element in an HTML document.
par . Creates a timeline container for independently timed elements.
saveFavorite . Lets an object store data in the Favorites folder.
saveHistory . Lets an object save some data in the browser history.
saveSnapshot . Lets the object to save data when a web page is saved.
seq . Creates a new timeline container in an HTML document that will be used for sequentially timed elements.
time . Creates an active timeline for a single HTML element.
time2 . Creates an active timeline for a single HTML element or a group of elements.
userData . Lets the object save data.
Video . Creates a timed video element in an HTML document.

Here's an example. In this case, I'll use the userData behavior to store and retrieve temporary text data. The data I store with this behavior is stored in the browser's own temporary storage, because that's exactly what this behavior doesgive us access to that temporary storage. In this case, I'll create a style class named class1 that uses this behavior:

 <HTML>      <HEAD>          <TITLE>              Using Default Behaviors          </TITLE>  <STYLE>   .class1 {behavior:url(#default#USERDATA);}   </STYLE>  .          .          .

Then I connect this style class, class1 , to a text field:

 <INPUT CLASS="class1" TYPE="TEXT" ID="text1" VALUE="Hello!">

Now I can add two buttons to save the data in temporary storage and retrieve it, connecting these buttons to two JavaScript methods, setData and getData :

 <INPUT TYPE="BUTTON" VALUE="Save the text" ONCLICK="setData()">  <BR>  <INPUT TYPE="BUTTON" VALUE="Get the text" ONCLICK="getData()">

In the setData function, I store the text in the text field in the browser's temporary data store, using methods of the userData behavior, and then delete the text in the text field:

 function setData()  {      document.all("text1").setAttribute("savedText", document.all("text1").value)      document.all("text1").save("savedData")      document.all("text1").value = ""  }

In the getData function, I retrieve that text and display it in the text field like this:

(Listing 17-13.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Using Default Behaviors          </TITLE>          <STYLE>              .class1 {behavior:url(#default#USERDATA);}          </STYLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function getData()   {   document.all("text1").load("savedData")   document.all("text1").value = document.all("text1").getAttribute(  "savedText")   }  function setData()              {                  document.all("text1").setAttribute("savedText", document.all("text1").  value)                  document.all("text1").save("savedData")                  document.all("text1").value = ""              }              //-->          </SCRIPT>      </HEAD>      <BODY>           <H1>              Using Default Behaviors          </H1>          <INPUT CLASS="class1" TYPE="TEXT" ID="text1" VALUE="Hello!">          <BR>          <INPUT TYPE="BUTTON" VALUE="Save the text" ONCLICK="setData()">          <BR>          <INPUT TYPE="BUTTON" VALUE="Get the text" ONCLICK="getData()">      </BODY>  </HTML>

You can see the results in Figure 17.12, where the text entered into the text field is stored when the user clicks the Save the text button, and then the text field is blanked. The text is read from the browser's temporary data store and restored to the text field when the user clicks the Get the text button. That's it; now we're using a default behavior.

Figure 17.12. Using a default behavior.

graphics/17fig12.gif

That's it for this chapter. Here we've added a great deal to our JavaScript arsenal, including dragging and dropping, data binding, and behaviors. In the next chapter, we'll take a look at the JavaScript Date, Time, and String objects.