HyperWrite - Consultancy and Training 

Help Systems, Structured Authoring, DITA, Hypertext, Documentation Technologies

HyperWrite Logo
Skip Navigation Links
Skip Navigation Links

This article describes and demonstrates techniques only applicable to Internet Explorer. Your browser (Unknown) may not display some parts of this article as Internet Explorer does.

XML Data Binding

XML became an integral part of Microsoft's strategy around the time of Internet Explorer 4. IE4 was an XML-aware browser. As well as displaying HTML documents, it could also display XML documents through an inbuilt XML parser. Another part of IE4 was something known as the XML DSO (Data Source Object). The XML DSO allows you to manipulate primitive XML 'data islands' by binding (or attaching) the XML data to HTML presentation elements. The XML elements within Internet Explorer continue to be improved and added to with every new IE release.

The following tables are created by the browser, on the fly, from an XML data source. In these particular example, the XML data is embedded within the HTML, but it is also possible to nominate an external XML file. With an external XML data file, you are effectively providing a 'live' link from your HTML document to a data source; as the XML data is updated, your Web page content will update.

Inline XML is simply placed into the HTML code, and an ID assigned to the XML markup. (ie, <xml id="AODCXML"><conferences>....<conferences></xml>). External XML is similarly given an ID, and an SRC attribute assigned with the URL of the XML file (eg, <xml ID="AODCXML" src="sample.xml"> </xml>).

There are two tag attributes that are used to bind the data to HTML elements: the datasrc and datafld attributes. The datasrc attribute is used to nominate the source of the XML data. For example, datasrc="#AODCXML" would nominate an inline XML code block with an ID of "AODCXML". The datafld attribute nominates the node within the XML that is to be inserted in the HTML element. For example, datafld="year" would nominate the contents of the <year> tag within the source XML.

Below are two examples of tables that use bound XML data. The first table uses <input> and <div> tags to hold particular data elements, while the second table displays entire rows in <div> tags. To understand more about how this simple technique can be used, simply view the source for this page.

1st Annual AODC 1998 Carlton Crest Melbourne 2nd Annual AODC 1999 The Sebel Sydney 3rd Annual AODC 2000 Sheraton Brisbane 4th Annual AODC 2001 Rydges Lakeside Canberra 5th Annual AODC 2002 Carlton Crest Melbourne 6th Annual AODC 2003 Grand Mercure Broadbeach
Conference Year Venue City
Conference Details

A datafld attribute can also be applied to the <img> tag, where it substitutes for the src attribute. The corresponding XML data would store the URL of an image.


Valid XHTML 1.0 Transitional Valid CSS!

Want to discover more?

For further information, view the New Architect article (by Michael Floyd) on this subject.