コンパイラーによって実装される <fx:Component> タグ

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

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

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

    <?xml version="1.0"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        xmlns:s="library://ns.adobe.com/flex/spark">
        
      <fx:Script>
        <![CDATA[
            
          // Variable in the Application scope.
          [Bindable]
          public var localVar:String="Application localVar";
            
          // Data includes URL to album cover.
          private var initDG:Array = [
            { Artist:'Pavement', Album:'Slanted and Enchanted', Price:11.99,
              Cover:'http://localhost:8100/f15/slanted.jpg'},
            { Artist:'Pavement', Album:'Brighten the Corners', Price:11.99,
              Cover:'http://localhost:8100/f15/brighten.jpg'}
          ];
        ]]>
      </fx:Script>
    
      <mx:DataGrid id="myGrid" dataProvider="{initDG}"
          variableRowHeight="true">  
        <mx:columns>
          <mx:DataGridColumn dataField="Artist"/>
          <mx:DataGridColumn dataField="Album"/>
          <mx:DataGridColumn dataField="Cover">
            <mx:itemRenderer>
              <fx:Component>
                <mx:VBox>
                  <fx:Script>
                    <![CDATA[            
                      // Variable in the renderer scope.
                      public var localVar:String="Renderer localVar";       
                    ]]>
                  </fx: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="{'App localVar= ' + outerDocument.localVar}"/>
                </mx:VBox>
              </fx:Component>
            </mx:itemRenderer>
          </mx:DataGridColumn>    
          <mx:DataGridColumn dataField="Price"/>
        </mx:columns>     
      </mx:DataGrid>      
    </s:Application>
    

outerDocument キーワードの用途の 1 つは、インラインアイテムエディター内でコントロールのデータプロバイダーを初期化することです。例えば、Web サービスなどのメカニズムを使用して、都道府県リストのようなデータをアプリケーションに渡す場合、このリストを保持するアプリケーションの単一のプロパティから、アイテムエディターとして使用する ComboBox コントロールをすべて初期化できます。

MXML シンタックス

<fx:Component> タグのシンタックスは次のとおりです。

      <fx:Component
        id=""
        className=""
      >
          ...
          child tags
          ...
      </fx:Component>

空の <fx:Component></fx:Component> タグは作成できません。<fx:Component></fx:Component> タグ内に 1 つ以上の子タグを定義する必要があります。

id プロパティを使用すると、インラインコンポーネントの識別子を指定して、それをデータバインディング式のソースとして使用することができます。

className プロパティを使用すると、Flex で生成されたインラインコンポーネントのクラスの名前を指定して、そのコンポーネントのエレメントを ActionScript で参照可能にすることができます。詳細については、『Using Adobe Flex 4』の「Using Item Renderers and Item Editors」の章を参照してください。