如何在Adobe Flex中显示xml文件中的产品列表

Question

I have an html file with the following code as a list of products

<productstore>
    <product id='A1'>
    <image lbl="Apple" src="assets/apple.png" />
    <price>$11.00</price>
    <description>Keeps doctor away</description>
    <code>ap01</code>
    </product>
</productstore>

I want to display the image with the name and price in a canvas (Flex with flash builder 4.5).I followed the example given in the link http://blog.flexexamples.com/2008/03/08/creating-a-simple-image-gallery-with-the-flex-tilelist-control/

<mx:XML id="xml" source="prod.xml" />
    <mx:XMLListCollection id="xmlListColl" source="{xml.image}" />
    <mx:TileList id="tileList" x="492" y="10" width="255" height="316" columnCount="2"
                 columnWidth="125" dataProvider="{xmlListColl}"
                 itemRenderer="TileListItemRenderer" rowCount="4" rowHeight="100"
                 verticalScrollPolicy="on"/>

Also the modification I am looking at is to add dragAccept rather than a click event unlike the example.

This is my TileListItemRenderer

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
             x="492" y="10" width="255" height="316" 
         horizontalAlign="center"
         verticalAlign="middle">

    <mx:Image source="{data.@src}" />

    <mx:Label text="{data.@lbl}" />

</mx:VBox>

When I build and run the list is empty, not sure what am I missing. Any help would be appreciated.

I now modified the code trying to implement the following link and again stuck: http://blog.flexexamples.com/2008/03/29/dynamically-loading-xml-files-using-the-httpservice-tag/

main.mxml

    private function init():void
                {
                    var srcUrl:String = FlexGlobals.topLevelApplication.application.parameters.srcUrl;
                    if(srcUrl) {
                        ViewSource.addMenuItem(this, srcUrl);
                    }
                    loadProducts('prod.xml');
                }

                private function loadProducts(src:String):void {
                    httpService.url = src;
                    httpService.send();
                }
private function httpService_result(evt:ResultEvent):void {
                var xmlList:XMLList = XML(evt.result).product.image;
                xmlListColl = new XMLListCollection(xmlList);
            }

Itemrenderer

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
         x="492" y="10" width="255" height="316" >

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

    <mx:Label text="{data.name}" />

</mx:Canvas>

xml

<productlist>
        <product>
        <name>Apple</name>
        <image>assets/apple.png</image>
        <price>$11.00</price>
        <description>Keeps doctor away</description>
        <code>ap01</code>
        </product>
    </productstore>

Still no luck....

Answer 1

The {data} variable is related to the xml node. So, if you want to reference the 's "src" value, the correct binding expression should be:

{data.image.@src}

Try this and let us know about the results.