In the previous tutorial I went over the basics of using XSLT to create a page based on XML data.

I only showed how to use data that was in the contents of the XML tags I’d like to take that a little further and show how to use the attributes as well. For these examples I’ll be using this XML data, FruitList.xml. I’ll include all the XSLT example code as well as a link to the results with each example.

Attributes are used by included in the path. Instead of the forward slash you use an at symbol, @, before the name. So in our example file we can get the color attribute of the Fruit tags with this path:
/List/Fruit/@Color
This is a valid path for any of the XSL tags, such as the xsl:value-of tag:
<xsl:value-of select="/List/Fruit/@Color" />
This will also work with relative paths. Just exclude the portion of the path that was set from a previous tag.

Here is an example XSL file that loops through all of the Fruit tags in the XML data and displays their contents and their Color attribute in a table, when combined with the sample XML data we get this result.

Thats how we read attributes from the XML data. What if we also need to specify an attribute in the HTML we’re generating? Lets say that color value specifies the font color we’re supposed to use instead of data. To do that you follow the tag you’d like to add the attribute to with an xsl:attribute tag. The contents of the xsl:attribute tag will be the value assigned to the attribute.

<td>
  <xsl:attribute name="style">
    color:<xsl:value-of select="@Color"/>;
  </xsl:attribute>
  <xsl:value-of select="."/>
</td>

In our example we’d like to set the font color of the td tag for the name. So we’d follow the td with the xsl:attribute tag. The name attribute of the xsl:attribute tag is the name of the attribute we’d like to set. The xsl:attribute tag will permit the use of plain text as well as XSLT tags, we’ll have to use both in this example. Here is the full XSL file, and combined with the XML data we get this result.

Next I’d like to go over how to use parameters and variables in XSLT. These are both similar to defined constants in other programming languages. You can assign specific values to them and when needed retrieve the value using the parameter name. This is ideal for values that you need to use often, and may need to be changed. They both also have a fixed scope, which means that in some areas of the XSLT where they will be accessible and in others they won’t.

<xsl:param name="XSLParam">Param Contents</xsl:param>
<xsl:variable name="XSLVar">Var Contents</xsl:variable>

You set a variable using a xsl:variable and a parameter with xsl:param tags. The name attribute sets the name of the parameter of variable. The contents of the tag will be the value stored in the parameter or variable.

When you’d like to retrieve the contents of the variable or command you can do so using the xsl:value-of tag. You use a dollar sign followed by the name of the variable or parameter. If you need to embed the parameter or variable into a quoted string you also must enclose it in curly braces.

<xsl:param name="XSLParam">Param Contents</xsl:param>
<xsl:variable name="XSLVar">Var Contents</xsl:variable>
<xsl:variable name="FontSize">10pt</xsl:variable>
 
<xsl:value-of select="$XSLParam" />
<xsl:value-of select="$XSLVariable" />
<font size="{$FontSize}">Sized Text</font>

I should explain the concept of scope when it comes to parameters and variables. There are two ways you can scope parameters and variables; locally and globally. Local scope means that you set the parameter or variable inside a xsl:template tag, these parameters and variables are only available inside of that specific xsl:template tag. Global scope meas the parameter of variable is set inside the xsl:stylesheet tag, these parameters and variables are available throughout the entire XSL file.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:variable name="GlobalVar">Global Variable</xsl:variable>
<xsl:param name="GlobalParam">Global Parameter</xsl:param>
 
<xsl:template match="/">
<xsl:variable name="LocalVar">Local Variable</xsl:variable>
<xsl:param name="LocalVar">Local Parameter</xsl:param>
</xsl:template>


At this point you might be wondering whats the difference between parameters and templates, so far everything about them is exactly the same. In terms of how you use them inside of the XSLT they are the same. The difference is that parameters can be set in multiple ways, the value set in the xsl:param tag is a default value. For example when you use an xsl:apply-templates tag you can specify what values the parameters have, this will override the default value.

<xsl:apply-templates select="Fruit">
  <xsl:with-param name="FontSize">10pt</xsl:with-param>
</xsl:apply-templates>
 
<xsl:template match="Fruit">
  <xsl:param name="FontSize">6pt</xsl:param>
</xsl:template>

The xsl:with-param tag is how we specify parameter values to use when applying a template. In this example we’re overriding the default value of the FontSize parameter which a value specified when we apply the template. The xsl:with-param tag name attribute is the name of the parameter to set and its contents is the new value to use.

Here is a full example XSL file, and combined with the XML data we get this result.