XSL Stands For Extensible Style Sheet Language

XSL stands for EXtensible Stylesheet Language, and is a style sheet language for XML documents.
XSLT stands for XSL Transformations. In this tutorial you will learn how to use XSLT to transform XML documents into other formats, like XHTML.
You might remember from a previous lesson that we can use a language called Extensible Styles Language XSL to format our XML documents. XSL actually comes in two parts - a transformation language (XSLT) and a formatting language using formatting objects. This section of the XML tutorial covers XSLT. XSLT, which stands for Extensible Styles Language Transformations, enables you to transform XML documents into another form. For example, you can take your XML document, combine it with HTML/CSS, and it will look completely different when viewing it in your user agent/browser.
Processing a Transformation
A transformation can take place in one of three locations:

On the server On the client (for example, your web browser) With a standalone program
The examples in this tutorial will use the client for transforming the XML documents. All XSLT documents need to be well-formed and valid XML documents, so you need to follow the same syntax rules that apply to any other XML document. As well as ensuring that your XSLT documents are valid XML, you need to ensure they are valid XSLT documents. Here's what you need to remember when creating XSLT documents.
XML Version
XSL documents are also XML documents and so we should include the XML version in the document's prolog. We should also set the standalone attribute to "no" as we now rely on an external resource (i.e. the external XSL file).
<?xml version="1.0" standalone="no"?>
XSL Root Element

Then we open the root element - xsl:stylesheet. The root element needs to include the XSL version as well as the XSL namespace (hence the xsl prefix and the xmlns... part). <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
XSL Namespace Prefix

All XSL elements in your XSLT document must include the XSL prefix.
Syntax: <xsl:element_name> Example: <xsl:template match="/"> .... </xsl:template>
XSLT <template> Element

XSLT is all about being able to select one or more nodes from your XML document and transforming or replacing its content with something else. A node could be any of the following: elements, attributes, text, namespaces, processing-instructions, and comments. The <xsl:template> element is what you use to select a node from your XML document and transform its contents. To select an element, you use the match attribute. To transform its contents, you simply place the new content between the opening (<xsl:template>) and closing (</xsl:template>) tags. In this case, I'm selecting the root node (i.e. tutorials). By selecting this node, the template element tells the XSLT processor how to transform the output. What I'm doing here is telling the processor to replace the root node
(i.e. the whole XML document) with what I've written between the <xsl:template> tags. In this case, I have written the contents of an HTML document inside the <xsl:template> tags. When a user views any XML document that uses this XSL document, they will simply see the line "New content..." and the browser's title bar will read "My XSLT Example". <xsl:template match="tutorials"> <html> <head> <title>My XSLT Example</title> </head> <body> <p>New content...</p> </body> </html> </xsl:template>
Selecting the Root Node

In the example above, we selected the "tutorials" node which happens to be the root node of our XML document. Another way of selecting the root node is to use a forward slash in place of the node's name. The following example results in the same output as the above example. Example:
<xsl:template match="/"> <html> <head> <title>My XSLT Example</title> </head> <body> <p>New content...</p> </body> </html> </xsl:template>
XSLT <apply-templates> Element

We've already learned that the <xsl:template> element allows us to select any node in our XML document and transform its contents. You'll probably be happy to learn that we can also use this element to work with the children of that node. The XSLT <xsl:apply-templates/> element allows us to determine where the content of its children appear on our transformed document. Here, we are using two <xsl:template> elements; one for the root node, and one for its children. We have placed the <xsl:apply-templates/> element within the <xsl:template> element for the root node. Doing this applies the results of our other <xsl:template> element.
<body>
<h2>Cool Tutorials</h2> <p>Hey, check out these tutorials!</p> <xsl:apply-templates /> </body> </html> </xsl:template> <xsl:template match="tutorial"> <span class="tutorial-name"> <xsl:value-of select="name" /> </span> <span class="tutorial-url"> <xsl:value-of select="url" /> </span> </xsl:template>
XSLT <value-of> Element

The <xsl:value-of> element allows you to retrieve the value from a node. When using the <xsl:value-of> element, you use the select attribute to specify which node you want to retrieve data from.
<xsl:template match="tutorial"> <span class="tutorial-name"><xsl:value-of select="name"/></span> <span class="tutorial-url"><xsl:value-of select="url"/></span> </xsl:template>
XSLT <for-each> Element

The XSLT <xsl:for-each> element allows you to loop through multiple nodes that match the selection criteria. This in turn, enables you to retrieve data from these nodes. For example, imagine if our XML file had two elements called "name" - each under the "tutorial" element. Like this: <?xml version="1.0" standalone="no"?> <?xml-stylesheet type="text/xsl" href="tutorials.xsl"?> <tutorials> <tutorial> <name>XML Tutorial</name> <name>Homer Flinstone</name> <url>http://www.quackit.com/xml/tutorial</url> </tutorial> <tutorial> <name>HTML Tutorial</name> <name>Fred Simpson</name> <url>http://www.quackit.com/html/tutorial</url> </tutorial> </tutorials> To extract data from both "name" elements, we can use <xsl:for-each> in conjunction with <xsl:value-of>. <xsl:template match="tutorial"> <xsl:for-each select="name"> <xsl:value-of select="."/><xsl:element name="br"/> </xsl:for-each> </xsl:template>
<xsl:sort> Example
Here, we use <xsl:for-each> to loop through each "tutorial" element, and <xsl:sort> to sort by the "name" node. We then use the <xsl:value-of> to extract data from the "name" node. <xsl:template match="tutorials"> <xsl:for-each select="tutorial"> <xsl:sort select="name"/> <xsl:value-of select="name"/><xsl:element name="br"/> </xsl:for-each> </xsl:template>
The Requirement
food.xml
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <?xml-stylesheet type="text/xsl" href="vegetable.xsl"?> <food_list> <food_item type="vegetable"> <name>Agar</name> <carbs_per_serving>81</carbs_per_serving> <fiber_per_serving>8</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>1280</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Asparagus</name> <carbs_per_serving>1</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>40</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Cabbage</name> <carbs_per_serving>0</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>14</kj_per_serving>
</food_item> <food_item type="vegetable"> <name>Potato</name> <carbs_per_serving>21.5</carbs_per_serving> <fiber_per_serving>2</fiber_per_serving> <fat_per_serving>1</fat_per_serving> <kj_per_serving>460</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Pumpkin</name> <carbs_per_serving>6</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>150</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Yam</name> <carbs_per_serving>30.5</carbs_per_serving> <fiber_per_serving>2</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>550</kj_per_serving> </food_item> <food_item type="vegetable"> <name>Zucchini</name> <carbs_per_serving>1.5</carbs_per_serving> <fiber_per_serving>1.5</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>55</kj_per_serving> </food_item> <food_item type="seafood"> <name>Abalone</name> <carbs_per_serving>0</carbs_per_serving> <fiber_per_serving>0</fiber_per_serving> <fat_per_serving>1</fat_per_serving> <kj_per_serving>400</kj_per_serving> </food_item> <food_item type="seafood"> <name>Barramundi</name> <carbs_per_serving>0</carbs_per_serving> <fiber_per_serving>0</fiber_per_serving>
<fat_per_serving>2</fat_per_serving> <kj_per_serving>390</kj_per_serving> </food_item> <food_item type="fruit"> <name>Apple</name> <carbs_per_serving>15</carbs_per_serving> <fiber_per_serving>2.5</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>250</kj_per_serving> </food_item> <food_item type="fruit"> <name>Kiwi Fruit</name> <carbs_per_serving>7.5</carbs_per_serving> <fiber_per_serving>2.5</fiber_per_serving> <fat_per_serving>0</fat_per_serving> <kj_per_serving>150</kj_per_serving> </food_item> <food_item type="grain"> <name>Oatbran</name> <carbs_per_serving>62</carbs_per_serving> <fiber_per_serving>14</fiber_per_serving> <fat_per_serving>7</fat_per_serving> <kj_per_serving>1400</kj_per_serving> </food_item> <food_item type="grain"> <name>Wheatgerm</name> <carbs_per_serving>1.5</carbs_per_serving> <fiber_per_serving>1</fiber_per_serving> <fat_per_serving>0.5</fat_per_serving> <kj_per_serving>70</kj_per_serving> </food_item> </food_list>
vegetable.xls
<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <xsl:apply-templates/> </xsl:template> <xsl:template match="food_list"> <table border="1"> <tr style="background-color:#ccff00"> <th>Food Item</th> <th>Carbs (g)</th> <th>Fiber (g)</th> <th>Fat (g)</th> <th>Energy (kj)</th> </tr> <xsl:for-each select="food_item"> <xsl:if test="@type = 'vegetable'"> <tr style="background-color:#00cc00"> <td><xsl:value-of select="name"/></td> <td><xsl:value-of select="carbs_per_serving"/></td> <td><xsl:value-of select="fiber_per_serving"/></td> <td><xsl:value-of select="fat_per_serving"/></td> <td><xsl:value-of select="kj_per_serving"/></td> </tr> </xsl:if> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet> Now, imagine we're only interested in the vegetables - we only want to display the food that have a type attribute of "vegetable". And, we also want to display it nicely formatted in an HTML table. Something like this:
It Started with XSL

XSL stands for EXtensible Stylesheet Language. The World Wide Web Consortium (W3C) started to develop XSL because there was a need for an XML-based Stylesheet Language.
CSS = Style Sheets for HTML

HTML uses predefined tags, and the meaning of each tag is well understood. The <table> tag in HTML defines a table - and a browser knows how to display it. Adding styles to HTML elements are simple. Telling a browser to display an element in a special font or color, is easy with CSS.
XSL = Style Sheets for XML

XML does not use predefined tags (we can use any tag-names we like), and therefore the meaning of each tag is not well understood. A <table> tag could mean an HTML table, a piece of furniture, or something else - and a browser does not know how to display it.
XSL describes how the XML document should be displayed!
XSL - More Than a Style Sheet Language

XSL consists of three parts:
XSLT - a language for transforming XML documents XPath - a language for navigating in XML documents XSL-FO - a language for formatting XML documents
XSLT is a language for transforming XML documents into XHTML documents or to other XML documents. XPath is a language for navigating in XML documents.
What You Should Already Know

Before you continue you should have a basic understanding of the following:
HTML / XHTML XML / XML Namespaces XPath
If you want to study these subjects first, find the tutorials on our Home page.
What is XSLT?

XSLT XSLT XSLT XSLT XSLT stands for XSL Transformations is the most important part of XSL transforms an XML document into another XML document uses XPath to navigate in XML documents is a W3C Recommendation
XSLT = XSL Transformations

XSLT is the most important part of XSL. XSLT is used to transform an XML document into another XML document, or another type of document that is recognized by a browser, like HTML and XHTML. Normally XSLT does this by transforming each XML element into an (X)HTML element. With XSLT you can add/remove elements and attributes to or from the output file. You can also rearrange and sort elements, perform tests and make decisions about which elements to hide and display, and a lot more.
A common way to describe the transformation process is to say that XSLT transforms an XML source-tree into an XML result-tree.
XSLT Uses XPath

XSLT uses XPath to find information in an XML document. XPath is used to navigate through elements and attributes in XML documents. If you want to study XPath first, please read our XPath Tutorial.
How Does it Work?

In the transformation process, XSLT uses XPath to define parts of the source document that should match one or more predefined templates. When a match is found, XSLT will transform the matching part of the source document into the result document.
Correct Style Sheet Declaration

The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>. Note: <xsl:stylesheet> and <xsl:transform> are completely synonymous and either can be used! The correct way to declare an XSL style sheet according to the W3C XSLT Recommendation is: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> or: <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> To get access to the XSLT elements, attributes and features we must declare the XSLT namespace at the top of the document. The xmlns:xsl="http://www.w3.org/1999/XSL/Transform" points to the official W3C XSLT namespace. If you use this namespace, you must also include the attribute version="1.0".
Start with a Raw XML Document

We want to transform the following XML document ("cdcatalog.xml") into XHTML: <?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist>
. . </catalog>
<country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd>
Viewing XML Files in Firefox and Internet Explorer: Open the XML file (typically by clicking on a link) - The XML document will be displayed with color-coded root and child elements. A plus (+) or minus sign (-) to the left of the elements can be clicked to expand or collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" or "View Source" from the browser menu. Viewing XML Files in Netscape 6: Open the XML file, then right-click in XML file and select "View Page Source". The XML document will then be displayed with color-coded root and child elements. Viewing XML Files in Opera 7: Open the XML file, then right-click in XML file and select "Frame" / "View Source". The XML document will be displayed as plain text. View "cdcatalog.xml"
Create an XSL Style Sheet

Then you create an XSL Style Sheet ("cdcatalog.xsl") with a transformation template: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> View "cdcatalog.xsl"
Link the XSL Style Sheet to the XML Document

Add the XSL style sheet reference to your XML document ("cdcatalog.xml"): <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd> . . </catalog>
XSLT <xsl:template> Element

An XSL style sheet consists of one or more set of rules that are called templates. A template contains rules to apply when a specified node is matched.
The <xsl:template> Element

The <xsl:template> element is used to build templates. The match attribute is used to associate a template with an XML element. The match attribute can also be used to define a template for the entire XML document. The value of the match attribute is an XPath expression (i.e. match="/" defines the whole document). Ok, let's look at a simplified version of the XSL file from the previous chapter:
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>
</tr> <tr> <td>.</td> <td>.</td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Example Explained
Since an XSL style sheet is an XML document, it always begins with the XML declaration: <?xml version="1.0" encoding="ISO-8859-1"?>. The next element, <xsl:stylesheet>, defines that this document is an XSLT style sheet document (along with the version number and XSLT namespace attributes). The <xsl:template> element defines a template. The match="/" attribute associates the template with the root of the XML source document. The content inside the <xsl:template> element defines some HTML to write to the output. The last two lines define the end of the template and the end of the style sheet. The result from this example was a little disappointing, because no data was copied from the XML document to the output. In the next chapter you will learn how to use the <xsl:value-of> element to select values from the XML elements.
XSLT <xsl:value-of> Element

The <xsl:value-of> Element
The <xsl:value-of> element can be used to extract the value of an XML element and add it to the output stream of the transformation:
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th>
<th>Artist</th> </tr> <tr> <td><xsl:value-of select="catalog/cd/title"/></td> <td><xsl:value-of select="catalog/cd/artist"/></td> </tr> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Example Explained
Note: The select attribute in the example above, contains an XPath expression. An XPath expression works like navigating a file system; a forward slash (/) selects subdirectories. The result from the example above was a little disappointing; only one line of data was copied from the XML document to the output. In the next chapter you will learn how to use the <xsl:for-each> element to loop through the XML elements, and display all of the records.
XSLT <xsl:for-each> Element

The <xsl:for-each> element allows you to do looping in XSLT.
The <xsl:for-each> Element

The XSL <xsl:for-each> element can be used to select every XML element of a specified node-set:
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr>
</xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

Try it yourself
Note: The value of the select attribute is an XPath expression. An XPath expression works like navigating a file system; where a forward slash (/) selects subdirectories.
Filtering the Output

We can also filter the output from the XML file by adding a criterion to the select attribute in the <xsl:for-each> element. <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> Legal filter operators are:
= (equal) != (not equal) < less than > greater than
Take a look at the adjusted XSL style sheet:
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template>
</xsl:stylesheet>
XSLT <xsl:sort> Element

The <xsl:sort> element is used to sort the output.
Where to put the Sort Information

To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element in the XSL file:
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Note: The select attribute indicates what XML element to sort on.
XSLT <xsl:if> Element

The <xsl:if> element is used to put a conditional test against the content of the XML file.
The <xsl:if> Element

To put a conditional if test against the content of the XML file, add an <xsl:if> element to the XSL document.
Syntax
<xsl:if test="expression"> ...some output if the expression is true... </xsl:if>
Where to Put the <xsl:if> Element

To add a conditional test, add the <xsl:if> element inside the <xsl:for-each> element in the XSL file:
Example
<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:if> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>
Try it yourself
Note: The value of the required test attribute contains the expression to be evaluated. The code above will only output the title and artist elements of the CDs that has a price that is higher than 10

XSL Stands For Extensible Style Sheet Language

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

XSL Stands For Extensible Style Sheet Language

Caricato da

Copyright:

Formati disponibili

XSL stands for EXtensible Stylesheet Language, and is a style sheet language for XML documents.

<?xml version="1.0" standalone="no"?>

XSL Root Element

XSL Namespace Prefix

XSLT <template> Element

Selecting the Root Node

XSLT <apply-templates> Element

XSLT <value-of> Element

<xsl:template match="tutorial"> <span class="tutorial-name"><xsl:value-of select="name"/></span> <span class="tutorial-url"><xsl:value-of select="url"/></span> </xsl:template>

XSLT <for-each> Element

It Started with XSL

CSS = Style Sheets for HTML

XSL = Style Sheets for XML

XSL describes how the XML document should be displayed!

XSL - More Than a Style Sheet Language

What You Should Already Know

HTML / XHTML XML / XML Namespaces XPath

XSLT = XSL Transformations

XSLT Uses XPath

How Does it Work?

Correct Style Sheet Declaration

Start with a Raw XML Document

<country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year> </cd>

Create an XSL Style Sheet

Link the XSL Style Sheet to the XML Document

XSLT <xsl:template> Element

The <xsl:template> Element

XSLT <xsl:value-of> Element

XSLT <xsl:for-each> Element

The <xsl:for-each> Element

</xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

Filtering the Output

= (equal) != (not equal) &lt; less than &gt; greater than

Take a look at the adjusted XSL style sheet:

XSLT <xsl:sort> Element

Where to put the Sort Information

XSLT <xsl:if> Element

The <xsl:if> Element

Where to Put the <xsl:if> Element

Potrebbero piacerti anche

= (equal) != (not equal) < less than > greater than