Two Step View Pattern: XSLT vs. object graph

Question

I intend to implement Martin Fowler's Two-Step View Pattern for rendering HTML in a web application I'm writing. The general idea is that rather than having the application output raw HTML, it outputs an custom intermediary XML which is then converted to HTML/CSS. This has a number of advantages including reduced code duplication and a more consistent output.

The approach suggested by Fowler for converting the XML to the final HTML is to use XSLT.

I've used XSLT before and I know the basics. However, I'm wondering what are the advantages of using XSLT. An alternative approach I'm considering looks like this:

Here is an example XML output of the first rendering step:

<grid>
   <headingRow>
      <cell>Product</cell>
      <cell>Price</cell>
   </headingRow>
   <row>
      <cell>A product</cell>
      <cell type="price">$54.95</cell>
   </row>
</grid>

And the desired final HTML output:

<table class="grid">
  <tr>
    <th>Product</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>A product</td>
    <td>
      <span class="currency_symbol">$</span>
      <span class="decimal_number">54.95</span>
    </td>
  </tr>
</table>

The approach I'm considering would have one object for each tag.

class GridTag extends Tag {
  ...
  public void render() {
    System.out.println("<table class=\"grid\">");
    foreach(Tag child: children) {
      child.render();
    }
    System.out.println("</table>");
  }
  ...
}

The objects would constructed into a tree by parsing the XML. The render() method would be call on the root node. I particularly like this approach because it allows me to do cool things. Particularly, if I have a cell tag as above of with the attribute type="price":

<cell type="price">$54.95</price>

It's associated Tag class could parse the contents of the tag to separate the currency symbol and the numerical value into separate HTML tags to allow the alignment of the currency symbol and the decimal point, as in the HTML output above.

<td>
  <span class="currency_symbol">$</span>
  <span class="decimal_number">54.95</span>
</td>

Questions:

Should I do this or should I use XSLT? What are the advantages of using XSLT that I might miss out on? If I should use XSLT, how would I go about parsing the contents of the price tag?

Answer 1

The code you're proposing has some issues. The biggest is that you're hard coding your output to go to standard out, which makes it harder to do additional post processing. This wouldn't be hard to change by modifying your render method to accept an output stream or writer.

Regardless though, what you're proposing is a ton of java code which will basically be implementing a very specific XSLT transformation. You're a lot better off just learning and using XSLT to transform XML into HTML. The advantage is that XSLT is a general purpose tool designed for exactly this kind of transformation.

Here is an example of XSLT that almost does what you're trying to do. I unfortunately ran out of cares right about the time I had to parse the currency value into the numeric and symbolic parts, but this is certainly enough to get you started.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"&gt;
  <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
  <xsl:template match="/grid">
    <table class="grid">
      <xsl:apply-templates select="headingRow"/>
      <xsl:apply-templates select="row"/>
    </table>
  </xsl:template>
  <xsl:template match="headingRow">
      <tr>
        <xsl:apply-templates select="cell" mode="heading"/>
      </tr>
  </xsl:template>
  <xsl:template match="row">
      <tr>
        <xsl:apply-templates select="cell" mode="normal"/>
      </tr>
  </xsl:template>  
  <xsl:template match="cell" mode="heading">
    <th><xsl:value-of select="."/></th>
  </xsl:template>

  <xsl:template match="cell" mode="normal">
    <xsl:choose>
      <xsl:when test="@type='price'">
        <td>
          <span class="currency_symbol">
            <xsl:value-of select="." />
          </span>
          <span class="decimal_number">
            <xsl:value-of select="." />
          </span>
        </td>
      </xsl:when>
      <xsl:otherwise>
        <td>
          <xsl:value-of select="." />
        </td>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>
</xsl:stylesheet>

Answer 2

I can't really say much about why you should go with the one or the other.

I think it hugely depends on the technical details of your rendering process, whether you want it to happen on the server or on the browser, how comfortable you are with XSLT or, respectively, the alternative to XSLT.

One point for XSLT is certainly that it is virtually impossible to generate XML output that is not well-formed (I'm not speaking of valid). It is easy to miss something when writing out strings.

Regarding your parsing problem: Without any doubt the best way is to have data and format separated right in the XML. XSLT is not for parsing, so I don't see why your XML can't be in this format from the start:

<cell type="price" symbol="$">54.95</cell>

However, assuming you can't do anything about it, this XSLT would take care of it.

<xsl:template match="cell[@type='price']">
  <td>
    <xsl:variable name="vNonNumbers" select="translate(., '0123456789.', '')" />
    <xsl:variable name="vTheNumbers" select="translate(., $vNonNumbers, '')" />
    <span class="currency_symbol">
      <xsl:value-of select="$vNonNumbers" />
    </span>
    <span class="decimal_number">
      <xsl:value-of select="$vTheNumbers" />
    </span>
  </td>
</xsl:template>

I hope you can see why the above is essentially bad code. Compare to the alternative (if your XML would separate data and format):

<xsl:template match="cell[@type='price']">
  <td>
    <span class="currency_symbol">
      <xsl:value-of select="@symbol" />
    </span>
    <span class="decimal_number">
      <xsl:value-of select="." />
    </span>
  </td>
</xsl:template>