 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Microsoft Corporation
Updated March 18, 1999
The following article was originally published in Site Builder Magazine (now known as MSDN Online Voices).
Editor's Note: Behaviors, like many of the new authoring features in Internet Explorer 5, are proposed extensions to already approved World Wide Web Consortium (W3C) standards, such as HTML 4.0 and CSS2.
The capabilities of the Web certainly have changed in just the past two years. Not too long ago, the most interactive a Web page could get was an animated GIF (and that was progress). The Web was mostly about documents and pages. But applications on the Web? A spreadsheet? An intranet application for your corporate retirement fund? A sales-reporting tool? Those were just dreams.
With the introduction of client-side scripting and more advanced servers, building applications on the Web started to become less of a dream and more of a reality. However, these applications tended to be heavily reliant on the server for any real interactivity, and still felt significantly different than typical desktop applications, pre-Web.
Case in point: Microsoft's travel planning site, Expedia 
, is a great example of a Web application. It allows users to purchase airline tickets, hotel reservations, and other travel services online, quickly and easily. But on the flight-planning wizard page, a feature that allows the user to pick travel dates from a calendar requires the browser to navigate to a separate calendar page. After the user selects a date, the page is resubmitted to the server, with the date encoded in the submit string. A brand new page is then served back to the user, identical to the original page except that the desired date is now inserted. So the user has downloaded essentially the same page twice. That's an awful lot of work.
Why was this? What did the Web lack? Well, there really was no way to modify a page without going back to the server to get a whole new page. Want a word to be blue? New page. Want to change the time on a page? New page. Want to show some new content? New page.
Fortunately, Internet Explorer 4.0 fixed that by delivering Dynamic HTML. DHTML was essentially the application-programming interface for HTML. The page was no longer static. Want that word blue? One line of script. Want to change the time on a page? Simple. Want to show some new content? No problem. The key is that this new interactivity could be achieved quickly and easily on the client side, without going back to the server for a brand new page.
Real applications, as fast and as fully featured as your users were used to having on the desktop, could be built using HTML and the Web.
Problems solved, right? Why not send the Internet Explorer team on vacation? Well, it turns out that building a platform is different than building a browser. Building Internet Explorer 4.0 was a valuable experience. Listening to our customers (that's you) about what was good, and what needed improvement was a valuable experience. Now Internet Explorer 5 is here, and it's the second-generation DHTML browser. We've learned some lessons, and hopefully you and your customers will like the changes.
To build an application using any platform, that platform must be industrial strength and scalable. One of the key messages the Internet Explorer team got from developers who use DHTML was that it needed to be faster and more stable. You told us that for DHTML to be an effective way to produce applications, it needs to be "application-fast, not just browser-fast". A number of changes in Internet Explorer 5 deliver performance, increased stability, and better predictability.
CSS Positioning is an effective way for developers to gain more control over the position and layout of elements on their pages. Some positioning limitations in Internet Explorer 4.0 have been addressed. For example, every HTML element can now be positioned either absolutely or relatively. And elements can now change from positioned to not-positioned, or vice-versa, at any time.
Internet Explorer 4.0 delivered industry-leading support 
for Cascading Style Sheets (CSS), level 1. But CSS1 can be a bit of a challenge. For instance, developers wanting to increase the font size of text on the page found that, because of CSS cascading rules, the actual font size at which an element displays may be controlled by its parent element. Furthermore, when an element's font size is examined, only the font size directly set on the element shows, not the actual display size. To make this task easier, Internet Explorer 5 introduces the currentStyle object (element.currentStyle), which exposes the current value each element is using for all of its CSS properties.
Performance is improved in two ways in Internet Explorer 5. First, it can simply perform tasks faster, such as when manipulating large documents with DHTML and with data binding. (We are making browsing the Web faster, too.) Also, we can help Web authors specify more hints about their page, which makes processing them easier and in many cases amazingly faster.
HTML tables are a good example of an intrinsically slow operation. They perform two functions: layout and grid services. Authors who want to use tables for layout operations have depended on having the tables scale to fit the content. This is slow. However, page authors often know how big they want their columns and rows, and can determine that in advance. This situation calls for tables that are more grid-like, and all we need is a little bit of information.
The mechanism Internet Explorer 5 uses to solve that problem is Fixed Layout Tables. Fixed Layout Tables differ from regular tables in that the author specifies the column sizes, while the content size inside the table cells does not impact the table layout. In many cases, simply using Fixed Layout Tables will increase performance by as much as two orders of magnitude (from 100 seconds to 1). The great news is that using them requires only one new CSS property on the table (table-layout: fixed). In addition, Fixed Layout Tables can be progressively rendered. So the browser will show each table row as it downloads. With regular tables, the entire table must be loaded before it shows. Not only will pages load faster, the first page of data will also show up blindingly fast.
Another concern we have addressed is the HTTP-Expires header on both pages and images. Internet Explorer 5 no longer checks the network first when a request for an object can be satisfied from the cache and the object has not yet expired. So network traffic will be greatly reduced for pages that use a large number of images that tend not to go stale. Previously, this directive was "second-guessed," and all objects checked for staleness.
As Internet Explorer 5 grew faster and more stable than previous browsers, it became more powerful as well. The HTML required for building documents is different from the HTML required to build serious applications. Here are some of the features in Internet Explorer 5 to make your applications shine.
CSS is an extremely powerful way to specify the look and feel of HTML documents. Until now, to express more complex behaviors required some sort of client-side scripting. For example, if an author wanted the font size of the page to be dependent on the screen size, the onload and onresize events would have to be handled, and in those event-handlers a CSS rule could be reset to change the font size. No longer. Here is all you have to do:
<body style="font-size: function(this.clientWidth/20);">
This means that the font size applied to this document will be equal to the width of the document divided by 20 (about 32 pixels high at 640x480 resolution). That's all you have to do. As the document changes size, an intelligent recalculation engine (similar to technology used in spreadsheet applications such as Microsoft Excel) will determine a dependency, and reset the property.
This feature is called Dynamic Properties. With Dynamic Properties, any property can be set as a function of any other property. This has a great effect on pages using CSS Positioning. It's now trivial to set up very complex screen layouts that are simple to author, don't require a line of script, and respond to screen changes dynamically. Pages that used to require hundreds of lines of script code can now be expressed without any script.
Another CSS feature added for Internet Explorer 5 is the ability to add multiple CSS classes to an element. The class property on the element can now take a list of CSS classes to apply. For example, this makes it very easy to add and remove effects to an element as the mouse moves over, and then off, the element.
Internet Explorer 4.0 introduced a rich event model in which every element on the page could receive full mouse, keyboard and focus events. An addition to the event model in Internet Explorer 5 is full support for drag and drop. Your HTML pages can now source and sync full drag-and-drop to the desktop or any other application. Full control over cursors, drag initialization and clipboard support has been added.
One of the most common features utilizing DHTML was an expanding list. The MSDN Online Web Workshop uses this for its navigation bar. One problem with such a list was that every time you went back to the list, it was in its default, closed-up state. Wouldn't it be nice if the list could "remember" its state? In Internet Explorer 5, it can: A page can easily capture state in a local store that is protected from unauthorized cross-domain access, and is not encumbered with the 4-K limit of cookies. Additionally, properties can be stored in name/value-pair combinations, so archival and retrieval is simplified. The author controls the storage and retrieval of this information. This state can be related to a favorite as well, so you could have a single page stored as a favorite multiple times, each to a different state. This technology is also used internally, to make favorites accurately capture frameset state. So Internet Explorer 5 lets users actually keep favorites that make sense at their favorite frameset sites.
XML is supported in two ways in Internet Explorer 5.
XML can be embedded in the document as data or meta-data. In this form, the XML is contained within an <XML> tag or a <script language=XML> tag. The full XML document object model (DOM) is then exposed on that element, but the elements inside the XML tag are not rendered on the page, and are not included in the HTML DOM. This is a natural extension of the XML support in Internet Explorer 4.0, which introduced the XML Data Source Object.
XML can be used as additional presentation markup. In this way, XML tags can be intermixed in the HTML document stream. CSS properties can be directly applied to these elements to control their display. For more information, please see the XML area of the Web Workshop.
While using XML for presentation in this way makes for an interesting demonstration, when this is combined with the new DHTML Behaviors functionality, the true power of XML as presentation markup is revealed.
DHTML Behaviors (see separate feature article) is a way to encapsulate new methods, properties, and events into a "behavior" that can be applied to an HTML or XML element.
An example of a feature that can be built with DHTML is a mask-entry field (an input that takes specific inputs, like money, date or time). To build the mask-entry field with Internet Explorer 4.0, the page author would put an <input> tag on the page, then add some script that monitors the focus and keyboard interaction with the control. For every page that needed the new mask entry type, the script would have to be hand crafted. DHTML Behaviors allow for all that script to be encapsulated into a behavior that can be quickly and easily used, even by someone who knows nothing about scripting.
As a sample, we built this mask-entry field example, and this is all that needs to be done to use it.
<input type=text style="behavior:url(mask.sct)" maskType="date">
The proposed new CSS property behavior would point to the script file containing the behavior. This behavior happens to define a new property -- maskType -- that tells the mask behavior what type of data to expect. The author of the behavior uses the same techniques used to create DHTML with Internet Explorer 4.0, but with some new twists.
Because CSS can be applied equally well to XML, it's possible for page authors to create custom tags with specialized behaviors that are simple to use, and specific to their domain. For example, a common effect used with Internet Explorer 4.0 was the "fly-in" -- as a page loaded, its contents flew in from offscreen. Doing this in Internet Explorer 4.0 required a significant knowledge of scripting. No longer.
<style>
MyTag/:flyin { behavior: url(fly.sct);}
</style>
<MyTag:flyin delay="1000">
This content will fly in one second
after the page loads
</MyTag:flyin>
The style block at the top defines a tag rule for the <MyTag:flyin> tag -- that it always gets the fly behavior. In this case the fly behavior could also have been added with an inline style.
<MyTag:flyin style="behavior:url(fly.sct)" delay="1000">
This delivers identical functionality with a slightly different syntax.
In addition to properties, the DHTML Behavior can also create new events and support new methods. For example, the fly behavior might have an onflyin event, and might expose a fly() or stopFly() methods. These would appear just as any other event or method on the document.
As shown above, using DHTML on Web pages just got much simpler. No longer do designers need to write script to leverage DHTML. Now designers can work in a terminology they are familiar with, and be completely isolated from the implementation.
Sites can build up common schema that represent their process and design. A news site can have designers use the <MY:NEWSTORY> tag, which has a <MY:TITLE> section and a <MY:CALLOUT> section. A bookseller can have a <BOOKS:REVIEW> tag. Individuals using these domain-specific tags no longer need to deal with the implementation details of DHTML - they need only be concerned with designing their site.
In addition, because the content, style and behavior of a site are all totally isolated, site design (or redesign) can now be done without touching every page. Change the definition of the <MY:NEWSTORY> tag, for instance, and all the pages that use that tag will automatically update.
DHTML Behaviors is the component model for DHTML, but done in such a way that developers and designers alike can use them.
Internet Explorer 3.0 was the first fully componentized browser. Microsoft made great use of it for internal applications, such as the MSN shell, as did other Web-browser development teams, such as America Online.
Internet Explorer 4.0 continued the policy of componentization, but brought HTML Editing into the component story as well. More than 20 partner companies use Internet Explorer 4.0's base editing functionality in shipping applications.
With Internet Explorer, reusing components is a "no-assembly-required" process. Its components are fully built, compiled and tested for your use in your industrial strength application.
Michael Wallent is Microsoft's lead program manager for DHTML, the author of MSDN Online Voices's monthly DHTML Dude column, and an exceedingly proud new papa.
Did you find this material useful? Gripes? Compliments? Suggestions for other articles? Write us!
© 1999 Microsoft Corporation. All rights reserved. Terms of use.
Back to top