<mx:Component> 태그는, MXML 파일로 inline 아이템 렌더러 또는 아이템 에디터를 정의하기 위해서 사용합니다.
<mx:Component> 태그로 MXML 파일내의 새로운 범위(scope)를 정의해, 아이템 렌더러나 아이템 에디터의 로컬 범위(scope)는,<mx:Component> 태그와 </mx:Component> 태그로 단락지어진 MXML 코드 블록으로 정의합니다. 아이템 렌더러나 아이템 에디터의 로컬 범위(scope)의 외측에 있는 엘리먼트에 액세스 하려면 , 엘리먼트명에 접두사로서 outerDocument 키워드를 붙입니다.
예를 들어, 메인 어플리케이션의 범위(scope)로 localVar 라는 이름의 변수를 정의해, 아이템 렌더러의 범위(scope)로 같은 이름의 다른 변수를 정의한다고 합니다. 아이템 렌더러의 내부로부터 어플리케이션의 localVar 에 액세스 하려면 , 다음의 예의 같게 접두사로서 outerDocument 키워드를 붙입니다.
<? xml version="1.0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<! [CDATA[
// 어플리케이션 범위(scope)내의 변수
public var localVar:String="Application localVar";
// 앨범 커버의 URL 를 포함한 데이터
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[
// 렌더러 범위(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 번 사용하면, inline 아이템 에디터내의 컨트롤의 데이터 프로바이더가 초기화됩니다. 예를 들어, Web 서비스나 그 외의 메카니즘을 사용해, 미국의 주 리스트등의 데이터를 어플리케이션에 건네줍니다. 다음에, 주 리스트를 포함한 어플리케이션의 1 개의 property로부터, 아이템 에디터로서 사용되는 ComboBox 컨트롤을 모두 초기화할 수 있습니다.
MXML 문장구조법
<mx:Component> 태그의 문장구조법은 다음과 같습니다.
<mx:Component
id=""
className=""
>
...
아이 태그
...
</mx:Component>
비어있는<mx:Component></mx:Component> 태그를 작성할 수 없습니다.
적어도 1 개의 자식 태그를 <mx:Component></mx:Component> 태그내에서 정의할 필요가 있습니다.
id property를 사용해 inline 컴퍼넌트의 식별자를 지정하면, 그 식별자를 data binding expression의 소스로서 사용할 수 있습니다.
className property를 사용해, Flex 로 inline 컴퍼넌트용으로 생성된 클래스명을 지정하면, ActionScript 내의 컴퍼넌트의 엘리먼트를 참조할 수 있습니다. 상세한 것에 대하여는, 「Flex 어플리케이션 개발 가이드」의 「아이템 렌더러와 아이템 에디터의 사용」의 장을 참조해 주세요.