Modularise Web design with DHTML behaviours

DHTML behaviours allow a surprising degree of modularity in site designs, simplifying updates and alterations. Here's how to use this strategy.

Fundamentally, DHTML behaviours represent the marriage of cascading style sheet (CSS) formatting and HTML Components functionality. You can assign DHTML behaviours to any element found on an HTML page, offering incredible flexibility in content presentation.

DHTML behaviours are the result of an evolutionary process of Web design under Internet Explorer. Previously, if you wanted to add functionality to IE, you had to use ActiveX controls, which raised a number of troubling security and architecture issues. Microsoft developed the HTML Components standard (still awaiting World Wide Web Consortium adoption) as an XML replacement for ActiveX controls.

Think of HTML Components as encapsulated DHTML—you can implement them as reusable, self-contained files. HTML Components are usually coded using VBScript or JScript. More advanced behaviour-driven applications can be scripted using Windows Script Components (WSC) or any ActiveX-enabled programming language.

The importance of HTML Components
The obvious advantage of using HTML Components is that your code becomes clean and modular. As with JavaScript source files (.js), you can access and reuse your HTML Components code across multiple Web pages. Under HTML Components, you can alter a component by modifying a single file rather than making in-line changes throughout your Web site. Components encourage the separation of content from functionality.

DHTML behaviours provide numerous advanced programming tools, including extended browser methods, properties, and scripting access across domains. Behaviour functionality can be attached and detached dynamically from HTML elements using script. Moreover, Microsoft has made HTML Components an integral part of its .NET Web services strategy.

Limitations of HTML Components
The obvious limitation of this technology is the fact that it's still proprietary, despite Microsoft's attempts to make it a standardised format. HTML Components are supported in IE 5.0 and above. Netscape doesn't support DHTML behaviours. Most browsers will ignore the CSS behaviour attributes, but references to behaviour events, methods, or properties will definitely cause scripting errors in non-IE software.

To successfully deploy DHTML behaviours on a Web site, a browser detection routine is required to ensure the user is running a compliant version of IE before launching the components. DHTML behaviours are thus best suited for heterogeneous computing environments such as intranets.

HTML Components rely on the Windows Scripting Host (WSH) because they are coded using JScript and VBScript. If the user has disabled WSH for security reasons, the components will not function. Moreover, HTML Components are subject to all security limitations internally imposed by IE.

DHTML behaviours won't work if your Web server doesn't parse all HTML elements on a Web page. You should use readyState variables such as oncontentready and ondocumentready to check for the availability of the component before trying to launch a behaviour. Otherwise, your users may receive ugly scripting errors. More information on the readyState variable is available in this article on MSDN.

How HTML Components work
You can implement DHTML behaviours by creating a style sheet (i.e., .css) linked to an HTML Component (i.e., .htc) for a specific DHTML effect. If you're accessing behaviours prebuilt into the IE browser, you don’t need an external .htc file. You simply need to add a couple of XML declarations in your code and define the behaviour from within your style declaration.

Here's an example of the generic structure of an HTML Component file:

<PUBLIC:COMPONENT>
<SCRIPT>
</SCRIPT>
</PUBLIC:COMPONENT>

Within the HTC syntax and framework, you can:

• Make available behaviour-specific properties, methods, and events.
• Use any element from the DHTML Object Model.
• Receive DHTML and HTC event notifications.

To get a better understanding of how they work, let's examine two types of behaviours you can deploy using IE: the attached behaviour and the element behaviour.

IE's default behaviours
Microsoft has added a variety of default behaviours in IE version 5.0 and above. These are referred to as default behaviours. You can view the entire listing of default behaviours on this MSDN reference page.

Let's take a closer look at the source code that powers the toolbar. First, you declare that the XML namespace for the HTML document is called IE.

<html XMLNS:IE>
<head>
<title>Attached behavior Example - HomePage Toolbar</title>
<style>
@media all {IE\:homePage {Behavior:url(#default#homepage)}}
</style>

The @media all declaration (found in the CSS2 specs) means that the following declaration is applicable to all devices. As shown below, you next specify from within the IE namespace that homePage refers to the default homePage behaviour.

<script language="JScript">
defaultHomePage="http://builder.com.com/";
function goCurrent(){
objHomePage.navigateHomePage();
event.returnValue=false;
}

Next, you create a variable assigning Builder.com’s home page URL as a default home page. The function goCurrent() accesses the navigateHomePage() method available from within the homePage behaviour. It essentially redirects the browser to the user’s current IE home page (even if it’s not Builder.com).

function setBuilder(){
if (objHomePage.isHomePage(defaultHomePage)){
alert("Thanks for choosing Builder.com!");
}else{
objHomePage.setHomePage(defaultHomePage);
}
event.returnValue=false;
}

The setBuilder() function contains the isHomePage() method from the homePage behaviour, which allows us to check whether the user set Builder.com as the home page. If the user has set the home page to Builder.com, he or she will receive an alert box saying thanks for making that choice. If the user has not set his or her home page to Builder.com, the setHomePage method, also from the homePage behaviour, is triggered and the user is prompted as to whether the current home page should be changed to Builder.com.

You should note an interesting quirk in regards to the isHomePage method: If you attempt to execute the function to check whether the user has selected Builder.com as his or her home page, and your code is not located on Builder.com’s server, the browser will return "false" even if the user has set Builder.com as the current home page. You can check for the existence of your own server domain name in the user’s home page preferences only by using the isHomePage method:

function goBuilder(){
location.href=defaultHomePage;
}

The goBuilder() function simply redirects the user’s browser to the default home page, which happens to be Builder.com.

</script>
</head>
<body>
<IE:homePage ID="objHomePage" />

The above command creates an object called objHomePage, which is associated with the homePage behaviour. This declaration allows us to access the behaviour’s properties and methods within the JScript code, as shown in Listing A.

Listing A

<map name="toolbar"><area shape="rect" coords="0,0,110,24" onMouseOver="window.status='Set Homepage to Builder.com';return true;" onMouseOut="window.status=' ';return true;" onClick="setBuilder()"> <area shape="rect" coords="111,0,219,24" onMouseOver="window.status='View the Current Homepage';return true;" onMouseOut="window.status=' ';return true;" onClick="goCurrent()"> <area shape="rect" coords="220,0,300,24" onMouseOver="window.status='Go to Builder.com';return true;" onMouseOut="window.status=' ';return true;" onClick="goBuilder()"> <area shape="default" nohref> </map> <img src="homepage-toolbar.gif" width="300" height="24" border="0" usemap="#toolbar" style="cursor:w-resize"> </body> </html>

Finally, you embed the toolbar image (i.e., homepage-toolbar.gif) using a client-side image map. Each link triggers one of the functions defined in the head of your HTML document.

C29330