Export (0) Print
Expand All
5 out of 49 rated this helpful - Rate this topic

Using XML and XSLT on Your Site with FrontPage

 

Jeannine Gailey

December 2002

Applies to:
    Microsoft® FrontPage®

Summary: Extensible Markup Language (XML), Extensible Stylesheet Language (XSL), and XSL Transformations (XSLT) allow you to use a single source of data to generate output in any format and for any platform. This article shows you how you can use these technologies with Microsoft FrontPage to dynamically generate an HTML page from XML data. (8 printed pages)

Contents

Introduction
What Is XML?
What Are XSL and XSLT?
Putting It All Together
Conclusion

Introduction

Extensible Markup Language (XML) has been hyped as the Internet technology that will fulfill the dreams of Web developers. One of the major reasons for its popularity is that you can use a single source of XML data to generate output in any format and for any platform. You might never thought of the Microsoft® FrontPage® Web site creation and management tool for authoring XML, but you should. In this article, you will learn about XML and how you can use the Extensible Stylesheet Language (XSL) and XSL Transformations (XSLT) with FrontPage to dynamically generate an HTML page from XML data.

What Is XML?

If you have read computer magazines, attended conferences, or visited any technology-related Web sites in the past four years, you doubtless have seen something (or a whole lot of things) about XML. As an HTML pro, you can see that while HTML and XML are linguistically cousins, the extensibility of XML adds a dimension of power and flexibility to Internet computing not supported by HTML. By using XML, applications are able to exchange data in a standard, easily-defined format. Special programs called parsers are able to read an XML document, validate the structure of the markup, and extract the data into whatever format is needed, which could be HTML, another XML document, or some other proprietary format.

Like HTML documents, XML documents are made up of the following three components:

  • Elements, which form the structure of an XML document. An element named myElement might be used like <myElement>some data</myElement>.
  • Attributes, which provide additional data about XML elements. Type and ID are both common attributes of many elements, which might look like <myElement ID="1" Type="someType" />.
  • Data. Plain text data is included within the elements of XML markup.

The following in an example of a simple XML document:

<?xml version="1.0" standalone="yes"?>
<Catalog xmlns="http://www.example.com/tempuri">
  <Item>
    <ID>3</ID>
    <Name>Aniseed Syrup</Name>
    <Price>10</Price>
    <Stock>13</Stock>
  </Item>
  <Item>
    <ID>40</ID>
    <Name>Boston Crab Meat</Name>
    <Price>18.4</Price>
    <Stock>123</Stock>
  </Item>
</Catalog>

XML is a strongly-typed markup language. While the allowable elements and attributes in an HTML document are defined by the HTML specification, the structure of a valid XML document is defined by a referenced special file known as an Extensible Schema Definition (XSD) file. In the previous example, the xmlns attribute references a namespace URL that is used to define a globally unique XSD, the structure of which is described by the following XSD:

<?xml version="1.0" standalone="yes"?>
<xs:schema id="Catalog" targetNamespace="http://www.example.com/tempuri"
  xmlns:xs="http://www.w3.org/2001/XMLSchema">
  <xs:element name="Catalog">
    <xs:complexType>
      <xs:choice maxOccurs="unbounded">
        <xs:element name="Item">
          <xs:complexType>
            <xs:sequence>
              <xs:element name="ID" type="xs:int" minOccurs="0" />
              <xs:element name="Name" type="xs:string" minOccurs="0" />
              <xs:element name="Price" type="xs:decimal" minOccurs="0" />
              <xs:element name="Stock" type="xs:short" minOccurs="0" />
            </xs:sequence>
          </xs:complexType>
        </xs:element>
      </xs:choice>
    </xs:complexType>
  </xs:element>
</xs:schema>

In this schema, elements are defined by <xs:element>. Elements that have child elements, like Item, are defined as complexType elements. For more information about XML and schemas, try the MSDN XML Web page.

What Are XSL and XSLT?

As you know, in HTML you can specify a cascading style sheet that tells a Web browser how to format the output of an HTML document. There is an analogous technology in XML known as the XML Stylesheet Language (XSL). An XML document can reference an XSL document, which tells the parser what type of code to generate as it reads the XML. An XSL document is an XML document that defines a set of operations for the parser to execute when it encounters certain elements and attributes in an XML file. XSL Transformations (XSLT) is the part of XSL that describes these operations.

For example, consider the following XSL document:

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
  <xsl:template match="/">
  <HTML>
    <BODY>
      <TABLE BORDER="2">
        <TR>
          <TD><P ALIGN="center"><B>ID</B></P></TD>
          <TD><P ALIGN="center"><B>Name</B></P></TD>
          <TD><P ALIGN="center"><B>Price</B></P></TD>
          <TD><P ALIGN="center"><B>Stock</B></P></TD>
        </TR>
      <xsl:for-each select="Catalog/Item">
        <TR>
          <TD><xsl:value-of select="ID" /></TD>
          <TD><xsl:value-of select="Name" /></TD>
          <TD><xsl:value-of select="Price" /></TD>
          <TD><xsl:value-of select="Stock" /></TD>
        </TR>
      </xsl:for-each>
      </TABLE>
      </BODY>
    </HTML>
  </xsl:template>
</xsl:stylesheet>

The template element contains the rules for transforming the XML document, and its match attribute tells the parser to locate a certain element in the XML document based on its XPath expression. XPath is a technology that allows you to find certain parts of an XML document. In this case, the expression "/" tells the parser to look for the root element of the document, which in this sample is the catalog element. Note that the template element contains the code into which the XML data is being written, in this case HTML. Within the template element, a for-each element selects each instance of the Item element that is a child of Catalog in the XML file. Then the for-each element creates an HTML table row with a cell for each child element of Item, where the value-of element returns the value of the selected element.

When the XML file has been fully parsed using the specified XSL file, the resulting HTML looks like this:

<HTML>
  <TITLE>Catalog Inventory</TITLE>
  <BODY>
    <TABLE BORDER="2">
      <TR>
        <TD><P ALIGN="center"><B>Name</B></P></TD>
        <TD><P ALIGN="center"><B>Price</B></P></TD>
        <TD><P ALIGN="center"><B>Stock</B></P></TD>
      </TR>
      <TR>
        <TD>Aniseed Syrup</TD>
        <TD>10</TD>
        <TD>13</TD>
      </TR>
      <TR>
        <TD>Boston Crab Meat</TD>
        <TD>18.4</TD>
        <TD>123</TD>
      </TR>
    </TABLE>
  </BODY>
</HTML>

So, using XSLT, you affected how the XML data was displayed in HTML. For more information on using XSL and XSLT, check out the Extensible Stylesheet Language page hosted by the World Wide Web Consortium (W3C). Also, the XML Path Language (XPath) specification describes the full set of expressions that can be used to locate parts of an XML document.

Putting It All Together

Now let's look at how you can use FrontPage to create an Active Server Pages (ASP) page that uses JavaScript to invoke the Microsoft XML (MSXML) parser to read this sample XML file and dynamically generate an HTML page with a table containing the transformed XML data. XML formatting rules are slightly different and much more strict than are the rules for HTML. For example, unlike HTML, XML is case sensitive and requires an end tag for all elements. Because of this, you need to make some additional preparations before using XML in FrontPage.

Setting Up FrontPage

If you choose to create your XML files in FrontPage, you will need to make certain that FrontPage is configured properly. Before creating an XML document, verify that Notepad is the default editor for both XML and XSL files.

  1. On the Tools menu, click Options and then click the Configure Editors tab.
  2. Check to see if there are entries under Type for xsl and xml, and that the default editor is notepad.exe. Typically, the default xml editor will be set properly. However, if there is no default xml editor, you can set it using the steps below.

To set the default editor

  1. On the Tools menu, click Options and then click the Configure Editors tab.
  2. Click Add.
  3. In File Type, type xml.
  4. In Editor Name, type notepad.exe.
  5. To the right of the Command text box, click Browse and navigate to notepad.exe in the Windows System folder.
  6. If necessary, repeat steps 3 through 5 for the xsl file type.

Once the default editor has been set for .xml files, you can create a new XML file.

To create a new XML file

  1. Create a new Web page.
  2. On the File menu, click Save As.
  3. In File Name, type a name with either a .xml or .xsl extension.
  4. Click Save.

Once you've created the new XML file, you need to tell FrontPage to preserve the existing formatting of your XML so that it does not attempt to apply HTML formatting, which will invalidate the document.

To preserve formatting

  1. On the Tools menu, click Page Options and then click the HTML Source tab.
  2. Select Preserve existing HTML.
  3. Click OK.

After creating an XML file and an XSL file like the ones discussed earlier (named Catalog.xml and Catalog.xsl respectively), you can move on to creating your main ASP page.

Creating the ASP Page

Unlike regular HTML pages, Active Server Pages are designed to include dynamic content, such as the result of an XSL transformation on an XML source file.

To create a new ASP page

  1. Create a new Web page.
  2. On the File menu, click Save As.
  3. In Save As Type, click Active Server Pages.
  4. Enter the name you want to save the file as.
  5. Click Save.

Now, in your ASP page, you need to write the following JavaScript code to invoke the MSXML parser to execute the XSLT on your XML source file:

<%@ LANGUAGE = JavaScript %>
<%
  // Set the source and style sheet locations here
  var sourceFile = Server.MapPath("catalog.xml");
  var styleFile = Server.MapPath("catalog.xsl");

  // Load the XML 
  var source = Server.CreateObject("MSXML2.DOMDocument");
  source.async = false;
  source.resolveExternals = false
  source.load(sourceFile);

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

In this code, you create an instance of the MSXML2.DOMDocument object and call the load method to load your XML into this XML DOMDocument object. Then you create a second XML DOMDocument object and load it with the contents of the XSL file. Finally, to execute the XSLT, you call the transformNode method on the DOMDocument object containing the XML source and pass the object containing the XSL code. The resulting HTML code is written dynamically to an HTML page that is returned to the Web browser. Note that, because the HTML and BODY tags for this ASP page are created during the transformation, you need to tell FrontPage to preserve the HTML formatting for this ASP page so you don't end up with duplicate HTML tags. For more information about using the XML Document Object Model (DOM) provided by MSXML, see the .NET Framework Developer's Guide.

Conclusion

When we need to dynamically create Web pages from external data files, XML and XSLT allow us to use a new approach, one that is becoming the mainstream way to store and see data. The main benefit to using an XML-based approach is that this same XML data file can be reused on any platform and by any application that understands XML, which these days is quite a few. Also, you can use this same source file to generate other data formats, such as for handheld devices, smart cell phones, or e-mail messages. XSLT allows you to manipulate the way that you see the XML data on your Web page. These technologies are main building blocks for XML Web services, which are a main part of the new Microsoft .NET architecture.

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.