Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > HTML/XHTML

XSLT Transformations

  • Print
  • + Share This
  • 💬 Discuss
From the author of

From the author of

Learn more about how to use Extensible Stylesheet Language Transformation (XSLT), a powerful language for working with data in Extensible Markup Language (XML) documents. Steven Holzner, author of New Riders’ Inside XSLT, captures the excitement and power of XSLT while showing you working examples that use XSLT processors you can download free. He shows you the full XSLT syntax - from the most basic to the most advanced - and digs into many of the ways XSLT is used today.
This article is adapted from the forthcoming book, Inside XSLT, by Steven Holzner. Also see Steven's other book, Inside XML.

Extensible Stylesheet Language Transformation (XSLT) is a powerful language for manipulating the data in Extensible Markup Language (XML) documents. To manipulate the data - in other words, to transform the XML document - you use an XSLT stylesheet, which contains the rules you've set up for transforming an XML document.

Using XSLT Stylesheets

To illustrate how to make XSLT transformation happen, I'll be using an XML document called planets.xml that stores data about the planets Mercury, Venus, and Earth, such as their mass, length of their day, density, distance from the sun, and so on. The XSLT stylesheet I'll be using to transform planets.xml is called planets.xsl, and is shown in Listing 1. This particular stylesheet takes the data in planets.xml and transforms it by formatting it into an HTML table.

Listing 1: The planets.xsl Stylesheet

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/PLANETS">
    <HTML>
      <HEAD>
        <TITLE>
          The Planets Table
        </TITLE>
      </HEAD>
      <BODY>
        <H1>
          The Planets Table
        </H1>
        <TABLE BORDER="2">
          <TR>
            <TD>Name</TD>
            <TD>Mass</TD>
            <TD>Radius</TD>
            <TD>Day</TD>
          </TR>
          <xsl:apply-templates/>
        </TABLE>
      </BODY>
    </HTML>
  </xsl:template>
  
  <xsl:template match="PLANET">
    <TR>
     <TD><xsl:value-of select="NAME"/></TD>
     <TD><xsl:apply-templates select="MASS"/></TD>
     <TD><xsl:apply-templates select="RADIUS"/></TD>
     <TD><xsl:apply-templates select="DAY"/></TD>
    </TR>
  </xsl:template>
  
  <xsl:template match="MASS">
    <xsl:value-of select="."/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@UNITS"/>
  </xsl:template>

  <xsl:template match="RADIUS">
    <xsl:value-of select="."/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@UNITS"/>
  </xsl:template>
  
  <xsl:template match="DAY">
    <xsl:value-of select="."/>
    <xsl:text> </xsl:text>
    <xsl:value-of select="@UNITS"/>
  </xsl:template>
  
</xsl:stylesheet>

You can see that this XSLT stylesheet has the look of an XML document - and for good reason, because that's exactly what it is. All XSLT stylesheets are also XML documents, and as such should be well-formed XML.

How do you connect this stylesheet to the XML document planets.xml? One way to do that is with an <?xml-stylesheet?> XML processing instruction. This processing instruction uses two attributes. The first one is type, which you set to "text/xml" to indicate you're using an XSLT stylesheet. (To use the other type of stylesheets, cascading stylesheets [CSS], which are usually used with HTML, you'd use "text/css".) The second attribute is href, which you set to the uniform resource identifier (URI) of the stylesheet; remember that XML uses URIs rather than URLs.

NOTE

Note that breaks in the middle of a code element might happen because of spacing limitations on this page; simply continue typing so that the tag stays on the previous line, as with <!--At perihelion--> shown in the next code snippet. You'll notice that the continued line often starts all the way over at the left margin without the indentation used in the line preceding it. For a code line that is not indented, however, the continued line will be indented.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xml" href="planets.xsl"?>
<PLANETS>

<PLANET>
    <NAME>Mercury</NAME>
    <MASS UNITS="(Earth = 1)">.0553</MASS>
    <DAY UNITS="days">58.65</DAY>
    <RADIUS UNITS="miles">1516</RADIUS>
    <DENSITY UNITS="(Earth = 1)">.983</DENSITY>
    <DISTANCE UNITS="million miles">43.4</DISTANCE><!--At 
perihelion-->
  </PLANET>
    .
    .
    .

Now I can use an XSLT processor to apply planets.xsl to planets.xml and create a new document, planets.html. You can see that new HTML document in Figure 1.

Figure 1 An HTML document created by an XSLT processor.

The XSLT processor read the data in planets.xml, applied the rules put into planets.xsl, and created an HTML table in planets.html. But how did the XML document and the XSLT stylesheet combine to create planets.html?

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus