Flex 3 XML feed TileList 将所选项目传递给另一个组件

Question

我有一个在创建完成时由 xml 填充的 TileList，我希望将所选项目中的图像传递到图像组件的源。

这是主要的应用程序：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="#FFFFFF">
<mx:ArrayCollection id="theImages"></mx:ArrayCollection>
<mx:Model id="items" source="items.xml" />
<mx:Script>
    <![CDATA[
        import ItemListObject;
        public function initList():void
         {
          for each ( var node:Object in items.image ) {
           var temp:ItemListObject = new ItemListObject();
           temp.strThumbnail = node.strThumbnail;
           temp.title = node.title;
           theImages.addItem(temp);
          }
 }
    ]]>
</mx:Script>
<mx:XML source="adjectives.xml" id="adjectivesXML"/>
    <mx:Canvas x="20" y="20">
        <mx:Image 
            id="item"
            source="????" 
            autoLoad="true" 
            width="500" 
            height="500" 
            scaleContent="true"/>
    </mx:Canvas>
    <mx:TileList id="imageTileList"
        itemRenderer="CustomItemRenderer"
        dataProvider="{theImages}"
        width="400"
        height="400"
        columnCount="2"
        creationComplete="initList();"/>
    </mx:Application>

我对 Image 组件的源尝试了不同的方法，但没有任何效果，所以我只打了 4 个问号。 这是 CustomItemRenderer：

    <?xml version="1.0" encoding="utf-8"?>
    <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="center"
    verticalAlign="middle"
    verticalGap="0"
    width="150"
    height="150"
    paddingRight="5"
    paddingLeft="5"
    paddingTop="5"
    paddingBottom="5">

    <mx:Image id="img" height="100" width="100" source="{data.strThumbnail}" />
    <mx:Label height="20" width="75" text="{data.title}" textAlign="center" color="0x000000" fontWeight="normal" />
</mx:VBox>

这是 items.xml：

<?xml version="1.0" encoding="utf-8"?>
<items>
 <image id="1">
    <title>Image 1</title>
    <strThumbnail>1.jpg</strThumbnail>
 </image>
 <image id="2">
    <title>Image 2</title>
    <strThumbnail>2.jpg</strThumbnail>
 </image>
 <image id="3">
    <title>Image 3</title>
    <strThumbnail>3.jpg</strThumbnail>
 </image>
 <image id="4">
    <title>Image 4</title>
    <strThumbnail>4.jpg</strThumbnail>
 </image>    
</items>

这是 ItemsListObject.as

package
{
 [Bindable]
 public class ItemListObject extends Object
 {
  public function ItemListObject() {
   super();
  }

  public var title:String = new String();
  public var strThumbnail:String = new String();
 }
}

这是一个非常粗略的示例，但是一旦我克服了这个困难，我将能够做更多我想做的事情做。 谢谢阅读。

Answer 1

最快的方法是：

<mx:Image id="img" source="{imageTileList.selectedItem.strThumbnail}" />

数据对象在项目渲染器内使用，而不是在项目渲染器外部使用。 一个数据对象代表您传递到渲染器的 xml 中的图像之一。

请务必在此处查看项目渲染器的文档。