XML and XSLT Tutorial

The Nitobi Ajax Toolkit supports both XML and XSLT in Mozilla based browsers and Internet Explorer. XML and XSLT can be a good choice if you have a large amount of data on the client that needs to be sorted or filtered without going back to the server. Using the ISerializable interface, one can also easily create JavaScript classes for arbitrary XML data such that the XML data can be accessed like any regular JavaScript object.

In this simple example we have some XML data in a textarea control. This could just as easily be retreived from the server using the nitobi.ajax.HttpRequest or simply loaded from a JavaScript string.

To start off with we need a simple HTML web page that includes the nitobi.toolkit.js JavaScript library.

From here we can add the required event handlers to the onload event of the window object.

nitobi.html.attachEvent(window, "load", init);

and the event attachment to the button so that when clicked it will call the doTransform JavaScript function.

function init() {
nitobi.html.attachEvent("transformButton", "click", transform);
}

The doTransform function will create both an XML document and an XSLProcessor from strings and then the XML is transformed to HTML using the XSLProcessor. Below is the doTransform function and we will look at each line in succession in a moment.

function doTransform() {
var xml = nitobi.xml.createXmlDoc($("xml").value);
var xslt = nitobi.xml.createXslProcessor($("xslt").value);
$("output").innerHTML = nitobi.xml.serialize(nitobi.xml.transform(xml, xslt));
}

The XML data could be a simple list of people's names such as this:

<people>
    <person>bob</person>
    <person>wendy</person>
    <person>sam</person>
    <person>sarah</person>
    <person>mike</person>
</people>

and we could store that for simplicities sake in an HTML textarea element in the web page. To transform this into an HTML list we can apply a simple XSLT template to the data such as this.

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="'>
        <ul>
            <xsl:apply-templates select="//person">
                <xsl:sort select="."></xsl:sort>
            </xsl:apply-templates>
        </ul>
    </xsl:template>
    <xsl:template match="person">
        <li><xsl:value-of select="." /></li>
    </xsl:template>
</xsl:stylesheet>

The first line of the doTransform function creates a new XMLDocument based on the value of the xml textarea, which contains our XML data above.

var xml = nitobi.xml.createXmlDoc($("xml").value);

The second line of the doTransform function creates an XSLProcessor from a string of XSLT.

var xslt = nitobi.xml.createXslProcessor($("xslt").value);

Finally, the doTransform function transforms the XML using the XSL by calling the nitobi.xml.transform static function and then serializing the resulting XMLDocument to a string using the nitobi.xml.serialize function.

$("output").innerHTML = nitobi.xml.serialize(nitobi.xml.transform(xml, xslt));

The serialized HTML string is then inserted into the HTML document using the innerHTML property of the output HTML element.

More information on XML and XSLT in Internet Explorer can be found here: XML and XSLT.

More information on XML and XSLT in Mozilla can be found here: XML and View Printable Version

Nitobi Product Knowledgebase

XML and XSLT Tutorial

Comments: