كيف يمكنني تعيين DataProvider للحصول على مكون لتكون ملف XML؟

Question

لدي أحدث نسخة تجريبية من Adobe 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

كان الهدف الأصلي الخاص بي هو الحصول على ملف XML خارج SWF أن موكلي قد يحافظ على أنفسهم، وبالتالي سيكون لديهم سيطرة على الصور المعروضة.

الجواب الأول الذي نشرته لم يكن هو الحل تماما بعد: باستخدام fx: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>

وفي صورة Renderer، أشير إلى البيانات مثل هذا:

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

الشيء المفيد حقا حول هذا الحل هو أنه يمكنني وضع كامل http:// يشير إلى الصور الموجودة في موقع آخر إذا أردت (تذكر crossdomain.xml, ، بالطبع بكل تأكيد).

في الواقع، يمكن أن يوجد ملف images.xml على خادم آخر.

Answer 2

إذا كنت ترغب في عرض الصور في قائمة، فيجب عليك تحميل XML مع Urlloader، قم بتخزينها في متغير قابل للربط وتعيين ذلك كوفر بيانات بيانات إلى قائمتك. يجب أن تستخدم القائمة 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 3

إذا كنت ترغب في تحميل ملف 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 4

تحتاج إلى استخدام فئة XMLListCollection.

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

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>

شكرا جزيلا لجميع ردودكم!

غير لامع