Creating Data-Driven Stylesheets

Problem

You want to generate HTML that is styled based on data content.

Solution

XSLT attribute sets provide a nice vehicle for encapsulating the complexity of data-driven stylization. Consider how XML describes an investment portfolio:

<portfolio>
  <investment>
    <symbol>IBM</symbol>
    <current>72.70</current>
    <paid>65.00</paid>
    <qty>1000</qty>
  </investment>
  <investment>
    <symbol>JMAR</symbol>
    <current>1.90</current>
    <paid>5.10</paid>
    <qty>5000</qty>
  </investment>
  <investment>
    <symbol>DELL</symbol>
    <current>24.50</current>
    <paid>18.00</paid>
    <qty>100000</qty>
  </investment>
  <investment>
    <symbol>P</symbol>
    <current>57.33</current>
    <paid>63</paid>
    <qty>100</qty>
  </investment>
</portfolio>

You should display this portfolio in a table with a column showing the gain in black or the loss in red:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="html"/> <xsl:attribute-set name="gain-loss-font"> <xsl:attribute name="color"> <xsl:choose> <xsl:when test="(current - paid) * qty >= 0">black</xsl:when> <xsl:otherwise>red</xsl:otherwise> </xsl:choose> </xsl:attribute> </xsl:attribute-set> <xsl:template match="portfolio"> <html> <head> <title>My Portfolio</title> </head> <body bgcolor="#FFFFFF" text="#000000"> <h1>Portfolio</h1> <table border="1" cellpadding="2"> <tbody> <tr> <th>Symbol</th> <th>Current</th> <th>Paid</th> <th>Qty</th> <th>Gain/Loss</th> </tr> <xsl:apply-templates/> </tbody> </table> </body> </html> ...

Get XSLT Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.