Making a single page Ajax interface in Domino
A Single Page Application is the holy grail of any web developer. Google Reader, Gmail and lately also Hotmail do it: all content is dragged in with Ajax without leaving the page. What are the benefits? First of all, since only parts of the page change, you get an uninterrupted user experience. Secondly, since only HTML fragments are retrieved and not entire pages, it is faster. And last but not least: everyone seems to like it.
Using pure XML and XSL transformations
One way of doing this, is to ask the server for HTML fragments and embed these in the page. What I want to do, is to keep the backend data in XML and transform these into HTML fragments on the fly, using XSL. This gives an excellent separation of content and presentation. The transformation itself can be done in the browser, using Ajax.
Can this be done with Domino? Yes: we already have the views in XML. The documents can also be rendered as XML: just use 'content-type: other, text/xml' and make sure that the form renders valid XML. We can even render the application itself - the launch page - using XSL.
The launch page
We need an XML and an XSL file. Modern browsers and Internet Explorer 7 can render XML with a predefined XSL. Mozilla even complains if you don't specify a XSL. In Domino, both files can be page elements with content-type 'text/xml'. First the application XML... This only contains the dbtitle, the web path, the user name and a copyright message:
<?xml-stylesheet type="text/xsl" href="[Computed Value]"?>
<application title="[<Computed Value]" path="[Computed Value]">
<!-- Single Page Application with IBM Lotus Notes/Domino 7 -->
<user name="[Computed Value]"/>
<copyright>2007 by Michel Van der Meiren</copyright>
The '<?xml-stylesheet' instruction makes the browsers render this xml with the given XSL file, with the launch page as result. Here's the XSL:
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<xsl:variable name="path"><xsl:value-of select="//application/@path"/></xsl:variable>
<xsl:variable name="title"><xsl:value-of select="//application/@title"/></xsl:variable>
<link rel="stylesheet" type="text/css">
<xsl:attribute name="href"><xsl:value-of select="$path"/>dsb.css</xsl:attribute>
<xsl:attribute name="src"><xsl:value-of select="$path"/>dsb-script.js</xsl:attribute>
<div id="signature"><xsl:value-of select="$title"/></div>
<div id="tree"><div id="tree-actions" class="actions"></div><div id="tree-content"></div></div>
<div id="doc-actions" class="actions"><a href="" onclick="G.app.create('site');return false">New Site</a></div>
<div id="doc-content"><div id="doc-render"></div>
The single page application
You can see this in action: the raw application XML, the XSL file and the result. Especially look at the source of the result page. If you use the XML page element as the launch page of your database, you have your single page application HTML. From there on, Ajax can drag in all the content.