Thursday, July 21, 2011

Learning Umbraco in a week - Day III

 

This is my fifth post of the "Learning Umbraco in a week" series. The main agenda of this post is listed below.
  • Introduction to XSLT
  • Introduction to XPath
  • Basic Structure of XSLT
  • How to link XSL Stylesheet to an XML Document?
  • How to apply XSL Transform?

Introduction to XSLT 
XSLT is a document that is applied programmatically to an XML Document to manipulate the data. However, the structure of XSLT resembles that of XML, and contains specialized tags to perform specific actions to the data. 

Introduction to XPath 
XPath is a language for navigating in XML documents. Moreover, XPath is used by XSLT to find information in an XML document. 

Basic Structure of XSLT 
The structure of XSLT resembles that of XML, and contains specialized tags to perform specific actions to the data. 

1. Top Declarations 
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
        <xsl:stylesheet     version="1.0"     
            xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
            xmlns:msxml="urn:schemas-microsoft-com:xslt"
            xmlns:umbraco.library="urn:umbraco.library"
            exclude-result-prefixes="msxml umbraco.library">
        <xsl:output method="xml" omit-xml-declaration="yes" />
 

2. The XML declaration
    <?xml version="1.0" encoding="UTF-8"?>

3. The root element that declares the document to be an XSL style sheet is <xsl:stylesheet> or <xsl:transform>.
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    or
    <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

4. Parameter Declaration
    This is optional but a very important declaration, as it is the default link to the content published in the site.

    <xsl:param name="currentParam" />

5. Template Declaration
    This is the portion that is responsible for the processing and the output.

    <xsl:template match="/">

    …
    </xsl:template>

6. Closing the Style Sheet
    We close out the stylesheet, since this is XML, everything must be properly structured.

    </xsl:stylesheet>

    or
    </ xsl:transform >
 


How to link XSL Stylesheet to an XML Document? 
To link XSL Stylesheet to an XML Document, add the XSL style sheet reference to the XML document, e.g. "sample.xml".

    <?xml-stylesheet type="text/xsl" href=“sample.xsl"?>

How to apply XSL Transform? 
The most easiest way to apply XSL Transforms over an XML Document or Node is by using the Template Element. 

A sample XML Document or Node used in the examples.

    <?xml version="1.0" encoding="ISO-8859-1"?>

    <catalog>
        <cd>
            <title>Empire Burlesque</title>
            <artist>Bob Dylan</artist>
            <country>USA</country>
            <company>Columbia</company>
            <price>10.90</price>
            <year>1985</year>
        </cd>
        . . .
    </catalog> 

A list of XSL Elements commonly used in Transformations are listed below. 

1. The <xsl:template> Element 
A template contains rules to apply when a specified node is matched. The match attribute is used to associate a template with an XML element. The match attribute can also be used to define a template for the entire XML document. The value of the match attribute is an XPath expression (i.e. match="/" defines the whole document).

For example

    <xsl:template match="/">
        <h2>My CD Collection</h2>

        <table border="1">
            <tr bgcolor="#9acd32">
                <th>Title</th>
                <th>Artist</th>
            </tr>  
            …
        </table>

    </xsl:template>

2. The <xsl:value-of> Element 
The <xsl:value-of> element is used to extract the value of a selected node. The select attribute contains an XPath expression. An XPath expression works like navigating a file system; a forward slash (/) selects subdirectories.

For example

    <xsl:template match="/">

        <h2>My CD Collection</h2>
        <table border="1">
            <tr bgcolor="#9acd32">
                <th>Title</th>
                <th>Artist</th>
            </tr>
            <tr>
                <td>
                    <xsl:value-of select="catalog/cd/title"/>
                </td>
                <td>
                    <xsl:value-of select="catalog/cd/artist"/>
                </td>
            </tr>
        </table>
    </xsl:template>

3. The <xsl:for-each> Element 
The <xsl:for-each> element allows you to do looping in XSLT. Filtering the output by adding a criterion to the select attribute in the <xsl:for-each> element.

    <xsl:for-each select="catalog/cd[artist='Bob Dylan']">


Legal filter operators in XSLT are listed below.
  • =  (equal)
  • != (not equal)
  • &lt; less than
  • &gt; greater than

For example

    <xsl:template match="/">

        <h2>My CD Collection</h2>
        <table border="1">
            <tr bgcolor="#9acd32">
                <th>Title</th>
                <th>Artist</th>
            </tr>
            <xsl:for-each select="catalog/cd">
                <tr>  
                    <td><xsl:value-of select="title"/></td>
                    <td><xsl:value-of select="artist"/></td>
                </tr>
            </xsl:for-each>
        </table>
    </xsl:template>

4. The <xsl:sort> Element 
The <xsl:sort> element is used to sort the output. To sort the output, simply add an <xsl:sort> element inside the <xsl:for-each> element. The select attribute indicates what XML element to sort on.

For example

    <xsl:template match="/">

        <h2>My CD Collection</h2>
        <table border="1">
            <tr bgcolor="#9acd32">
                <th>Title</th>
                <th>Artist</th>
            </tr>
            <xsl:for-each select="catalog/cd">
                <xsl:sort select="artist"/>
                    <tr>
                        <td><xsl:value-of select="title"/></td>
                        <td><xsl:value-of select="artist"/></td>
                    </tr>
                </xsl:sort>
            </xsl:for-each>
        </table>
    </xsl:template>

5. The <xsl:if> Element 
The <xsl:if> element is used to put a conditional test against the content of the XML.

<xsl:if test="expression">
    ...some output if the expression is true...
</xsl:if>

The value of the required test attribute contains the expression to be evaluated.

For example

    <xsl:template match="/">

        <h2>My CD Collection</h2>
        <table border="1">
            <tr bgcolor="#9acd32">
                <th>Title</th>
                <th>Artist</th>
            </tr>
            <xsl:for-each select="catalog/cd">
                <xsl:if test="price &gt; 10">
                    <tr>
                        <td><xsl:value-of select="title"/></td>
                        <td><xsl:value-of select="artist"/></td>
                    </tr>
                </xsl:if>     
            </xsl:for-each>   
        </table>   
    </xsl:template>

6. The <xsl:choose> Element 
The <xsl:choose> element is used in conjunction with <xsl:when> and <xsl:otherwise> to express multiple conditional tests.

<xsl:choose>

    <xsl:when test="expression">
        ... some output ...
    </xsl:when>
    <xsl:otherwise>
        ... some output ....
    </xsl:otherwise>
</xsl:choose>

The value of the required test attribute contains the expression to be evaluated.

For example

    <xsl:template match="/">

        <h2>My CD Collection</h2>
        <table border="1">
            …
            <xsl:for-each select="catalog/cd">
                <tr>
                    <td><xsl:value-of select="title"/></td>
                    <xsl:choose>
                        <xsl:when test="price &gt; 10">
                            <td bgcolor="#ff00ff"><xsl:value-of select="artist"/></td>
                        </xsl:when>
                        <xsl:otherwise>
                            <td><xsl:value-of select="artist"/></td>
                        </xsl:otherwise>
                    </xsl:choose>
                </tr>
            </xsl:for-each>
        </table>
    </xsl:template>

7. The <xsl:apply-templates> Element 
The <xsl:apply-templates> element applies a template to the current element or to the current element's child nodes. If we add a select attribute to the <xsl:apply-templates> element it will process only the child element that matches the value of the attribute. We can use the select attribute to specify the order in which the child nodes are processed.

For xample

    <xsl:template match="/">

       <html>
            <body>
                <h2>My CD Collection</h2>
                 <xsl:apply-templates/>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="cd">
        <p>
            <xsl:apply-templates select="title"/>
            <xsl:apply-templates select="artist"/>
        </p>
    </xsl:template>

    <xsl:template match="title">

        Title: <span style="color:#ff0000"><xsl:value-of select="."/></span>
        <br />
    </xsl:template>
    <xsl:template match="artist">
        Artist: <span style="color:#00ff00"> <xsl:value-of select="."/></span>   
        <br />
    </xsl:template> 

That's all for this post, in the next post (Learning Umbraco in a week - Day IV) we will have a look at the XSLT Macros in Umbraco.

No comments:

Post a Comment