 | ||
|
| ||
| ||
|
| ||
Nancy Winnick Cluts
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.
Internet Explorer 5 contains new features, bug fixes, and performance enhancements that will make your life, as a content author and as a user, easier. Some of these new features include:
In this article, we will talk about what these particular new features and enhancements mean for your Web development.
The big new feature for Internet Explorer 5 is DHTML Behaviors (see separate feature story). DHTML Behaviors allow DHTML functionality to be extended via hosted components (componentization). Through DHTML Behaviors, HTML can be extended either by applying the component (which implements the desired behavior) to existing HTML tags, or by creating new tags (the functionality of the new tags is implemented by the component).
Componentization makes it easier and faster to create Web pages. Easier, because you can take advantage of a set of functions (packaged up into a component) that you have written within several different Web pages. Faster, because you can use DHTML to create your components, rather than having to write a control.
Although ActiveX controls, Java applets, and ActiveX script engines all provide some level of extensibility via componentization, DHTML Behaviors allow a far deeper level of integration of the component with the document in terms of document-tree storage, object-model functionality, and rendering. In simple terms, DHTML Behaviors allow you to apply a behavior to any tag, via a proposed new CSS behavior attribute, and to expose new methods, properties, and events.
Just as style sheets allow you to separate the style from the content of the document, DHTML Behaviors allow you to separate the actual functionality (behavior) of elements on Web pages from the document. The functionality that DHTML Behaviors provide includes:
With DHTML Behaviors, you can abstract the behavior of the tag from the actual content. This allows content authors to worry less about the behavior or look of the content, and developers to alter the behavior without worrying about the content. You can also remove script from the HTML page (a welcome thought for a content author). Instead, the script can be encapsulated into a scriptlet and the functionality referred to via familiar HTML syntax.
For the developer, it couldn't be easier: It's just script and HTML. The example below demonstrates how you can create a scriptlet, mask.sct, that defines the behavior of a tag to display three different fields: Date, Money, and Time.
<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>
But DHTML Behaviors aren't just for providing a behavior to a specific tag. With this technology, you can add completely new functionality to HTML. For example, let's say that you need support for vector graphics in order to draw shapes easily. Through DHTML Behaviors, it is possible to create a component that provides this functionality and still allows the Web-page author the ease of using a tag (i.e., <DRAW:CIRCLE>) as part of the document.
Developers are accustomed to writing some code that calculates a value and using that end result. With Internet Explorer 5, you can set the properties of items based on some calculation or expression. Now, I know what you are going to say. You are going to tell me that you can already do some of this stuff in Internet Explorer 4.0 by using a control or applet. That's true, but this method is easier and, since it's built into the technology, if anything changes in the standard that handles this, the rendering engine will take care of it.
The example below demonstrates how you can set the position of an item based on the left side of the client area of the display.
Foo.style.setExpression("posLeft",
"document.body.clientLeft + 10",
"javascript", "");
Another method you can use to set expression-based position uses the function syntax below. For C or C++ developers, this syntax provides a much clearer idea of what is actually happening.
<div id=Blue style="left:function
(document.body.clientLeft + 10);
top: function
(document.body.clientTop + 10);
background: blue">
<center>Top Left</center>
</div>
DHTML now supports full application-level drag-and-drop events. This means that you can drag between frames and drop, as well as to and from applications. How? This is implemented via support of the Win32-based IDropTarget and IDragSource COM interfaces. Since these basic interfaces are supported, you can drag to any container that supports the class of object you are going to drop. For example, if you drag text from a Web page, you can drop it on any drop target that accepts text: Microsoft Word, Notepad, even the desktop.
One big pain in the neck for users on the Web is going to a Web page, modifying it the way they want it, leaving, then returning to the site to find it's not the same: the trees are collapsed, forms filled-out have disappeared, and the page must be reset. Internet Explorer 5 takes some of this pain away by providing Web-page persistence via a scripting tag.
Internet Explorer 5 provides four types of persistence:
In three of the above persistence types, I mention that the data storage is based on XML. This is important, because XML provides the ability to save data hierarchically (i.e., in a tree). So you can now save the history of links visited, for example, with correct hierarchical context.
One area that seems to garner lots of questions is how to detect information on the client machine (i.e., browser version or platform). Many of these properties are exposed in Internet Explorer 4.0 -- but in Internet Explorer 5, many new properties are exposed via CLIENTCAPS such as those listed below. Refer to the documentation for the use of this feature.
Internet Explorer 5 enhances table support, giving you the ability to create fixed-layout tables and collapsible borders. A fixed-layout table is a table in which the size of all of the cells is set identically. If you have a table in HTML, the engine must go through the table and query each cell for its minimum and maximum sizes, then go back and set the size of each cell. Specifying a fixed-layout table eliminates that first pass through the table. A fixed table layout also improves rendering speed for many documents because, once you know the size of the first row, the data can be rendered incrementally. Nearly all tables can benefit from a fixed-table layout. In order to have a fixed-layout table, you simply specify the table-layout:fixed property for the table.
Another table enhancement available in Internet Explorer 5 is the ability for authors to specify grid-style borders. This is also referred to as collapsible borders. HTML defaults table cells to have a border around them. Internet Explorer 5 supports a CSS-2 attribute (border:collapse for cells and rows) for setting the border style.
If you are running Internet Explorer 5, click on the link below for a demonstration of fixed-layout tables.
As a developer, I know how frustrating it can be to learn new technologies. Lately, many of these technologies have their own way of communicating (known as the object model). So, not only do you have to learn the technology, but you must also bear in mind that the object models may differ. One reason is that new and innovative features are being exposed to the developer. In Internet Explorer 5, efforts to provide a consistent and complete technology have lead to some changes. These new features include:
The Internet Explorer team has been working very hard to ensure that the browser supports users with special needs. One example of work in this area is text tracking. In order for readers to effectively read Web pages to seeing-impaired users, the readers must be able to follow each word in a phrase, word -by word. A problem occurs when the reader comes across white space (and pauses) at inappropriate times. An answer to this problem is the change to the bounding rectangle for each word. The text rectangle is now bound without the addition of white space. Thus, when moving the mouse over the text, the rectangle moves from word to word, just as you read word by word (rather than letter -by letter).
Developers would like to be able to use DHTML and scripting in their non-Web applications -- without having the browser user-interface on the application. Developers want to provide their own user interface, just as any Win32 application does. With Internet Explorer 5, you can now create a Windows application and take advantage of DHTML and scripting, then rename the resulting file with the .hta (instead of the default .htm) extension. The operating system makes a file association for .hta files, so that it knows not to start a browser instance, but rather to use the HTA application to run your file.
As you can see, there's a lot more you can do with DHTML in Internet Explorer 5. DHTML Behaviors make it easier to create and maintain your sites and, via its componentization, make it easier on all of the people involved in your Web development process. Content authors can spend their time worrying about the content they have to write. Designers can determine what interactive effects can be added to the content without having to worry about scripting. Engineers can concentrate on implementation. You can use DHTML technology as a powerful development tool, allowing you to create applications that are stable, useful, and reliable, yet sport the user interface of your choosing. This means you can take advantage of your Win32 development to create Web-applications that run seamlessly within the Windows environment. The end user won't be able to tell what underlying technology has created the application. The user only sees an application that works well, both alone and when interacting on the Internet. All this, and you don't even have to sacrifice performance.
Be real nice to Nancy Cluts, developer-technology writer extraordinaire, and maybe she'll take you for a ride in that gorgeous red convertible.
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