Acceso al itemRenderer de un elemento seleccionado

Question

Tengo un TileList con imágenes en miniatura. Bajo cada uno de las imágenes en miniatura que visualizar el nombre de la imagen. Quiero construir la funcionalidad de cambio de nombre. Así, bajo la TileList es un botón de "Cambiar nombre de imagen seleccionada".

Cuando se hace clic en este botón, me gustaría cambiar el estado del componente itemRenderer. La etiqueta debajo de la imagen se convertirá en una TextInput de manera que el usuario puede escribir un nombre nuevo. Esto es muy similar a la funcionalidad de cambio de nombre de archivos de Windows.

¿Cómo puedo acceder al itemRenderer de la imagen seleccionada? ¿Cómo puedo hacer que suceda que escucha el evento click del botón Cambiar nombre?

Algunos código:

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

El itemRenderer es sólo un mx: caja vertical con un MX: La imagen y un mx: texto. En hay otra mx: Estado en el que el MX: cambios de texto en 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, gracias Pbirkoff, su respuesta me llevó en la dirección correcta. La forma en que lo hago ahora es que me puse la propiedad del nombre del objeto de datos a "" tan pronto como F2 o el botón de cambio de nombre se hace clic en el elemento seleccionado TileList.

Me han implementado un bajo observación en la itemRenderer en ese data.name propiedad ( http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html ). Tan pronto como esta propiedad cambia de cambio el estado de la itemRenderer para mostrar un cuadro de entrada en lugar de una etiqueta.

Esto funciona igual que el explorador de archivos de Windows ahora.

Algunos código con algunas funciones pertinentes de la 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

Tome un vistazo a este ejemplo - -el lugar en la edición de controles podría darle un lugar para comenzar con sus controles.

Answer 3

No creo que este es el mejor camino a seguir.

Lo que quiero hacer es obtener el SelectedItem del TileList. Este es el modelo de datos para esta imagen (= un elemento de la colección de imágenes a todo). Supongo que este objeto tiene una propiedad como nombre o título. Pruebe a establecer este valor con el nuevo valor. Cuando realiza el objeto [Bindable], el valor correcto debe aparecer en su itemRenderer.