Difference between revisions of "XSLT"

From BC$ MobileTV Wiki
Jump to: navigation, search
Line 22: Line 22:
 
<pre>
 
<pre>
 
  <AddressBook>
 
  <AddressBook>
   <contact type="simple">
+
   <contact type="friend">
 +
    <name>Phil Hart</name>
 +
    <title>Social Worker, Federal Government of Countria</title>
 +
    <email>phil.hart@countria.gov</email>
 +
    <phone extension="3490">+23 (81) 892-2387</phone>
 +
  </contact>
 +
  <contact type="boss">
 
     <name>John Doe</name>
 
     <name>John Doe</name>
 
     <title>CEO, Company Inc.</title>
 
     <title>CEO, Company Inc.</title>
 
     <email>john.doe@company.com</email>
 
     <email>john.doe@company.com</email>
     <phone>(123) 456-7890</phone>
+
     <phone>+1 (123) 456-7890</phone>
   </contact>
+
   </contact>  
   ...
+
  <contact type="friend">
 +
    <name>Barb Boe</name>
 +
    <title>Secretary, Company Z Inc.</title>
 +
    <email>barb.boe@companyz.com</email>
 +
    <phone>+1 (98) 765-4321</phone>
 +
  </contact> 
 +
   ...  
 
  </AddressBook>
 
  </AddressBook>
 
</pre>
 
</pre>
  
  
We can extract each contact's information via the [[XSL]]:
+
We can extract the information of each ''friend'' only, leaving out ''co-workers'', ''colleagues'', ''etc'' via the following [[XSL]]:
 
<pre>
 
<pre>
 
  <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns="http://www.w3.org/1999/xhtml">
 
  <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']">
+
   <xsl:template match="contact[@type='friend']">
 
     <html xmlns="http://www.w3.org/1999/xhtml">
 
     <html xmlns="http://www.w3.org/1999/xhtml">
 
       <title>business card</title>
 
       <title>business card</title>
Line 53: Line 65:
 
     <h1><xsl:value-of select="text()"/></h1>
 
     <h1><xsl:value-of select="text()"/></h1>
 
   </xsl:template>
 
   </xsl:template>
   <xsl:template match="contact/title">
+
   <xsl:template match="title">
 
     occupation: <h3><xsl:value-of select="text()"/></em></h3>
 
     occupation: <h3><xsl:value-of select="text()"/></em></h3>
 
   </xsl:template>
 
   </xsl:template>
   <xsl:template match="contact/email">
+
   <xsl:template match="email">
 
     <p>email: <a href="mailto:{text()}"><tt><xsl:value-of select="text()"/></tt></a></p>
 
     <p>email: <a href="mailto:{text()}"><tt><xsl:value-of select="text()"/></tt></a></p>
 
   </xsl:template>
 
   </xsl:template>
   <xsl:template match="contact/phone">
+
   <xsl:template match="phone">
     <p>phone#: <a href="tel:{text()}"><xsl:value-of select="text()"/></a></p>
+
     <xsl:variable name="contactphone" select='text()' />
 +
    <xsl:variable name="extension" select='@extension' />
 +
      <xsl:variable name="thephone">
 +
        <xsl:call-template name="replaceCharsInString">
 +
          <xsl:with-param name="stringIn" select="string($thephone)"/>
 +
          <xsl:with-param name="charsIn" select=" "/>
 +
          <xsl:with-param name="charsOut" select="-"/>
 +
        </xsl:call-template>
 +
      </xsl:variable>
 +
      <xsl:variable name="formatphonenum">
 +
        <xsl:call-template name="replaceCharsInString">
 +
          <xsl:with-param name="stringIn" select="string($thephone)"/>
 +
          <xsl:with-param name="charsIn" select="("/>
 +
          <xsl:with-param name="charsOut" select=""/>
 +
        </xsl:call-template>
 +
      </xsl:variable>
 +
      <xsl:variable name="phonenum">
 +
        <xsl:call-template name="replaceCharsInString">
 +
          <xsl:with-param name="stringIn" select="string($formatphonenum)"/>
 +
          <xsl:with-param name="charsIn" select=")"/>
 +
          <xsl:with-param name="charsOut" select=""/>
 +
        </xsl:call-template>
 +
      </xsl:variable>
 +
    <xsl:choose>
 +
      <xsl:when test="extension !=null">       
 +
        <p>phone#: <a href="tel:{phonenum}"><xsl:value-of select="phonenum"/>ext. <xsl:value-of select="extension" /></a></p>
 +
      </xsl:when>
 +
      <xsl:otherwise>
 +
        <p>phone#: <a href="tel:{phonenum}"><xsl:value-of select="phonenum"/></a></p>
 +
      </xsl:otherwise>
 +
    </xsl:choose>
 
     <li>
 
     <li>
 
   </xsl:template>
 
   </xsl:template>
 +
 +
  <!-- a useful template for string replacement -->
 +
      <xsl:template name="replaceCharsInString">
 +
        <xsl:param name="stringIn"/>
 +
        <xsl:param name="charsIn"/>
 +
        <xsl:param name="charsOut"/>
 +
        <xsl:choose>
 +
          <xsl:when test="contains($stringIn,$charsIn)">
 +
            <xsl:value-of select="concat(substring-before($stringIn,$charsIn),$charsOut)"/>
 +
            <xsl:call-template name="replaceCharsInString">
 +
              <xsl:with-param name="stringIn" select="substring-after($stringIn,$charsIn)"/>
 +
              <xsl:with-param name="charsIn" select="$charsIn"/>
 +
              <xsl:with-param name="charsOut" select="$charsOut"/>
 +
            </xsl:call-template>
 +
          </xsl:when>
 +
          <xsl:otherwise>
 +
            <xsl:value-of select="$stringIn"/>
 +
          </xsl:otherwise>
 +
        </xsl:choose>
 +
      </xsl:template>
 
  </xsl:stylesheet>
 
  </xsl:stylesheet>
 
</pre>
 
</pre>
Line 74: Line 136:
 
   <ul>
 
   <ul>
 
     <li>
 
     <li>
       <h1>John Doe</h1>
+
       <h1>Phil Hrat</h1>
       <h3><em>CEO, Widget Inc.</em></h3>
+
       <h3><em>Social Worker, Federal Government of Countria</em></h3>
       <p>email: <a href="mailto:john.doe@widget.com"><tt>john.doe@widget.com</tt></a></p>
+
      <p>email: <a href="mailto:phil.hart@countria.gov"><tt>phil.hart@countria.gov</tt></a></p>
       <p>phone: (202) 456-1414</p>
+
      <p>phone: <a href="tel:+23-1-81-892-2387,3490">+23 (81) 892-2387 ext.3490</a></p>
 +
    </li>
 +
    <li>
 +
      <h1>Barb Boe</h1>
 +
      <h3><em>Secretary, Company Z Inc.</em></h3>
 +
       <p>email: <a href="mailto:barb.boe@companyz.com"><tt>barb.boe@companyz.com</tt></a></p>
 +
       <p>phone: <a href="tel:+1-98-765-4321">+1 (81) 892-2387</a></p>
 
     </li>
 
     </li>
 
     ...
 
     ...
Line 84: Line 152:
 
  </html>
 
  </html>
 
</pre>
 
</pre>
 
+
(NOTE: this is a little more complicated because it also reformats some of the data to make a telephone number follow the [http://tools.ietf.org/html/rfc3966#section-5.3 tel protocol])
  
  

Revision as of 20:10, 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 requires 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


EXAMPLE

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

 <AddressBook>
   <contact type="friend">
     <name>Phil Hart</name>
     <title>Social Worker, Federal Government of Countria</title>
     <email>phil.hart@countria.gov</email>
     <phone extension="3490">+23 (81) 892-2387</phone>
   </contact>
   <contact type="boss">
     <name>John Doe</name>
     <title>CEO, Company Inc.</title>
     <email>john.doe@company.com</email>
     <phone>+1 (123) 456-7890</phone>
   </contact>   
   <contact type="friend">
     <name>Barb Boe</name>
     <title>Secretary, Company Z Inc.</title>
     <email>barb.boe@companyz.com</email>
     <phone>+1 (98) 765-4321</phone>
   </contact>  
   ... 
 </AddressBook>


We can extract the information of each friend only, leaving out co-workers, colleagues, etc via the following 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='friend']">
     <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="title">
     occupation: <h3><xsl:value-of select="text()"/></em></h3>
   </xsl:template>
   <xsl:template match="email">
     <p>email: <a href="mailto:{text()}"><tt><xsl:value-of select="text()"/></tt></a></p>
   </xsl:template>
   <xsl:template match="phone">
     <xsl:variable name="contactphone" select='text()' />
     <xsl:variable name="extension" select='@extension' />
      <xsl:variable name="thephone">
        <xsl:call-template name="replaceCharsInString">
          <xsl:with-param name="stringIn" select="string($thephone)"/>
          <xsl:with-param name="charsIn" select=" "/>
          <xsl:with-param name="charsOut" select="-"/>
        </xsl:call-template>
      </xsl:variable> 
      <xsl:variable name="formatphonenum">
        <xsl:call-template name="replaceCharsInString">
          <xsl:with-param name="stringIn" select="string($thephone)"/>
          <xsl:with-param name="charsIn" select="("/>
          <xsl:with-param name="charsOut" select=""/>
        </xsl:call-template>
      </xsl:variable> 
      <xsl:variable name="phonenum">
        <xsl:call-template name="replaceCharsInString">
          <xsl:with-param name="stringIn" select="string($formatphonenum)"/>
          <xsl:with-param name="charsIn" select=")"/>
          <xsl:with-param name="charsOut" select=""/>
        </xsl:call-template>
      </xsl:variable>
     <xsl:choose>
      <xsl:when test="extension !=null">        
        <p>phone#: <a href="tel:{phonenum}"><xsl:value-of select="phonenum"/>ext. <xsl:value-of select="extension" /></a></p>
      </xsl:when>
      <xsl:otherwise>
        <p>phone#: <a href="tel:{phonenum}"><xsl:value-of select="phonenum"/></a></p>
      </xsl:otherwise>
     </xsl:choose>
     <li>
   </xsl:template>

   <!-- a useful template for string replacement -->
      <xsl:template name="replaceCharsInString">
        <xsl:param name="stringIn"/>
        <xsl:param name="charsIn"/>
        <xsl:param name="charsOut"/>
        <xsl:choose>
          <xsl:when test="contains($stringIn,$charsIn)">
            <xsl:value-of select="concat(substring-before($stringIn,$charsIn),$charsOut)"/>
            <xsl:call-template name="replaceCharsInString">
              <xsl:with-param name="stringIn" select="substring-after($stringIn,$charsIn)"/>
              <xsl:with-param name="charsIn" select="$charsIn"/>
              <xsl:with-param name="charsOut" select="$charsOut"/>
            </xsl:call-template>
          </xsl:when>
          <xsl:otherwise>
            <xsl:value-of select="$stringIn"/>
          </xsl:otherwise>
        </xsl:choose>
      </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>Phil Hrat</h1>
       <h3><em>Social Worker, Federal Government of Countria</em></h3>
       <p>email: <a href="mailto:phil.hart@countria.gov"><tt>phil.hart@countria.gov</tt></a></p>
       <p>phone: <a href="tel:+23-1-81-892-2387,3490">+23 (81) 892-2387 ext.3490</a></p>
     </li>
     <li>
       <h1>Barb Boe</h1>
       <h3><em>Secretary, Company Z Inc.</em></h3>
       <p>email: <a href="mailto:barb.boe@companyz.com"><tt>barb.boe@companyz.com</tt></a></p>
       <p>phone: <a href="tel:+1-98-765-4321">+1 (81) 892-2387</a></p>
     </li>
     ...
   </ul>
 </body>
 </html>

(NOTE: this is a little more complicated because it also reformats some of the data to make a telephone number follow the tel protocol)


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