Binding XML to ComboBox using XMLListCollection

This post has been in serious need of updating since its one of my more popular posts, but the post is really outdated.   Here is a new way to bind your data to a ComboBox and DataGrid by loading your XML document and converting it to an XMLListCollection.

Update

An easier way to convert XML to a bindable list is to convert it to an XMLListCollection.   I used Adobe AIR for the application output because security changes in Flex 3/Flash 9 prevent you from easily reading local XML files within a browser-based Flex project.   Below is the complete XML and MXML files:

XML

<competencylist>
<competency identifier="1">
<data>1</data>
<label>Comeptency 1</label>
</competency>
</competencylist>

MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="left" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;

[Bindable] private var competencyListData:XMLListCollection;
[Bindable] private var xmlURL:String;

/***********************
Some code comes from the following examples:

Marco Casario
http://casario.blogs.com/mmworld/2006/07/arraycollection.html

Brendan Meutzner
http://www.visualconcepts.ca/blog/index.cfm/2006/6/22/Loading-modifying-writing-XML-locally-with-Flex-20
*****************/

private function init():void
{
var url:String = "data/test.xml";
var d:Date = new Date();
xmlURL = url  + "?" + d.getTime().toString(); // great idea Brendan!

xmlDataList.send();
}

private function resultHandler(event:ResultEvent):void
{
// seems to only work with casting, not ArrayCollection(result)
//competencyListData = new ArrayCollection(xmlDataList.lastResult.competencylist.competency );

var xmlList:XMLList = xmlDataList.lastResult.competencylist.competency;
competencyListData = new XMLListCollection( xmlDataList.lastResult.children())
trace(competencyListData.length);
}

private function faultHandler(event:FaultEvent):void
{
trace("Fault : " + event.message);
}

private function setOutputData(event:Event):void
{
outPut.text = event.target.selectedItem.data;
}
]]>
</mx:Script>
<mx:HTTPService id="xmlDataList" url="{xmlURL}" fault="faultHandler(event)" result="resultHandler(event)" method="GET" resultFormat="e4x"/>

<mx:ComboBox id="NameSelect" dataProvider="{competencyListData}" labelField="label" change="setOutputData(event);"/>
<mx:DataGrid dataProvider="{competencyListData}" change="setOutputData(event);" height="102">
<mx:columns>
<mx:DataGridColumn headerText="ID" dataField="data"/>
<mx:DataGridColumn headerText="Label" dataField="label"/>
</mx:columns>
</mx:DataGrid>
<mx:HBox width="202">
<mx:Label text="Data Selected:"/>
<mx:TextInput width="100" id="outPut"/>
</mx:HBox>
</mx:WindowedApplication>
[/sourceode]

To use this example, just create a new AIR project in your Flex Builder 3 and create a new xml document named data.xml within the src/data/ folder structure.  Copy the MXML code to your Main.mxml file for the application and run.   If you want to do this example in a web-based Flex project then you will have to overcome the issues with loading a local XML file into Flex within the browser.  See the post comments for that discussion.

- Mister

<strong>OLD POST (outdated)</strong>

I have been banging my head the past couple days trying to get an XML file I created to bind to and show up in a ComboBox.&nbsp; I found a couple of examples on different blogs, but they didn't seem to work or were not updated to work with the Flex 2 (instead of beta 3).&nbsp;&nbsp;&nbsp;&nbsp; My XML file consisted of the following structure:


<competencylist>
<competency identifier="1">
<data>1</data>
<label>Comeptency 1</label>
</competency>
</competencylist>

I thought I could just use HTTPS, load my XML, and bind the structure to an ArrayCollection.&nbsp; I tried the following:

myAC = new ArrayCollection(myXML.lastResult.competencylist.competency)

But the nothing would show up in the ComboBox.&nbsp; I ended up casting the returned XML as an ArrayCollection, this proved more positive:

 myAC = myXML.lastResult.competencylist.competency as ArrayCollection; 

I did find some discussion about the issue on Flash Coders.  I also referenced some blog examples by and .

Sample and Source code

18 Comments

  1. can you be so kind of sharing the source code you use to achieve this ? I am on the same situation trying to load into a combo box an xml file

    tx

  2. hey… your link says “Sample and Source code” but there is not source code in that link… please let us know how you do that…. I’m new on flex and I don’t get the arrayCollection… thing so give me a hand please

  3. To view the source code, right-click on the Flex application and select “view source”. For those on a Mac, CTRL click on the Flex application.

  4. There is no need to cast as ArrayCollection, the following snipet is working fine :
    The XML DOC :

    Hello worldtest

    Hello world1test1

    Hello world2test2

    The ComboBox creation :

    It will consume directly the XML data (tested on Flex 3)

  5. There is no need to cast as ArrayCollection, the following snipet is working fine :
    The XML DOC :
    [as]

    Hello worldtest

    Hello world1test1

    Hello world2test2

    [/as]
    The ComboBox creation :
    [as]

    [/as]
    It will consume directly the XML data (tested on Flex 3)

  6. Hi ,
    I am not able to make your code run. I am using flex 3.
    I copy pasted your code and test.xml file. The comboBox is empty.

    The MXML File code:

    and Test.xml:

    1
    Comeptency 1

    2
    Comeptency 2

    3
    Comeptency 3

    Please, cna you direct me, what is the issue?

    Thanks,
    C

  7. @C M, I still can’t see your MXML code, please see the CODE section at bottom of comment window for tags used in comments. You need to use [ as ] and [ /as ], but without the spaces. I am putting spaces in so that you can see them in my comments.

  8. I have updated the post to work with Flex 3 and now Adobe AIR. I just kept running into issues reading local XML files within the browser. AIR doesn’t fuss with that mess, so here is a new example of how to read XML and bind it to a ComboBox and DataGrid in Flex.

  9. Hi Mister,

    Thanks for posting the new code. I highly appreciate your help. I am able to run the new code. One thing I want to say is that one of the reasons why my code was not working was because the XML tags for some reason cant use camel notations. My xml tag was named like stationName and in that situation the comboBox won’t get populated and it will be empty. I changed it to stationname and it works like a charm.

    Glad that I finally got it working. Once again thanks for your help.

    Regards,
    C

Comments are closed.