The next ability of XSLT is sorting. That is putting a list of data into alphabetical order. This can be used on its own or in combination with the filtering methods discussed on the previous page.

Imagine a much larger list of movies in our XML file. (I am really lazy and don't want to type out a bunch more, so I am relying on your imagination here.). To sort through these and prepare them using normal HTML coding would probably take a good part of the day. Using XSLT, it takes one command line.

The **sort** command will alphabetically sort the list according to the tag specified.

We will add the sort command to adjust the records according to the movie titles. The sort command is placed within the for-each command area.

<Code
  language="xml"
  text={`<?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>
        <table border="1">
          <xsl:for-each select="list_of_movies/movie">
            <xsl:sort select="title"/>
            <tr>
              <td> <xsl:value-of select="title"/> </td>
              <td> <xsl:value-of select="age_group"/> </td>
              <td> <xsl:value-of select="comments"/> </td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>`}
/>

You can now view the XML page...

Learn about data sorting when styling XML with XSLT.

Data Sorting

Using XML and XSLT, this is really starting to look and feel like a database.

Wouldn't it be interesting if we could filter out a specific bunch of records depending on an equation? Modifying the for-each command, this is actually possible!

A filter can understand four basic equations...
* =	is equal to
* !=	is not equal to
* <	is less than
* \>	is greater than

We will adjust the for-each command to filter out and display only the records showing ALL for the age_group values.

<Code
  language="xml"
  text={`<?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>
        <table border="1">
          <xsl:for-each select="list_of_movies/movie[age_group='All']">
            <tr>
              <td> <xsl:value-of select="title"/> </td>
              <td> <xsl:value-of select="age_group"/> </td>
              <td> <xsl:value-of select="comments"/> </td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>`}
/>

You can now view the XML page...

I know, it is a rather small example, but just imagine a huge list of movies are in there and only a few of them are labelled with the age_group value of All.

One very important thing to remember is that spelling, CaSe LeTtErInG, and spacing counts! To filter the results correctly, the parameter must match the values being looked at.

Output Filtering

Ok, so far a single entry can be viewed through the XSL template using the value-of command. The next step is to use the **for-each** command to loop through all of the groups found in the XML file.

<Code
  language="xml"
  text={`<?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>
        <table border="1">
          <xsl:for-each select="list_of_movies/movie">
            <tr>
              <td> <xsl:value-of select="title"/> </td>
              <td> <xsl:value-of select="age_group"/> </td>
              <td> <xsl:value-of select="comments"/> </td>
            </tr>
          </xsl:for-each>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>`}
/>

The first effect the for-each command does is create a loop. It will go through each of the "nodes" to extract the information. The second effect is in the select value. It creates a base path so your value-of commands just have to show the actual tag reference instead of the full path.

Since the for-each loop is around the TR tags, it will create a new Table Row for each loop it does.

You can now view the XML page...

Learn about how to loop through elements in XSLT with the for-each command.

for-each

The command value-of will display information from the file at a specific point.

We will adjust the template to create a table format and show the information out of the XML data...

<Code
  language="xml"
  text={`<?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>
        <table border="1">
          <tr>
            <td> <xsl:value-of select="list_of_movies/movie/title"/> </td>
            <td> <xsl:value-of select="list_of_movies/movie/age_group"/> </td>
            <td> <xsl:value-of select="list_of_movies/movie/comments"/> </td>
          </tr>
        </table>
      </body>
    </html>
  </xsl:template>
</xsl:stylesheet>`}
/>

The command will extract the information from the path in the select value.

You can now view the XML page...

Learn about how you can use the value-of command in XSLT.

value-of

Most of the template section of an XSL page is an ordinary HTML document. Everything starting from \<html\> down to the \</html\>.

<Code
  language="xml"
  text={`<?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>
            Information will be seen in here.
         </body>
      </html>
   </xsl:template>
</xsl:stylesheet>`}
/>

We will save this as "example.xsl" and add the connection command line into our previous XML document example...

<Code
  language="xml"
  text={`<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="example.xsl"?>
<list_of_movies>
   <movie>
      <title> Finding Nemo </title>
      <age_group> Kids </age_group>
      <comments> Fish are friends, not food. </comments>
   </movie>
   <movie>
      <title> Monty Python Holy Grail </title>
      <age_group> Adult </age_group>
      <comments> A shrubbery for the Knights who say Nee! </comments>
   </movie>
   <movie>
      <title> Harry Potter </title>
      <age_group> All </age_group>
      <comments> Very popular for all ages. </comments>
   </movie>
</list_of_movies>`}
/>

You can now view the XML page...

Learn all about XSLT templates and how they can be used.

XSLT Template

An XSLT page is a template made with HTML tags. It is a text document that is saved with the .xsl extension.

The main XSL tags are:

<Code
  language="xml"
  text={`<?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="/">
    template tags go in here.
  </xsl:template>
</xsl:stylesheet>`}
/>

The first line is the same as an XML document. Since we are working with XML still, we have to specify that to the browser.

The next line...

<Code
  language="xml"
  text={`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">`}
/>

Specifies that we are using XSL to format some information. The second part in the line is called a namespace. It connects to a set of instructions on the W3C site which will allow the XSL to work correctly.

Onto the next line...

<Code
  language="xml"
  text={`<xsl:template match="/">`}
/>

This starts the template area. The template area will hold the essentials of a normal HTML page. This will be used to format the data collected from the XML page.

After the template coding, the template command and stylesheet must be closed.

<Code
  language="xml"
  text={`</xsl:template>
</xsl:stylesheet>`}
/>

Learn all about XSLT tags and how they're used.

XSLT Tags

XSLT stands for eXtensible Stylesheet Language Transform. It basically will take the information provided by the XML document and transform it using a template into a formatted viewable document.

XSLT is a pumped up version of CSS. It is a text document saved with the **.xsl** extension.

To connect an XSL document to an XML document, this must be placed into the XML document:

<Code
  language="xml"
  text={`<?xml-styleheet href="filename.xsl" type="text/xsl" ?>`}
/>

It is very similar to the line used to connect a CSS page, but the extension XSL is used in the filename and in the TYPE value.

An XSL document will look very similar to a regular HTML page of code. In a way, it is. It is a template for formatting the XML information.

XSLT

Author

Table of Contents

Learn More About XSLT