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 ]

[showmyads]
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

Advertisements

37 Responses to Generate XML Data dynamically in Flex :: Reloaded

  1. miha says:

    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:

    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:

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

  4. kumargandhi says:

    Hi,

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

    regards,
    kumar.

  5. Joseph says:

    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:

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

    var x:XML =

  7. Bagy says:

    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:

      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:

    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:

    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:

      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:

    Hi Kumar,

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

    Thanks,

    Jaye

  11. kumargandhi says:

    Hi Jmoore,

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

    regards,
    kumar.

  12. anjan anil says:

    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:

    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:

    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:

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

  16. Vasanth says:

    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:

    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:

    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:

    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:

    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);

    }
    ]]>

  21. […] Generate XML Data dynamically in Flex :: Reloaded […]

  22. Chiruu says:

    Hi Kumar,

    Nice example. Is it possible to you to email the code examples which you have sent to Vasanth and Alex as I am also building an application of the similar kind.

    Thanks in advance
    Chiruu

  23. anand karn says:

    hello kumar,

    thanks for code. I want to ask you that how to delete data from datagrid.
    and more thing how to do if datagrid which is displaying the text is different swf and text field (that is used for entering text) is a another swf.

  24. NewbieCoder says:

    Hi need some help for this, new to php and as3.

    Have a XML file which contains reports… I want the user to be able to be able to add reports to this XML file without seeing the file itself.
    So for the user they will see a Flex/HTML (or whatever) form with inputFields for Report Name, and report description as well as a drop down box for category.

    Once a Submit button is pressed, the nodes will be added to the bottom of the XML file within the root nodes, with the values of reportname, description and category set according to the form they submitted.

  25. Abhi says:

    thanks

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: