<fx:Component> tag implemented by the compiler

You use the <fx:Component> tag to define an inline item renderer or item editor in an MXML file.

The <fx:Component> tag defines a new scope within an MXML file, where the local scope of the item renderer or item editor is defined by the MXML code block delimited by the <fx:Component> and </fx:Component> tags. To access elements outside of the local scope of the item renderer or item editor, you prefix the element name with the outerDocument keyword.

For example, you define one variable named localVar in the scope of the main application, and another variable with the same name in the scope of the item renderer. From within the item renderer, you access the application's localVar by prefixing it with outerDocument keyword, as the following example shows:

    <?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>
    

One use of the outerDocument keyword is to initialize the data provider of a control within the inline item editor. For example, you can use a web service, or other mechanism, to pass data into the application, such as the list of U.S. states. You can then initialize all ComboBox controls that are used as item editors from a single property of the application that contains the list of U.S. states.

MXML Syntax

The <fx:Component> tag has the following syntax:

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

You cannot create an empty <fx:Component></fx:Component> tag; you must define at least one child tag within the <fx:Component></fx:Component> tags.

The id property lets you specify an identifier for the inline component so that you can use it as the source for a data binding expression.

The className property lets you specify the name of the class generated by Flex for the inline component so that you can reference the elements of the component in ActionScript. For more information, see the Using Item Renderers and Item Editors chapter in the Using Adobe Flex 4 book.