Generate XML Data dynamically in Flex :: Reloaded

Few months back i made a post on this “Generate XML Data dynamically in Flex” and it needed some improvements. so here i am with the improvements. [ As few readers suggested ]

Lets talk whats are the things required here ::

1. Again explaining the previous post with example and populating DataGrid with that XML Data Generated.

2. Manipulating the Generated XML Data.

These two points will be covered and one in this Post and one in the next one.so stay tuned :-) .

Covering the first One ::

To generate XML Data we got to use the Class XML and a bit of Action Script Coding.

First Create the Outer root for the XML in AS.

[Bindable]
public var xmlData:XML=<ROOTS></ROOTS>;

Now write a function where in you want to Add the Data of few controls to the XML.

Like for example i am having three controls.

<mx:TextInput x=”167″ y=”78″ id=”txt”/>
<mx:TextArea x=”167″ y=”153″ id=”txta”/>
<mx:DateField x=”167″ y=”114″ width=”160″ id=”dtf”/>

and i want to add the Data of these controls to the XML.So the Function would be like this on click of a Button here.

private function fnAddItem(e:Event):void
{
var newXmlRow:XML=<ROOT>
<TXT>{txt.text}</TXT>
<TXTA>{txta.text}</TXTA>
<DTF>{dtf.text}</DTF>
</ROOT>;
xmlData=xmlData.appendChild(newXmlRow);
dg.dataProvider=xmlData.ROOT;
}

appendChild() is the method to add a child element to the XML as the name suggests and its from the XML Class .And Here dg is the instance of a DataGrid. Like below. And observe the assingment of the XML to the DataGrid we got to mention the repeating nodes in the XML.Here its ROOT.

<mx:DataGrid x=”167″ y=”222″ id=”dg”>
<mx:columns>
<mx:DataGridColumn headerText=”Column 1″ dataField=”TXT”/>
<mx:DataGridColumn headerText=”Column 2″ dataField=”TXTA”/>
<mx:DataGridColumn headerText=”Column 3″ dataField=”DTF”/>
</mx:columns>
</mx:DataGrid>

So i am populting the Generated XMl data to my DataGrid.

Check out the example of this here. so this is about the first Point and the next one will be made soon.

Leave any comments for queries.Enjoy the Post :-) .

Updated:-

Download Code

Possibly related posts: (automatically generated)

This entry was posted on Tuesday, September 30th, 2008 at 3:00 pm and is filed under Flex related, downloads, samples, tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

29 Responses to “Generate XML Data dynamically in Flex :: Reloaded”

  1. miha Says:
    December 3, 2008 at 12:02 pm | Reply

    This is great Kumar.
    It really works.
    Is it possible to save this xml after populating dataGrid.
    What do you suggest as the best way to save data in dataGrid after it had been populated.

  2. kumargandhi Says:
    December 3, 2008 at 2:01 pm | Reply

    Good you enjoyed the post, now about your question.

    “Save” do you mean to a file., then here is a solution.
    Flash player gives only limited access to the local system,so we can’t create a file at local system , so then we got to do a round trip here, send the data to the server through a service then create a file there and write it there , if required send that file back to the application to view.hope this helps you.

    comment for any queries.

    regards,
    kumar.

  3. Goncalo Says:
    February 18, 2009 at 9:41 pm | Reply

    Hello… Nice explain, but, and for the Add button?
    Tks
    Goncalo

  4. kumargandhi Says:
    February 19, 2009 at 3:36 am | Reply

    Hi,

    I am sorry i didn’t get your point, can you be clear.

    regards,
    kumar.

  5. Joseph Says:
    March 12, 2009 at 12:56 am | Reply

    Thanks for this post – Really helpful; Though I have to ask this… I need to make my XML nodes with attributes, so it’ll look something like this:
    var x:XML =

    the {comp.val} does not evaluate in this case… any ideas around that?

  6. Joseph Says:
    March 12, 2009 at 12:58 am | Reply

    It didn’t show the node before… Hope this works…

    var x:XML =

  7. Bagy Says:
    March 12, 2009 at 11:58 am | Reply

    Hello Kumar,

    sorry my post has got some words are missing,

    Is any possible to add more xml element into one,
    i.e
    var ss:XML=
    var sss:XML = Second
    var ssss:XML = Third

    Expected result is,

    ss.appendChild(sss.appendChild(ssss));

    Regards,
    Bagy

    • kumargandhi Says:
      March 13, 2009 at 4:00 am | Reply

      Hi Bagy,

      Yes its possible, explore more about the XML Class and its methods, and also XMLList, XMLListCollection, they are powerful native XML related Class’s and very usefull.

      regards,
      kumar.

  8. Robert Says:
    March 14, 2009 at 8:27 am | Reply

    I think what Goncalo was saying, is you didn’t include the code for the add (mx:button) you have in your example for people to see what you’re passing through in it’s click=”fnAddItem()”, because you’re passing an event there, and I, like others, have no idea what you’re passing.

  9. Bagy Says:
    March 17, 2009 at 9:22 am | Reply

    Hello Kumar,

    thanks for the reply, I’m able to create parent-child-child xml dynamically.I’ve another doubt is any possible to retrieve the XML data dynamically.
    i.e
    var dynastring=”Test”;
    var _xmlNode:XML =

    two
    three
    four

    var result:String = _xmlNode.One.{dynaString};

    Regards,
    Bagy

    • kumargandhi Says:
      March 17, 2009 at 9:32 am | Reply

      Hi,

      you got to know how to traverse through XML structure.Type in “Traversing XML structures” in the Flex Builder Help or Google it , you will find some examples.

      regards,
      kumar.

  10. Jmoore Says:
    May 12, 2009 at 5:26 pm | Reply

    Hi Kumar,

    Could you please explain what event to pass through the when the user click the add button.

    Thanks,

    Jaye

  11. kumargandhi Says:
    May 14, 2009 at 3:44 pm | Reply

    Hi Jmoore,

    Its flash.events.Event [its the base Event Class].

    regards,
    kumar.

  12. anjan anil Says:
    May 26, 2009 at 6:49 am | Reply

    Hi kumar,

    its very helpfull code. But what about xml file where it stores the parameters and how to open existed xml file

  13. Deniz Says:
    June 5, 2009 at 1:46 pm | Reply

    Hi Kumar,

    thanks for the nice example.

    I’ve a question: if we get an XML file through httpservice and using e4x, how can we update this file? I mean how to add some data to an existing XML file?

  14. rahim Says:
    October 22, 2009 at 2:58 pm | Reply

    Has anyone tried to generate the response dynamically. My page gets xml which contains field name, type. So based on it, iam able to create my form dynamically. Now iam kind of struck to submit the dynamic form data to my service. Any suggestions??

  15. Alex Dove Says:
    November 4, 2009 at 3:53 pm | Reply

    Can you post your source code or make your Flex file viewable?

  16. Vasanth Says:
    November 9, 2009 at 8:14 am | Reply

    Hello Kumar, Really your blog helpful for flex users, Thanks for your help, i am also new for Flex… i need a help… i am developing a desktop application using Flex & Air, I want to Append and update the xml using this application. How can i Append and Update the XML data??? can you provide me a sample file ??

    var file:File = File.desktopDirectory.resolvePath(“Test.txt”);var stream:FileStream = new FileStream();stream.openAsync( file, FileMode.READ);

    ??

  17. Alex Dove Says:
    November 10, 2009 at 2:08 pm | Reply

    Kumar,
    I am also interested in the code sample you are providing to Vasanth. Could I also have a copy of the code? My goal is to create an application online which will not only create the data as illustrated in your example, but to also write a hard xml file to the computer. I am trying to integrate Flex and SharePoint and want to have Flex be the interface to write data to a SharePoint library xml file and then have SharePoint read that xml file and output the data. Once the data is in a SharePoint list then it will be saved to the SharePoint database. It allows me to interact bi-directionally with SharePoint without using the boxy format of SharePoint.

  18. Vasanth Says:
    November 13, 2009 at 8:18 pm | Reply

    Hi Kumar!!!

    Thank you very much for your mail, its working nicely because of your help.

    How to update the XML with the user’s latest input?

    Thanks Again :-)

    Regards,
    Vasanth

  19. Aman Says:
    November 24, 2009 at 7:54 am | Reply

    Hi Kumar… it has been a really helpful blog can you send me the example of how to update the xml file. As I am making an image gallery and I am thinking of updating the xml file everytime I add a picture… Thanks…

  20. Rutwick Says:
    December 29, 2009 at 12:58 am | Reply

    I have a little problem… when i create an XML object from my inputs, the object is created twice… I paste my code here… The trace statement outputs same xml twice… Im a newbie so dont know how to do it… Please help…

    <![CDATA[

    private var mnameString:String;
    private var mtagString:String;
    private var mtagvalString:String;
    private var movieXml:XML;

    private function init():void
    {
    submitButton.addEventListener(MouseEvent.CLICK, submit);
    }

    private function submit(event:MouseEvent):void
    {
    mnameString = mnameText.text;
    mtagString = mtagText.text;
    mtagvalString = mtagvalText.text;
    try
    {
    movieXml =
    {mtagvalString}

    ;
    title.text = movieXml.descendants()[0].name;
    tag.text = movieXml.descendants()[1].name;
    value.text = movieXml.descendants()[1].text;
    }
    catch(e:TypeError)
    {
    title.text = “Null”;
    tag.text = “Null”;
    value.text = “Null”;
    }
    trace(movieXml);

    }
    ]]>

Leave a Reply