 | ||
|
| ||
| ||
|
| ||
Michael Wallent
Lead Program Manager
Microsoft Corporation
November 3, 1997
The following article was originally published in the Site Builder Magazine (now known as MSDN Online Voices) "DHTML Dude" column.
One of the key issues facing Web authors is maintainability.
Sure, it's easy to throw together that first, cool Dynamic HTML (DHTML) page with some wizzy, transitioning, background-positioned, alpha-filtered, dynamic-content experience. But what happens when you need to deliver a site with new content, five times a week? Or even three times a day?
Designers have for some time recognized that one of the keys to maintainability is separating style from structure -- and Cascading Style Sheets (CSS) is a great tool to do just that. However, as Web pages become more and more complex (and more like applications), it's clear that they are more than style and structure. They also have behavior and content. For our purposes, we'll consider behavior to be all the script on the page. We'll define content as all of the useful information that you want to get across to people. It could be a news story, an image, or some stock information; it's the actual "meat" of a page.
Remember that technologies such as event bubbling, SCRIPT SRC=, and scriptlets are all ways to encapsulate the behavior of pages and allow for greater reuse. However, that's not our topic today.
Imagine how much easier it would be to maintain pages that have to update often if the actual page didn't have to change at all. If you had to change only the content you wanted to appear on the page? This is done quite often today using server-side technologies, in which a template .asp page looks in some type of database to get the content out, then sends the aggregate page to the client. However, a feature called "data binding" in Internet Explorer 4.0 lets you do the same thing, but purely on the client side. Data binding may sound like a feature born in the halls of an MIS department, but it can be applied to many interesting scenarios that have nothing to do with "Amortization."
Lets take a look at a simple page that uses data binding. To see the sample, you must be running Internet Explorer 4.0 
View simple data-binding sample page.
Here's the code:
<html>
<head>
<OBJECT ID="Content" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="TextQualifier" VALUE="%">
<PARAM NAME="FieldDelim" VALUE="|">
<PARAM NAME="DataURL" VALUE="demo.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>
<body style="font-family: verdana">
<span style="font-weight: bold; cursor: hand"
onclick="goForward()">Next Story</span>
<br>
<span id=Status></span><br>
<div id=TheStory datasrc=#Content datafld="Story"
dataformatas="HTML"></div>
<SCRIPT language=JScript>
var rs;
function goForward() {
if (rs.absolutePosition != rs.recordCount) {
rs.MoveNext();
} else {
rs.MoveFirst();
}
Status.innerHTML = rs.absolutePosition+" of "
+rs.recordCount;
}
function initialize() {
rs=Content.recordset;
Status.innerHTML = rs.absolutePosition+" of "
+rs.recordCount;
}
window.onload = initialize;
</SCRIPT>
</body>
</html>
This page has three important parts.
In this case, it's the Tabular Data Control (TDC) that ships with Internet Explorer 4.0. The TDC can read types of comma-separated (CSV) files (but you can supply your own separators; here, I used the % symbol).
<OBJECT ID="Content" WIDTH=0 HEIGHT=0 CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="TextQualifier" VALUE="%"> <PARAM NAME="FieldDelim" VALUE="|"> <PARAM NAME="DataURL" VALUE="demo.txt"> <PARAM NAME="UseHeader" VALUE="true"> </OBJECT>
The job of the Data Source Object is to collect the information, and make it available to Internet Explorer to display. The TDC is an example of a Data Source Object, but it is by no means the only one. A Data Source Object can be written as an ActiveX control or a Java applet. Information on building Data Source Objects can be found in COM Objects as Data Providers.
The bound element is where the data from the Data Source Object is placed into the HTML page.
<div id=TheStory datasrc=#Content datafld="Story" dataformatas="HTML"></div>
Bound elements need to specify three new attributes:
In this case, the script on the page controls which record in the record set is currently selected. You can use two types of data binding . A Data Source Object can provide a record set.
<SCRIPT language=JScript>
var rs;
function goForward() {
if (rs.absolutePosition != rs.recordCount) {
rs.MoveNext();
} else {
rs.MoveFirst();
}
Status.innerHTML = rs.absolutePosition+" of "
+rs.recordCount;
}
function initialize() {
rs=Content.recordset;
Status.innerHTML = rs.absolutePosition+" of "
+rs.recordCount;
}
window.onload = initialize;
</SCRIPT>
Once the record set is retrieved from the Data Source Object (with the rs.recordset property access) the current record selection can be incremented (MoveNext()) or decremented (MovePrevious()), or moved to the beginning (MoveFirst()) or end (MoveLast()) of the record set. In our example, the information in the "Story" column of the currently selected record will be displayed in the document. Simply by changing the current record selection, new information can be displayed on the HTML page.
Here is the data that was used in our sample.
%Story%
%This could be your first story. It can contain <B>Rich</B> HTML%
%This is the <i>really fun</i> second story. It also has an
Image <IMG src="ie.gif">%
%This is <input type=Button value="Dynamic HTML"
onclick="alert('Dynamic HTML')">%
Notice that the data contains HTML data, even scripting and event handlers.
In the example, if the news stories changed, the HTML document wouldn't have to change at all -- only the data file would change. The amount of information a user actually needs to download is reduced -- the template document never has to change, and never has to be refreshed from the server. It's also worth mentioning that the image bits in the row containing an image are not downloaded until the user selects that story.
For those of you who don't think that was sufficiently wizzy, transitioned, background-positioned, alpha-filtered, and full of dynamic content, check this sample out. To see the sample, you must be running Internet Explorer 4.0 .
View wizzy data-binding sample page
This is essentially the same sample, but now the selection of the current record is done on a timer, and a transition effect is used as the record is switched. Check out the code:
<html>
<head>
<OBJECT ID="Content" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="TextQualifier" VALUE="%">
<PARAM NAME="FieldDelim" VALUE="|">
<PARAM NAME="DataURL" VALUE="demo.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>
<body style="font-family: verdana">
<h3 id=Status></h3>
<div id=TheStory datasrc=#Content datafld="Story"
dataformatas="HTML" style="width: 100%; height: 60%;"></div>
<SCRIPT language=JScript>
var rs;
var tid;
tid = 1;
function goForward() {
TheStory.style.filter = "revealTrans(duration=2,
transition="+tid+")";
TheStory.filters.revealTrans.Apply();
if (rs.absolutePosition != rs.recordCount) {
rs.MoveNext();
} else {
rs.MoveFirst();
}
TheStory.filters.revealTrans.Play();
Status.innerHTML = "Showing Story "+rs.absolutePosition+"
of "+rs.recordCount;
tid++;
if (tid > 23) tid = 1;
window.setTimeout("goForward()", 5000);
}
function initialize() {
rs=Content.recordset;
Status.innerHTML = "Showing Story "+rs.absolutePosition+"
of "+rs.recordCount;
window.setTimeout("goForward()", 5000);
}
window.onload = initialize;
</SCRIPT>
</body>
</html>
This looks nothing like a feature called data binding. More like psychedelic, super-data push.
If you separate structure, style, behavior, and content when building your pages, you will find that the many groups participating in the production of your site can work more efficiently together, and you should greatly reduce the overall cost of producing your site. This should allow you to let your designers design, your writers write, and your engineers check out the next DHTML Dude column.
Michael Wallent, MSDN Online Voices's new monthly columnist on Dynamic HTML, is Microsoft's lead program manager for DHTML and a connoisseur of the finer things in life, on and off the Web. Some of his best friends are Swiss physicists.
Every month, MSDN Online Voices columnist Nadja Vol Ochs explores Web design issues and solutions in Site Lights. And look for in-depth technical articles in the Design section of MSDN Online Web Workshop.
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