How to load, edit and save XML?

Question

I'd like to load some XML data into text fields; I will edit the data, and after that, I'd like to click a button and the data will be saved back as XML.

Here's a screenshot:

My XML data is simple; for example:

<?xml version="1.0" encoding="utf-8"?>
<information>
    <name>Lobby</name>
    <location>1st floor</location> 
</information>

First, if I choose a list of combo boxes, in the text field, the XML data will be loaded, and I can edit the XML data in the text field. Then when I click Update , the XML data will be changed and saved.

How can I do this?

Answer 1

Traversing XMLList items can be a bit tricky, I recommend populating a ArrayCollection using a for in loop (see attached code example) for the dropdown options and then using an event listener on the change event to parse and populate the text field.

<?xml version="1.0" encoding="utf-8"?>
 <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" creationComplete="init()"
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        import spark.events.IndexChangeEvent;

        [Bindable]private var ddList:ArrayCollection = new ArrayCollection();
        [Bindable]private var output:String = "";
        private var xbuilding:XMLList = new XMLList(
            <building>
                <room>
                    <name>Lobby</name>
                    <location>Some Place</location>            
                </room>
                <room>
                    <name>Another Room</name>
                    <location>Some Other Place</location>              
                </room>
                <room>
                    <name>Yet Another Room</name>
                    <location>The Final Place</location>               
                </room>
            </building>);

        protected function init():void
        {
            for each (var roomName:String in xbuilding.room.name){
                ddList.addItem(roomName);
            }
        }

        protected function dropDown_changeHandler(event:IndexChangeEvent):void
        {
            output = "name :"+xbuilding.room[event.newIndex].name+"\nlocation: "+xbuilding.room[event.newIndex].location;

        }

    ]]>
</fx:Script>
<s:VGroup>
    <s:DropDownList dataProvider="{ddList}" change="dropDown_changeHandler(event)"/>
    <s:TextArea text="{output}" editable="false"/>
</s:VGroup>
</s:WindowedApplication>

To edit or alter the XML data just treat it like an object array, making sure to parse the input correctly

xbuilding.room[selectedIndex] = new XMLList(newData)

For more information I recommend AS3Docs: Working with XML