How do I set the dataProvider for an component to be an XML file?

Answer 1

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 2

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 3

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 4

You need to use the XMLListCollection class.

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

Answer 5

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>