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, ....
What does it do?
• Adds native XML datatypes to JavaScript
• Extends semantics of operators to
  manipulate XML data
• Add...
XML DOM API
function
writeList
()
{


var
labels
=
xmlDoc.getElementsByTagName('label');


var
ol
=
document.createElement...
E4X Equivalent
function
writeList
(domDoc)
{




var
xdoc
=

      new
XML((new
XMLSerializer())
        .serializeToStrin...
No, what does it DO?
var
mongers
=
<perlmongers>
            <monger
gender=”male”
id=”2”>
              <contact
email=”j...
E4X syntax examples

• mongers..monger.
  (@id==quot;2quot;).contact.name.text()

 •   Find all “item” elements at any dep...
E4X syntax examples 2

• mongers..monger.
  (contact.@email==quot;joel@fysh.orgquot;)..na
  me.text()


 •   Similar to pr...
E4X syntax examples 3
• function
foo
()
{
return
<><item
/></
  item
/></>;
}

 • could
also
be:
return
new

     XMLList(...
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 objec...
E4X to DOM node
function
importNode
(
e4x,
doc
)
{


var
me



=
importNode,
xhtml,
domTree,
importMe;


me.Const

=
me.Co...
Thank you.
Any questions?
Upcoming SlideShare
Loading in...5
×

E4X - Primitive XML

2,070

Published on

Lightning talk (5 minutes) on E4X (XML literals / operators in JS) from "ProNetworking - An evening of dynamic languages" at British Computer Society 10 June 2009.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,070
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

E4X - Primitive XML

  1. 1. E4X: Primitive XML Joel Bernstein, London Perl Mongers joel@fysh.org
  2. 2. 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! • Defined in ECMA-357, in use since FF 1.5
  3. 3. What does it do? • Adds native XML datatypes to JavaScript • Extends semantics of operators to manipulate XML data • Adds new operators for filtering, searching XML • XML literals, namespaces, qualified names, etc
  4. 4. 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); }
  5. 5. 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! }
  6. 6. 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>;
  7. 7. 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.
  8. 8. 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.
  9. 9. 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>
  10. 10. The good • Terse, powerful syntax. • Extends JS operators. • Easy and natural to write, much less verbose than DOM
  11. 11. 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
  12. 12. 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
); }
  13. 13. Thank you. Any questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×