例：DataGrid コントロールによるアイテムエディタの使用

DataGrid コントロールでアイテムエディタを使用する例については、アイテムエディタからデータを返すを参照してください。

例：List コントロールによるカスタムアイテムエディタの使用

次のアイテムエディタに示すように List コントロールにアイテムエディタを追加すると、ユーザーが各州の情報を編集できるようになります。

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- itemRenderers\list\myComponents\EditorStateInfo.mxml -->

    <mx:TextInput id="newLabel" text="{data.label}" />
    <mx:TextInput id="newData" text="{data.data}" />
    <mx:TextInput id="newWebPage" text="{data.webPage}" />
</mx:VBox>

州名、州都名および Web アドレスをユーザーが編集できるように、3 種類の TextInput コントロールを持つアイテムエディタを定義します。このアイテムエディタは 3 つの値を返します。したがって、itemEditEnd イベントについて、List コントロールのデータプロバイダにそれらの値を書き込むイベントリスナーを記述します。次にこの例を示します。

<?xml version="1.0"?>
<!-- itemRenderers\list\MainListStateRendererEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    height="700" width="700">

    <mx:Script>
        <![CDATA[

            import mx.events.ListEvent;
            import myComponents.EditorStateInfo;
                        
            // Define the event listener.
            public function processData(event:ListEvent):void {                 

                // Disable copying data back to the control.
                event.preventDefault();

                // Get new label from editor.
                myList.editedItemRenderer.data.label =
EditorStateInfo(event.currentTarget.itemEditorInstance).newLabel.text;

                // Get new data from editor.
                myList.editedItemRenderer.data.data = 
EditorStateInfo(event.currentTarget.itemEditorInstance).newData.text;

                // Get new webPage from editor.
                myList.editedItemRenderer.data.webPage = 
EditorStateInfo(event.currentTarget.itemEditorInstance).newWebPage.text;

                // Close the cell editor.
                myList.destroyItemEditor(); 
                    
                // Notify the list control to update its display.
        myList.dataProvider.notifyItemUpdate(myList.editedItemRenderer);
            }
        ]]>
    </mx:Script>

    <mx:List id="myList" 
        height="180" width="250" 
        editable="true" 
        itemRenderer="myComponents.RendererState" 
        itemEditor="myComponents.EditorStateInfo" 
        variableRowHeight="true" 
        backgroundColor="white" 
        itemEditEnd="processData(event);"> 
        <mx:dataProvider>
            <mx:Object label="Alaska" 
                data="Juneau" 
                webPage="http://www.state.ak.us/"/>
            <mx:Object label="Alabama" 
                data="Montgomery" 
                webPage="http://www.alabama.gov/" />
            <mx:Object label="Arkansas" 
                data="Little Rock" 
                webPage="http://www.state.ar.us/"/>                  
        </mx:dataProvider>
    </mx:List>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、RendererState.mxml レンダラーを使用しています。このレンダラーについては、例：アイテムレンダラーを List コントロールと共に使用するを参照してください。

ドロップインアイテムエディタとしての DateField コントロールまたは ComboBox コントロールの使用

List コントロールでは、DateField コントロールまたは ComboBox コントロールをドロップインアイテムエディタとして使用できます。ただし、目的のデータプロバイダがオブジェクトのコレクションである場合は、List コントロールの labelField プロパティを、DateField コントロールまたは ComboBox コントロールで変更する、そのデータプロバイダのフィールド名に設定する必要があります。次にその例を示します。

<?xml version="1.0"?>
<!-- itemRenderers\list\ListEditorDateField.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
        
            import mx.collections.*;
            import mx.controls.DateField;
            import mx.collections.ArrayCollection;
           
            [Bindable]
            private var catalog:ArrayCollection = new ArrayCollection([    
                {confirmed: new Date(), Location: "Spain"},
                {confirmed: new Date(2006,0,15), Location: "Italy"},
                {confirmed: new Date(2004,9,24), Location: "Bora Bora"},
                {confirmed: new Date(), Location: "Vietnam"}
            ]);
        ]]>
    </mx:Script>

    <mx:List id="myList" 
        width="300" height="300"
        rowHeight="50" 
        dataProvider="{catalog}" 
        editable="true" 
        labelField="confirmed" 
        itemEditor="mx.controls.DateField" 
        editorDataField="selectedDate"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、labelField プロパティの値として "confirmed" を指定し、データプロバイダの confirmed フィールドを DateField コントロールで変更するように指定しています。

例：Tree コントロールによるカスタムアイテムエディタの使用

Tree コントロールでは、通常、ツリーのノードごとに 1 つのラベルを表示します。ただし、各ノードのデータプロバイダには、通常は表示されない追加のデータが収められていることがあります。

この例では、Tree コントロールを使用して様々な会社の連絡先情報を表示します。この Tree コントロールでは、会社名をブランチノードとして、その会社内の部署名をリーフノードとして表示します。これらのどのノードを選択してもカスタムアイテムエディタが開き、該当の会社またはその会社にある任意の部署の電話番号や連絡先ステータスを変更できます。

Tree コントロールの最上位ノードは編集できません。したがって、この例では itemEditBeginning イベントを使用して、ユーザーが最上位ノードを選択していないか判断します。最上位ノードが選択されている場合は、次の例に示すように、itemEditBeginning イベントのイベントリスナーで編集を禁止します。

<?xml version="1.0"?>
<!-- itemRenderers\tree\MainTreeEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="600" height="600">

    <mx:Script>
        <![CDATA[
        
        import mx.events.ListEvent;     
        import myComponents.TreeEditor;
 
        private var contacts1:Object = 
          {label: "top", children: [
            {label: "Acme", status: true, phone: "243-333-5555", children: [
              {label: "Sales", status: true, phone: "561-256-5555"},
              {label: "Support", status: false, phone: "871-256-5555"}
            ]},
            {label: "Ace", status: true, phone: "444-333-5555", children: [
              {label: "Sales", status: true, phone: "232-898-5555"},
              {label: "Support", status: false, phone: "977-296-5555"},
            ]},
            {label: "Platinum", status: false, phone: "521-256-5555"}
        ]};
            
        private function initCatalog(cat:Object):void {
            myTree.dataProvider = cat;
        }
            
        // Define the event listener for the itemEditBeginning event 
        // to disable editing when the user selects 
        // the top node in the tree.
        private function disableEditing(event:ListEvent):void {
            if(event.rowIndex==0) {  
                event.preventDefault(); 
            }
        }                                       
            
        // Define the event listener for the itemEditEnd event 
        // to copy the updated data back to the data provider 
        // of the Tree control.
        public function processData(event:ListEvent):void {    
                            
            // Disable copying data back to the control.
            event.preventDefault();

            // Get new phone number from editor.
            myTree.editedItemRenderer.data.phone =
    TreeEditor(event.currentTarget.itemEditorInstance).contactPhone.text;

            // Get new status from editor.
            myTree.editedItemRenderer.data.status =
    TreeEditor(event.currentTarget.itemEditorInstance).confirmed.selected;

            // Close the cell editor.
            myTree.destroyItemEditor(); 
                    
            // Notify the list control to update its display.
    myTree.dataProvider.notifyItemUpdate(myTree.editedItemRenderer);
        }                       
        ]]>     
    </mx:Script>
    
    <mx:Tree id="myTree" 
        width="400" height="400" 
        editable="true"  
        itemEditor="myComponents.TreeEditor" 
        editorHeightOffset="75" editorWidthOffset="-100" 
        editorXOffset="40" editorYOffset="30" 
        creationComplete="initCatalog(contacts1);" 
        itemEditBeginning="disableEditing(event);" 
        itemEditEnd="processData(event);"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Tree コントロールの itemEditor プロパティを使用して、カスタムアイテムエディタを指定します。また、アイテムエディタの位置を指定するには、editorHeightOffset、editorWidthOffset、editorXOffset および editorYOffset の各プロパティを使用します。

TreeEditor.mxml ファイルで定義された次のアイテムエディタでは、Tree コントロールの各アイテムに関連付けられたデータを編集できます。

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- itemRenderers/tree/myComponents/TreeEditor.mxml -->
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            // Define variables for the new data.
            public var newPhone:String;
            public var newConfirmed:Boolean;

        ]]>     
    </mx:Script>

    <!-- Display item label.-->
    <mx:Label text="{data.label}"/>

    <!-- Display the text 'Phone:' and let the user edit it.-->
    <mx:HBox>
        <mx:Text text="Phone:"/>
        <mx:TextInput id="contactPhone" 
            width="150" 
            text="{data.phone}"
            change="newPhone=contactPhone.text;"/>
    </mx:HBox>

    <!-- Display the status using a CheckBox control 
        and let the user edit it.-->
    <mx:CheckBox id="confirmed" 
        label="Confirmed"
        selected="{data.status}" 
        click="newConfirmed=confirmed.selected;"/>
</mx:VBox>