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: XSLT – (XSL Tranformation) the syntax used for transforming an XML document to another format. XPath – the syntax used to access particular elements or attributes of an XML document. 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"> <xsl:value-of select="@name" /> </xsl:for-each> </xsl:template> What would this XSLT document’s 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: Edit the XSLT file by hand each time you create a new one, adding the xsl namespace where needed. 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> </xsl:stylesheet> Why //folder and 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>Quake</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>2003-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, since HTML is not whitespace-sensitive.) <?xml version="1.0" encoding="UTF-8" ?>

“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> <xsl:for-each select="file"> <li><xsl:value-of select="text()" /></li> </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 Visitor’s Web Browser: 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?