Persistence, Drag and Drop, and More to Make Developers Smile

As of December 2011, this topic has been archived. As a result, it is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Internet Explorer, see Internet Explorer Developer Center.

Nancy Winnick Cluts
Microsoft Corporation

Updated March 18, 1999

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.

DHTML Behaviors

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:

  • Ability to access a component via the registry, host, or page
  • Access to the Document Object Model, allowing you to communicate with the document
  • Notifications to the component during the lifetime of the tag
  • Access to the drawing surface for a component to render
  • Inheritance from existing and new DHTML Behaviors for behavior and rendering
  • Stylesheet support for standard CSS attributes
  • Support for tag-specific CSS attributes
  • Security Zone knowledge to avoid instantiation in inappropriate places

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.

Making the Developer's Lot a Little Easier

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.

Example.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>

Drag and Drop

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.

Persistence

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:

  • Save Snapshot: Allows you to save Web documents exactly as they are displayed on the screen in HTML. As a result, you can display this exact Web page later on any browser. For example, let's say that your company provides the ability to submit expense reports via an intranet. It would be handy for you to be able to save this information for later use (either for printing or routing) without having to access databases or other controls to supply the data.
  • User Data Persistence: Allows an XML-based storage methodology for saving large amounts of user data. If you have a large amount of data that you want to save from some point in time (for example, all of your favorite sport's teams' scores for the last 10 years), you can use persistence rather than cookies.
  • Save History: Allows an XML-based storage methodology for saving history data.
  • Save Favorites: Allows an XML-based storage methodology for saving favorites data.

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.

Client Capabilities

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.

  • availHeight and availWidth - to get the height or width (in pixels) of the system's screen minus the taskbar
  • compareVersions - to compare two version numbers
  • connectionType - to get the type of connection (LAN, modem, or offline) currently in use
  • cookieEnabled - whether client-side cookies are enabled
  • javaEnabled - whether Java is enabled
  • platform - the platform on which the browser is running

Table Enhancements

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.

Object Model Additions

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 ability to change positioning on the fly. In the past, positioning was read-only, whereas with Internet Explorer 5, it is now read-write. You can change the position attributes from absolute to static, and back, on the fly, just as you can change the size, color, and other style attributes on the fly. This is also a way to provide drag-and-drop support on your Web pages.
  • The ability to determine the current style of any tag on the page. Currently, unless the specific style that you request has been set inline on the element, you cannot determine the style (Object.Style.Example will return NULL). With Internet Explorer 5, styles that are inherited or set via CSS can be determined via the currentStyle property. currentStyle will return the style attribute that was used to render the element regardless or where it came from.
  • If you are running Internet Explorer 5, click on the link below for a working demonstration of CSS style determination:
  • Access to the scrolling components, allowing you to respond easily to in-page navigation.
  • Enhanced typography support for vertical and bi-directional text. This means that you can see vertical and bi-directional text natively as text (on U.S. and European versions of Internet Explorer 5).

Accessibility

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 visually 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).

HTML Applications

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.

Summary

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.


 
Show: