There is something inherently powerful about what direct data interaction and manipulation is capable of and the ease at which it performs. XSLT may be called a stylesheet but it is nothing like CSS, it deals directly in data management and presentation, utilizing advanced functionality typically reserved for a scripting language. Similar to what Smarty is to PHP templates, XSLT basically defines the rules for rendering an XML file, with one important distinction – the data is live. The data is subject to further XSL manipulation after the XML document has been initially transformed, facilitating many dynamic features. This has great implications on the web applications of the future; loading a widget could be as simple as dynamically loading an XML document which contains all settings and instructions, performing an XSLT transformation and appending the result document to the DOM. With those kind of capabilities the potential for such an application is limitless.
The promise of both XML and XSLT or its greater implications may not be well known but it’s also not new. For a while now it has been speculated to be the next “big thing” in web development, some even went so far as to claim XML would replace HTML as the dominant markup language (I suppose XHTML is the first step, albeit a small one). However, aside from simple data transfer its popularity is far from it’s anticipated potential due in large part to a lack of browser support. I should however mention some of the great work I’ve seen out of Backbase with their various UI widgets, but nevertheless XML really hasn’t caught on the way I hoped it would.
In light of my new found appreciation of XML and XSLT I decided to put a little script together for your basic XML and XSLT importation and manipulation. Hopefully we can get those wheels turning again, maybe one day I can see that potential and not just read about it.
- Load local XML and XLST files
- Encode and decode an XML string
- Serialize an XML string into a document
- Parse XML document into a string
- Transform an XML file with an XSLT stylesheet and apply to element
- Perform an XPath query on an XML document
- Supports IE6+, FF, Opera, Safari, and Chrome
- No browser detection
The following example illustrates a simple transformation involving an XML document, XSLT stylesheet, and an element (container) that will house the results of the transformation. See it in action here
var processor = new XMLProcessor(); var container = document.getElementById('container'); processor.loadXML('xml.xml'); processor.loadXSLT('xslt.xsl'); processor.transform(container);
The topic of XML and XSLT and their use within a web application deserves its own post, there is a lot more to it then what I’ve discussed here. For now you can find more information on XML, XSLT, and their various elements and functions at the W3C and W3 Schools, two resources that I referred to in preparation for this article.
View full documentation and download the source for this project on Github.