E4X - Primitive XML
Upcoming SlideShare
Loading in...5
×
 

E4X - Primitive XML

on

  • 3,084 views

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.

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.

Statistics

Views

Total Views
3,084
Views on SlideShare
2,874
Embed Views
210

Actions

Likes
0
Downloads
11
Comments
0

12 Embeds 210

http://onwebdev.blogspot.com 173
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.com.ar 2
http://onwebdev.blogspot.sg 1
http://onwebdev.blogspot.hu 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

E4X - Primitive XML E4X - Primitive XML Presentation Transcript

  • 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! • Defined 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 filtering, searching XML • XML literals, namespaces, qualified 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?