Wednesday, 17 October 2007

XML Data Islands

Internet Explorer XML Data Islands can be really useful if you're working in a IE compliant context. This basically lets you embed a XML structure in your browser and create bindings between this structure and the HTML tags you use in your document.
Binding keeps the XML and the HTML structures coupled, so that each change in the HTML tags content can be reflected in the XML structure.
For further information you can visit:


A simple example can give you an idea of what I'm talking about. This will show you a simple case in which it can be used:

<html>
<body>
<xml id="cdcat">
<CATALOG>
<NAME>My CD Catalog</NAME>
<CD>
<TITLE>Over Again</TITLE>
<ARTIST>Gunner Sixx</ARTIST>
<ALBUM>
<NAME>Gunner Sixx Demo</NAME>
</ALBUM>
<ALBUM>
<NAME>Gunner Sixx Greatest Hits</NAME>
</ALBUM>
</CD>
<CD>
<TITLE>Candleburn</TITLE>
<ARTIST>Dishwalla</ARTIST>
<ALBUM>
<NAME>Opaline</NAME>
</ALBUM>
</CD>
<CD>
<TITLE>Angels or devils</TITLE>
<ARTIST>Dishwalla</ARTIST>
<ALBUM>
<NAME>Opaline</NAME>
</ALBUM>
</CD>
<CD>
<TITLE>Tears in heaven</TITLE>
<ARTIST>Eric Clapton</ARTIST>
<ALBUM>
<NAME>Eric Clapton - Unplugged - 1992</NAME>
</ALBUM>
</CD>
<CD>
<TITLE>Old and wise</TITLE>
<ARTIST>Alan Parson's Project</ARTIST>
<ALBUM>
<NAME>Alan Parson's hits</NAME>
</ALBUM>
<ALBUM>
<NAME>80's Hits</NAME>
</ALBUM>
<ALBUM>
<NAME>The very best of Alan Parson's Project</NAME>
</ALBUM>
<ALBUM>
<NAME>Alan Parson's Project unplugged</NAME>
</ALBUM>
<ALBUM>
<NAME>More and more hits</NAME>
</ALBUM>
</CD>
</CATALOG>
</xml>

<table border="1" datapagesize="2" id="mainTable" datasrc="#cdcat" datafld="CD">
<tr>
<td><span datafld="ARTIST"></span></td>
<td><span datafld="TITLE"></span></td>
<td>
<table border="1" id="subtable" datasrc="#cdcat" datafld="ALBUM"&gt;
<tr>
<td>
<span datafld="NAME"></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<BUTTON ID=cmdpreviousPage onclick="mainTable.previousPage()">&lt;</BUTTON>
<BUTTON ID=cmdpreviousPage onclick="mainTable.nextPage()">&gt;</BUTTON>
</body>
</html>



Some comments about the sample code:
  • The xml can be referenced by a 'src' attribute in the XML tag. This lets you separate the XML structure in a different file.
  • Any XML structure can be used. The 'datasrc' attribute in the table tag associates the XML structure as a datasource of the table.
  • The 'datafld' attribute is used for binding the HTML structure with the XML one.
  • Subtables can be used in the same way in complex structures by adding the 'datafld' attribute to the subtable.
  • Tables can be paged by using the 'datapagesize' attribute. IE also provides some default methods for this paged tables like 'tableId.previouspage()' or 'tableId.nextPage()'.

This is just a simple example, but it's useful to take into account that these tools can be really helpful. You can see it in the example above. Just a few declarative code lines and a some functionality pre-implemented.
However, and this is very restrictive, your application/html doc must be only IE compliant by the moment.