E4X - Primitive XML

E4X: Primitive XML Joel Bernstein, London Perl Mongers joel@fysh.org

E4X? • ECMAScript for XML • ECMAScript is the ISO Standard language known as JavaScript, JScript, ActionScript, ... • Provides native XML support for JavaScript • inline XML literals in JavaScript code! • Deﬁned in ECMA-357, in use since FF 1.5

What does it do? • Adds native XML datatypes to JavaScript • Extends semantics of operators to manipulate XML data • Adds new operators for ﬁltering, searching XML • XML literals, namespaces, qualiﬁed names, etc

XML DOM API function writeList () {   var labels = xmlDoc.getElementsByTagName('label');   var ol = document.createElement('OL');   for (i=0; i < labels.length; i++) {     var li = document.createElement('LI');     for (j=0; j < labels[i].childNodes.length; j++) {       if (labels[i].childNodes[j].nodeType != ELEMENT_NODE) { continue; }       var cdata = document.createTextNode(         labels[i].childNodes[j].firstChild.nodeValue);       li.appendChild(cdata);     }     var labelId = document.createTextNode('(' +       labels[i].getAttribute('id') + ')');     li.appendChild(labelId);     ol.appendChild(li);   }   document.getElementById('updateTarget').appendChild(ol); }

E4X Equivalent function writeList (domDoc) {     var xdoc =  new XML((new XMLSerializer()) .serializeToString(domDoc.documentElement));     var xlist = <ol/>;     for each (label in xdoc..label)          xlist.* += <li>{ // this is an XMLList object label.name.text() + ' (' + label.@id + ')' }</li>;     }     document.getElementById('updateTarget').innerHTML  = xlist; // UGH! }

No, what does it DO? var mongers = <perlmongers> <monger gender=”male” id=”2”> <contact email=”joel@fysh.org”> <name>Joel Bernstein</name> <age>27</age> <hair>Brown</hair> </contact> </monger> <monger gender=”male” id=”34”> <contact email=”dave@dave.org.uk”> <name>Dave</name> <age>Unspecified</age> <hair>Corporate Silver</hair> </contact> </monger> </perlmongers>;

E4X syntax examples • mongers..monger. (@id==quot;2quot;).contact.name.text() • Find all “item” elements at any depth, select one whose “id” attribute is ‘2’ and navigate to their name.

E4X syntax examples 2 • mongers..monger. (contact.@email==quot;joel@fysh.orgquot;)..na me.text()  • Similar to previous search, this time searching by child element attribute.

E4X syntax examples 3 • function foo () { return <><item /></ item /></>; } • could also be: return new  XMLList(<item />, <item />); • function bar () { var x =  <items>{foo()}</items>; return x; } • Yields: <items><item /><item /></items>

The good • Terse, powerful syntax. • Extends JS operators. • Easy and natural to write, much less verbose than DOM

The bad • XML() and <xml>...</xml> objects are primitives rather than true objects • Impedance mismatch between JS objects and XML objects -- a JS object can’t seamlessly render itself as XML • Can’t directly insert E4X nodes into DOM • we can solve this last one

E4X to DOM node function importNode ( e4x, doc ) {   var me    = importNode, xhtml, domTree, importMe;   me.Const  = me.Const || { mimeType: 'text/xml' };   me.Static = me.Static || {};   me.Static.parser = me.Static.parser || new DOMParser;   xhtml = <testing xmlns=quot;http://www.w3.org/1999/xhtmlquot; />;   xhtml.test = e4x;   domTree = me.Static.parser.parseFromString( xhtml.toXMLString(), me.Const.mimeType );   importMe = domTree.documentElement.firstChild;   while ( importMe && importMe.nodeType != 1 ) {     importMe = importMe.nextSibling;   }   if ( !doc ) doc = document;   return importMe ? doc.importNode( importMe, true ) : null; } function appendTo ( e4x, node, doc ) { // inject E4X at end of node   return node.appendChild( importNode( e4x, doc || node.ownerDocument ) ); } function setContent ( e4x, node ) { // replace node contents with E4X   while( node.firstChild ) {     node.removeChild( node.firstChild );   }   appendTo( e4x, node ); }

Thank you. Any questions?

http://onwebdev.blogspot.com	124
http://onwebdev.blogspot.com.au	7
http://www.slideshare.net	6
http://onwebdev.blogspot.com.es	5
http://onwebdev.blogspot.co.uk	5
http://onwebdev.blogspot.co.il	4
http://onwebdev.blogspot.in	2
http://onwebdev.blogspot.mx	2
http://onwebdev.blogspot.it	2
http://onwebdev.blogspot.sg	1
http://onwebdev.blogspot.hu	1
http://onwebdev.blogspot.com.ar	1

E4X - Primitive XML

by joelbernstein on Jun 11, 2009

Accessibility

Categories

Upload Details

Usage Rights

12 Embeds 160

Statistics

E4X - Primitive XML Presentation Transcript