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

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

You need to use the XMLListCollection class.

<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="@location"/>

Answer 2

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 3

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

Answer 4

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"/&gt;
    </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 5

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.