Flex 3 XML fütterte TileList übergibt ausgewähltes Element an eine andere Komponente

Question

Ich habe eine TileList, die bei der Erstellung mit einem xml gefüllt ist und möchte, dass das Bild vom ausgewählten Element an die Quelle einer Bildkomponente übergeben wird.

Dies ist die wichtigste Anwendung:

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

ich verschiedene Dinge für die Quelle der Bildkomponente versucht, aber nichts funktionierte so dass ich nur die vier Fragezeichen setzen. Hier ist der 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> 

Hier wird die 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> 

Und hier ist die 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(); 
} 
} 

Dies ist ein sehr einfaches Beispiel, aber sobald ich über diesen Buckel hinweg komme ich viel mehr von dem, was ich zu tun versuche. Danke fürs Lesen.

Answer 1

Der schnellste Weg ist:

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

Das Datenobjekt für die Verwendung innerhalb eines Elementrenderers ist nicht außerhalb. Ein Datenobjekt repräsentiert eines der Bilder in Ihrer XML-Datei, die Sie an den Renderer übergeben haben.

Überprüfen Sie die Dokumentation für Elementrenderer here.