Introduction to XSL With Examples

Discussion in 'JavaScript and AJAX' started by MinalS, Aug 30, 2014.

  1. MinalS

    MinalS New Member

    Joined:
    Jul 8, 2014
    Messages:
    138
    Likes Received:
    32
    Trophy Points:
    0
    When the user creates a document in HTML, the browser is capable of understanding and using the tags. When XML is used, the browser does not know how to display the elements. The XSL language is used for this purpose.

    The XSL language has two parts as follows
    1. XSL Transformation (XSLT): The XML based language helps user to transfer the XML document into different formats. The format can be HTML or XHTML.
    2. XML Path: The language is used to access the part of the XML document. It can consist of elements and attributes.
    The XSL consists of the formatting objects for specifying the data display. It contains the instructions for displaying the data. It decides whether the data should be displayed as HTML or XHTML document. The XML Path expressions are used to extract the specific information from the document. The expressions can have logical, mathematical, relational operators for specifying the condition.

    The advantages of XSLT over the CSS are as listed below:
    1. User can reorder the elements by adding, deleting or reordering them.
    2. The comments, PI, and attribute names and values and can manipulated using XSLT.
    3. The elements representation can be modified to the tree structure using the functions.
    4. They are written using the XML language.

    Working of the XSLT Processor



    The structure diagram for the XSLT processor is as shown below:

    [​IMG]

    The MSXML parser is used to parse an XSLT document. The XSLT is an XML document. The parser parses the XSLT style sheet and creates a tree structure. The structure is based on the elements and attributes. The tree is referred as the XSLT tree. The processor component of the MSXML parser takes the information in the XSLT style sheet, applies the data and builds the tree structure referring the result tree.

    Formatting the Data through XSLT



    XSLT provides the following elements to select and format the data.
    1. stylesheet
    2. value – of
    3. for – each
    4. sort
    5. text
    1. stylesheet element: The element is added to the XSLT file for instructing the browser that the file is a style sheet. The syntax for the style sheet declaration is as follows:

    Code:
    <xsl: stylesheet xmlns: xsl="http://www.w3.org/1999/XSL/Transform"  version="1.0" >
    The element is the root element for the style sheets. The xsl prefix is the reference to the namespace URL for the XSLT.

    2. value – of: The element is used to display the value of the specified element or attribute. The syntax for the element is as shown below:

    Code:
    <xsl: value –of select="elementname/attributename" />
    In the above syntax, elementname/attributename represents the name of the element and the value of the attribute.

    The following example demonstrates the use of value – of element.

    Code:
    <xsl: value - of select="@STUDID" />
    Consider an example of the Department in an XML file. The code in the xml file is as shown below:

    Code:
    <? xml version="1.0" encoding="utf-8" ?>
    <? xml-stylesheet type="text/xsl" href="XSLTFile1.xslt" ?>
    <Department>
        <division>
            <Deptname>Sales</Deptname>
            <Manager>Amit</Manager>
            <country>India</country>
        </division>
        <division>
            <Deptname>HR</Deptname>
            <Manager>Nikhil</Manager>
            <country>UK</country>
        </division>
    </Department>
    
    The following code is added in the xslt file.

    Code:
    <xsl: template match="/">
        <html>
            <body>
            <h3>Department Details</h3>
            <table border="2">
            <tr>
                   <th>Deptname</th>
                   <th>Manager</th>
                   <th>country</th>
            </tr>
            <tr>
                 <td>
                  <xsl: value – of select="Department/division/Deptname" />
                  </td>
                  <td>
                  <xsl: value – of select="Department/division/Manager" />
                  </td>
                  <td>
                  <xsl: value – of select="Department/division/country" />
                 </td>
            </tr>
            </table>
            </body>
        </html>
    </xsl:template>
    
    The output is as shown below:

    [​IMG]

    3. The for-each element: The element is used to direct the processor about the information for the instance of the specified pattern. The syntax for the for – each element is:

    Code:
    <xsl: for – each select="pattern" >
        [action to be performed]
    </xsl: for – each>
    
    The pattern element can take several values. Some of them are as listed below

    1. element: It is used for performing the specifies action on each occurrence. The example of element attribute is as shown below:

    Code:
    <xsl: for – each select = " STUDENT" >
    In the above code, the specified action is performed on each occurrence of the STUDENT element.

    2. parent/child: It performs the specified action for each occurrence of the element in the parent child hierarchy. The example of the parent/child attribute is as shown below:

    Code:
    <xsl: for – each select = " STUDENTINFO/STUDENTID">
    In the above sample, the action is performed for each occurrence of the STUDENTID element that has the STUDENTINFO element as the parent.

    3. ancestor//child: It applies the action to the specific element that has an element as its ancestor. The example for the for – each element in the select statement is as shown below:

    Consider the same Department XML file.
    Code:
    <? xml version="1.0" encoding="utf-8" ?>
    <? xml-stylesheet type="text/xsl" href="XSLTFile1.xslt" ?>
    <Department>
        <division>
            <Deptname>Sales</Deptname>
            <Manager>Amit</Manager>
            <country>India</country>
        </division>
        <division>
            <Deptname>HR</Deptname>
            <Manager>Nikhil</Manager>
            <country>UK</country>
        </division>
    </Department>
    
    The XSLT file consists of the following code.

    Code:
    <xsl: template match="/">
        <html>
              <body>
            <h3>Department Details</h3>
            <table border="2">
             <tr>
                   <th>Deptname</th>
                   <th>Manager</th>
                   <th>country</th>
            </tr>
            <xsl: for - each select="Department/division">
            <tr>
                  <td>
                  <xsl: value – of select="Deptname" />
                  </td>
                  <td>
                  <xsl: value – of select="Manager" />
                  </td>
                  <td>
                  <xsl: value – of select="country" />
                  </td>
             </tr>
            <xsl: for – each>
             </table>
            </body>
                </html>
    </xsl:template>
    
    The output for the code is as shown below:

    [​IMG]

    4. sort element

    The element is used to sort the data on the value assigned to the elements and its attributes. It does not contain any child elements.

    The syntax for the sort element is as shown below:

    Code:
    <xsl:sort select="expression" order="ascending|descending" case – order="upper-first|lower-first" data-type="text|number|qname" />
    The attributes of the sort element are as mentioned below:
    1. select: It represents the element name.
    2. order: It represents the sort order. The default value is ascending order.
    3. case – order: It represents the case of the letters. The value can be lowercase or uppercase.
    4. data –type: It represents the data type of the data to be sorted. It can be a number, text, or user defined.
    Consider the example of the Book Data for demonstrating the sort element.

    Code:
    <? xml version="1.0" encoding="utf-8" ?>
    <?xml styleshet type="text/xsl" href="XSLTFile1.xslt" ?>
    <BookData>
        <Book>
            <Title>Working with ASP.NET </Title>
            <Author>Willey </Author>
            <Price>2000</Price>
        </Book>
        <Book>
            <Title>Working with C#.NET </Title>
            <Author>Petee </Author>
            <Price>1500</Price>
        </Book>
    </BookData>
    
    The XSLTFile consists of the following code.

    Code:
    <xsl: template match="/">
        <html>
              <body>
            <h3>Book Details</h3>
            <table border="2">
             <tr>
                   <th>Title</th>
                   <th>Author</th>
                   <th>Price</th>
            </tr>
            <xsl: for - each select="BookData/Book">
            <xsl: sort select="Author"></xsl:sort>
            <tr>
                  <td>
                  <xsl: value – of select="Title" />
                  </td>
                  <td>
                  <xsl: value – of select="Author" />
                  </td>
                  <td>
                  <xsl: value – of select="Price" />
                  </td>
             </tr>
            <xsl: for – each>
             </table>
            </body>
                </html>
    </xsl:template>
    
    The output for the code is as shown below

    [​IMG]

    5. text element

    The element is used to generate the text in the output. It is sued for displaying the static text as labels.

    The syntax for displaying the text element is as shown below:

    Code:
    <xsl: template match=" a- node">
        <xsl:text>
        </xsl:text>
    </xsl: template>
    
    Consider an example to Account Details. The XML file consists of the following text.

    Code:
    <? xml version="1.0" encoding="utf-8"?>
    <? xml stylesheet type="text/xsl" href="XSLTFile1.xslt" ?>
    <Account>
        <text>AccountName</text>
        <text>AccountType</text>
    </Account>
    
    The XSLT file consists of the following code.

    Code:
    <xsl: template match="/" >
        <xsl: apply-templates></xsl:apply-templates>
    </xsl: template >
    
    <xsl: template match="text">
    <xsl:Text>AccountType</xsl:Text>
    <xsl: Text>AccountName</xsl:Text>
    </xsl: template>
    
    The output for the code is as shown below:

    [​IMG]

    Creating the template rules for XSLT



    The template rules are used to define the XML element and its contents are converted into a format that can be displayed in the browser. The template consists of two parts.
    1. Pattern identifying the XML element in the document.
    2. Action or code that provides the details and rendering of the element.
    The elements template and apply – template are used for creating template rules in XML

    The template element



    The element is used to define the template for the desired output. The syntax for using element is as shown below:

    Code:
    <xsl: template match="pattern" >
    [action to be taken]
    </xsl: template>
    
    The following list shows the values that can be added to the pattern attribute.

    1. /: It starts performing the specified action from the root element of the tree structure.

    The example for demonstrating the element is as shown below:

    Code:
    <xsl: template match= "/" >
    2. *: It matches any element in the XML document. It is used as a wildcard character.

    The example to demonstrate the element is as shown below:

    Code:
    <xsl: template match="*" />
    3. element: It performs the action when the named element is matched with specified value.

    The example for the element parameter is as shown below:

    Code:
    <xsl: template match="student" />
    In the above example, the student pattern in matched in the tree structure.

    4. element1 | element2: It matches with the elements specified and performs the action.

    The example is as shown below:

    Code:
    <xsl: template match=" studentname | studentaddress" />
    It matches the studentname and studentaddress and performs the specified action.

    5. element [@attribute]: It performs the action on the attribute of the element.

    The example is as shown below:

    Code:
    <xsl: template match=" student [ @studid] " />
    It matches the studid attribute for the student element.

    6. element [@ attribute=’value’]: It matches the elements that has the specified attribute value.

    The example is as shown below:

    Code:
    <xsl: template match=student [ @studid="1"] />
    It matches the student elements that has student id as 1.

    7. parent/child: It performs the action on the child element that has the specified parameter value as its parent.

    The example is as shown below:

    Code:
    <xsl: template match ="student/firstname" />
    The action is performed on the firstname element that has student as its parent.

    8. ancestor//child: It performs the action on the child element containing an ancestor element.

    The example is as shown below:

    Code:
    <xsl: template match="studentdetials//studname" />

    The apply – templates element



    The element guides the processor to search for the template and perform the specified tasks on each element. The syntax for using the element is as shown below

    Code:
    <xsl: apply – templates [ select= "pattern" ] >
    The select attribute in the declaration is an optional parameter. The template is executed for the child of the current node. The node specified in the select attribute is matched with the pattern that is used in the match attribute of the template element.

    The example for declaring the template and apply- templates is as shown below:

    Code:
    <xsl: stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" />
        <xsl:template match="/" >
            <xsl: apply- templates />
        </xsl: template>
    
    In the above code, the first line states to the processor that the statement is a template. The match attribute indicates the pattern that needs to be located in the source document. The / value specifies that the root element needs to be searched. The apply – templates specifies the template to be applied to all the root elements.
     
    Last edited by a moderator: Jan 21, 2017
    shabbir likes this.

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice