Using an XML data provider with the Spark List control in Flex 4

by Peter deHaan on November 4, 2009

in List (Spark), XML, XMLList, XMLListCollection, beta2

The following example shows how you can use an XML document as a data provider for a Spark List control in Flex 4 by using an XMLListCollection.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection>
                <fx:XMLList xmlns="">
                    <node label="One" />
                    <node label="Two" />
                    <node label="Three" />
                    <node label="Four" />
                    <node label="Five" />
                    <node label="Six" />
                    <node label="Seven" />
                    <node label="Eight" />
                    <node label="Nine" />
                </fx:XMLList>
            </s:XMLListCollection>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Or, if you wanted to embed the XML into your application, you could use the <fx:XML/> tag and bind to an XMLListCollection, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Declarations>
        <fx:XML id="nodes" source="nodesAndStuff.xml" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection source="{nodes.children()}" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the external .XML file, nodesAndStuff.xml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<root>
    <node label="One" />
    <node label="Two" />
    <node label="Three" />
    <node label="Four" />
    <node label="Five" />
    <node label="Six" />
    <node label="Seven" />
    <node label="Eight" />
    <node label="Nine" />
</root>

Or, if you didn’t want to use data binding, Corey, you could set the data provider using ActionScript, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/04/using-an-xml-data-provider-with-the-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_dataProvider_XML_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            private function init():void {
                xmlListColl.source = nodes.children();
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <fx:XML id="nodes" source="nodesAndStuff.xml" />
    </fx:Declarations>
 
    <s:List id="lst"
            labelField="@label"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:XMLListCollection id="xmlListColl" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged as: children, dataProvider, Gumbo, IList, source

{ 11 comments… read them below or add one }

1 divin3x November 5, 2009 at 4:52 am

Yeah thx, its really usefull :D I’ve been posting on some forums how to load an xml file in flex 4 , and your guide is perfect! :)

2 divin3x November 5, 2009 at 4:58 am

One question, is this feature enabled today (4 November, 2009) ? I’m pretty sure I typed in flex 4 <xml and it didn't find anything, now it finds and

3 Peter deHaan November 5, 2009 at 7:36 am: @divin3x,

Should work. I used yesterday’s build, I believe.

Peter

Reply

4 Doug February 11, 2010 at 5:39 pm

Hey Peter… I’m running into problems with the Spark List control and this example. If you use a dataprovider that you add children to, say with a button that calls addChild(), then after about the 7th time of adding a new child to the list, the list overwrites one of the children in addition to adding to the bottom of the list. I’ve checked the XML and it looks accurate (it’s not actually overwriting), but the list displays the children() of the XMLListCollection oddly. Any thoughts as to why this happens?

5 Peter deHaan February 11, 2010 at 9:36 pm

@Doug,

Do you have a small, reproducible test case? I’m not 100% sure what you mean by using addChild() and how you’re adding items to the List data provider.
If you think it’s a Flex bug, you can file it at http://bugs.adobe.com/flex/ and myself or somebody else can take a look.

Peter

6 Doug February 12, 2010 at 2:33 pm: Hey Peter… I was just checking this page for updates and saw your note. I will try to whip out a quick example test case. Would the best place to post it be here or on the bug that I filed?
7 Peter deHaan February 12, 2010 at 4:59 pm: I’d say the best place is probably in the official bug base, and then post the bug number here.
At least that way it will be officially tracked in JIRA (the bug base).

Thanks,
Peter

8 Doug February 15, 2010 at 7:11 pm

Bug created and example file attached to bug. The bug number is SDK-25486. It appears as if “appendChild” is losing the pointer to the end of the list somehow.

9 Doug February 19, 2010 at 11:13 am

Just an update. I made an example file for that bug to show what the list is doing. It appears that it might not actually the list, but with XMLList.addChild (ala Collection elements) instead. Sorry for the confusion.

10 Peter deHaan February 19, 2010 at 12:38 pm

@Doug,

Not sure I really understand the issue (I’m more of an XMLListCollection.addItem() and not an XMLList.appendChild() guy myself), but does this help at all?

<?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:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.events.FlexEvent;
 
            private const theXML:XML = <root>
                    <node label="one" value="1 - First"/>
                    <node label="two" value="2 - Second"/>
                    <node label="three" value="3 - Third"/>
                    <node label="four" value="4 - Fourth"/>
                    <node label="five" value="5 - Fifth"/>
                    <node label="six" value="6 - Sixth"/>
                    <node label="seven" value="7 - Seventh"/>
                    <node label="eight" value="8 - Eighth"/>
                    <node label="nine" value="9 - Ninth"/>
                    <node label="ten" value="10 - Tenth"/>
                </root>;
 
            private const xmlListOne:XMLList = theXML.node;
 
            private var indexCounter:Number = 0;
 
            [Bindable]
            private var coll:XMLListCollection = new XMLListCollection();
 
            protected function button1_buttonDownHandler(event:FlexEvent):void {
                var n:XML = xmlListOne[indexCounter];
                coll.addItem(n);
                if (indexCounter < (xmlListOne.length() - 1)) {
                    indexCounter++;
                } else {
                    indexCounter = 0;
                }
            }
 
            protected function button2_buttonDownHandler(event:FlexEvent):void {
                xmlValues1.text = coll.source.toXMLString();
            }
        ]]>
    </fx:Script>
 
    <s:List x="350" y="120" width="232" height="120" labelField="@value" dataProvider="{coll}"/>
    <s:Label x="350" y="99" text="Spark List showing xmlListTwo.appendChild results:"/>
    <s:Label x="51" y="99" text="Original XML:"/>
    <s:Label x="711" y="99" text="Actual xmlListTwo contents:"/>
    <s:Label x="711" y="120" id="xmlValues1"/>
    <s:Button x="476" y="40" label="Add Member to List" buttonDown="button1_buttonDownHandler(event)"/>
    <s:Button x="710" y="40" label="Show Actual XML List" buttonDown="button2_buttonDownHandler(event)"/>
    <s:Label x="51" y="120" id="xmlValues" text="{xmlListOne}"/>	
    <s:Label x="350" y="269" text="Label Control showing xmlListTwo.children():"/>
    <s:Label x="350" y="290" id="xmlValues0"/>
 
</s:Application>

Peter

11 Doug March 9, 2010 at 11:16 pm

Sorry – am just now seeing your reply. It seems to get around the issue with addChild(). Thanks for suggesting the work-around!

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising