(Browser) Client side XSLT transformations
In the beginning there was HTML aehm XML ahem SGML and the world was good (anybody remember the 6150 RT?).
It gave birth to HTML and XML and XSLT to transform between them and the world was good. We would get XML data and render them either client or server side (like my favorite XForms implementation) into HTML.
Only brave ones would do this client side since an XSLT transformation is heavy and requires the mastery of yet another set of set theory based languages (XPath, XSLT).
Luckily JSON arrived and we now have a rich selection of template engines. I like fill.js which leaves the template markers untouched, so it can repeat the template transformations, I even ported it to Java.
But template engines only make sense when you control both ends of the pipe. Quite often data might only be offered in XML/ATOM or its specialization oData. IBM Connections, IBM Forms (and other IBM products), SAP and software from Redmond all provide REST APIs that deliver ATOM or oData formats.
To incorporate that into your application you need a script that retrieves and transforms the data and a XSLT stylesheet. Go read the article and download the Dojo script, I'll wait.
The data I'll transform is the todo list from IBM Connections 4.0 from Lotus IBM Greenhouse (Don't have an account? Sign up today, it's free).
The ATOM stream with all todos lives here:
It gave birth to HTML and XML and XSLT to transform between them and the world was good. We would get XML data and render them either client or server side (like my favorite XForms implementation) into HTML.
Only brave ones would do this client side since an XSLT transformation is heavy and requires the mastery of yet another set of set theory based languages (XPath, XSLT).
Luckily JSON arrived and we now have a rich selection of template engines. I like fill.js which leaves the template markers untouched, so it can repeat the template transformations, I even ported it to Java.
But template engines only make sense when you control both ends of the pipe. Quite often data might only be offered in XML/ATOM or its specialization oData. IBM Connections, IBM Forms (and other IBM products), SAP and software from Redmond all provide REST APIs that deliver ATOM or oData formats.
To incorporate that into your application you need a script that retrieves and transforms the data and a XSLT stylesheet. Go read the article and download the Dojo script, I'll wait.
The data I'll transform is the todo list from IBM Connections 4.0 from
The ATOM stream with all todos lives here:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl"
xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app"
xmlns:snx="http://www.ibm.com/xmlns/prod/sn" xmlns:os="http://a9.com/-/spec/opensearch/1.1/"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:thr="http://purl.org/syndication/thread/1.0"
exclude-result-prefixes="xd"
version="1.0">
<xsl:template match="/">
<xsl:apply-templates select="atom:feed" />
</xsl:template>
<xsl:template match="atom:feed">
<div id="todocontent" class="tabContent" style="display:block">
<h3><xsl:value-of select="atom:title"/> (last update <xsl:value-of select="atom:updated"/>) </h3>
<xsl:variable name="numentries" select="os:totalResults" />
<table class="lotusTable lotusClear" border="0" cellspacing="0" cellpadding="0" summary="There are a total of ${numentries} entries">
<tbody>
<xsl:apply-templates select="atom:entry" />
</tbody>
</table>
</div>
</xsl:template>
<xsl:template match="atom:entry">
<tr>
<td class="lotusFirstCell">
<xsl:element name="img">
<xsl:attribute name="border">0 </xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="snx:icon"/></xsl:attribute>
</xsl:element>
</td>
<td><h4>
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="atom:link[@type='text/html']"/></xsl:attribute>
<xsl:value-of select="atom:title"/>
</xsl:element>
</h4><div class="lotusMeta">Created by <span class="lotusPerson">
<xsl:value-of select="atom:author/atom:name"/></span>
<span class="lotusDivider" role="separator">| </span>
<xsl:value-of select="atom:published"/>
<span class="lotusDivider" role="separator">| </span>
<span class="lotusTags">Tags: <xsl:apply-templates select="atom:category" /></span>
<xsl:if test="snx:assignedto">
assigned to <xsl:value-of select="snx:assignedto/@name"/>
</xsl:if>
</div></td>
</tr>
</xsl:template>
<xsl:template match="atom:category">
<xsl:value-of select="@term"/>,
</xsl:template>
</xsl:stylesheet>
As usual YMMV<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl"
xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app"
xmlns:snx="http://www.ibm.com/xmlns/prod/sn" xmlns:os="http://a9.com/-/spec/opensearch/1.1/"
xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:thr="http://purl.org/syndication/thread/1.0"
exclude-result-prefixes="xd"
version="1.0">
<xsl:template match="/">
<xsl:apply-templates select="atom:feed" />
</xsl:template>
<xsl:template match="atom:feed">
<div id="todocontent" class="tabContent" style="display:block">
<h3><xsl:value-of select="atom:title"/> (last update <xsl:value-of select="atom:updated"/>) </h3>
<xsl:variable name="numentries" select="os:totalResults" />
<table class="lotusTable lotusClear" border="0" cellspacing="0" cellpadding="0" summary="There are a total of ${numentries} entries">
<tbody>
<xsl:apply-templates select="atom:entry" />
</tbody>
</table>
</div>
</xsl:template>
<xsl:template match="atom:entry">
<tr>
<td class="lotusFirstCell">
<xsl:element name="img">
<xsl:attribute name="border">0 </xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="snx:icon"/></xsl:attribute>
</xsl:element>
</td>
<td><h4>
<xsl:element name="a">
<xsl:attribute name="href"><xsl:value-of select="atom:link[@type='text/html']"/></xsl:attribute>
<xsl:value-of select="atom:title"/>
</xsl:element>
</h4><div class="lotusMeta">Created by <span class="lotusPerson">
<xsl:value-of select="atom:author/atom:name"/></span>
<span class="lotusDivider" role="separator">| </span>
<xsl:value-of select="atom:published"/>
<span class="lotusDivider" role="separator">| </span>
<span class="lotusTags">Tags: <xsl:apply-templates select="atom:category" /></span>
<xsl:if test="snx:assignedto">
assigned to <xsl:value-of select="snx:assignedto/@name"/>
</xsl:if>
</div></td>
</tr>
</xsl:template>
<xsl:template match="atom:category">
<xsl:value-of select="@term"/>,
</xsl:template>
</xsl:stylesheet>
Posted by Stephan H Wissel on 15 October 2012 | Comments (0) | categories: Show-N-Tell Thursday