Flex 3 XML fed TileList passant l'élément sélectionné à un autre composant

Question

J'ai une TileList remplie par un xml à la création et je voudrais que l'image de l'élément sélectionné soit transmise à la source d'un composant d'image.

Ceci est l'application principale:

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

J'ai essayé différentes choses pour la source de l'élément d'image, mais rien ne fonctionnait donc je viens de mettre les 4 points d'interrogation. Voici le 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> 

Voici le 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> 

Et voici les 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(); 
} 
} 

Ceci est un exemple très rude, mais une fois que je surmonter cette bosse je serai en mesure de faire beaucoup plus de ce que je suis en train de faire. Merci d'avoir lu.

Answer 1

La façon la plus rapide est:

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

L'objet de données est destiné à être utilisé dans un article non renderer à l'extérieur de celui-ci. Un objet de données représente l'une des images de votre fichier XML que vous avez transmises dans le moteur de rendu.

Assurez-vous de consulter les documents pour les rendus d'éléments here.