Flex TileList démarrer le décalage et le gestionnaire de clics

Question

J'ai quelques images à 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 la même TileList, existe-t-il un moyen d'obtenir un index d'élément cliqué?

Merci beaucoup!
m.

Answer 1

Bonne question. Je suis sûr que quelqu'un proposera une solution plus élégante, mais une approche simple pourrait simplement consister à ajouter un null à votre fournisseur de données en position 0 et à laisser votre itemRenderer gérer le null en affichant une sorte de contenu alternatif, ou rien du tout. tous.

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). columnIndex et .rowIndex ou event.itemRenderer, que vous pouvez utiliser en combinaison avec la propriété itemRendererToIndex de TileList, entre autres.

Voici un code d'application simple et détaillé illustrant 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>

J'espère que ça aide! Répondez avec des questions si vous en avez.