Exploring Data Islands and Web Services

Please note – Data Islands are exclusive to Internet Explorer!

This month we start a two part series on Data Islands. Part 1 explores how we can use Data Islands to embed XML and XSLT into a browser, and manipulate that data using DHTML. Part 2 will illustrate Data Islands and Data Binding, and how to update data from the browser with Web Services and XMLHTTP.

Before you begin you should have a general idea of XML and XSLT. If you are new to these technologies there are a number of resources out there that cover them in detail. You’ll want to take a look at XML, XPath, and XSLT. So off we go …

First up, what is a data island? A data island provides the means to embed XML into the browser. The following snippets show two possible ways to create a data island.

<xml id="demoXML">
<Some XML Here.....
</xml>
or
<xml id="demoXSL" src="your-source.xml|xsl"/>

The most important attribute of the xml is the id attribute, this is how you will refer to the Data Island in the browser. Once your page loads you can manipulate the XML with the same syntax as the MSXML Parser.

Our example uses two Data Islands, one for XML and one for XSLT. We will use DHTML to manipulate the XML and then transform the results.

Now that you have the XML in the browser you need a way to manipulate it. Our example uses two functions; the first function manipulates the XML by altering a “selected” attribute. In the example that follows a grid is created with “where to buy” links. The onclick event of the link calls the SetSelected function which manipulates the XML in the Data Island.

function SetSelected(id)
{
  //Build the XPath Query based on the id passed in
  var query = "/my-list/my-item[@id='" + id + "']";
   //clear previously selected items
  var lst= demoXML.selectNodes("/my-list/my-item")
  for(ctr=0;ctr!=lst.length;ctr++)
  {
    lst[ctr].setAttribute("selected",0);
  }
  //Set the selected attribute of the currently selected node
  var elm = demoXML.selectSingleNode(query);
  elm.setAttribute("selected",1);
  Render();
}

The second function simply does a transformation on the XML Island using the XSL Island and places the results in a div.

function Render()
{
  list.innerHTML= demoXML.transformNode(demoXSL);
}

Here’s our smart little page (kept to the minimum) that shows the Islands and functions in action.

Note – if you receive errors on this page make sure your box is running the latest greatest updates. See the MSDN site for help pertaining to particular errors.

The browser currently contains two data islands. One for XML and one for XSL. Start with the render link. The where to buy links will call the SetSelected function. If you click on a where to buy link and then click the Show XML link, you will see the selected attribute is set according to the ID of the item selected.

To see the XML, XSL, or to render, click here.

That’s it folks! At this point you should be able to create a Data Island and manipulate it in the browser. Our example used the onclick event of an tag to manipulate the XML (although we could have used any event). If you’re the creative type I hope I got your wheels spinning.

Click here to sign up for FREE Tech. newsletters from murdok!

Alan Hyneman has been working with and using computers in numerous applications for over 20 years. His experiences range from Graphic Design and Desktop Publishing, through developing enterprise level back end engines utilizing SQL, ASP, VB, XML, XSLT, and C++. He holds Microsoft’s MCSD certification, Microsoft’s highest certification for software developers. He is available on a consultant or contract basis and is always ready to meet the needs of clients.