How do I set the dataProvider for an <s:List> component to be an XML file? - actionscript-3

Question

I've got the latest Beta of Adobe Flash Builder 4.
I want to use a <s:List> component, and specify the dataProvider as being an XML file.
However, after loads of research (including looking at doc links off labs.adobe.com), I still can't figure out how to do it.
The XML file will look something like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<imageList>
<image location="path/to/file1.jpg" />
<image location="path/to/file2.jpg" />
<image location="path/to/file3.jpg" />
</imageList>

Answer 1

if you want to display images in a list, you should load the xml with a URLLoader , store it in a bindable variable and assign that as data provider to your list. the list should use a mx:itemrenderer where you can customize your view as you wish.
Actual code goes someting like this
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.collections.IList;
import mx.controls.Image;
private var loader : URLLoader = new URLLoader();
[Bindable]
private var xml : XMLList;
private function init() : void
{
this.loader.addEventListener(Event.COMPLETE, onComplete);
this.loader.load(new URLRequest("data.xml"));
}
private function onComplete(evt : Event) :void
{
this.loader.removeEventListener(Event.COMPLETE, onComplete);
this.xml = new XML(this.loader.data).image;
}
]]>
</fx:Script>
<mx:List id="list" width="200" height="500" dataProvider="{xml}">
<mx:itemRenderer>
<fx:Component>
<mx:Image width="200" height="200" source="{data.#location}" />
</fx:Component>
</mx:itemRenderer>
</mx:List>

Answer 2

If you want to load the XML file over the network you can do:
<?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/halo">
<fx:Declarations>
<mx:HTTPService id="srv" url="http://ws.jamesward.com/images.xml"/>
</fx:Declarations>
<s:applicationComplete>
srv.send();
</s:applicationComplete>
<s:List dataProvider="{srv.lastResult.images.image}" width="100%" height="100%">
<s:itemRenderer>
<fx:Component>
<mx:Image source="{data.source}"/>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>

Answer 3

You need to use the XMLListCollection class.
<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="#location"/>

Answer 4

My original aim was to have an XML file external to the SWF that my client could maintain themselves, and thus they would have control over the images displayed.
The first answer I posted was not quite the solution I was after: using fx:XML means that the contents of the XML file is actually compiled into the SWF, and hence is not alterable after compilation.
So I've implemented James' solution.
The XML file looks like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<image source="path/to/image1.jpg" />
<image source="path/to/image2.jpg" />
<image source="path/to/image3.jpg" />
<image source="path/to/image4.jpg" />
</images>
MXML:
<?xml version="1.0" encoding="utf-8"?>
<s:Group
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:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function lstImages_creationCompleteHandler(event : FlexEvent) : void
{
dpHttpService.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService
id="dpHttpService"
url="images.xml"
/>
</fx:Declarations>
<s:List
id="lstImages"
dataProvider="{dpHttpService.lastResult.images.image}"
width="100%"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
</s:Group>
And in the image renderer, I refer to the data like this:
<mx:Image
id="imgRendered"
source="{data.source}"
/>
The really useful thing about this solution is that I can also put full http:// references to images that exist on another site if I want to (remembering crossdomain.xml, of course).
In fact, the images.xml file can exist on another server.

Answer 5

Well, I found one solution.
The MXML will look like this:
<fx:Declarations>
<fx:XML
id="dpXml"
source="path/to/images.xml"
/>
<mx:XMLListCollection
id="dpXmlListCollection"
source="{dpXml.image}"
/>
</fx:Declarations>
<s:List
id="lstImages"
dataProvider="{dpXmlListCollection}"
itemRenderer="path.to.render.ImageRenderer"
skinClass="path.to.skins.ListSkin"
>
<s:layout>
<s:HorizontalLayout gap="2" />
</s:layout>
</s:List>
And images.xml like this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<images>
<image>
<location>path/to/image1.jpg</location>
</image>
<image>
<location>path/to/image2.jpg</location>
</image>
<image>
<location>path/to/image3.jpg</location>
</image>
</images>
Many thanks for all your responses!
Matt