views:

1422

answers:

5

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>
A: 

You need to use the XMLListCollection class.

<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="@location"/>
sharvey
Will that allow me to load the contents of an external XML file?
Matt Calthrop
it will convert your XML to an XMLListCollection - the source of the XML is not relevant.
Joel Hooks
+1  A: 

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>

TheBrain
I'm not sure this will work - I'm using the <s:List> component, and it only accepts a dataProvider that implements the IList interface.On re-reading my original post, I can see it wasn't clear that I am using the <s:List> component!
Matt Calthrop
A: 

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

Matt Calthrop
Ack. Looks like this solution embeds the XML file in the resulting SWF, and hence means that it's not configurable once the code has been released.Gonna look at James Ward's solution next.
Matt Calthrop
+2  A: 

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>
James Ward
Hey, thanks James.I'll give that a go as well - looks like a neat solution (and I can use the local file instead if I need).
Matt Calthrop
James, you're spot on - thanks for that.I'll mark your response as an answer, and also create a separate answer to show the specifics of how I did it.
Matt Calthrop
Strange - seems like you can't make more than one answer correct.
Matt Calthrop
A: 

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.

Matt Calthrop
Strange - not quite sure why this answer has been marked as unhelpful. Any guesses why? Confused.
Matt Calthrop