0

サムネイル画像付きの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：Imageとmx：Textを備えた単なるmx：VBoxです。mx：Textがmx：TextInputに変わる別のmx：Stateがあります。

<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}" />
4

3 に答える 3

0

わかりました、Pbirkoffに感謝します、あなたの答えは私を正しい方向に導きました。私が今やっていることは、F2または名前変更ボタンがTileListで選択されたアイテムをクリックするとすぐに、データオブジェクトのnameプロパティを""に設定することです。

そのdata.nameプロパティのitemRendererにObserveを実装しました（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>
于 2010-02-12T09:53:19.053 に答える
0

この例を見てください。インプレース編集コントロールを使用すると、コントロールを開始する場所が得られる場合があります。

于 2010-02-03T17:56:46.623 に答える
-1

これが最善の方法ではないと思います。

私がすることは、TileListからSelectedItemを取得することです。これは、この画像のデータモデルです（=画像コレクションのアイテム）。このオブジェクトには、NameやTitleなどのプロパティがあると思います。この値を新しい値で設定してみてください。オブジェクトを[Bindable]にすると、ItemRendererに正しい値が表示されます。

于 2010-02-03T12:43:44.470 に答える