Initializing a collection from MXML

Question

Gentlepersons,

How does one initialize a collection instance from MXML in Flex/Actionscript?

Background

Let's assume that:

• I've got three lists of number-name pairs.
• The contents of each list never changes, but I may want to add new lists in future.
• The user can choose which list to use.

I know how to use MXML to define/initialize a Flex UI component, but that is the full extent of my XML experience.

Problem

How do I write a combination of XML declarations and Actionscript classes such that I can initialize each of my three lists from XML?

Please note that I am not trying to populate a Flex UI element (such as a DataGrid) with the various number-name pairs. I'm just trying to read the data into a plain old vanilla collection. (Once I've got my collections initialized, I can populate DataGrids or whatever at my leisure.) I can't find any documentation of how to address this super-simple case. The documentation all assumes that I'm trying to do something much more complicated, such as accessing a remote database, which confuses the issue tremendously.

Thanks! :-)

Jim Plamondon, Texas

Answer 1

Hey there,

There's a few ways you can do this:

Sample data set:

<?xml version="1.0" encoding="UTF-8"?>
<events type="array">
    <event>
        <date>12-50-99</date>
        <title>Event A</title>
        <location>San Diego, CA</location>
    </event>
    <event>
        <date>12-50-99</date>
        <title>Event B</title>
        <location>Healdsburg, CA</location>
    </event>
</events>

Flex 4

XML Declarations

Below are 3 ways to get data into XML or an ArrayCollection, both of which you can pass to your data provider.

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Declarations>
        <fx:XML id="data" source="events.xml"/>

        <fx:XML id="data2">
            <event>
                <date>12-50-99</date>
                <title>Event A</title>
                <location>San Diego, CA</location>
            </event>
            <event>
                <date>12-50-99</date>
                <title>Event B</title>
                <location>Healdsburg, CA</location>
            </event>
        </fx:XML>

        <fx:Declarations>
            <mx:ArrayCollection id="data3">
                <fx:Object date="12-50-99" title="Event A" location="San Diego, CA"/>
                <fx:Object date="12-50-99" title="Event B" location="Healdsburg, CA"/>
            </mx:ArrayCollection>
        </fx:Declarations>
    </fx:Declarations>

    <!-- then your views -->
    <mx:Button/>
</s:Application>

Flex 3 works the same, but you just remove the <fx:Declarations/> tags.

If you want the data to be dynamic, I would just create a property for your ArrayCollection or XMLListCollection in the <mx:Script/> block in your view, say [Bindable] public var myData:ArrayCollection;, and load the data into that via XML. By keeping your data external (not hardcoding/embedding data into MXML), you don't have to recompile, and it's easier to add more and more.

In order to do that, you'd either need to use URLRequest or HTTPService. HTTPService is basically an MXML wrapper around the URLRequest.

Something like this pseudo code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    initialize="loadData()">
    <fx:Script>

        import mx.collections.*;

        [Bindable] public var list1:IList;
        [Bindable] public var list2:IList;
        [Bindable] public var list3:IList;

        public function loadData():void
        {
            eventsService.load(); // loads, may take a few frames/seconds
        }

        public function updateData(result:Object, property:String):void
        {
            // this["list1"] = xml;
            this[property] = new XMLListCollection(result);
        }

    </fx:Script>

    <fx:Declarations>
        <mx:HTTPService id="eventsService"
            url="events.xml" 
            resultFormat="e4x"
            result="updateData(event.result, 'list1');"
            fault="trace('eventsService Error');"/>
    </fx:Declarations>

    <!-- then your views -->
    <mx:List dataProvider="{list1}"/>
</s:Application>

Let me know if that works.