Easy XML: XSLT

Explore the wonders of XML with XSL templates, value-of, for-each and many more.

Posted by Rishi Raj Gujadhur 1/19/2016

Table of content

 

Prerequisites
 

  • You are an apprentice in HTML and XML.
 

A. What is XSLT?

 
  • XSLT stands for extensible stylesheet language transformations.
 
  • The XSLT language is used to convert an XML document to a XHTML document or to another XML document.
 
  • Using XSLT you can manage elements and their attributes. For instance you can hide or display certain elements or attributes. 
 
  • XSLT uses the XSL language to style XML just like the CSS language is used to style HTML.
 

B. Style Sheet Declaration


The root element is used to declare the document as an XSL style sheet as shown below:
 
  • <xsl:stylesheet
 
  • xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 
  • version="1.0">
           ...
  • </xsl:stylesheet>
 
<xsl:stylesheet ----> Root element

xsl ----> Prefix

To access XSLT elements and attributes, our namespace should point to http://www.w3.org/1999/XSL/Transform 

version="1.0" ----> There are several versions of XSLT that can be utilized.

Make sure to have a visit the w3 website using for following link to learn more about xslt versions: http://www.w3.org/1999/XSL/Transform 
 

C. XSL Template


A template consist of rules to apply to a specified xml element.

1. Type:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <html>
  <body>
  </body>
  </html>
</xsl:template>
</xsl:stylesheet>
 

<xsl:template> ----> define a template.

match="/" ----> this attribute reference our template to the root element of a XML document using the template.

Notice that the content inside of the xsl template is typed in the HTML language.

2. Save the document as style.xsl.

3. Proceed to the Value-of section of this tutorial.
 

D. Link XSL To XML


1. Type the following codes notepad++

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
 
<? ----> Start of the reference tag.

xml-stylesheet ----> Keyword use when you want to reference an XSL stylesheet in your xml document.

type="text/xsl" ----> Pointing out that the document type we are referencing an to XSL document.

href="style.xsl"?> ----> Adding the path of the XSL document using the HTML href attribute. Notice that the root was not specified since the XML document and the XSL document were on the same root.

?> ----> End of the reference tag.

<catalog>
   
   <Game>
    <title>Need For Speed</title>
    <price>10.90</price>
    <year>2015</year>
   </Game>
  
   <Game>
    <title>Froza Horizon 2</title>
    <price>10.90</price>
    <year>2015</year>
   </Game>
    
   <Game>
    <title>Tekken 6</title>
    <price>10.90</price>
    <year>2015</year>
   </Game>
   
</catalog>

2. Save the document as myStore.xml
 

E. Value-of


1. Between the body tags of the previously created style.XSL template, type:

<xsl:value-of select="title"/> 
 

<xsl:value-of select="catalog/Game/title"/> ----> Extract the value of a specified XML element.

select="catalog/Game/title" ---->  specified XML element

catalog/Game/title ----> XPATH code. XPATH is a language use to query XML. XPATH be soon covered in the intermediate XML tutorial on Channel R.


2. Save the xsl document.

3. Open the store.xml file using the Windows Internet Explorer web browser.
 

Want to test an XML document in Google Chrome?

Try the following link: http://stackoverflow.com/questions/2904973/why-cant-i-get-xslt-to-work-in-chrome 

For the sake of simplicity, I am using the Windows Internet Explorer web browser in this tutorial.

Result: 

F. For-each


1.  Between the body tag in the style.xsl document, type:

<xsl:for-each select="catalog/Game">
 
<xsl:for-each select="catalog/Game"> ----> The XSL <xsl:for-each> select every XML element of the specified Game element.

<xsl:value-of select="title"/>

<br/>

</xsl:for-each>

2. Save the xsl document again.

3. Open the store.xml file using Windows Internet Explorer web browser to see the changes made.

Result: 
 

G. Next step


Your mission should you choose to accept it, is to apply all concepts that you learned in this tutorial using Notepad ++.