カスタムアイテムレンダラーやカスタムアイテムエディタを使用する場合、最初に決定するのはこれらの実装方法です。アイテムレンダラーとアイテムエディタの定義方法には、次の 3 とおりがあります。

ドロップインアイテムレンダラーとドロップインアイテムエディタ 

コンポーネントを 1 つ挿入して、アイテムレンダラーまたはアイテムエディタを定義します。詳しくは、ドロップインアイテムレンダラーまたはドロップインアイテムエディタの使用を参照してください。

インラインアイテムレンダラーとインラインアイテムエディタ 

リストコントロールの子タグを使用して 1 つまたは複数のコンポーネントを定義し、アイテムレンダラーまたはアイテムエディタを定義します。詳しくは、インラインアイテムレンダラーまたはインラインアイテムエディタの使用を参照してください。

アイテムレンダラーとアイテムエディタのコンポーネント 

アイテムレンダラーまたはアイテムエディタを再利用可能なコンポーネントとして定義します。詳しくは、アイテムレンダラーまたはアイテムエディタとしてのコンポーネントの使用を参照してください。

次のセクションで、それぞれの方法について説明します。

ドロップインアイテムレンダラーまたはドロップインアイテムエディタの使用

NumericStepper コントロールを使用して DataGrid コントロールのフィールドを編集するなどの単純なアイテムレンダラーやアイテムエディタでは、ドロップインアイテムエディタを使用できます。「ドロップインアイテムレンダラー」または「ドロップインアイテムエディタ」は、リストコントロールの itemRenderer プロパティまたは itemEditor プロパティの値として指定する Flex コンポーネントです。

次の例では、NumericStepper コントロールを DataGrid コントロールの列のアイテムエディタとして指定します。

<?xml version="1.0"?>
<!-- itemRenderers\dropin\DropInNumStepper.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[                
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Order #2314", quant:3, Sent:true},
                {label1:"Order #2315", quant:3, Sent:false}     
            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
        variableRowHeight="true" 
        editable="true" >
        <mx:columns>
            <mx:DataGridColumn dataField="label1" 
                headerText="Order #" />
            <mx:DataGridColumn dataField="quant" 
                itemEditor="mx.controls.NumericStepper"  
                editorDataField="value" />
        </mx:columns >
    </mx:DataGrid> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、編集のために列のセルを選択すると、NumericStepper コントロールがそのセルに表示されます。さらに data プロパティが自動的に使用され、その列の現在の値で NumericStepper コントロールが設定されます。

editorDataField プロパティを使用して、セルに新しいデータを返すアイテムエディタのプロパティを指定します。デフォルトでは、リストコントロールは TextInput コントロールの text フィールドを使用して新しい値を提供します。そのため、editorDataField プロパティのデフォルトの値は "text" です。この例では、NumericStepper の value フィールドからセルに新しい値が渡されるように指定しています。

ドロップインアイテムレンダラーやドロップインアイテムエディタとして使用できるのは、IDropInListItemRenderer インターフェイスを実装している Flex コンポーネントのサブセットのみです。ドロップインアイテムレンダラーとドロップインアイテムエディタの使用方法の詳細およびこの 2 つをサポートするコントロールの一覧については、ドロップインアイテムレンダラーとドロップインアイテムエディタの作成を参照してください。

インラインアイテムレンダラーまたはインラインアイテムエディタの使用

ドロップインアイテムレンダラーまたはドロップインアイテムエディタの使用の節の例は、ドロップインアイテムレンダラーとドロップインアイテムエディタの使いやすさを示しています。これらを使用する上での唯一の欠点は設定できないことです。ドロップインアイテムレンダラーとドロップインアイテムエディタを指定できるのは、リストコントロールのプロパティの値としてのみです。

柔軟性の高いアイテムレンダラーやアイテムエディタを作成するには、これらをインラインコンポーネントとして開発します。次の例では、前の例を変更して、NumericStepper コントロールをインラインアイテムエディタとして使用しています。インラインアイテムエディタでは、スタンドアローンのコントロールとして使用している場合と同じように、NumericStepper コントロールを設定できます。

<?xml version="1.0"?>
<!-- itemRenderers\inline\InlineNumStepper.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]                
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Order #2314", quant:3, Sent:true},
                {label1:"Order #2315", quant:3, Sent:false}     
            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
        variableRowHeight="true" 
        editable="true" >
        <mx:columns>
            <mx:DataGridColumn dataField="label1" headerText="Order #"/>
            <mx:DataGridColumn dataField="quant" editorDataField="value">
                <mx:itemEditor>
                    <mx:Component>
                        <mx:NumericStepper stepSize="1" maximum="50"/>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、NumericStepper コントロールを列のアイテムエディタとして定義し、NumericStepper コントロールの最大値を 50、増分単位を 1 に設定しています。

インラインアイテムレンダラーとインラインアイテムエディタの作成について詳しくは、インラインアイテムレンダラーとインラインアイテムエディタの作成を参照してください。

アイテムレンダラーまたはアイテムエディタとしてのコンポーネントの使用

ドロップインアイテムレンダラー、ドロップインアイテムエディタ、インラインアイテムレンダラーおよびインラインアイテムエディタを使用することの短所は、アイテムレンダラーやアイテムエディタをアプリケーションファイルの中で定義するため、そのアプリケーションの他の場所や、他のアプリケーションで再利用できないことです。Flex コンポーネントとして再利用可能なアイテムレンダラーやアイテムエディタを作成すると、そのアイテムレンダラーを必要とするアプリケーションのどの場所でも使用できます。

例えば、次のコードは NumericStepper コントロールを使用して、カスタムアイテムエディタを MXML コンポーネントとして定義しています。

<?xml version="1.0"?>
<!-- itemRenderers\component\myComponents\NSEditor.mxml -->
<mx:NumericStepper xmlns:mx="http://www.adobe.com/2006/mxml" 
    stepSize="1" 
    maximum="50"/>

ここでは、カスタム MXML コンポーネントで、アイテムエディタを NumericStepper コントロールとして定義しています。この例では、カスタムアイテムエディタを NSEditor と命名し、MXML コンポーネントとして NSEditor.mxml ファイルに実装しています。この NSEditor.mxml ファイルを、アプリケーションのメインディレクトリの下の myComponents ディレクトリに置きます。

その後は、アプリケーションのどの場所でもこのコンポーネントを使用できます。次に例を示します。

<?xml version="1.0"?>
<!-- itemRenderers\component\MainNSEditor.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var myDP:ArrayCollection = new ArrayCollection([
                {label1:"Order #2314", quant:3, Sent:true},
                {label1:"Order #2315", quant:3, Sent:false}     
            ]);               
        ]]>
    </mx:Script>

    <mx:DataGrid id="myDG" dataProvider="{myDP}" 
            variableRowHeight="true" 
            editable="true" >
        <mx:columns>
            <mx:DataGridColumn dataField="label1" 
                headerText="Order #"/>
            <mx:DataGridColumn dataField="quant" 
                itemEditor="myComponents.NSEditor" 
                editorDataField="value"/>
        </mx:columns >
    </mx:DataGrid> 
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

DataGrid コントロールの quant 列でセルを選択すると、Flexに NumericStepper コントロールが現在のセルの値で表示されます。

アプリケーションの中に、ユーザーが数値を変更できる場所がいくつかある場合があります。このアイテムエディタはカスタムコンポーネントとして定義されているので、アプリケーションのどの場所でも再利用できます。

コンポーネントとしてのアイテムレンダラーとアイテムエディタの作成について詳しくは、アイテムレンダラーとアイテムエディタコンポーネントの作成を参照してください。

アイテムレンダラーでの編集可能なコントロールの使用

アイテムレンダラーは、その中で使用できる Flex コンポーネントのタイプを制限しません。例えば、Label、LinkButton、Button、Text などのコントロールを使用してデータを表示することはできますが、これらのコントロールで、コントロールの内容を変更することはできません。

または、CheckBox、ComboBox、TextInput などのコントロールを使用すると、データを表示できるだけでなく、コントロールを操作してコントロール自体を変更できます。例えば、CheckBox コントロールを使用して、選択された（true 値）または選択されていない（false 値）セルを DataGrid コントロールに表示できます。

CheckBox コントロールを含む DataGrid コントロールのセルを選択すると、コントロールを操作してその状態を変更できます。ユーザーには、DataGrid コントロールが編集可能であるように表示されます。

ただし、デフォルトではアイテムレンダラーはリストコントロールの編集機能と連携していないため、ユーザーがセルを変更しても、変更内容はリストコントロールのデータプロバイダに反映されず、またイベントも送出されません。ユーザーにはリストコントロールが編集可能に見えていても、実際には編集できません。

他の例で、ユーザーが CheckBox コントロールの値を変更し、その後で DataGrid 列をソートしたとします。この場合、DataGrid は CheckBox コントロールの値ではなく、データプロバイダの値でセルをソートするため、ユーザーはソートが正しく実行されていないことに気付きます。

この状況は、次のようないくつかの方法で対処できます。

• アイテムレンダラーでは、ユーザーが変更できるコントロール（CheckBox や ComboBox など）を使用しないようにします。
• これらのコントロールのカスタムバージョンを作成して、ユーザーがこれらを操作できないようにします。
• リストコントロールの rendererIsEditor プロパティを使用して、そのアイテムレンダラーがアイテムエディタにもなるように指定します。詳しくは、例：アイテムエディタとしてのアイテムレンダラーの使用を参照してください。
• アイテムレンダラーとそれを受け入れるコントロールのコードを独自に作成し、ユーザーにアイテムレンダラーを操作させたときはデータを戻すようにします。詳細および使用例については、例：アイテムエディタからの複数の値の取得を参照してください。