XSL quick start guide

From VYRE

Jump to: navigation, search

Unify uses XSL Transformations for transforming XML to HTML.

Contents

XSL: An overview

When using VYRE Unify, the data returned from an application portlet is in the form of an XML (eXtensible Markup Language) document - a platform and application independent standard designed to store and transport structured data. Unlike HTML, XML has no predefined tags such as <body>,<div> or <p>. Instead it relies on a separate Document Type Definition (DTD) which provides a customised set of rules made up of elements and their corresponding attributes to describe the document's structure and to validate the data held within.

XSL (eXtensible Stylesheet Language) is itself an XML document, whose elements and attributes are given a unique identifier or namespace. It is a very robust W3C standard XML-based transformation language used to transorm XML into a multitude of different formats, most notably HTML in the case of Unify. Consider the relationship between HTML and CSS - HTML is a data model designed to store and transport data; CSS is the corresponding set of styling rules which transform this abstract data into a more [human] readable format displayed in a web browser. CSS and XSL essentially share the same purpose: the separation of data from an application's markup.

Consider the following XML document: 

<?xml version="1.0" encoding="UTF-8"?>
<result>
    <data-item id="29">
        <name><![CDATA[Test news article]]></name>
        <description><![CDATA[Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.]]></description>
        <link><![CDATA[item29/]]></link>
        <creation-date><![CDATA[09.12.2008 10:49]]></creation-date>
        <modification-date><![CDATA[14.01.2009 12:29]]></modification-date>
        <creator>
            <user-id>1</user-id>
            <username>john-smith</username>
            <full-name><![CDATA[John Smith]]></full-name>
        </creator>
        <metadata>
            <item>
                <name><![CDATA[Test news article]]></name>
                <description><![CDATA[Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.]]></description>
                <keywords><![CDATA[]]></keywords>
                <locale id="en">English</locale>
                <published><![CDATA[1]]></published>
            </item>
        </metadata>
    </data-item>
</result>

It is a simplified form of the result returned from an Item Display portlet. When viewing this raw data in a web browser, it's meaning would have little if any relevance to most people. However, when we apply a simple XSL we can choose which elements of the document we wish to parse and thus, in this example, output as HTML to display in a web browser. 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8"/>
 
  <xsl:template match="/">    
    <div class="myClass">
	<xsl:apply-templates select="result/data-item"/>
    </div>
  </xsl:template>
 
  <xsl:template match="data-item">
    <h1><xsl:value-of select="name"/></h1>
	<p><xsl:value-of select="description"/></p>
  </xsl:template>
</xsl:stylesheet>

XSL: The basics 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8"/>
  ...
</xsl:stylesheet>

As previously mentioned, the XSL stylesheet is essentially an XML document hence the opening tag definition. However, in order to differentiate it from a normal XML document, we include the <xsl:stylesheet...> tag noting the namespace xmlns:xsl="http://www.w3.org/1999/XSL/Transform" which declares all elements included within the document whose name is preceeded with xsl: should adhere to the XSL DTD. The <xsl:output...> tag informs us that the generated output will be of type HTML.

Now we've covered the basics, it's time to parse some data...

XSL: Parsing data 

<xsl:template match="/">
  ...
</xsl:template>

In order to access the data held within the document, we must effectively map the document structure. This is achieved by the use of the <xsl:template...> tag followed by a pattern the template is to match. In this example we are matching the root ("/") element, hence we are starting at the beginning of the XML document. Note that we could have easily chosen to start from a different node element by stating a different pattern eg. "/result/data-item/creation-date".

From within this initial template tag, we now have the option to traverse the document elements and/or output html directly.

Another feature of the XSL transormation language is the <xsl:apply-templates...> tag. This works in a similar fashion to a function call when scripting. Instead of explicitly calling the function by name, we determine the function (template) based on it's parameters. Thus the following: 

  <xsl:apply-templates select="result/data-item"/>

matches all "data-item" elements whose parent element is "result" and calls the relevant template: 

<xsl:template match="data-item">
  ...
</xsl:template>

All transformations held within a template are localised to the matched element. For example, when accessing the child element "creation-date" within the current "data-item" we refer to it using a relative path ("creation-date"). Use of an absolute path ("result/data-item/creation-date") would in this example fail as there is no child element "result" within the current "data-item" element. Other examples may not fail but would most likely return unwanted results. Once the transformations have completed, focus will then return to the parent element.

XSL: Putting it all together 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="UTF-8"/>
 
  <xsl:template match="/">    
    <div class="myClass">
        <xsl:apply-templates select="result/data-item"/>
    </div>
  </xsl:template>
 
  <xsl:template match="data-item">
    <h1><xsl:value-of select="name"/></h1>
    <p><xsl:value-of select="description"/></p>
  </xsl:template>
</xsl:stylesheet>

The above example matches the root element ("/"), prints a legal opening <div> tag with associated class name "myClass", and calls the corresponding template matching the "result/data-item" element. From within this template, the child elements "name" and "description" are output within <h1> and <p> tags respectively before the focus is returned to the parent element's template ("/") where the initial <div> tag is closed.

The final HTML result is therefore 

<div class="myClass">
    <!-- Value of "name" element -->
    <h1>John Smith</h1>
    <!-- Value of "description" element -->
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>

See also

Retrieved from "http://wiki.vyre.com/index.php/XSL_quick_start_guide"
Personal tools