Anonymous
Domino 2.0 Rich Internet Applications with IBM Lotus Notes/Domino
You are here: Today » Making a single page Ajax interface in Domino
« Single page Ajax interface in Domino part 2
Rounded corners with JavaScript »

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 version="1.0"?>
<?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>
</application>

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:

<?xml version="1.0"?>
<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:template match="/">
<xsl:variable name="path"><xsl:value-of select="//application/@path"/></xsl:variable>
<xsl:variable name="title"><xsl:value-of select="//application/@title"/></xsl:variable>
<html><head>
<title><xsl:value-of select="$title"/></title>
<link rel="stylesheet" type="text/css">
<xsl:attribute name="href"><xsl:value-of select="$path"/>dsb.css</xsl:attribute>
</link>
<script type="text/javascript">
<xsl:attribute name="src"><xsl:value-of select="$path"/>dsb-script.js</xsl:attribute>
</script>
<script type="text/javascript">G.app.path='<xsl:value-of select="$path"/>'</script>
</head><body><div id="canvas">
<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">
<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>

</div>
</div>
<div id="status">Ready.</div>
</div></body></html>
</xsl:template>
</xsl:stylesheet>

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.

In my next post, I will talk about cross browser loading of XML data and doing XSL transformations in JavaScript. I will also explain how to transform a Notes view in XML with XSL into an HTML fragment and embed that in the page.

Star rating

0%

Comments

To add a comment, log in or register as new user. It's free and safe.