Creating XML on the client

[antun]

A common workflow in Laszlo applications is to manually tweak an XML document on the client and send it to the server that's expecting it, or have it affect replicated views.

First you need a dataset (myds in the example below). myds is empty for simplicity, but you could always use a dataset with existing data already in it, and manipulate or add to that.

To be able to add or manipulate to the data you need a datapointer to a node in the dataset, then you can call the addNode() method:

http://www.laszlosystems.com/developers/learn/documentation/lzxref/datapointer.php#meth-addNode

Here's the example:


<canvas debug="true">

<debug x="150" height="300" />

<dataset name="myds">
</dataset>

<button>Make XML
<method event="onclick">
// Obtain a datapointer
var dp = canvas.datasets.myds.getPointer();

// Create a root node
var newNodeName = 'myrootnode';
dp.addNode( newNodeName );

// Move the pointer to the newly created root node
dp.setXPath( newNodeName );

// Create three child nodes
newNodeName = 'foo';
dp.addNode( newNodeName, 'One', {bar : "1"} );
dp.addNode( newNodeName, 'Two', {bar : "2"} );
dp.addNode( newNodeName, 'Three', {bar : "3"} );

// Write out the contents of the dataset for debugging
var dspointer = canvas.datasets.myds.getPointer();
debug.write( dspointer.serialize() );
</method>
</button>

</canvas>


First we created a root node, then moved the pointer into it, and created three nodes inside:


<myrootnode>
<foo bar="1">One</foo>
<foo bar="2">Two</foo>
<foo bar="3">Three</foo>
</myrootnode>


Enjoy!

[Holomatrix]

I added children to the children, but they cannot be accessed, why?

<canvas debug="true">

<debug x="150" height="300" />

<dataset name="myds">
</dataset>

<button>Make XML
<method event="onclick">
// Obtain a datapointer
var dp = canvas.datasets.myds.getPointer();

// Create a root node
var newNodeName = 'myrootnode';
dp.addNode( newNodeName );

// Move the pointer to the newly created root node
dp.setXPath( newNodeName );

// Create child node
newNodeName = 'media';
dp.addNode( newNodeName, 'One', {mid : "1"} );

dp.selectChild();

// Create three child nodes
newNodeName = 'text';
dp.addNode( newNodeName, 'A', {tid : "1"} );
dp.addNode( newNodeName, 'B', {tid : "2"} );
dp.addNode( newNodeName, 'C', {tid : "3"} );



// Write out the contents of the dataset for debugging
var dsp = canvas.datasets.myds.getPointer();
// debug.write( dsp.serialize() );
dsp.setXpath('myrootnode');
Debug.write("root: " + dsp.getNodeName());

dsp.selectChild();
Debug.write("media: " + dsp.getNodeName());
dsp.selectChild();
Debug.write("text: " + dsp.getNodeName());

</method>
</button>

</canvas>

Regards,
Ingo

[moplin]

Hi.
Antun, please, help me with one small question.
I do have a variable with an xml string attached. How do I make that string available for a dataset. I mean is there any way to paste that xml string on the dataset.

Example:

<canvas debug="true">

<debug x="150" height="300" />

<dataset name="myds"/>

<script>
Var myxml=’<myrootnode><foo bar="1">One</foo><foo bar="2">Two</foo><foo bar="3">Three</foo></myrootnode>’;
<script/>

//Now make myxml available on myds


</canvas>

Thank you Antun.

[airon]

Hi Holomatrix
I try out this program and make some modification.
But I'm not clear about some of them either.

Here is the program.
------------------------------------------------------<?xml version="1.0" encoding="UTF-8" ?>
<canvas debug="true">

<debug x="150" height="300" />

<dataset name="myds">
</dataset>

<button>Make XML
<method event="onclick">
// Obtain a datapointer
var dp = canvas.datasets.myds.getPointer();

// Create a root node
var newNodeName = 'myrootnode';
dp.addNode( newNodeName );

// Move the pointer to the newly created root node
dp.setXPath( newNodeName );

// Create child node
newNodeName = 'media';
dp.addNode( newNodeName, 'One', {mid : "1"} );

dp.selectChild();

// Create three child nodes
newNodeName = 'text';
dp.addNode( newNodeName, 'A', {tid : "1"} );
dp.addNode( newNodeName, 'B', {tid : "2"} );
dp.addNode( newNodeName, 'C', {tid : "3"} );



// Write out the contents of the dataset for debugging
var dsp = canvas.datasets.myds.getPointer();

//display the xml data
Debug.write( dsp.serialize() );

//position the xpath to myrootnode
dsp.setXPath('myrootnode');
Debug.write("root: " + dsp.getNodeName());

//position the xpath to the child of myrootnode:media
dsp.selectChild();
Debug.write("media: " + dsp.getNodeName());

/* display how many children of the current node:media
* there are 4 children why, it treats the text of media(which is "one")
* as the child of media.
* I don't know the detail, I think we should reference some DOM document.
*/

//Debug.write(dsp.getNodeCount());

/* position to the child of media which is "one"
* But now only dsp.selectChild(1) work. Others like
* dsp.selectChild(3) return false.
*/
dsp.selectChild();

// position to the text node
dsp.selectNext();
Debug.write("text: " + dsp.getNodeName());

</method>
</button>

</canvas>