Flex ColorPicker load colors from xml

Question

Hi, I have a colorpicker that I want to have his colors loaded from an external xml, my xml looks like this

<colors>
        <color label="Aqua" colorHex="0xFFFFCC"/>
        <color label="Forest Green" colorHex="0xCCFF00"/>
        <color label="Kelly Green" colorHex="0xCCFF00"/>
        <color label="Royal Blue" colorHex="0xCCFF00"/>
        <color label="Columbia Blue" colorHex="0xCCFF00"/>
        <color label="Navy Blue" colorHex="0xCCFF00"/>
        <color label="Purple" colorHex="0xCCFF00"/>
        <color label="Maroon" colorHex="0xCCFF00"/>
        <color label="Cardinal" colorHex="0xCCFF00"/>
        <color label="Garnet" colorHex="0xCCFF00"/>
        <color label="Red" colorHex="0xCCFF00"/>
        <color label="Orange" colorHex="0xCCFF00"/>
        <color label="Texas Orange" colorHex="0xCCFF00"/>
        <color label="Light Gold" colorHex="0xCCFF00"/>
        <color label="Vega Gold" colorHex="0xCCFF00"/>
        <color label="Brown" colorHex="0xCCFF00"/>
        <color label="Black" colorHex="0xCCFF00"/>
        <color label="Silver" colorHex="0xCCFF00"/>
        <color label="White" colorHex="0xCCFF00"/>
        <color label="Pink" colorHex="0xCCFF00"/>
    </colors>

so I load the xml, added to a bindable variable with type xml and added to the dateprovider of the colorpicker like this

[Bindable] private var colorsDp:XML;

colorsDP = XML(loader.data);// the loader is an object that has the xml loaded

<mx:ColorPicker id="cp" dataProvider="{colorsDp}" labelField="label" colorField="colorHex" editable="false"/>

the docs said that I can use for the dataprovider as an xml, array, arrayCollection, xmlListColletion, etc, because the dataprovider convert to data to an ICollectionView, but doesn't work, why??

Answer 1

I was able to get it to work by binding the ColorPicker's dataProvider to an Array of Objects.

The MXML and ActionScript code:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                initialize="init(event)" 
                layout="absolute" >

    <mx:Script>
            <![CDATA[
                import mx.collections.ArrayCollection;
                import mx.collections.XMLListCollection;
                import mx.controls.Alert;
                import mx.rpc.events.FaultEvent;
                import mx.rpc.events.ResultEvent;

                private var colors:XMLListCollection;
                [Bindable] private var colorsArray:Array;

                private function init(evt:Event):void
                {
                    XMLService.send();
                }

                private function xmlService_result(evt:ResultEvent):void
                {
                    colors = new XMLListCollection(evt.result.color);
                    colorsArray = new Array(colors.toArray());
                    var numOfColors:int = colors.length;
                    for (var i:uint = 0; i < numOfColors; ++i) 
                    { 
                        var colorXML:XML = colors.getItemAt(i) as XML;
                        var colorObject:Object = new Object();
                        colorObject.name = colorXML.attribute('label');
                        colorObject.value = colorXML.attribute('colorHex');
                        colorsArray.push(colorObject);
                    }

                }

                private function xmlService_fault(evt:FaultEvent):void
                {
                    Alert.show('Failed to load external XML data:\n'+evt.fault.faultString);
                }

            ]]>
    </mx:Script>

    <mx:HTTPService id="XMLService" 
                    url="colors.xml" 
                    result="xmlService_result(event)"
                    resultFormat="e4x" 
                    fault="xmlService_fault(event)" />

    <mx:ColorPicker id="colorPicker" 
                    colorField="value" 
                    labelField="name" editable="false"
                    dataProvider="{colorsArray}"/>

</mx:Application>

In order for this to work you must have an XML file called colors.xml in the same directory as your application's main MXML file. The markup for my colors.xml is as follows:

<?xml version="1.0" encoding="utf-8"?>
<colors>
    <color label="Aqua" colorHex="0xFFFFCC"/>
    <color label="Forest Green" colorHex="0x228B22"/>
    <color label="Kelly Green" colorHex="0x00A000"/>
    <color label="Royal Blue" colorHex="0x4169E1"/>
    <color label="Columbia Blue" colorHex="0x75B2DD"/>
    <color label="Navy Blue" colorHex="0x23238E"/>
    <color label="Purple" colorHex="0x800080"/>
    <color label="Maroon" colorHex="0x800000"/>
    <color label="Cardinal" colorHex="0xC41E3A"/>
    <color label="Garnet" colorHex="0xb3005b"/>
    <color label="Red" colorHex="0xFF0000"/>
    <color label="Orange" colorHex="0xFFA500"/>
    <color label="Texas Orange" colorHex="0xffa500"/>
    <color label="Light Gold" colorHex="0xFD9202"/>
    <color label="Vega Gold" colorHex="0xD9D919"/>
    <color label="Brown" colorHex="0xA52A2A"/>
    <color label="Black" colorHex="0x000000"/>
    <color label="Silver" colorHex="0xC0C0C0"/>
    <color label="White" colorHex="0xFFFFFF"/>
    <color label="Pink" colorHex="0xFFC0CB"/>
</colors>