Accessing the itemRenderer of a selected item

Question

Hi,

I have a TileList with thumbnail images. Under each thumbnail images I display the name of the image. I want to build rename functionality. So under the TileList is a "Rename selected image" button.

When this button is clicked, I would like to change the state of the itemRenderer component. The label underneath the image will change into a TextInput so that the user can type a new name. This is much like the Windows rename file functionality.

How can I access the itemRenderer of the selected image? How can I make it happen that it listens to the click event of the Rename button?

Some code:

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

The itemRenderer is just a mx:VBox with an mx:Image and a mx:Text. In there is another mx:State where the mx:Text changes into a 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

I don't think this is the best way to go.

What I would do is get the SelectedItem from the TileList. This is the data-model for this image (= an item from your images-collection). I guess this object has a property like Name, or Title. Try setting this value with the new value. When you make the object [Bindable], the correct value should appear in your ItemRenderer.

Answer 2

Take a look at this example--the in place editing controls might give you a place to start with your controls.

Answer 3

Ok, thanks Pbirkoff, your answer led me in the correct direction. The way I do it now is that I set the name property of the data object to "" as soon as F2 or the rename button is clicked on the TileList selected item.

I have implemented an Observe in the itemRenderer on that data.name property (http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html). As soon as this property changes I change the state of the itemRenderer to show an input box rather than a label.

This works just like Windows file explorer now.

Some code with some relevant functions of the 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>