如何为 <s:List> 组件是XML文件？

Question

我已经获得了Adobe Flash Builder 4的最新Beta版。

我想使用<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文件，我的客户可以维护自己的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>

非常感谢您的所有答复！

马特