Come faccio a impostare il dataProvider per un componente da un file XML?

Question

Ho l'ultima beta di Adobe Flash Builder 4.

Voglio usare un componente <s:List>, e specificare il dataProvider come un file XML.

Tuttavia, dopo i carichi di ricerca (tra cui guardando i collegamenti doc off labs.adobe.com), io ancora non riesco a capire come farlo.

Il file XML sarà simile a questo:

<?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

Il mio scopo originale era quello di avere un file XML esterno al file SWF che il mio cliente ha potuto mantenere se stessi e, quindi, avrebbero dovuto controllo sulle immagini visualizzate.

La prima risposta che ho inviato non era proprio la soluzione che cercavo:. Usando fx:XML significa che il contenuto del file XML è in realtà compilati in file SWF, e quindi non è modificabile dopo la compilazione

Così ho implementato la soluzione James'.

Il file XML è simile al seguente:

<?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>

E nel rendering delle immagini, mi riferisco ai dati in questo modo:

<mx:Image
    id="imgRendered"
    source="{data.source}"
/>

La cosa veramente utili su questa soluzione è che posso anche mettere riferimenti completi http:// alle immagini presenti su un altro sito se voglio (ricordando crossdomain.xml, ovviamente).

In realtà, il file images.xml può esistere su un altro server.

Answer 2

se si desidera visualizzare le immagini in un elenco, è necessario caricare il file XML con un URLLoader, memorizzarlo in una variabile e assegnare associabile che come fornitore di dati alla vostra lista. la lista dovrebbe usare un mx:. itemRenderer in cui è possibile personalizzare la visualizzazione come si desidera

codice vero e proprio va someting come questo

<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

Se si desidera caricare il file XML attraverso la rete si può fare:

<?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

È necessario utilizzare la classe XMLListCollection.

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

Answer 5

Bene, ho trovato una soluzione.

Il MXML sarà simile a questa:

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

E images.xml in questo modo:

<?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>

Molte grazie per tutte le vostre risposte!

Matt