XSLT Sample: Breakfast Menu

  • Article

 

The Breakfast Menu sample demonstrates XML data islands and includes the following files.

  • simple-islands.htm

  • simple.xml

  • simple.xsl

  • simple.asp

To test the sample, copy the files to a folder on your local drive. Then do one of the following (beginners might want to try all three methods):

  • Open simple.xml using Internet Explorer by double clicking the file from Explorer.

  • Open simple-islands.htm using Internet Explorer by double clicking the file from Explorer.

  • Open simple.asp page by using Internet Explorer with a URL such as "https://localhost/breakfast/simple.asp".

The last option assumes that IIS is running on your machine and that you have created a breakfast virtual directory and placed all the files in it.

HTML File (simple-islands.htm)

<HTML>
  <HEAD>
    <TITLE>Simple demo of Microsoft XSL Processor</TITLE>
  </HEAD>

  <XML id="source" src="simple.xml"></XML>
  <XML id="style" src="simple.xsl"></XML>
  
  <SCRIPT FOR="window" EVENT="onload">
    xslTarget.innerHTML = source.transformNode(style.XMLDocument);
  </SCRIPT>

<BODY>
    <P STYLE="font-size:10pt; font-family:Verdana; color:gray">
      <B>This demo shows the use of data islands for 
          loading XML source and XSLT style sheets, and for 
          inserting the transformed result into the Web page.</B>
    </P>
    <DIV id="xslTarget"></DIV>
  </BODY>
</HTML>

XML File (simple.xml)

<?xml version='1.0'?>
<?xml:stylesheet type="text/xsl" href="simple.xsl" ?>
<breakfast-menu>
  <food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>Two of our famous Belgian Waffles 
      with plenty of real maple syrup.</description>
    <calories>650</calories>
  </food>
  <food>
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>Light Belgian waffles covered with 
     strawberries and whipped cream.</description>
    <calories>900</calories>
  </food>
  <food>
    <name>Berry-Berry Belgian Waffles</name>
    <price>$8.95</price>
    <description>Light Belgian waffles covered 
      with an assortment of fresh berries 
      and whipped cream.</description>
    <calories>900</calories>
  </food>
  <food>
    <name>French Toast</name>
    <price>$4.50</price>
    <description>Thick slices made from our homemade 
     sourdough bread.</description>
    <calories>600</calories>
  </food>
  <food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>Two eggs, bacon or sausage, toast, 
      and our ever-popular hash browns.</description>
    <calories>950</calories>
  </food>
</breakfast-menu>

XSLT File (simple.xsl)

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:template match="/">
    <HTML>
      <BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:12pt;
            background-color:#EEEEEE">
        <xsl:for-each select="breakfast-menu/food">
          <DIV STYLE="background-color:teal; color:white; padding:4px">
            <SPAN STYLE="font-weight:bold; color:white"><xsl:value-of select="name"/></SPAN>
            - <xsl:value-of select="price"/>
          </DIV>
          <DIV STYLE="margin-left:20px; margin-bottom:1em; font-size:10pt">
            <xsl:value-of select="description"/>
            <SPAN STYLE="font-style:italic">
              (<xsl:value-of select="calories"/> calories per serving)
            </SPAN>
          </DIV>
        </xsl:for-each>
      </BODY>
    </HTML>
  </xsl:template>
</xsl:stylesheet>

ASP File (simple.asp)

<%@ LANGUAGE = JScript %>
<%
  // Set the source and style sheet locations here.
  var sourceFile = Server.MapPath("simple.xml");
  var styleFile = Server.MapPath("simple.xsl");
  
  // Load the XML.
  var source = Server.CreateObject("Msxml2.DOMDocument.6.0");
  source.async = false;
  source.load(sourceFile);

  // Load the XSLT.
  var style = Server.CreateObject("Msxml2.DOMDocument.6.0");
  style.async = false;
  style.load(styleFile);
  Response.Write(source.transformNode(style));
%>