1

我有 Adob​​e 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>
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

我最初的目标是在 SWF 外部有一个 XML 文件，我的客户可以自己维护，因此他们可以控制显示的图像。

我发布的第一个答案并不完全是我所追求的解决方案： usingfx:XML意味着 XML 文件的内容实际上已编译为 SWF，因此编译后不可更改。

所以我实施了詹姆斯的解决方案。

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 回答
0

您需要使用 XMLListCollection 类。

<s:List dataProvider="{new XMLListCollection(data.image)}" labelField="@location"/>
于 2009-08-12T21:19:44.273 回答
-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 回答