Sunday, July 01, 2007

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:

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!

1 comment:

Joseph said...

I'd like to see that. I favor your earlier suggestion of "=expression" css properties (and maybe svg attributes), though. XSLT is apparently supposed to transform one type of xml(esqe) file into another- if something in the resulting document changes, the source doesn't reflect that.