Custom 컴포넌트 1 - MXML 컴포넌트

출처 : http://chocodonut.tistory.com/254

1. Custom 컴포넌트

- Flex가 제공하는 기본 컴포넌트의 모양을 바꾸거나 원하는 기능을 추가해서 만든 사용자 정의 컴포넌트.
- 재사용을 고려해서 제작해야 한다.
- MXML 컴포넌트, ActionScript 컴포넌트, SWC 컴포넌트로 구분한다.

2. MXML 컴포넌트

- 기본 컴포넌트를 확장해서(상속해서) 새로운 기능을 추가한 후 MXML 파일로 저장한다.
- MXML 파일명이 컴포넌트의 이름이 되고, 저장하는 폴더가 패키지의 경로가 된다.
- 다른 컴포넌트에 비해 제작이 쉽다.
- 컴포넌트의 섬세한 조작은 불가능하다.

3. MXML 컴포넌트 만들기

- 새 Flex 프로젝트를 생성한다.



- 패키지 경로가 되는 폴더를 src 폴더 밑에 생성할 수도 있다(생성하지 않아도 무방).
- 네임스페이스는 '생성한 폴더명.*'이 된다(폴더를 생성하지 않았을 경우에는 그냥 '*').
- MXML Component를 추가한다.

 

- 어떤 기본 컴포넌트를 확장할 것인지 Based on 항목에서 선택한다.

 

- MXML Component에 추가할 기능을 구현한다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14"
  label="사용자 정의 컴포넌트" click="MyCompFunc()" color="#FF0000">
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      private function MyCompFunc():void {
        mx.controls.Alert.show("사용자 정의 컴포넌트 핸들러");    
      }
    ]]>
  </mx:Script>
</mx:Button>

- 메인 애플리케이션에서 Components 뷰에 등록된 Custom 컴포넌트를 스테이지에 끌어다 배치한다.

 

- 소스를 보면 ns1 네임스페이스는 '*'로 정의돼 있다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  xmlns:ns1="*">
  <ns1:MyComp x="10" y="10"/>  
</mx:Application>

4. 사용자 정의 이벤트 만들기 

- Metadata 태그 내에 이벤트 이름과 이벤트 타입을 정의한 후 dispatch() 함수를 사용해 이벤트를 발생시킨다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
  label="사용자 정의 이벤트" click="dispatchEvent(new Event('MyCompEvent'))">
  <mx:Metadata>
    [Event(name="MyCompEvent", type="flash.events.Event")]
  </mx:Metadata>
</mx:Button>

- 메인 애플리케이션에서 사용자 정의 이벤트를 선택한다(인텔리센스 기능 사용).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  xmlns:ns1="*">
  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
    ]]>
  </mx:Script>
  <ns1:MyComp x="10" y="10"
    MyCompEvent="mx.controls.Alert.show('사용자 정의 이벤트 핸들러')"/>  
</mx:Application>