About Data Bindings
The ideas of
data sources and
data bindings are as old as Methuselah. You start with some kind of static content, whether that's a Web page, a Java window, or a 4GL application screen, and then you connect it to data stored somewhere else, in a process called binding. The aim is to complete or augment the original content with data that may change over time, but to do so in a general way that doesn't rely on having that data in advance. Each time a user makes a request for the content, the content updates itself and displays the most recent set of data. ODBC, JDBC, XUL templates, and XBL are all examples of binding systems, as is Microsoft's plainly-named data binding services. Binding differs from templated content-generation systems such as PHP, because there's an assumption that incomplete content is delivered
first and is then completed by data
later. By comparison, PHP mashes together content and data and then delivers the final content all at once. In a bound system, the required data is usually remote to the original content and referred to by a descriptive address. That address is known as the data source.
XML data islands bring a new twist to this old story because the data
accompanies the content as it's delivered. In that case, the content and the data are in the same spot, and the only binding required is a trivial connection between the two. It's a happy situation for simple cases, because all the binding logic can be specified with a few, shared bits of information—in this case tags (elements) and tag attributes inside an HTML page—without requiring any additional programming. Here's an example of how an IE XML data island
might work, if IE weren't strange and different:
<html>
<head>
<script>
function where() {
var node = document.getElementById("who");
node = node.getElementsByTagName("location");
alert(node[0].firstChild.nodeValue);
}
</script>
</head>
<body>
<xml id="who">
<contributor>
<name>Nigel McFarlane</name>
<location>Somewhere in Cyberspace</location>
</contributor>
</xml>
This article contributed by:
<div datasrc="#who"
onclick="where()" datafld="name">Nobody</div>
</body>
</html>
In this code, the data island starts and ends with the
<xml> tag. Note that the example is a Tag Soup (non-standard) HTML document. The island is used twice; once in the HTML content which uses the proprietary
datasrc and
datafld attributes to bind the
<div> tag's content to the content of the
<name> tag, and once in the click handler, which treats the contents of the
<location> tag as plain data, digging it out of the document's DOM for display. The
<div> tag initially contains the content "Nobody," but that's replaced with "Nigel McFarlane" as soon as the page loads the datasource.
Internet Explorer performs the binding action using a chunk of Microsoft code that's either part of IE or part of Windows, depending on your perspective. That's clearly overkill for the simple case of XML data islands, because the content and the data source are both available within the same browser page. It's therefore overly complex, not to mention non-portable. Instead, you can use a bit of JavaScript to achieve the same result, and that's the solution you'll see here. If you add the now-widely available XMLHttpRequest object you can also use JavaScript to bind remote data sources—but that's another article.
Note that I said that the preceding code
might work in IE. In fact, it won't work. The first binding use is fine, where the data is bound to tags, but the second use, which accesses the data island using a script, is a bust. That's because IE does some strange and non-standard things to the island. You'll see how to get around that restriction.
| Editor's Note: The editorial staff of DevX would like to add our condolences to the voices of so many around the Web. Our longtime author and friend, Nigel McFarlane, passed away in June 2005. This article is one of two that Nigel wrote for us before his death; they are published with the permission of his family. Nigel McFarlane was the author of two books and a frequent contributor to Mozilla and the open source movement. —Lori Piquet |
Digg
del.icio.us
Newvine
furl
StumbleUpon
BlinkList
Newsvine
Magnolia
Facebook
Tailrank
Slashdot
Technorati
Google Bookmarks
Yahoo Favorites
Windows Live
Ask
obust support for Web standards is now the norm rather than the exception. If you develop applications for a purely Microsoft-centric environment then you probably haven't had to care much about standards, but everywhere else, attendance to and mastery of modern standards (CSS, JavaScript, and MIME types) has become a minimum requirement for any professional Web engineer. Clients increasingly realize the importance of standards, and are increasingly less willing to accept applications that don't adhere to standards. Amidst this new rigor, however, are many non-standard features of Web browsers that continue to be very useful. XML data islands (embedding XML content inside HTML content) are just one example. In this article you'll see how to lift your skills up to standard without losing that useful feature.
