Displaying XML Data with

XSLT

Session 1
Introduction to XML Introduction to XSLT
Programmatically Reading XML Documents
Introduction to XPATH
 What is XSL?
 XSL, or the eXtensible Stylesheet Language, is a
language used for transforming XML data from one
format to another.
 Realize that XSLT transforms an initial XML document
to a different XML document! That is, after the
transformation we are still left with an XML
document, not text.
 For example, using XSL we can translate XML into
XHTML, and thereby display XML data in a Web
page. (XHTML is HTML formatted according to XML
rules.)
 What is XSL?
 XSL consists of three parts:
1. XSLT – (XSL Tranformation) the syntax used for
transforming an XML document to another format.
2. XPath – the syntax used to access particular elements
or attributes of an XML document.
3. XSL Formatting Objects – a syntax for formatting
XML documents based on their data and for formatting
data differently based on the device viewing the data.

We will only be discussion XSLT and XPath. For more information on XSL
Formatting Objects, see: http://www.w3.org/TR/xsl/slice6.html
What is XSL?
 In this presentation, we’ll examine how to use
XSLT to transform an XML document into
HTML. However, XSLT can be used to
transform XML format to any other text
format.
 We’ll examine the .NET Framework’s
XslTransform class, as well as the ASP.NET Xml
Web control.
 Before we begin, though, we need to
examine XPath.
XSLT – XSL Transform
 XSLT is a syntax for transforming XML data
into an alternate format.
 The XSLT syntax can appear in an XML-
formatted file (typically with a .xsl extension).
 The XSLT commands are designed to allow
for iterating through a list of XML elements,
and retrieving the text and/or attribute values
of specific XML elements.
 The Basic Structure of XSLT
 The root element for an XSLT file is the
<xsl:stylesheet> element. (Note the
xsl namespace.)
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
… XSLT syntax goes here …
</xsl:stylesheet>
 A Quick Refresher on
Namespaces
 XSLT uses the xsl namespace, which is
specified via:
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

• Note that the xsl namespace prefix is used. It’s

namespace value must be the specific URL you see
above…
The Components of XSLT
 Recall that XSLT is expressed as an
XML-formatted document.
 There are a number of common XSLT
elements that specify how the XML data
should be transformed:
 <xsl:template>
 <xsl:for-each>
 <xsl:value-of>
Examining <xsl:template>
 An XSLT document can contain an
arbitrary number of <xsl:template>
elements.
 Each <xsl:template> element must
include a match attribute, whose value
is an XPath expression that indicates
what XML nodes the <xsl:template>
tag will work with.
 Examining <xsl:template>
 For example, if we wanted to list each file on the
filesystem, we’d need to first add an
<xsl:template> element that matches with the
<file> elements.
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/filesystem//file">
…
</xsl:template>
</xsl:stylesheet>
Example of <xsl:template>
 <xsl:template match="/filesystem//file">
Examining <xsl:value-of>
 The <xsl:value-of> element accesses
the text or attribute value of an
element.
 The <xsl:value-of> element requires a
select attribute, which specifes the
name of the element whose text node
to retrieve, or the attribute name.
 Example using <xsl:value-of>
The following XSLT document would output the
names of all of the folders in the file system.

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/filesystem/drive//folder">
<xsl:value-of select="@name" />
</xsl:template>
</xsl:stylesheet>
 Examining <xsl:for-each>
 The <xsl:for-each> element iterates through all of
the children elements of a specified element. The
<xsl:for-each> element has a select attribute (like
<xsl:value-of>), which specifies which element’s
children to iterate through.
<xsl:template match="/filesystem/drive">
<xsl:value-of select="@letter" />
<xsl:for-each select="folder"> What would
<xsl:value-of select="@name" /> this XSLT
</xsl:for-each> document’s
</xsl:template> output be?
 Creating XSLT Files in VS.NET
 Go to
File/New/File
and select the
XSLT File
option.
 Creating XSLT Files in VS.NET
 By default, VS.NET creates the following
XSLT content for a new XSLT file:

<?xml version="1.0" encoding="UTF-8" ?>

<stylesheet version="1.0"
xmlns="http://www.w3.org/1999/XSL/Transform">
</stylesheet>
 Creating XSLT Files in VS.NET
 However, to transform XML files with XSLT
the XSLT file must contain the xsl namespace,
like so (the added parts are in bold):

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
</xsl:stylesheet>
Fixing this Problem
 There are two ways to “fix” this
problem:
1. Edit the XSLT file by hand each time you
create a new one, adding the xsl
namespace where needed.
2. Edit the files:

<VS.NET Dir>\Vb7\VBWizards\XSLTFile\Templates\1033\XSLTFile.xslt
- and -
<VS.NET Dir>\VC#\CSharpProjectItems\XSLTFile.xslt
Converting XML to HTML
Using XSLT
 XSLT is commonly used to transform
XML data to HTML. For example, we
might want to display the file system
information on a Web page in the
following format:
Drive Name
 All Folder Names in Drive
 File Name(s) for Specific Drive
 Building the XSLT File
Piecemeal
 What XSLT syntax would we want to
enumerate the <drive> elements?
<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/filesystem/drive">
</xsl:template>
</xsl:stylesheet>

We could have done an <xsl:template match=“/”> and then

an <xsl:for-each select=“filesystem/drive”>
 Building the XSLT File
Piecemeal
 Now, how would we display the <drive>
element’s letter attribute in a bold font?

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/filesystem/drive">
<b><xsl:value-of select="@letter" /></b>
</xsl:template>
</xsl:stylesheet>
 Building the XSLT File
Piecemeal
 Now we need to iterate through all of the
folders for the <drive> element using an
unordered list.
<xsl:stylesheet …>
<xsl:template match="/filesystem/drive">
<b><xsl:value-of select="@letter" /></b>
<ul>
<xsl:for-each select=“//folder">
</xsl:for-each>
</ul>
</xsl:template> Why //folder and
</xsl:stylesheet> not just folder?
 Building the XSLT File
Piecemeal
 Now we need to show each <folder>
element’s name attribute and then enumerate
through its <file> elements.
<xsl:template match="/filesystem/drive">
<b><xsl:value-of select="@letter" /></b>
<ul>
<xsl:for-each select=“//folder">
<li><xsl:value-of select="@name" /></li>
<ul> <xsl:for-each select=“file">
</xsl:for-each></ul>
</xsl:for-each>
</ul>
</xsl:template>
 Building the XSLT File
Piecemeal
 Finally, we need to display each <file>
attribute’s text content (its filename).
<xsl:for-each select=“//folder">
<li><xsl:value-of select="@name" /></li>
<ul>
<xsl:for-each select=“file">
<li><xsl:value-of select=“text()"
/></li>
</xsl:for-each>
</ul>
</xsl:for-each>
Creating the XSLT File in VS.NET
 Let’s create the XSLT file in VS.NET –
please follow along.

 Now that we have an XSLT file, let’s see

how to apply it to an XML document
programmatically!
Using the XslTransform Class
 The XslTransform class is found in the
System.Xml.Xsl namespace.
 Like with the XmlDocument class, the first
thing we need to do with an XslTransform
class is Load XSLT into it via the Load()
method.
 For more information on the XslTransform
class, start with pg. 315 in the XML and
ASP.NET book.
The XslTransform Class’s Load
Method
 The Load() method can accept:
 A string that points to a URL or file path, or
 An XmlReader class instance, or
 A class instance that implements the
IXPathNavigable interface (typically an
XmlNode, XmlDocument, or
XmlPathDocument).
Refer to pg. 318, Table 6.12
Transforming an XML Document
 To transform an XML document with the
XslTransform class, use the Transform()
method.
 There are a number of variants of this
method. For example, you can specify the
input XML file and the output XML file, or the
XmlDocument to transform and a Stream to
write the output.
Examine the docs…
 Creating an Application to
Perform Transformations
 We will create a new VS.NET Windows Application
(either in VB.NET or C#) (feel free to follow along).
 Our application will allow the user to, upon clicking
a button, specify an XML file, an XSL file, and an
output file, and the XML document will be
transformed using the XSLT, with the resulting XML
saved to the specified output file path.
 Performing the Transformation
 The source code for actually performing
the transformation is trivial:
XslTransform xslt = new XslTransform();
xslt.Load(xslFile);
xslt.Transform(xmlFile, outputFile);

The above assumes xslFile is a file path for the XSL file,
xmlFile a file path for the XML document and outputFile a
file path for the transformed output to be written.
 Performing the Transformation
(in VB.NET)

Dim xslt as XslTransform = New XslTransform()

xslt.Load(xslFile)
xslt.Transform(xmlFile, outputFile)
When Using XslTransform
 Be sure to add the appropriate Import
or using statements.
 Imports System.Xml
 Imports System.Xml.Xsl
- and for C# -
 using System.Xml;
 using System.Xml.Xsl;
 Some Notes About the
Transformation
 Examine the transformed content:
<?xml version="1.0" encoding="utf-8"?><b>C</b><br
/><ul><li>My
Programs</li><ul></ul><li>Games</li><ul></ul><li>Quak
e</li><ul><li>quake.exe</li><li>README.txt</
li><li>EULA.txt</li></ul><li>SavedGames</
li><ul><li>game1.sav</li><li>game2.sav</li></
ul><li>Windows</li><ul><li>win.exe</li></
ul><li>System32</li><ul></ul></ul><b>D</b><br
/><ul><li>Backup</li><ul><li>2003-06-01.bak</li><li>2
003-06-07.bak</li></ul></ul>
Some Notes About the
Transform
 Notice that the transform content contains the XML pre-processing directive:

 All of the content is jammed together – white space was not preserved. (This
doesn’t really matter if you’re translating XML to be displayed in an HTML Web page,
<?xml
since HTML is notversion="1.0" encoding="UTF-8"
whitespace-sensitive. ) ?>
 “Fixing” the Output
 To remove the pre-processing directive,
we can use the XSLT <xsl:output
method="html" /> element.
 To preserve whitespace, we can use
<xsl:preserve-space
elements=“elementList” />

Note that both of these elements must appear at the

same nesting level of the <xsl:template> element.
 The New, “Fixed” XSLT
Document
<?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" />
<xsl:preserve-space elements="*" />
<xsl:template match="/filesystem/drive">
<b><xsl:value-of select="@letter" /></b><br />
<ul>
<xsl:for-each select=".//folder">
<li><xsl:value-of select="@name" /></li>
<ul>
<xsl:for-each select="file">
<li><xsl:value-of select="text()" /></li>
</xsl:for-each>
</ul>
</xsl:for-each>
</ul>
</xsl:template>
</xsl:stylesheet>
Displaying Formatted XML
Content in a Web Page
 Displaying XSLT-formatted XML content in a
Web page can be done in one of two ways:
 Client-side – This technique sends the raw XML
and XSLT content to the Web browser, which then
formats the XML. (User must use a Web browser
that supports this features (IE 5.0+, for
example).)
 Server-side – The XML is transformed on the
Web server, and the transformed content is then
sent to the Web browser – works with any Web
browser.
Server-Side Transformation
with ASP.NET
 With ASP.NET, performing server-isde
transformations is a breeze with the
XML Web control.
 With the XML Web control, simply
specify the XML file path and the XSL
file path, and it does everything for
you!
 Server-Side Transformation
with ASP.NET
 For example, the following ASP.NET Web page
would display the HTML in the filesystem
transformation we examined just a few slides ago:
<html>
<body>
<asp:xml runat="server“
DocumentSource="FileSystem.xml"

TransformSource="FormatFileSystemData.xsl" />
</body>
</html>
 The HTML Sent to the Browser:
The Visitor’s Web Browser:
 For More Information on the
ASP.NET XML Web Control…

 See pgs. 322-324 in XML and ASP.NET

 See http://aspfaqs.com/aspfaqs/ShowFAQ.asp?FAQID=204
 See http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/vbcon/html/vbconXMLWebServerControl.asp
Conclusion
 XSL is designed to translate XML content from
one form to another.
 XSL is comprised of:
 XPath
 XSLT
 XSL Formatting Objects (XSLFO or XFO)
 XSLT transformations are specified via an
XML-formatted document that includes
templates, for-each, and value-of constructs.
Questions?