Difference between revisions of "XSLT"

From BC$ MobileTV Wiki
Jump to: navigation, search
Line 4: Line 4:
  
  
[[Image:XSLT.gif|center|thumb|315px|Transforming an XML document to HTML]]
 
  
 +
== Structure ==
  
== Tools ==
+
The structure of an XSLT requiers three parts:
 +
# A well-formed ''[[XML]] document'' we want to parse
 +
# An [[XSL]] file for grabbing the desired data from the [[XML]] document and performing the transformation
 +
# A target [[HTML]] file with a particular look & feel we want to generate and present to the end-us
  
 +
These three components and the flow of a typical transformation is nicely summarized in the following diagram:
 +
 +
[[Image:XSLT.gif|center|thumb|315px|Transforming an XML document to HTML]]er
 +
 +
 +
 +
== EXAMPLE ==
 +
 +
For example, with the following [[XML]] document for defining a shareable Contact list:
 +
<AddressBook>
 +
  <contact type="simple">
 +
    <name>John Doe</name>
 +
    <title>CEO, Company Inc.</title>
 +
    <email>john.doe@company.com</email>
 +
    <phone>(123) 456-7890</phone>
 +
  </contact>
 +
  ...
 +
</AddressBook>
 +
 +
 +
We can extract each contact's information via the [[XSL]]:
 +
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns="http://www.w3.org/1999/xhtml">
 +
  <xsl:template match="contact[@type='simple']">
 +
    <html xmlns="http://www.w3.org/1999/xhtml">
 +
      <title>business card</title>
 +
      <body>
 +
        <ul>
 +
          <xsl:apply-templates select="name"/>
 +
          <xsl:apply-templates select="title"/>
 +
          <xsl:apply-templates select="email"/>
 +
          <xsl:apply-templates select="phone"/>
 +
        </ul>
 +
    </body>
 +
    </html>
 +
  </xsl:template>
 +
  <xsl:template match="contact/name">
 +
    <li>
 +
    <h1><xsl:value-of select="text()"/></h1>
 +
  </xsl:template>
 +
  <xsl:template match="contact/title">
 +
    occupation: <h3><xsl:value-of select="text()"/></em></h3>
 +
  </xsl:template>
 +
  <xsl:template match="contact/email">
 +
    <p>email: <a href="mailto:{text()}"><tt><xsl:value-of select="text()"/></tt></a></p>
 +
  </xsl:template>
 +
  <xsl:template match="contact/phone">
 +
    <p>phone#: <a href="tel:{text()}"><xsl:value-of select="text()"/></a></p>
 +
    <li>
 +
  </xsl:template>
 +
</xsl:stylesheet>
 +
 +
This will output the following HTML to be displayed in the user's browser:
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<title>Address Book</title>
 +
<body>
 +
  <ul>
 +
    <li>
 +
      <h1>John Doe</h1>
 +
      <h3><em>CEO, Widget Inc.</em></h3>
 +
      <p>email: <a href="mailto:john.doe@widget.com"><tt>john.doe@widget.com</tt></a></p>
 +
      <p>phone: (202) 456-1414</p>
 +
    </li>
 +
    ...
 +
  </ul>
 +
</body>
 +
</html>
 +
 +
 +
 +
 +
 +
== Tools ==
  
 
=== XSLT Standard Library ===
 
=== XSLT Standard Library ===
  
 
* XSLT Standard Library: http://xsltsl.sourceforge.net/
 
* XSLT Standard Library: http://xsltsl.sourceforge.net/
 
  
  
Line 19: Line 93:
  
 
* XSLTGen -- An Automatic XSLT Stylesheet Generator: http://ww2.cs.mu.oz.au/~jbailey/xsltgen/XSLTGen.htm
 
* XSLTGen -- An Automatic XSLT Stylesheet Generator: http://ww2.cs.mu.oz.au/~jbailey/xsltgen/XSLTGen.htm
 
  
  
Line 29: Line 102:
 
[http://www.w3.org/2000/06/webdata/xslt?xslfile=http://tomi.vanek.sk/xml/wsdl-viewer.xsl&amp;xmlfile=http://198.164.40.210:8080/SAVOIR_MgmtServices/services/UserManagerWS?wsdl&amp;transform=Submit Sample call]:
 
[http://www.w3.org/2000/06/webdata/xslt?xslfile=http://tomi.vanek.sk/xml/wsdl-viewer.xsl&amp;xmlfile=http://198.164.40.210:8080/SAVOIR_MgmtServices/services/UserManagerWS?wsdl&amp;transform=Submit Sample call]:
 
  http://www.w3.org/2000/06/webdata/xslt?xslfile=http://tomi.vanek.sk/xml/wsdl-viewer.xsl &amp;xmlfile=http://198.164.40.210:8080/SAVOIR_MgmtServices/services/UserManagerWS?wsdl &amp;transform=Submit
 
  http://www.w3.org/2000/06/webdata/xslt?xslfile=http://tomi.vanek.sk/xml/wsdl-viewer.xsl &amp;xmlfile=http://198.164.40.210:8080/SAVOIR_MgmtServices/services/UserManagerWS?wsdl &amp;transform=Submit
 
  
 
=== AJAXSLT ===
 
=== AJAXSLT ===
Line 37: Line 109:
 
* AJAXSLT (now deprecated): http://goog-ajaxslt.sourceforge.net/
 
* AJAXSLT (now deprecated): http://goog-ajaxslt.sourceforge.net/
 
* Google JS-Template (replacing AJAXSLT @ Google): http://code.google.com/p/google-jstemplate/
 
* Google JS-Template (replacing AJAXSLT @ Google): http://code.google.com/p/google-jstemplate/
 
 
 
 
  
  

Revision as of 19:28, 20 October 2011

Xslt.png

eXtensible Stylesheet Language Translation is act of applying a specially formatted file which contains an XSL translation specification for the content of a particular XML file, translating the context from raw XML format into a formatted HTML page (or other application/GUI element).



Structure

The structure of an XSLT requiers three parts:

  1. A well-formed XML document we want to parse
  2. An XSL file for grabbing the desired data from the XML document and performing the transformation
  3. A target HTML file with a particular look & feel we want to generate and present to the end-us

These three components and the flow of a typical transformation is nicely summarized in the following diagram:

Transforming an XML document to HTML
er


EXAMPLE

For example, with the following XML document for defining a shareable Contact list:

<AddressBook>
  <contact type="simple">
    <name>John Doe</name>
    <title>CEO, Company Inc.</title>
    <email>john.doe@company.com</email>
    <phone>(123) 456-7890</phone>
  </contact>
  ...
</AddressBook>


We can extract each contact's information via the XSL:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns="http://www.w3.org/1999/xhtml">
  <xsl:template match="contact[@type='simple']">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <title>business card</title>
      <body>
    <xsl:apply-templates select="name"/> <xsl:apply-templates select="title"/> <xsl:apply-templates select="email"/> <xsl:apply-templates select="phone"/>
    </body>
    </html>
  </xsl:template>
  <xsl:template match="contact/name">
  • <xsl:value-of select="text()"/>

      </xsl:template>
      <xsl:template match="contact/title">
    
    occupation:

    <xsl:value-of select="text()"/></em>

      </xsl:template>
      <xsl:template match="contact/email">
    

    email: <a href="mailto:{text()}"><xsl:value-of select="text()"/></a>

      </xsl:template>
      <xsl:template match="contact/phone">
    

    phone#: <a href="tel:{text()}"><xsl:value-of select="text()"/></a>

  • </xsl:template> </xsl:stylesheet> This will output the following HTML to be displayed in the user's browser: <html xmlns="http://www.w3.org/1999/xhtml"> <title>Address Book</title> <body>
    </body>
    </html>
    



    Tools

    XSLT Standard Library


    XSLT Generator


    W3C XSLT Service

    Sample call:

    http://www.w3.org/2000/06/webdata/xslt?xslfile=http://tomi.vanek.sk/xml/wsdl-viewer.xsl &xmlfile=http://198.164.40.210:8080/SAVOIR_MgmtServices/services/UserManagerWS?wsdl &transform=Submit
    

    AJAXSLT

    AJAXSLT is an implementation of XSL-T in JavaScript, intended for use in fat web pages, which are nowadays referred to as AJAX applications. Because XSL-T uses XPath, it is also an implementation of XPath that can be used independently of XSL-T.


    Resources


    Java


    JavaScript


    PHP


    C


    C#


    Tutorials


    External Links


    See Also

    XSL | XML