IE 5.0

IE 5.0: Evolutionary Behaviours

Another new browser?

Microsoft has recently released the first developer preview of its latest browser, and you can now download it from their web developers site, SiteBuilder (http://www.microsoft.com/sitebuilder/). The first 5.0 browser to appear, Internet Explorer 5.0 is designed as an application platform as well as a consumer web browser, and is likely to become a core part of the DNA Internet applications architecture. Don’t expect a fast release schedule, Microsoft have indicated that the likely release date will be the same as Office 2000 - and that won’t be “until it’s ready”…

As part of the release of the developer preview of IE 5.0 Microsoft have redesigned their SiteBuilder Workshop - using the technologies developed for the Windows 98 update site - and have taken the opportunity to merge the Internet Explorer SDK with the Workshop. The SiteBuilder workshop is an excellent example of a good web-based developers resource, full of informative articles, tools and sample code. You’ll need to be a member of the SiteBuilder Network to download some of the tools and code samples (and IE 5.0 itself!). There are several levels of SiteBuilder membership, from the limited privilege guest membership to the paid for level 3 subscription (the Microsoft technology-based web developers equivalent of a full MSDN subscription) that would suit a high powered web development team. The intermediate levels are free, but do require you to implement some Microsoft technologies on at least one of your sites, and in some cases display a Microsoft Internet Explorer logo and download link.

Internet Explorer 5.0 is a hefty 18MB download for the core components, with additional components downloaded as required. The user interface is virtually identical to IE 4.0’s, though the error messages are a little more explanatory - though if your site generates its own HTML error pages instead of the default 404 and 500 error messages that are the bane of the web, they’ll be displayed instead. You can also link proxy settings with specific network settings, so you don’t have to keep reconfiguring the browser from ISP to ISP.

So is it worth developing web applications for and with Internet Explorer 5.0? It’s certainly not the radical development that Internet Explorer 4.0 was, with the introduction of DHTML. However, what IE 5.0 offers is an extension of IE 4.0, with an object model based on the World Wide Web Consortium’s HTML 4.0 specification. However Microsoft have added new features - you’ll find a complete list at http://www.microsoft.com/ie/ie5/overview.htm -, and these include:

DHTML Behaviours: attaching scriptlets to HTML and XML tags through an extension to the CSS style sheet definition.
Ease of use/development enhancements: you can now use properties as constants in calculations
Drag and drop support: DHTML now supports application level drag and drop, so you can drag text from frame to frame - and to and from any drag and drop aware windows application
Enhancements to tables: fixed layout tables for faster loading
Object model additions: new objects, and improved methods for existing objects
HTML application support: save your DHTML pages as .hta, and Windows won’t launch a browser on loading them, allowing you to build the scripts into your Windows applications.

Making your HTML behave

Probably the most important new feature are DHTML behaviours, as these turn the web browser into a component -based system, that allows you to create your own extensions to DHTML. You can either integrate your new components with existing HTML and DHTML tags, or you can create new tags of your own. DHTNL Behaviours aren’t ActiveX controls - they’re DHTML scripts, and so aren’t necessarily browser dependent. As DHTML is part of the document object model, it’s possible to create DHTML behaviours that are integrated with your web pages at a very low level - even down to that of the HTML rendering engine itself. They also mean that web page design and web application development can occur in parallel, rather than the convoluted process building a web application front end requires today.

In order to implement DHTML behaviours, Microsoft have proposed an extension to the CSS style sheets model used to provide document independent formatting information. This new “behavior” attribute allows you to apply a behaviour to any HTML tag, and to give it new DHTML methods, properties and events. This brings true object oriented programming into the browser, rather than the object-based scripting of IE 4.0’s DHTML and JavaScript. DHTML behaviours are an extension of the scriptlet technologies introduced with IE 4.0, and move scripting away from the page into external scripting objects - so your form content checking scripts can be removed from the page into external scriptlets, attached directly to tag behaviours.

By using scriptlets to implement behaviours, web developers are now able to move some of their business rules from the server into the client - in HTML rather than Java. As loading problems can occur on busy web servers, the more functionality that can be passed down to the browser, the better. The object-oriented nature of scriptlet development, and the linking of behaviours to HTML tags means that you’ll be able to reuse scriptlets throughout a web site, and one change will affect all the scriptlets you’ve deployed.

It’s not difficult to add DHTML behaviours to a page. In this example taken from Microsoft’s online documentation a scriptlet, MASK.SCT, is being used to provide specific input masks to an HTML form.

<html>
<head>
<style>
.mask {behavior: url(mask.sct);}
</style>
</head>
<body style="font-family: verdana">
<h2>Mask Input Fields</h2>
<br>
date
<input type=text class=mask maskType=date><br>
money
<input type=text class=mask maskType=money><br>
time
<input type=text class=mask maskType=time><br>
</body>

As well as adding new behaviours to tags, DHTML behaviours are also able to allow you to create new tags, so that you can give your design team the tools to provide complex behaviours from simple tags - for example, a <MOVE:UP> tag that embeds a DHTML animation.

Any new tags you create aren’t HTML tags - they’re actually XML tags. Microsoft have made the HTML rendering engine in IE 5.0 also an XML rendering engine. Creating a new XML tag for use in IE5.0 is very easy, all you need to do is define the XML namespace in the head of your HTML document, using the new <XML:NAMESPACE> tag.

So if you wanted to create a MOVE tag, all you’d need to include in your HTML document is:

Once you’ve done that, the MOVE namespace is ready for use, and you can start using tags based on this in your document’s body. Once you’ve defined an XML namespace you can then add CSS styles to the tag, and so you can now use DHTML scriptlets as behaviours attached your XML namespace. Using a DHTML animation scriptlet as a behaviour for the XML namespace we defined earlier, we can now apply our new <MOVE:UP> tag to an HTML document.

<HEAD>
<XML:NAMESPACE NS=http://this_page" PREFIX="MOVE">
<STYLE>
MOVE\:UP{behavior:url{up.sct}}
</STYLE>
</HEAD>
<BODY>
<MOVE:UP>
And now we go up in the world!
</MOVE:UP>

Instead of having a complex animation script linked to a specific object on a page, the XML tag with its DHTML behaviour can be used anywhere in a page, and if you reuse the XML namespace on different pages, anywhere in your site. You know also only have one piece of code to apply your change control procedures to - and site designers can’t inadvertently break your DHTML scripts, as they’re no longer part of the page. You can also make your behaviours much more complex than the simple example here, so that different attributes can be give to an XML tag - for example, to control the speed or repetition rate of the DHTML animation.

You’ll need to be aware of one limitation of using scriptlets and behaviours in a page: they need to be loaded separately from the HTML, and so may not be ready when the page appears to have loaded. This isn’t as big a problem as it might be, as the Internet Explorer 5.0 event model includes two notification events, contentChange and documentReady - as well as the always handy onLoad. You can use these to pass information on document loading to any DHTML behaviour.

contentChange is used to indicate that an element has been parsed by the HTML rendering engine, and is also fired if the element’s content changes at any time. documentReady is fired when the document has been downloaded and parsed - which is different from onLoad, as onLoad is fired when any associated data and external objects are loaded and displayed - which is why its at its most effective when scripting ActiveX controls. As scriptlets are executed as soon as they’re instantiated by the document, you may need to wait for a contentChange event before running any inline scripts that rely on attributes in the calling HTL document - as they may not have been set yet.

Structuring a DHTML scriptlet

There’s not much difference between writing a DHTML scriptlet and writing a DHTML action in a web page. All the same techniques and languages are at your disposal. Instead of putting your script on a page, you save it as a .SCT file, that can be called from any document. You can then use your scriptlet to add new attributes to existing HTML elements, which can then be used by an HTML page designer. You can also create custom DHTML events, and use the scriptlet to work with the IE 5.0 document object model - allowing your scriptlets and behaviours to be driven by external DHTML events.

DHTML scriptlets owe a lot to Microsoft’s server scriptlets, which allow you to write JavaScript and VBScript scripts that can then be used as COM objects by the rest of the Windows programming environment. A DHTML scriptlet is an object in its own right, and contains its own methods properties and events, which must be declared at the start of the scriptlet’s code.

The structure of a scriptlet is fairly straight forward, and the skeleton shown below shows how to create a DHTML behaviour scriptlet:

This scriptlet outline has a method, a property and fires a single event. You use the IMPLEMENTS tag to expose these to the HTML document hosting the scriptlet. The AUTOMATION handler exposes methods and properties, and BEHAVIOR exposes events. You can then write the rest of the script using standard HTML 4.0 and DHTML scripting techniques, and the Internet Explorer 5.0 document object model.

So what does it all mean then?

Looking at Internet Explorer 5.0 and the associated details in the SiteBuilder Workshop web site, it’s fairly clear what Microsoft are attempting to do with the release of the developer preview and, specifically, DHTML behaviours. Microsoft appear to have two aims: the popularisation of XML, and the end of the Java applet.

As the next generation of web technologies, like the SMIL (Synchronised Multimedia Integration Language) time-dependent tags start to appear, extensible technologies like XML will become more and more important. DHTML behaviours allow XML tags to become part of the HTML document object model, where they will be able to interact with a wide range of browser technologies - making the lives of web applications developers and web page designers easier.

Java applets have had one major advantage over HTML forms as an input technology: they allow you to add business rules and logic to a web applications user interface. However, applets have been notoriously slow to download, and are difficult to link into the HTML content of a page. By providing a scripting environment that allows developers to encapsulate business rules in scriptlets, and then to attach them to HTML attributes, DHTML behaviours remove any need for Java applets.

Internet Explorer 5.0 is the new face of Microsoft’s web application development environment, and it’s definitely an extremely powerful tool. But will it become widely accepted? Already there’s a tail-off in downloads of the Internet Explorer 4.0 and Netscape Communicator 4.0, and another big download won’t appeal to the average web user - which may stop developers from rolling out XML and behaviours driven applications.

Summary

Internet Explorer 5.0 adds new scripting features to the DHTML document object model.
The key feature is DHTML behaviours, which add new functions to HTML tags.
Behaviours mix CSS style sheets and scriptlets.
Internet Explorer 5.0 also adds support for XML tags inside HTML documents.
Mixing behaviours and XML means that you can define your own tags and their actions.