Accesso al itemRenderer di un elemento selezionato

Question

Ho un TileList con immagini in miniatura. Sotto ogni immagini in miniatura visualizzo il nome dell'immagine. Voglio costruire funzionalità Rinomina. Così sotto la TileList è un pulsante "Rinomina immagine selezionato".

Quando questo pulsante viene cliccato, vorrei cambiare lo stato del componente itemRenderer. L'etichetta sotto l'immagine cambierà in un TextInput modo che l'utente può digitare un nuovo nome. Questo è molto simile alla funzionalità rinomina file di Windows.

Come posso accedere al itemRenderer dell'immagine selezionata? Come posso farlo accadere che ascolta l'evento click del pulsante Rename?

Alcuni codice:

<mx:TileList id="imageTileList" width="100%" height="100%" doubleClickEnabled="true"
 itemsChangeEffect="{tileListEffect}" dataProvider="{images}" 
 keyDown="{tileListKeyDownHandler(event)}"
 itemRenderer="com.n200.components.htmlElement.ImageTile" 
 columnWidth="128" rowHeight="128" itemDoubleClick="{insertImage()}" 
 horizontalScrollPolicy="off" verticalScrollPolicy="auto" />

<mx:LinkButton label="Rename selected image" labelPlacement="left"
    enabled="{imageTileList.selectedIndex>0}"
    styleName="rename24" click="{renameSelectedImage()}" />


<mx:Script>
<![CDATA[
    private function renameSelectedImage():void
    {
        // Need to access itemRenderer of selected image here
    }
]]>
</mx:Script>

L'itemRenderer è solo un mx: VBox con un mx: Immagine e un mx: Text. In c'è un altro mx: Stato in cui i mx: cambia il testo in un mx: TextInput:

<mx:states>
    <mx:State name="rename">
        <mx:RemoveChild target="{imageName}" />
        <mx:AddChild>
            <mx:TextInput id="newName" text="{originalName}" keyDown="{textInputKeyDownHandler(event)}" 
                width="100%" focusOut="{commit()}" focusThickness="0" />
        </mx:AddChild>
    </mx:State>
</mx:states>

<enterComponents:P200Image source="{imgFunction?imgFunction.fileId:null}" width="82" height="82" verticalAlign="bottom" stretch="true" />
<mx:Text id="imageName" text="{imgFunction.name}" selectable="false" truncateToFit="true" 
    textAlign="center" width="82" toolTip="{imgFunction.name}" />

Answer 1

Ok, grazie Pbirkoff, la tua risposta mi ha portato nella direzione corretta. Il modo in cui lo faccio adesso è che ho impostato la proprietà nome dell'oggetto dati "" non appena F2 o il pulsante Rinomina viene cliccato sulla voce selezionata TileList.

Ho implementato un Osservare nel itemRenderer su quel data.name proprietà ( http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html ). Non appena questa struttura cambia a cambiare lo stato della itemRenderer visualizzare una casella di input piuttosto che un'etichetta.

Questo funziona esattamente come file explorer di Windows ora.

Alcuni codice con alcune funzioni rilevanti del itemRenderer:

<mx:states>
    <mx:State name="rename">
        <mx:RemoveChild target="{imageName}" />
        <mx:AddChild>
            <mx:TextInput id="newName" text="{originalName}" keyDown="{textInputKeyDownHandler(event)}" 
                width="100%" focusOut="{commit()}" focusThickness="0" />
        </mx:AddChild>
    </mx:State>
</mx:states>

<enterComponents:P200Image source="{imgFunction?imgFunction.fileId:null}" width="82" height="82" verticalAlign="bottom" stretch="true" />
<mx:Text id="imageName" text="{imgFunction.name}" selectable="false" truncateToFit="true" 
    textAlign="center" width="82" toolTip="{imgFunction.name}" />

<util:Observe source="{imgFunction.name}" handler="{nameChangedHandler}" />

<mx:Script>
    <![CDATA[
        [Bindable]
        private var imgFunction:ImageFunctionRecord;

        [Bindable]
        public override function set data(value:Object):void
        {
            super.data = value;
            if(value)
            {
                imgFunction = ImageFunctionRecord(value);
                originalName = imgFunction.name;
            }
            else
            {
                imgFunction = null;
            }
        }
        public override function get data():Object
        {
            return imgFunction;
        }

        private function nameChangedHandler():void
        {
            if (imgFunction.name.length == 0)
                // when rename is clicked, the name property will be set to ""
                renameImage();
            else
                originalName = imgFunction.name;
        }


        private function renameImage():void
        {
            currentState = "rename";
            newName.setFocus();
            selectAllText();
        }

    ]]>
</mx:Script>

Answer 2

Date un'occhiata a questo esempio - -la in atto la modifica di controlli potrebbero darvi un punto di partenza con i controlli.

Answer 3

Non credo che questo è il modo migliore per andare.

Quello che vorrei fare è ottenere il SelectedItem dal TileList. Questo è il modello di dati per questa immagine (= un articolo dal immagini-raccolta). Credo che questo oggetto ha una proprietà come nome, o il titolo. Provare a impostare questo valore con il nuovo valore. Quando si effettua l'oggetto [Bindable], il valore corretto dovrebbe apparire nella vostra itemRenderer.