insert E4X XML tree inside existing DOM tree

Discussion in 'XML' started by Joris Gillis, Jun 16, 2006.

  1. Joris Gillis

    Joris Gillis Guest

    Hi all,

    I've just discovered EcmaScript for Xml and I'm trying to play with it in
    Firefox 1.5

    In the SVG document below, an E4X XML tree is built up from scratch and
    put inside the variable 'fresh'.
    Any attempt, however, to append this fresh tree to the existing SVG DOM
    tree seems to fail, possibly because there's a document mismatch. I don't
    know how to solve it, though...

    Another issue I have, is the apparent impossibility to build an E4X tree
    from the existing DOM via 'XML(doc)'.

    Any ideas how to fix it?

    Thanks in advance.


    My file looks like this:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="12cm" height="12cm" viewBox="-100 -100 400 400"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" onload="draw(evt)">
    <desc>SVG fractal</desc>

    <script type="text/ecmascript; e4x=1"> <![CDATA[
    var blueprint;
    var components;
    var doc;
    var super;
    var svgns="http://www.w3.org/2000/svg";
    var xlinkns="http://www.w3.org/1999/xlink";

    var svg = new Namespace("http://www.w3.org/2000/svg");
    var xlink = new Namespace ("http://www.w3.org/1999/xlink");

    var limit=1;

    function draw(evt) {
    var svg = evt.target;
    doc=svg.ownerDocument;
    blueprint=doc.getElementById("blueprint");
    super=doc.getElementById("super");
    components=blueprint.getElementsByTagName("use");
    components=[components.item(0),components.item(1),components.item(2)];
    XML(document.t);

    var fresh=<g>{frac(0)}</g>;

    alert(fresh);
    //XML(document);
    //document.write(doc);
    document.getElementsByTagName("svg")[0].appendChild(fresh);
    //alert(XML(doc,document));
    }

    function frac(depth) {
    if (depth <limit) {
    ret=new XML();
    for each (comp in components) {
    ret+=<g
    transform={comp.getAttribute("transform")?comp.getAttribute("transform"):""}>
    <svg viewBox="-15 -37 192 287" width="100" height="200"
    preserveAspectRatio="none">
    {frac(depth+1)}
    </svg>
    </g>;
    }
    return ret;
    } else {
    return <use xlink:href="#blueprint"
    xmlns:xlink="http://www.w3.org/1999/xlink"/>;
    }
    }

    ]]> </script>

    <defs>
    <rect id="super" x="0" y="0" width="100" height="200" fill="gray"
    stroke-width="3px"/>
    <g id="blueprint" viewBox="0 0 200 100">
    <use xlink:href="#super" stroke="blue" />
    <use xlink:href="#super" stroke="red" transform="scale(0.5) rotate(30)
    translate(200 200)"/>
    <use xlink:href="#super" stroke="green" transform="scale(0.7)
    rotate(90) translate(-50 -250)"/>
    </g>
    </defs>


    </svg>

    regards,
    --
    Joris Gillis (http://users.telenet.be/root-jg/me.html)
    Fiat W3C in tenebris
     
    Joris Gillis, Jun 16, 2006
    #1
    1. Advertising

  2. Joris Gillis wrote:


    > I've just discovered EcmaScript for Xml and I'm trying to play with it
    > in Firefox 1.5
    >
    > In the SVG document below, an E4X XML tree is built up from scratch and
    > put inside the variable 'fresh'.
    > Any attempt, however, to append this fresh tree to the existing SVG DOM
    > tree seems to fail, possibly because there's a document mismatch. I
    > don't know how to solve it, though...


    So far (in Firefox 1.5 releases) E4X is purely an addition to the
    Spidermonkey scripting engine, there is no integration with the Mozilla
    DOM implementation. So don't expect to be able to take an E4X XML object
    and put that into a Mozilla DOM. You would need to use e.g.
    var domDocument = new DOMParser().parseFromString(
    e4xObject.toXMLString(),
    'application/xml'
    );
    to have the Mozilla DOM XML parser parse the serialized E4X XML object.

    There is bug <https://bugzilla.mozilla.org/show_bug.cgi?id=270553> for
    an E4X <--> DOM integration.
    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Jun 16, 2006
    #2
    1. Advertising

  3. Joris Gillis

    Joris Gillis Guest

    On Fri, 16 Jun 2006 18:55:06 +0200, Martin Honnen <>
    wrote:

    > Joris Gillis wrote:
    >
    >
    >> I've just discovered EcmaScript for Xml and I'm trying to play with it
    >> in Firefox 1.5
    >> In the SVG document below, an E4X XML tree is built up from scratch
    >> and put inside the variable 'fresh'.
    >> Any attempt, however, to append this fresh tree to the existing SVG
    >> DOM tree seems to fail, possibly because there's a document mismatch..
    >> I don't know how to solve it, though...

    >
    > So far (in Firefox 1.5 releases) E4X is purely an addition to the
    > Spidermonkey scripting engine, there is no integration with the Mozilla
    > DOM implementation. So don't expect to be able to take an E4X XML object
    > and put that into a Mozilla DOM. You would need to use e.g.
    > var domDocument = new DOMParser().parseFromString(
    > e4xObject.toXMLString(),
    > 'application/xml'
    > );
    > to have the Mozilla DOM XML parser parse the serialized E4X XML object..
    >
    > There is bug <https://bugzilla.mozilla.org/show_bug.cgi?id=270553> for
    > an E4X <--> DOM integration.


    Thank you very much, Martin

    I finally got it to work with your help:)

    ***
    var domDocument = new DOMParser().parseFromString(
    fresh.toXMLString(),
    'application/xml'
    );

    var mynode=doc.importNode(domDocument.documentElement,true);
    doc.getElementsByTagName("svg")[0].appendChild(mynode);
    ***

    It would be neat if DOM and E4X were implemented, though. If only I had
    the time & knowledge to correct the bug myself...

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg width="12cm" height="12cm" viewBox="-100 -100 400 400"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" onload="draw(evt)">
    <desc>SVG fractal</desc>
    <script type="text/ecmascript; e4x=1"> <![CDATA[
    var blueprint;
    var components;
    var doc;
    var super;
    var svgns="http://www.w3.org/2000/svg";
    var xlinkns="http://www.w3.org/1999/xlink";
    var svg = new Namespace("http://www.w3.org/2000/svg");
    var xlink = new Namespace ("http://www.w3.org/1999/xlink");
    default xml namespace="http://www.w3.org/2000/svg";
    var limit=5;

    function draw(evt) {
    var svg = evt.target;
    doc=svg.ownerDocument;
    blueprint=doc.getElementById("blueprint");
    super=doc.getElementById("super");
    components=blueprint.getElementsByTagName("use");
    components=[components.item(0),components.item(1),components.item(2)];

    var fresh=<g>{frac(0)}</g>;
    var domDocument = new
    DOMParser().parseFromString(fresh.toXMLString(),'application/xml');
    var mynode=doc.importNode(domDocument.documentElement,true);
    doc.getElementsByTagName("svg")[0].appendChild(mynode);
    }

    function frac(depth) {
    if (depth <limit) {
    ret=new XML();
    for each (comp in components) {
    ret+=<g
    transform={comp.getAttribute("transform")?comp.getAttribute("transform"):""}>
    <svg viewBox="-15 -37 192 287" width="100" height="200"
    preserveAspectRatio="none">
    {frac(depth+1)}
    </svg>
    </g>;
    }
    return ret;
    } else {
    return <use xlink:href="#blueprint"
    xmlns:xlink="http://www.w3.org/1999/xlink"/>;
    }
    }

    ]]> </script>
    <defs>
    <rect id="super" x="0" y="0" width="100" height="200" fill="gray"
    stroke-width="3px"/>
    <g id="blueprint" viewBox="0 0 200 100">
    <use xlink:href="#super" stroke="blue" />
    <use xlink:href="#super" stroke="red" transform="scale(0.5) rotate(30)
    translate(200 200)"/>
    <use xlink:href="#super" stroke="green" transform="scale(0.7)
    rotate(90) translate(-50 -250)"/>
    </g>
    </defs>
    </svg>

    --
    Joris Gillis (http://users.telenet.be/root-jg/me.html)
    Gaudiam omnibus traderat W3C, nec vana fides
     
    Joris Gillis, Jun 16, 2006
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Daniel Berger

    [ARTICLE] E4X with Ruby

    Daniel Berger, Sep 11, 2004, in forum: Ruby
    Replies:
    4
    Views:
    137
    Erik Terpstra
    Sep 13, 2004
  2. Bob Tinsman
    Replies:
    1
    Views:
    94
    Martin Honnen
    Mar 15, 2006
  3. Bob Tinsman

    E4X: can't use "delete" with filter

    Bob Tinsman, Mar 14, 2006, in forum: Javascript
    Replies:
    2
    Views:
    94
    Martin Honnen
    Mar 15, 2006
  4. cognominal
    Replies:
    1
    Views:
    121
    Thomas 'PointedEars' Lahn
    Apr 20, 2006
  5. ten8ciousb
    Replies:
    7
    Views:
    154
    Thomas 'PointedEars' Lahn
    Jan 26, 2009
Loading...

Share This Page