Functional Animation, revisited
Since my blog post on Functional Animation, there's been some movement towards the idea of setting DOM nodes to equal functions of other (potentially varying) nodes.
In fact, this idea already exists in XSL - see the code below, where the second paragraph is set to contain the same text as the first paragraph.
<?xml version="1.0" encoding="ISO-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml/"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<body>
<p id="p1">p1 content</p>
<p id="p2" title="{//p[@id='p1']}">
<xsl:value-of select="//p[@id='p1']"/>
</p>
<a href="javascript:document.getElementById('p1').textContent
= 'test'">Test</a>
</body>
</html>
When you click on the "Test" link, the value of p1 is changed - and p2 should automatically update too (both its content and its title attribute).
Unfortunately, p2 doesn't update - it seems that browser makers don't automatically re-execute XSL stylesheets. Interestingly, CSS stylesheets do re-execute when you add or change nodes, and there's no mention of what should happen in the XSL spec. I don't see why browser makers couldn't extend their code.
An idea whose time has come
This idea of Functional Animation is so useful and intuitive - probably replacing most awkward DOM Events code - that it's a real shame there aren't any widescale implementations.Having said that, I recently saw the idea cropping up in several places:
- the bind keyword in Java FX scripts
- the "{ }" binders in Flex 2
- Functional Reactive Programming
- the <output> form element in HTML 5
- the <bind> element in XFoms
Personally, I like the XSL approach with inline XPath, because it's much more natural at selectors. On the other hand, some might prefer javascript due to its familiarity and extra features (e.g. Math and String functions).
Either way, it's clearly an idea whose time has come!
