XForms/Sorting using XSLT
Motivation
[edit | edit source]One problem that keeps popping up when creating forms with XForms is the lack of sorting. This is an example for how it is possible to sort an instance using a XSLT stylesheet in Firefox.
Firefox XForms Example
[edit | edit source]The following model contains two instances. The first instance is the one we will sort and the second instance contains the XSLT stylesheet we will use to perform the sort.
<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>
To perform the sort we will use the following JavaScript which will load the second instance into the Firefox stylesheet engine, then take the first instance make the transformation which will produce the sorted instance. Then the transformed instance is inserted into the model and a rebuild, recalculate, revalidate and refresh is performed.
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
// but 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();
}
}
}
Discussion
[edit | edit source]The idea of having the stylesheet in an instance makes it possible to change the behavior of the sorting by binding controls to it and change stuff like XPath expressions and other XSLT syntax.
References
[edit | edit source]This example is based upon the sample on [[1]http://landwehr.dk/blog/]