#native_company# #native_desc#
#native_cta#

Transforming XML with XSL using Sablotron Page 3

By Justin Grant
on October 24, 2000

If you’ve never seen XSL then you may be thinking “what does this XSL
document look like ?”. It’s not very difficult to understand if you’re
new to it but I recommed some further study to bring yourself up to speed. Please
see the links at the end of this article for introductions to XSL. Anyway here’s
what the XSL document contains that is going to be used to transform our XML
into HTML for 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"
indent="yes"
encoding="utf-8"
/>
<xsl:template match="/backslash"> 
      <html> 
         <head> 
            <title>XSLT Demo</title> 
            <STYLE type='text/css'>
               <!--
               BODY { font-size: 0em; color: gray; background: black; font-family: arial }
               a { text-decoration:none }
               a { mouse-over:white}
               -->
            </STYLE>
         </head> 
         <body bgcolor="black" text="BBBBCC" link="0077CC" vlink="0077CC" alink="FFFFFF">
            <center> 
            <table bgcolor="222222" border="0" cellpadding="0" cellspacing="0">
            <tr>
               <td bgcolor="white"></td>
               <td bgcolor="white" colspan="2"><br/></td>
            </tr>
            <tr>
               <td bgcolor="white"></td>
               <td bgcolor="white" colspan="2">
                  <a href="http://www.slashdot.org">
                     <img align="right" src="slashdotlg.gif" border="0"/>
                  </a>
               </td>
            </tr>
            <tr bgcolor="777777">
               <td></td><td colspan="2"><br/></td>
            </tr>
            
            <xsl:call-template name="stories"/>

            <tr bgcolor="white"><td></td><td colspan="2"><br/></td></tr>          
            </table>
            </center>
         </body>
      </html>
</xsl:template> 
<xsl:template name="stories">
      <xsl:for-each select="story">
         <tr>
            <td></td>
            <td width="60%">
               <font size="4">
                  <b><a href="{url}" target="_"><xsl:value-of select="title"/></a></b>
               </font><br/>
               <xsl:value-of select="author"/> (<xsl:value-of select="time"/>)<br/>
               from the "<xsl:value-of select="department"/>" dept.<br/>
               <xsl:value-of select="comments"/> comments<br/>
               <xsl:value-of select="section"/> section<br/>
            </td>
            <td bgcolor="white" >
               <center>
                  <img src="http://images.slashdot.org/topics/{image}" ALT="{topic}"/>
               </center>
            </td>
            <td width="30%"></td>
         </tr>
         <tr bgcolor="777777"><td></td><td colspan="2"><br/></td></tr>          
      </xsl:for-each>
</xsl:template>
</xsl:stylesheet> 
You’ll notice that there seems to be HTML inside this document, well your right
about that !. The XSL document determines how to “read” and “wrap”
the data found in the XML document appropriately in HTML so that it can be viewed.
A small cascading style sheet has also been included in this document.