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

Question

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

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

Как я могу получить доступ к ItemRenderer выбранного изображения? Как я могу заставить это случиться, что он слушает событие клики кнопки RENAME?

Какой-то код:

<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: Image и MX: Text. В существует другое mx: состояние, где MX: текстовые изменения в 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

Хорошо, спасибо pbirkoff, ваш ответ привел меня в правильном направлении. То, как я делаю это сейчас, состоит в том, что я устанавливаю свойство имени объекта данных на «», как только F2 или кнопка RENAME, нажата на выбранный элемент TileList.

Я реализовал наблюдение в ItemRenderer на этом свойстве Data.name (http://blogs.Adobe.com/paulw/Чахивы/2006/05/the_worlds_smal.html.). Как только это изменяет эту свойство, я изменяю состояние ItemRenderer, чтобы показать поле ввода, а не на этикетке.

Это работает так же, как Windows File Explorer сейчас.

Какой-то код с некоторыми соответствующими функциями элементарнопласта:

<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

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

Answer 3

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

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