If you're new here, you may want to subscribe to my RSS feed. So that you can read the latest updates about Web2.0 tools, Making Money Online, Tips in SEO, Ajax and many more. Thanks for visiting ProgramimiCOM!

This article explains a useful way to embed data in an HTML document, and store it on the client, using XML. With XML becoming ever more pervasive and the client side implementation gaining a lot of ground, you will probably find yourself using this technique in many projects.

Introduction

What is an XML data island? Simply stated it is data in the form of XML embedded in an HTML document. By embedding XML data you create an XML data island, thereby storing your data on the client. This is not good enough. You also want to know how to access it. The HTML elements on the page can be bound to the XML data island and make them come to life, on the client. In reality an XML data island represents a built-in Data Source Object in the IE browser. This means you do not need <object/> tags to embed the control.

Example describing an XML data island

First of all, to get a handle on XML data islands, let us start with a simple HTML file, Simple.htm, with some embedded XML. Of course, you can create your own XML file, but for this tutorial please follow the code shown in the next paragraph. For the embedded XML file, the webstudents.xml file used in our other tutorials will be used. This is how this XML is displayed by the parser on the IE. In the HTML file the XML data island is a different color.

island05.jpg

Simple.htm 

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>

<BODY>
<h3>Html file with embedded XML</h3>
<P>Here begins the XML Data Island</P>
  <xml id=”WebStudents”>
<wclass>
<!– My students who attended my web programming class –>
<student id=”1″>
<name>Linda Jones</name>
<legacySkill>Access, VB5.0</legacySkill>
</student>
<student id=”2″>
<name>Adam Davidson</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
<student id=”3″>
<name>Charles Boyer</name>
<legacySkill>HTML, Photoshop</legacySkill>
</student>
<student id=”4″>
<name>Charles Mann</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
</wclass>
</xml>  <P>Here ends the XML Data Island</P>
</BODY>
</HTML>

When you display this page in the browser, what you will see is only this. There is nothing to indicate that something is embedded.

island01.jpg

If you review the embedded XML file you notice that it has an id called “WebStudents.” You also notice that it has well formed XML content. The data content of this file includes the student ids, student names and their skill sets.

The Why and How of XML Data Islands - Getting the names of students

It was mentioned that the XML data island represents the built-in Data Source Object DATASRC, which is identified by the id property. Associated with the data source are its fields, which are identified by the DATAFLD property. For example, the student “Linda Jones” will fit in as a DATAFLD. Let’s add the following HTML code to this file:

<table DATAsrc="#WebStudents">
<tr>
<td><span DATAFLD="name"></span></td>
</tr>
</table>

and call the new file Basic.htm, whose source is shown in the next paragraph:

Basic.htm

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>

<h3>Html file with embedded XML</h3>
<P>Here begins the XML Data Island</P>
 <xml id=”WebStudents”>
<wclass>
<!– My students who attended my web programming class –>
<student id=”1″>
<name>Linda Jones</name>
<legacySkill>Access, VB5.0</legacySkill>
</student>
<student id=”2″>
<name>Adam Davidson</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
<student id=”3″>
<name>Charles Boyer</name>
<legacySkill>HTML, Photoshop</legacySkill>
</student>
<student id=”4″>
<name>Charles Mann</name>
<legacySkill>Cobol, MainFrame</legacySkill>
</student>
</wclass>
</xml>
 <P>Here ends the XML Data Island</P>  <table DATAsrc=”#WebStudents”>
<tr>
<td><span DATAFLD=”name”></span></td>
</tr>
</table>  </BODY>
</HTML>

In the above added snippet, you have identified the DATASRC as “#WebStudents” and out of the three elements, student id, name, and legacySkill you have opted to show only the “name.” Now if you browse the file Basic.htm, your display will appear as shown in the next picture. Although you have only a single <td/> element, you have all the rows of data.

island02.jpg

The Why and How of XML Data Islands - Showing the complete data
(Page 3 of 4 )

You may complete this picture by adding the other two DATAFLDs, namely student id and legacySkill, and your display would be as shown in the next picture. Some additional formatting has been added to make the display a little more jazzy. You may also notice that the data may be accessed in any order and need not follow the same one as in the original XML. If you choose not to show this data, you may leave them out as in Basic.htm.

island03.jpg

Referencing an XML file on a web server

In Simple.htm the XML file was hard coded into the page. Instead of this you may also reference a file on the web server by referencing its “src” property as shown in the next snippet.

<xml DATAsrc=”WebStudents” src=”http://localhost/webstudents.xml” ></xml>The source of the htm file, Basic2.htm with XML being referenced to a file saved on the web server, is shown in the next paragraph.

Basic 2.htm

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>

<h3>Html file with embedded XML</h3>
<P>Here begins the XML Data Island</P>
 <xml id=”WebStudents” src=”http://localhost/webstudents.xml“></xml>
 <P>Here ends the XML Data Island</P>
 <table DATAsrc=”#WebStudents” border=”1″ bgcolor=”powderblue”>
<tr>
<td><span DATAFLD=”name”></td>
<td><span DATAFLD=”id”></td>
<td><span DATAFLD=”legacySkill”</td>
</tr>
</table>
 </BODY>
</HTML>

The Why and How of XML Data Islands - HTML tags that can be bound to an XML island
(Page 4 of 4 )
An HTML table is but one of the elements for which you can bind data from an XML data island. Here are a few examples that should work.

The Button object

<input type=”button” DATAsrc=”#WebStudents” DataFld=”name”/>
will show up when browsed as:

button.jpg

The Textbox object

<input type=”text” DATAsrc=”#WebStudents” DataFld=”name”/>
will show up as:

textbox.jpg

The Span tag

<span DATAsrc=”#WebStudents” DATAFld=”legacySkill”></span>
will show up as:

span.jpg

The DIV tag

<div DATAsrc=”#webstudents” DataFld=”name”/></div>

div.jpg

The marquee tag

<marquee DATAsrc=”#WebStudents” DataFld=”name”> </marquee> caught at a fixed location as:

marquee.jpg

Summary

This tutorial considered embedding a well formed XML fragment into an HTML file to create an XML data island and showed how one could access data embedded in the XML file. The tutorial also showed the different HTML tags to which the data from the XML data island can be bound. With XML becoming ever more pervasive and the client side implementation gaining a lot of ground, a working knowledge of XML data islands is deemed essential; this tutorial is addressed to provide such a background. The browser specific nature of the source code makes it necessary to hide the XML island from non-IE browsers. This concern is not addressed in the tutorial.

Filed Under: How To, Tutorials, XML 
Tags: