Flex 3 XML fed TileList passing selected item to another component

Question

I have a TileList populated by an xml on creation complete and I would like the image from the selected item to be passed to the source of an image component.

This is the main application:

<?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>

I tried different things for the source of the Image component but nothing worked so I just put the 4 question marks. Here is the 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>

Here is the 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>

And here is the 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();
 }
}

This is a very rough example, but once I get over this hump I'll be able to do a lot more of what I'm trying to do. Thanks for reading.

Answer 1

The quickest way is:

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

The data object is for use within an item renderer not outside of it. One data object represents one of the images in your xml that you passed into the renderer.

Be sure to check out the docs for item renderers here.