Flex TileList commence décalage et cliquez sur gestionnaire

Question

J'ai quelques images que je voudrais afficher dans TileList dans Flex. Mes dimensions TileList sont 2 colonnes par n lignes. Ce que je veux faire est d'afficher le premier élément (ligne 1, colonne 1) vide et non cliquable, et de commencer à afficher mes éléments de la ligne 1, colonne 2. Est-ce possible?

Je me demande aussi quand je crée un événement click pour le même TileList, y a-t-il un moyen d'obtenir un index de l'élément cliqué?

Merci beaucoup!
m.

Answer 1

Bonne question. Je suis sûr que quelqu'un offrira une solution plus élégante, mais une approche simple pourrait simplement être d'ajouter un null à votre dataProvider à la position 0, et avoir votre itemRenderer gérer le null en affichant un certain type de contenu alternatif, ou rien à tout.

Pour extraire l'index de l'élément cliqué, il existe plusieurs propriétés sur les objets ListEvent que vous pouvez utiliser: event.currentTarget.selectedIndex (ou event.currentTarget.selectedIndices, si vous utilisez la multi-sélection), event .columnIndex et .rowIndex, ou event.itemRenderer, que vous pouvez utiliser en combinaison avec la propriété itemRendererToIndex de TileList, entre autres.

est ici un code d'application rapide et sale démontrant ces deux approches:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*"> 

    <mx:Script> 
     <![CDATA[ 

      import mx.controls.Alert; 
      import mx.events.ListEvent; 
      import mx.collections.ArrayCollection; 

      private var dpSource:Array = [ 
       null, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"}, 
       {src: "http://turbonerd.com/media/images/roaming/t/20091017225355.jpg"} 
      ];  

      [Bindable] 
      private var dp:ArrayCollection = new ArrayCollection(dpSource); 

      private function myList_itemClick(event:ListEvent):void 
      { 
       Alert.show("You clicked the item at position (" + event.columnIndex + ", " + event.rowIndex + "), which is item " + myList.itemRendererToIndex(event.itemRenderer).toString() + " in the list."); 
      } 

     ]]> 
    </mx:Script> 

    <mx:TileList id="myList" dataProvider="{dp}" itemClick="myList_itemClick(event)"> 
     <mx:itemRenderer> 
      <mx:Component> 
       <mx:Canvas> 

        <mx:Script> 
         <![CDATA[ 

          override public function set data(value:Object):void 
          { 
           super.data = value; 
          } 

         ]]> 
        </mx:Script> 

        <mx:Image source="{data.src}" width="100" height="60" visible="{data != null}" /> 
        <mx:Label text="No item!" visible="{data == null}" /> 

       </mx:Canvas> 
      </mx:Component> 
     </mx:itemRenderer> 
    </mx:TileList> 

</mx:Application> 

Hope it helps! Postez des questions si vous les avez.