Adobe Flex 3 ヘルプ

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

インラインアイテムレンダラーとインラインアイテムエディタの定義は、コンポーネントの MXML 定義の中で行います。インラインアイテムレンダラーとインラインアイテムエディタを使用すると、アイテムレンダリングとセルの編集を完全に制御できます。

単純なインラインアイテムレンダラーまたはインラインアイテムエディタの作成

単純なインラインアイテムレンダラーには、data プロパティをサポートするコントロールが 1 つ入っています。Flex によって現在のセルのデータが自動的にアイテムレンダラーにコピーされます。次に例を示します。

<?xml version="1.0"?>
<!-- itemRenderers\InlineImageRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover: '../assets/slanted.jpg'},
                {Artist:'Pavement', Album:'Brighten the Corners', 
                    Price:11.99, Cover: '../assets/brighten.jpg'}
            ]);            
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" rowHeight="50">    
        <mx:columns>
            <mx:DataGridColumn dataField="Artist"/>
            <mx:DataGridColumn dataField="Album"/>
            <mx:DataGridColumn dataField="Cover">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Image height="45"/> 
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn> 
            <mx:DataGridColumn dataField="Price"/>
        </mx:columns>       
    </mx:DataGrid>      
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

この例では、Image コントロールを使用してアルバムカバーを表示しています。

単純なインラインアイテムエディタには、data プロパティをサポートするコントロールが 1 つ入っています。現在のセルのデータが自動的にアイテムレンダラーまたはアイテムエディタにコピーされ、新しいセルのデータが editorDataField プロパティの値を基にリストコントロールにコピーされます。次にアイテムエディタの例を示します。

<?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 コントロールの value プロパティを使用して、新しいセルの値を戻しています。

複雑なインラインアイテムレンダラーまたはインラインアイテムエディタの作成

複雑なアイテムレンダラーまたはアイテムエディタでは、複数のコントロールを定義します。例えば、デフォルトのアイテムレンダリングとセル編集の節では、3 つのテキストフィールドを使用してアルバムの情報を示す DataGrid コントロールを表示しました。DataGrid コントロールにビジュアルエレメントを追加すると、視覚効果を高めることができます。このため、データプロバイダを変更して、アルバムカバーの JPEG イメージの URL が含まれるようにします。

インラインアイテムレンダラーを使用すると、次の例のように、アルバム名とアルバムイメージを DataGrid コントロールの別個のセルではなく、1 つのセルに表示できます。

<?xml version="1.0"?>
<!-- itemRenderers\InlineDGRenderer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
        
            import mx.collections.ArrayCollection;
        
            // Variable in the Application scope.
            public var localVar:String="Application localVar";
        
            // Data includes URL to album cover.
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg'},
                {Artist:'Pavement', Album:'Brighten the Corners', 
                    Price:11.99, Cover:'../assets/brighten.jpg'}
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}"
            variableRowHeight="true">   
        <mx:columns>
                <mx:DataGridColumn dataField="Artist"/>
                <mx:DataGridColumn dataField="Album">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:VBox>
                                <mx:Text id="albumName" 
                                    width="100%" text="{data.Album}"/>
                                <mx:Image id="albumImage" 
                                    height="45" source="{data.Cover}"/>
                            </mx:VBox>
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>    
                <mx:DataGridColumn dataField="Price"/>
        </mx:columns>       
    </mx:DataGrid>      
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

前の例では、DataGrid コントロールに 3 つの列を定義し、アイテムレンダラーを 2 番目の列に割り当てています。このアプリケーションによって作成される図については、カスタムアイテムレンダラーとカスタムアイテムエディタの使用を参照してください。

アイテムレンダラーの Text コントロールと Image コントロールは、両方とも data プロパティを使用して値を初期化してください。初期化が必要なのは、アイテムレンダラーに複数のコントロールが定義されていて、データプロバイダのどのデータエレメントがアイテムレンダラーのそれぞれのコントロールに関連付けられているかを Flex が自動的に判断できないためです。

インラインアイテムレンダラーのトップレベルコンテナに子コントロールが 1 つしかない場合でも、次の例のように、data プロパティで子コントロールを初期化する必要があります。次の例を参照してください。

<mx:DataGridColumn dataField="Cover">
    <mx:itemRenderer>
        <mx:Component>
            <mx:VBox horizontalAlign="center">
                <mx:Image height="45" source="{data.Cover}"/> 
            </mx:VBox>
        </mx:Component>
    </mx:itemRenderer>
</mx:DataGridColumn>

前の例では、セルの中でイメージを整列できるように、Image コントロールを VBox コンテナの子に設定しています。これで Image コントロールは VBox コンテナの子になったため、data プロパティを使用して初期化する必要があります。

複雑なインラインアイテムエディタでは、複数のコントロールを定義できます。これによって、リストコントロールで使用するデータプロバイダの複数の値を編集できるようになります。また、複雑なインラインアイテムエディタを定義して、String 以外の値を返すこともできます。詳しくは、アイテムエディタの操作を参照してください。

インラインコンポーネントで許可されるアイテム

インラインアイテムレンダラーまたはインラインアイテムエディタで行えないことは、空の <mx:Component></mx:Component> タグを作成することだけです。例えば、独自のレンダリングロジックや編集ロジックと共に、エフェクトとスタイルの定義をインラインアイテムレンダラーまたはインラインアイテムエディタで組み合わせることができます。

次のアイテムは、インラインアイテムレンダラーまたはインラインアイテムエディタに組み込むことができます。

  • バインディングタグ
  • エフェクトタグ
  • メタデータタグ
  • モデルタグ
  • スクリプトタグ
  • サービスタグ
  • ステートタグ
  • スタイルタグ
  • XML タグ
  • id 属性（最上位コンポーネントを除く）

コンポーネントタグの使用

MXML ファイルにインラインアイテムレンダラーまたはインラインアイテムエディタを定義するには、<mx:Component> タグを使用します。

コンポーネントタグでのスコープの定義

新しいスコープは、<mx:Component> タグで MXML ファイルに定義します。このファイルの中で、アイテムレンダラーまたはアイテムエディタのローカルスコープは、<mx:Component> タグと </mx:Component> タグで区切られた MXML コードブロックによって定義されます。アイテムレンダラーまたはアイテムエディタのローカルスコープ外のエレメントにアクセスするには、エレメント名の先頭に outerDocument キーワードを付けます。

例えば、メインアプリケーションのスコープに localVar という名前の変数を定義し、アイテムレンダラーのスコープに同名の別の変数を定義したとします。アイテムレンダラーの中からアプリケーションの localVar にアクセスするには、この変数の先頭に outerDocument キーワードを付けます。次に例を示します。

<?xml version="1.0"?>
<!-- itemRenderers\InlineDGImageScope.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            // Variable in the Application scope.
            [Bindable]                        
            public var localVar:String="Application localVar";
        
            // Data includes URL to album cover.
            [Bindable]                        
            private var initDG:ArrayCollection = new ArrayCollection([
                { Artist:'Pavement', Album:'Slanted and Enchanted', 
                    Price:11.99, Cover:'../assets/slanted.jpg'},
                { Artist:'Pavement', Album:'Brighten the Corners', 
                    Price:11.99, Cover:'../assets/brighten.jpg'}
            ]);
        ]]>
    </mx:Script>

    <mx:DataGrid id="myGrid" dataProvider="{initDG}" width="100%"
            variableRowHeight="true">   
        <mx:columns>
            <mx:DataGridColumn dataField="Artist"/>
            <mx:DataGridColumn dataField="Album"/>
            <mx:DataGridColumn dataField="Cover">
                <mx:itemRenderer>
                  <mx:Component>
                    <mx:VBox>
                        <mx:Script>
                          <![CDATA[           
                            // Variable in the renderer scope.
                            [Bindable]                        
                            public var localVar:String="Renderer localVar";     
                          ]]>
                         </mx:Script>

                         <mx:Text id="albumName" 
                            width="100%" 
                            selectable="false" 
                            text="{data.Album}"/>
                         <mx:Image id="albumImage" 
                            height="45" 
                            source="{data.Cover}"/>
                         <mx:TextArea 
                            text="{'Renderer localVar= ' + localVar}"/>
                         <mx:TextArea 
            text="{'Application localVar= ' + outerDocument.localVar}"/>
                    </mx:VBox>
                  </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>    
            <mx:DataGridColumn dataField="Price"/>
        </mx:columns>       
    </mx:DataGrid>      
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

outerDocument キーワードの用途の 1 つは、インラインアイテムエディタでコントロールのデータプロバイダを初期化することです。例えば、Web サービスなどのメカニズムを使用して米国の州の一覧などのデータをアプリケーションに渡したとします。このキーワードを使用すれば、アイテムエディタとして使用されているすべての ComboBox コントロールを、米国の州の一覧を渡されたアプリケーションの 1 つのプロパティから初期化することができます。

インラインコンポーネントへのクラス名の指定

<mx:Component> タグの className プロパティをオプションで指定することで、Flex によって自動生成されるインラインコンポーネントのクラスに明示的に名前を指定できます。クラス名を指定することによって、インラインコンポーネント内のエレメントを参照する方法が定義されます。

className プロパティの使用例については、例：アイテムエディタからの複数の値の取得を参照してください。

再利用可能なインラインアイテムレンダラーまたはインラインアイテムエディタの作成

インラインアイテムレンダラーまたはインラインアイテムエディタは、コンポーネントの定義の中ではなく、再利用可能なものとして定義すると、アプリケーションの複数の場所で使用することができます。

例えば、<mx:Component> タグを使用して、住所の州の部分を選択する ComboBox コントロールで構成されたインラインアイテムエディタを定義します。その後で、定義したインラインアイテムエディタを 2 つの異なる DataGrid コントロールで使用します。次に例を示します。

<?xml version="1.0"?>
<!-- itemRenderers\inline\InlineDGEditorCBReUse.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="700" >
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
        
            [Bindable]                
            public var initDG:ArrayCollection = new ArrayCollection([
                {Company: 'Acme', Contact: 'Bob Jones', 
                    Phone: '413-555-1212', City: 'Boston', State: 'MA'},
                {Company: 'Allied', Contact: 'Jane Smith', 
                    Phone: '617-555-3434', City: 'SanFrancisco', State: 'CA'} 
            ]);
        ]]>
    </mx:Script>

    <mx:Component id="inlineEditor">
        <mx:ComboBox>
            <mx:dataProvider>
                <mx:String>AL</mx:String>
                <mx:String>AK</mx:String>
                <mx:String>AR</mx:String>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:Component>                 

    <mx:DataGrid id="myGrid" 
        variableRowHeight="true" 
        dataProvider="{initDG}" 
        editable="true" > 
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="City"/>
            <mx:DataGridColumn dataField="State" 
                width="150" 
                editorDataField="selectedItem" 
                itemEditor="{inlineEditor}"/>
        </mx:columns>       
    </mx:DataGrid>  
    
    <mx:DataGrid id="myGrid2" 
        variableRowHeight="true" 
        dataProvider="{initDG}" 
        editable="true">    
        <mx:columns>
            <mx:DataGridColumn dataField="Company" editable="false"/>
            <mx:DataGridColumn dataField="Contact"/>
            <mx:DataGridColumn dataField="Phone"/>
            <mx:DataGridColumn dataField="City"/>
            <mx:DataGridColumn dataField="State" 
                width="150" 
                editorDataField="selectedItem" 
                itemEditor="{inlineEditor}"/>
        </mx:columns>       
    </mx:DataGrid>  
</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

この例では、<mx:Component> タグで定義したインラインアイテムエディタの id プロパティを指定しています。次にデータバインディングを使用して、2 つの DataGrid コントロールの itemEditor プロパティの値としてアイテムエディタを指定しています。

<mx:Component> タグで定義したインラインアイテムエディタまたはインラインアイテムレンダラーは、DataGrid コントロールで使用されている場所にのみ表示されます。それ以外は、アプリケーションをレイアウトするときに Flex によって無視されます。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート