The last article discussed how to convert XML content to bind rendered content to its source – by carrying references back to the originating document using an XSLT transformation. To make use of that data in the client (generally being a web browser), we need an interaction mechanism. HTML is already self-aware of its structure through the DOM, and so a user interaction can be easily captured in relation to some rendered content.
The following example demonstrates how simple it is to get JavaScript to make HTML aware of its own existence (existential HTML):
<html>
<head>
<script type="text/javascript">
function locate(e){
alert('You pressed button '+e.button+' in the element with id of value '+e.srcElement.getAttribute('id'));
}
</script>
</head>
<body onMouseDown="locate(event)">
<div id="first">Click on this text to see that a <span id="second">different context</span> can be recognised <span id="third">even when nested <sup id="fourth">inside</sup> another context</span>.</div>
</body>
Clicking in the different areas of the text in the document results in different messages being displayed based on the context of the mouse in relation to the ids used in the document. By extension if every html element contained an XPath back to source (or a hash key for an XPath stored on the server for efficiency’s sake), then every presentational structure can be tied back to the semantic structure of the originating document. It’s up to the transformation writer to ensure that those structures that need relating back to the original are passed through.
<div source="/doc/annex/section[5]/paragraph[3]">Allows us to point to particular structure in the source document</div>
Since XPaths can be arbitarily long, it might be more efficient to use a hash on the XPath and do a lookup on the server side if content is sent back (for example for adding annotations to a particular node in the XML document structure). This approach has been used to allow users to comment on data conversion quality by having jQuery popup a menu when the user right clicks some content.
