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

---

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

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

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

    <?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
        
      <mx: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'}
          ];
        ]]>
      </mx: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>
              <mx:Component>
                <mx:VBox>
                  <mx:Script>
                    <![CDATA[            
                      // Variable in the renderer scope.
                      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="{'App localVar= ' + outerDocument.localVar}"/>
                </mx:VBox>
              </mx:Component>
            </mx:itemRenderer>
          </mx:DataGridColumn>    
          <mx:DataGridColumn dataField="Price"/>
        </mx:columns>     
      </mx:DataGrid>      
    </mx:Application>
    

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

MXML のシンタックス

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

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

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

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

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

---

© 2009 Adobe Systems Incorporated. All rights reserved.
Thu Mar 19 2009, 08:59 PM -07:00