Flex TileList inicia desplazamiento y haga clic en el controlador

Question

Tengo algunas imágenes que me gustaría mostrar en TileList en Flex. Las dimensiones de My TileList son 2 columnas por n filas. Lo que quiero hacer es mostrar el primer elemento (fila 1, columna 1) vacío y no se puede hacer clic, y comenzar a mostrar mis artículos desde la fila 1, columna 2. ¿Es eso posible?

También me pregunto cuando creo un evento de clic para la misma TileList, ¿hay alguna forma de obtener un índice del elemento pulsado?

¡Muchas gracias!
m.

Answer 1

Buena pregunta. Estoy seguro de que alguien ofrecerá una solución más elegante, pero un enfoque simple podría ser simplemente agregar un nulo a su proveedor de datos en la posición 0 y hacer que su itemRenderer maneje el nulo mostrando algún tipo de contenido alternativo, o nada en todos.

Para extraer el índice del elemento en el que se hizo clic, hay varias propiedades en los objetos ListEvent que puede usar: event.currentTarget.selectedIndex (o event.currentTarget.selectedIndices, si está usando la selección múltiple), evento. columnIndex y .rowIndex, o event.itemRenderer, que puede usar en combinación con la propiedad itemRendererToIndex de TileList, entre otros.

Aquí hay un código de aplicación rápido y sucio que demuestra estos dos enfoques:

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

Espero que ayude! Vuelve con preguntas si las tienes.