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

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>