Microsoft XML 2.5 SDK


 

Browsing XML Using XSL Style Sheets

[This is preliminary documentation and subject to change.]

XSL style sheets used for browsing of XML files have stricter requirements than those used for general transformation. For more information about authoring an XSL style sheet, see Getting Started with XSL. When authoring a style sheet for use in direct browsing, keep the following limitations in mind:

Microsoft® Internet Explorer 5 uses an XSL style sheet to display an XML document when that document contains a style sheet processing instruction (PI) with type "text/xsl".

<?xml-stylesheet type="text/xsl" href="review.xsl" ?>

Accessing the XML and XSL Documents from Script

The HTML that results from browsing XML with an XSL style sheet is fully scriptable using the Introduction to the Dynamic HTML Object Model. In addition, there are two properties available on the DHTML document object that provide script access to the XML and XSL documents:

Modifications to these two documents via the DOM do not automatically cause updates to the resulting HTML tree, but rather offer a hook that scripters can use to wire up the specific updates they need.

Consider the following example, which shows how the menu is dynamically sorted in the Review Sample (XSL). First, add the links that trigger sorting to the style sheet.

<P class="tagline">
  <A href="javascript:sort('price')">Sort menu by price</A>
  <A href="javascript:sort('description')">Sort menu by description</A>
</P>

Next, write the "sort" function to apply the sort to the menu data and update the display. The script accesses the DOM for the XSL style sheet with the XSLDocument property and uses DOM calls to change attributes representing sort keys.

The XMLDocument is used to locate the XML source fragment that will be used in the update. Calling transformNode on the fragment will result in a string of HTML that can be pasted back into the HTML document.

function sort(key) {
  // Find the "order-by" attributes in the style sheet.
  var s = document.XSLDocument.selectNodes("*/xsl:template[@match='menu']
                                            //xsl:apply-templates/@order-by");
  
  // Replace the values with the new sort key.
  for (var i = s.nextNode(); i != null; i = s.nextNode())
  {
    i.value = key;
  }
  
  // Find the subset of the document we need to update.
  var d = document.XMLDocument.selectSingleNode("story/menu");
  
  // Apply the style sheet to the subset, and update the display.
  menu.innerHTML = d.transformNode(document.XSLDocument);
}

In this example, the style sheet is modified to generate a different view of the XML. The same mechanisms can be used to change the XML source data and to generate updated views of this data.