如何将 <s:List> 组件的 dataProvider 设置为 XML 文件？

Question

我有最新的 Beta 版 Adob​​e Flash Builder 4。

我想使用<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>

Answer 1

如果您想在列表中显示图像，您应该使用 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>

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

Answer 3

您需要使用 XMLListCollection 类。

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

Answer 4

我最初的目标是在 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 文件可以存在于另一台服务器上。

Answer 5

嗯，我找到了一个解决方案。

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>

非常感谢您的所有回复！

马特