BlogAbout MeGalleryLinksContact

« Picax Web Album | Main | Picture Perfect Start »

XForms and sorting

One problem that keeps popping up when creating forms with XForms is the lack of sorting. I wrote a simple sorting extension which was mostly just taken from XSLT and published it on exforms.org. However this is only useful then the XForms implementation has support for the extension and often is will not. But many times there are alternatives and in this blog post I will describe how one can possible do sorting in the Firefox XForms extension.

There is two places where one might want to sort; either in the UI or in the instance it-self. Because of the way XPath works it is difficult to only sort in the UI as it changes the behavior of XPath and might mess up the rest of the context update routine in XForms. Here I will demonstrate how to solve sorting by sorting an instance.

In this example we will have a model which contains two instances:


  1. data document which we want to sort

  2. the stylesheet document

We keep the stylesheet that do the sorting in an instance because it will allow us to change its behavior from XForms by altering attributes and content.

Without futher ado I give you the model:

<xf:model>
<xf:instance id="default-instance">
<data xmlns="">
<item>
<name>B-item</name>
<date>2001-05-03</date>
</item>
<item>
<name>A-item</name>
<date>2005-05-03</date>
</item>
<item>
<name>Z-item</name>
<date>2003-05-03</date>
</item>
<item>
<name>D-item</name>
<date>2002-05-03</date>
</item>
</data>
</xf:instance>

<xf:instance id="stylesheet">
<xsl:stylesheet
xmlns=""
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:template match="/">
<data>
<xsl:apply-templates select="data/item">
<xsl:sort type="string" select="name"/>
</xsl:apply-templates>
</data>
</xsl:template>

<xsl:template match="*|@*|text()">
<xsl:copy>
<xsl:apply-templates select="*|text()|@*"/>
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
</xf:instance>
</xf:model>

Here the instance we want to sort is the first and we have the XSLT stylesheet for doing the actual sort as the second instance. Now all we need is a script which will take the XSLT stylesheet and the instance, sort and then insert the sorted instance back into the model. Then the model must be updated and that is it. The script for doing this goes as follows:

function sort_instance(id) {
// We get the instance element
var instanceElement = document.getElementById(id);
if (instanceElement!=null) {
// XForms exposes the retrival of the instance document from the model element which *should*
// be the parent for the instance element.
var instance = instanceElement.parentNode.getInstanceDocument(id);
if (instance!=null) {
// Now creating the stylesheet, for this example the stylesheet document is also an instance
// by it can be loaded from many difference sources
var xslDom = instanceElement.parentNode.getInstanceDocument('stylesheet');

// create an XSLTProcessor and attach the stylesheet
var processor = new XSLTProcessor()
processor.importStylesheet(xslDom);

// now we do the sorting transformation
var resultDom = processor.transformToDocument(instance, instance);

// we then move the result info the instance dom
instance.removeChild(instance.documentElement);
instance.appendChild(resultDom.documentElement);

// and performs the updates for XForms
instanceElement.parentNode.rebuild();
instanceElement.parentNode.recalculate();
instanceElement.parentNode.revalidate();
instanceElement.parentNode.refresh();
}
}
}

This script can then be called from e.g. an anchor like <a href="javascript:sort_instance('default-instance')">sort</a>. The full example can be downloaded or tried from here.

Comments (2)

Rob [TypeKey Profile Page]:

Nice contributions. I saw your exforms extension and thought it would be exectly what I needed to sort my XML, but I'm having trouble getting it to sort dynamically and now that I see this I see I have other options. I was really hoping to use pure xForms though, and now I don't know what I'll do.

licitatii [TypeKey Profile Page]:

Very nice post, I was expecting something like this from you. keep up the good work.okazii

Post a comment

About

This page contains a single entry from the blog posted on June 2, 2007 11:16 AM.

The previous post in this blog was Picax Web Album.

The next post in this blog is Picture Perfect Start.

Many more can be found on the main index page or by looking through the archives.

Powered by
Movable Type 3.33