1

Adobe FlashBuilder4の最新のベータ版を入手しました。

<s:List>コンポーネントを使用dataProviderして、をXMLファイルとして指定したいと思います。

しかし、(labs.adobe.comからのドキュメントリンクを見るなど)たくさんの調査を行った後でも、それを行う方法がわかりません。

XMLファイルは次のようになります。

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

5 に答える 5

2

ネットワーク経由でXMLファイルをロードする場合は、次の操作を実行できます。

<?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>
于 2009-08-13T15:18:40.773 に答える
2

リストに画像を表示する場合は、URLLoaderを使用してxmlをロードし、バインド可能な変数に格納して、それをデータプロバイダーとしてリストに割り当てる必要があります。リストでは、必要に応じてビューをカスタマイズできるmx:itemrendererを使用する必要があります。

実際のコードはこのようになります

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

于 2009-08-13T10:19:32.440 に答える
0

XMLListCollectionクラスを使用する必要があります。

<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="@location"/>
于 2009-08-12T21:19:44.273 に答える
0

私の当初の目的は、クライアントが自分で管理できるSWFの外部にXMLファイルを作成することでした。これにより、クライアントは表示される画像を制御できるようになります。

私が投稿した最初の答えは、私が求めていた解決策ではありませんでした。使用fx:XMLとは、XMLファイルの内容が実際にSWFにコンパイルされるため、コンパイル後に変更できないことを意味します。

そこで、Jamesのソリューションを実装しました。

XMLファイルは次のようになります。

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

そして、画像レンダラーでは、次のようなデータを参照します。

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

このソリューションの本当に便利な点は、http://必要に応じて、別のサイトに存在する画像への完全な参照を配置できることです(crossdomain.xmlもちろん覚えています)。

実際、images.xmlファイルは別のサーバーに存在する可能性があります。

于 2009-08-18T21:25:07.693 に答える
-1

さて、私は1つの解決策を見つけました。

MXMLは次のようになります。

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

そしてこのようなimages.xml:

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

すべてのご回答ありがとうございます!

マット

于 2009-08-13T14:54:35.230 に答える