TileList с поддержкой Flex 3 XML передает выбранный элемент другому компоненту

Question

У меня есть TileList, заполненный XML при завершении создания, и я хотел бы, чтобы изображение из выбранного элемента было передано в источник компонента изображения.

Это основное приложение:

<?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, которое вы передали в средство визуализации.

Обязательно ознакомьтесь с документами для средств визуализации элементов здесь .