Flex TileList start offset and click handler

Question

Hello!
I have some images I would like to display in TileList in Flex. My TileList dimensions are 2 columns by n rows. What I want to do is to display the first item (row 1, column 1) empty and not clickable, and to start displaying my items from row 1, column 2. Is that possible?

I also wonder when I create click event for the same TileList, is there a way get an index of clicked element?

Thank you very much!
m.

Answer 1

Good question. I'm sure someone'll offer up a more elegant solution, but a simple approach might simply be to add a null to your dataProvider at position 0, and having your itemRenderer handle the null by displaying some sort of alternate content, or nothing at all.

To extract the index of the clicked element, there are several properties on the ListEvent objects you might use -- event.currentTarget.selectedIndex (or event.currentTarget.selectedIndices, if you're using multi-selection), event.columnIndex and .rowIndex, or event.itemRenderer, which you can use in combination with the TileList's itemRendererToIndex property, among others.

Here's a quick-and-dirty app code demonstrating both of these approaches:

<?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! Post back with questions if you have 'em.