Skip to main content

XSLT QUICK GUIDE

EXtensible Stylesheet Language Transformation commonly known as XSLT is a way to transform the XML document into other formats such as XHTML.
XSL
Before learning XSLT, we should first understand XSL which stands for EXtensible Stylesheet Language. It is similar to XML as CSS is to HTML.
Need for XSL
In case of HTML document, tags are predefined such as table, div, and span; and the browser knows how to add style to them and display those using CSS styles. But in case of XML documents, tags are not predefined. In order to understand and style an XML document, World Wide Web Consortium (W3C) developed XSL which can act as XML based Stylesheet Language. An XSL document specifies how a browser should render an XML document.
Following are the main parts of XSL −
·        XSLT − used to transform XML document into various other types of document.
·        XPath − used to navigate XML document.
·        XSL-FO − used to format XML document.

What is XSLT
XSLT, Extensible Stylesheet Language Transformations, provides the ability to transform XML data from one format to another automatically.
How XSLT Works
An XSLT stylesheet is used to define the transformation rules to be applied on the target XML document. XSLT stylesheet is written in XML format. XSLT Processor takes the XSLT stylesheet and applies the transformation rules on the target XML document and then it generates a formatted document in the form of XML, HTML, or text format. This formatted document is then utilized by XSLT formatter to generate the actual output which is to be displayed to the end-user.

Advantages
Here are the advantages of using XSLT −
·        Independent of programming. Transformations are written in a separate xsl file which is again an XML document.
·        Output can be altered by simply modifying the transformations in xsl file. No need to change any code. So Web designers can edit the stylesheet and can see the change in the output quickly.



Let’s suppose we have the following sample XML file, students.xml, which is required to be transformed into a well-formatted HTML document.
students.xml
<?xml version = "1.0"?>
<class>
   <student rollno = "393">
      <firstname>Dinkar</firstname>
      <lastname>Kad</lastname>
      <nickname>Dinkar</nickname>
      <marks>85</marks>
   </student>
   <student rollno = "493">
      <firstname>Vaneet</firstname>
      <lastname>Gupta</lastname>
      <nickname>Vinni</nickname>
      <marks>95</marks>
   </student>
   <student rollno = "593">
      <firstname>Jasvir</firstname>
      <lastname>Singh</lastname>
      <nickname>Jazz</nickname>
      <marks>90</marks>
   </student>
</class>
We need to define an XSLT style sheet document for the above XML document to meet the following criteria −
·        Page should have a title Students.
·        Page should have a table of student details.
·        Columns should have following headers: Roll No, First Name, Last Name, Nick Name, Marks
·        Table must contain details of the students accordingly.
Step 1: Create XSLT document:
Create an XSLT document to meet the above requirements, name it as students.xsl and save it in the same location where students.xml lies.
<xsl:template> defines a way to reuse templates in order to generate the desired output for nodes of a particular type/context.

Declaration

Following is the syntax declaration of <xsl:template> element.
<xsl:template 
   name = Qname 
   match = Pattern 
   priority = number 
   mode = QName >
</xsl:template>

<xsl:value-of> tag puts the value of the selected node as per XPath expression, as text.

Declaration

Following is the syntax declaration of <xsl:value-of> element.
<xsl:value-of
   select = Expression
   disable-output-escaping = "yes" | "no" >
</xsl:value-of>

<xsl:for-each> tag applies a template repeatedly for each node.

Declaration

Following is the syntax declaration of <xsl:for-each> element
<xsl:for-each
   select = Expression >  
</xsl:for-each>

students.xsl
<?xml version = "1.0" encoding = "UTF-8"?>
<!-- xsl stylesheet declaration with xsl namespace:
Namespace tells the xlst processor about which
element is to be processed and which is used for output purpose only
-->
<xsl:stylesheet version = "1.0"
xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">  
<!-- xsl template declaration: 
template tells the xlst processor about the section of xml
document which is to be formatted. It takes an XPath expression.
In our case, it is matching document root element and will
tell processor to process the entire document with this template.
-->
   <xsl:template match = "/">
      <!-- HTML tags
         Used for formatting purpose. Processor will skip them and browser
            will simply render them.
      -->
                
      <html>
         <body>
            <h2>Students</h2>
                                  
            <table border = "1">
               <tr bgcolor = "#9acd32">
                  <th>Roll No</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                  <th>Nick Name</th>
                  <th>Marks</th>
               </tr>
                                  
               <!-- for-each processing instruction
               Looks for each element matching the XPath expression
               -->
                                  
               <xsl:for-each select="class/student">
                  <tr>
                     <td>
                        <!-- value-of processing instruction
                        process the value of the element matching the XPath expression
                        -->
                        <xsl:value-of select = "@rollno"/>
                     </td>
                                                   
                     <td><xsl:value-of select = "firstname"/></td>
                     <td><xsl:value-of select = "lastname"/></td>
                     <td><xsl:value-of select = "nickname"/></td>
                     <td><xsl:value-of select = "marks"/></td>
                                                   
                  </tr>
               </xsl:for-each>
                                           
            </table>
         </body>
      </html>
   </xsl:template> 
</xsl:stylesheet>
Step 2: Link the XSLT Document to the XML Document
Update student.xml document with the following xml-stylesheet tag. Set href value to students.xsl
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/xsl" href = "students.xsl"?>
<class>
...
</class>
Step 3: View the XML Document in Internet Explorer
students.xml
<?xml version = "1.0"?>
<?xml-stylesheet type = "text/xsl" href = "students.xsl"?>
<class>
   <student rollno = "393">
      <firstname>Dinkar</firstname>
      <lastname>Kad</lastname>
      <nickname>Dinkar</nickname>
      <marks>85</marks>
   </student>
   <student rollno = "493">
      <firstname>Vaneet</firstname>
      <lastname>Gupta</lastname>
      <nickname>Vinni</nickname>
      <marks>95</marks>
   </student>
   <student rollno = "593">
      <firstname>Jasvir</firstname>
      <lastname>Singh</lastname>
      <nickname>Jazz</nickname>
      <marks>90</marks>
   </student>
</class>  

Comments

  1. Nice blog and absolutely outstanding. You can do something much better but i still say this perfect.Keep trying for the best. Hire Web and App Developers

    ReplyDelete
  2. Web Expert India are a popular and reputed website design and development company in India.Our Delhi based young professionals are highly dedicated and concentrate on availing quality services to our precious clients. We have a good clientage from all over India.
    VIEW MORE:- Web Designing Company in India, Delhi
    Thankyou..

    ReplyDelete
  3. Great info. Lucky me I found your site by accident (stumbleupon). I have saved KBC Lottery Winner as a favorite for later!

    ReplyDelete
  4. The users do witness face technical snags associated with the D Link Router login or D Link IP address. If you are stuck and want to find out the ways to find the IP address, you are supposed to press the Windows key +R together. Now, you should type cmd in the box and then click on the ok button. Now, at the prompt, you must type ipconfig and then enter. Now, soon this will display the IP address, subnet mask, and default gateway of your adapter.

    ReplyDelete

Post a Comment

Popular posts from this blog

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><