SiteExperts.com Logo Home | Community | Developer's Paradise | Jobs
User Groups | Site Tools | Site Information | Search

Inside Technique : HTML Text Editor : Evolution of Scriptlets

DHTML Behaviors are next generation of the IE4 Scriptlet technology. In IE4, Scriptlets allowed you to encapsulate behavior and embed it on your web-page using the OBJECT element. While Scriptlets did allow reusable behaviors they were 1) essentially black boxes that could not easily interact with the rest of the page, 2) rendered within their own window and therefore were not transparent, and 3) even though the OBJECT tag is ignored by down-level browsers it was still sometimes difficult to design downlevel and cross-browser pages.

DHTML Behaviors solves these issues by allowing you to add behaviors to existing HTML or even your own custom markup. By interacting with the page and working with existing HTML, the behaviors do not need to live in their own rectangular object, but instead can coexist within the flow of the page. By associating behavior with existing elements, as we did with the html editor, you can design downlevel pages that automatically adapt and upgrade themselves for the latest browsers.

Also, by encapsulating and associating your code with the HTML, you are separated the behavior from the content of the document. This allows you to quickly update a behavior across your entire site without having to update every page. This is very similar to the benefits offered by linked style sheets which allow you to define your web-sites presentation in one place. In addition, you conserve bandwidth and improve your sites performance by reducing the amount of code in each page. By sharing behaviors across your pages, rather than including scripts in each page, the behavior is downloaded and cached on the client. This reduced the size of your content files and makes your site faster once the behavior is downloaded.

Scenario: DHTML Outlining

Outlining is a very common use DHTML. For example, imagine you want to have all nested lists automatically expand and contract. The Internet Explorer 4.0 approach is to create the list, knowing that downlevel browsers will display it properly. Next you would add the script and event handlers for wiring the nested list to the appropriate code, all the while making sure the script cannot interact with existing browsers.

In IE5, the first step of creating the list is the same. However, the tougher step of hooking up the code and hiding it from other browsers is eliminated. Instead, you use CSS to associate the list with the behavior. No script that may interact with existing browsers is ever added to your page. Assuming the outline.sct exists, below is the HTML necessary to associate with the page. 

<STYLE>
<!--
  UL {behavior: URL(outline.sct)}
-->
</STYLE>
<UL>
  <LI> Chapter 1
  <UL>
   <LI> Section 1
   <LI> Section 2
  </UL>
  ...
</UL>

Custom Elements

In addition to associating behaviors to existing elements, you can associate behaviors with your own custom elements. This is very useful for declaratively authoring your page. For example, on Microsoft's SiteBuilders, there is a example that creates a IE5:fly tag for animating elements onto the screen. Below is a fragment of the example: 

<XML:namespace prefix="IE5"/>
<style>
 @namespace IE5{
  fly {behavior: url(fly.sct); position: relative;} 
 }
</style>
</head>
<body>
<IE5:fly><P>Animate This</IE5:fly>

The custom element is also down-level friendly. All browsers currently ignore tags they don't recognize. Therefore, the IE5:fly begin and end tags are automatically ignored, and the text is displayed in-place. When using custom elements, you are actually extending the browser with an XML tag. IE5 builds many of its new features on top of XML. The .sct file describing the DHTML behavior is actually an XML document. Next, we introduce you to creating the .sct file.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.