Intro to XSLT transformations
XSLT (Extensible Stylesheet Language Transformations) can be intimidating for web developers, especially if you are already comfortable in your ASP/HTML/JavaScript/CSS worlds, which a lot of us have been happily living in for some time. Years back, along came XML, and not long after the need to display this data in web applications became apparent. XML can be a beautiful thing, and its ability to describe itself and be adaptable to so many different platforms means its here to stay. So unless you want your web data to be shown in the not-so-sexy XML format, its time you finally dove into XSLT.
My favorite way to describe what XSLT does is to think of your old Play-Dough factory. (You know you had one) Dig that sucker out from behind the Lite-Brite, and imagine it as your .xsl file.
The PlayDough represents your XML data, and your HTML web page is represented by your mom's new carpet. The XML is run through the XSL, transforming the XML data into almost any style of web output you can imagine, directly into your desired output page. One of the great things about using XSLT is that you are not limited to doing all of your layout and styling in the XSL file, the web browser will still apply any style sheet formatting you normally would use. Think of this as a two pass process, the first transforms data into malleable web content; the second takes the output and transforms the page into your desired webpage. If I haven't killed the metaphor yet, think of clients-side scripting (JavaScript & VBScript) and CSS as the little PlayDough molds and presses...they let you change the output just before content is delivered to the user.
Here is my sample XML file:
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="schools.xsl" type="text/xsl" title="demoapps style" media="screen" ?>
<Content>
<School Name="University of Iowa" Mascot="Hawkeyes" City="Iowa City" />
<School Name="University of Illinois" Mascot="Fighting Illini" City="Urbana-Champaign"/>
<School Name="University of Michigan" Mascot="Wolverines" City="Ann Arbor"/>
<School Name="University of Minnesota" Mascot="Golden Gophers" City="Minneapolis"/>
<School Name="Indiana University" Mascot="Hoosiers" City="Bloomington"/>
<School Name="Michigan State University" Mascot="Spartans" City="East Lansing" />
<School Name="University of Wisconsin" Mascot="Badgers" City="Madison" />
<School Name="Purdue University" Mascot="Boilermakers" City="West Lafayette"/>
<School Name="Penn State University" Mascot="Nittany Lions" City="Happy Valley"/>
<School Name="Ohio State University" Mascot="Buckeyes" City="Columbus"/>
</Content>
And here's the XSL file we'll use to apply the transformation:
<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<!-- link to our CSS -->
<link rel="stylesheet" type="text/css" href="start.css"/>
<head>
<title>Fun with XSLT</title>
</head>
<body>
<div id="mainContent">
<div>
Here comes our fancy XSLT transformation:
</div>
<!-- Loop through content, gleaning school data -->
<xsl:for-each select="Content/School">
<!-- create our div element -->
<xsl:element name="div">
<!-- set the ID attribute with autogenerated ID-->
<xsl:attribute name="id">
<xsl:text>school</xsl:text>
<xsl:value-of select="generate-id()"/>
</xsl:attribute>
<!-- set the CSS class -->
<xsl:attribute name="class">
<xsl:text>schoolName</xsl:text>
</xsl:attribute>
<!-- retrive values to display, adding spacer text (ugly) -->
<xsl:value-of select="@Name"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="@Mascot"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="@City"/>
</xsl:element>
</xsl:for-each>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Finally, let's look at the simple style sheet. This is able to style just like any other CSS
/* CSS Document */
html, body
{
color: Navy;
}
#mainContent
{
background: white;
font-size: 16px;
}
.schoolName
{
margin: 5px 0px 0px 20px;
font-variant:small-caps;
color: Gray;
}
That's all you need, you can view the result here.