Доступ к itemRenderer выбранного элемента

Question

У меня есть TileList с миниатюрами изображений.Под каждым уменьшенным изображением я отображаю название изображения.Я хочу создать функциональность переименования.Таким образом, под TileList есть кнопка «Переименовать выбранное изображение».

Когда эта кнопка нажата, я бы хотел изменить состояние компонента itemRenderer.Метка под изображением изменится на TextInput, чтобы пользователь мог ввести новое имя.Это очень похоже на функциональность файла переименования Windows.

Как я могу получить доступ к itemRenderer выбранного изображения?Как сделать так, чтобы он прослушивал событие нажатия кнопки «Переименовать»?

Некоторый код:

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

ItemRenderer - это просто mx: VBox с mx: ImageMX: Текст.Есть еще один mx: State, в котором mx: Text изменяется на 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

Взгляните на этот пример - имеющиеся на месте элементы управления для редактирования могут дать вам место для начала работы с вашими элементами управления.

Answer 2

Хорошо, спасибо, Пбиркофф, ваш ответ привел меня в правильном направлении. Теперь я делаю это так, что для свойства name объекта данных устанавливается значение "", как только F2 или кнопка переименования нажимается на выбранном элементе TileList.

Я реализовал Observe в itemRenderer для этого свойства data.name (http://blogs.adobe.com/paulw/archives/2006/05/the_worlds_smal.html). Как только это свойство изменяется, я изменяю состояние itemRenderer, чтобы отображать поле ввода, а не метку.

Теперь работает так же, как проводник Windows.

Некоторый код с некоторыми соответствующими функциями 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 3

Я не думаю, что это лучший путь.

Что бы я сделал, это получил SelectedItem из TileList. Это модель данных для этого изображения (= элемент из вашей коллекции изображений). Я предполагаю, что у этого объекта есть свойство, такое как Name или Title. Попробуйте установить это значение с новым значением. Когда вы делаете объект [Bindable], в ItemRenderer должно появиться правильное значение.