[Flex] 사용자 컴포넌트

사용자 컴포넌트의 기본 내용

Flex의 모든 비주얼 컴포넌트는 UIComponent를 확장해서 만들기 때문에 UIComponent의 모든 메소드, 속성, 이벤트, 스타일및 이벤트를 상속받는다. 또 한 사용자 컴포넌트를 만들때는 반드시 클래스의 생성자를 구현해야하며 아래와 같은 protected 메소드 들을 선택적으로 오버라이드 할 수 있다.

commitProperties()	컴포넌트의 속성이 변경되면 동시에 적용하거나, 지정된 순서대로 적용하는 역활
createChildren()	컴포넌트의 자식 컴포넌트를 생성한다. 예를 들어 ComboBox에는 자식 컴포넌트로 TextInput과 Button을 포함하고 있다.
layoutChrome()	컨테이너 주위의 테두리 영역을 정의한다. Container 클래스의 서브클래스에만 해당
measure()	컴포넌트의 기본 크기 및 최소 기본 크기를 설정
updateDisplayList()	지금까지 설정된 모든 속성 및 스타일을 기반으로 자식 컴포넌트의 크기 및 위치를 설정하며, 컴포넌트에 쓰이는 스킨이나 그래픽 요소들을 드로잉 한다. 컴포넌트의 부모 컨테이너는 컴포넌트 자체의 크기를 결정한다.

위에 메소드는 사용자가 직접 호출하는게 아니라 컴포넌트가 생성이 되면서 초기화 될 때나 다른 메소드를 호출했을 때 Flex에서 자동으로 호출 됨

Flex는 invalidation 메커니즘을 사용하여 컴포넌트의 변경을 동기화 시킨다. Flex는 invalidation 메커니즘을 인련의 메소드로서 구현하고 있으며, 컴포넌트가 변경되면 메소드를 호출하여 Flex가 컴포넌트의 commitProperties(), measure(), layoutChrome() 및 updateDisplayList() 메소드를 호출 하도록 한다.
다음은 invalidation 메소드에 대한 설명이다.

invalidateProperties()	다음 화면 갱신 때 commitProperties() 메소드가 호출되도록 컴포넌트를 마크 한다.
invalidateSize()	다음 화면 갱신 때 measure() 메소드가 호출되도록 컴포넌트를 마크한다.
invalidateDisplayList()	다음 화면 갱신 때 layoutChrome() 및 updateDisplayList() 메소드가 호출되도록 컴포넌트를 마크한다.

컴포넌트는 invalidation 메소드가 호출되면 컴포넌트를 갱신할 필요가 있다는 것을 Flex로 통지한다. 여러개의 컴포넌트의 invalidation 메소드를 호출하면, Flex는 다음 화면 갱신시에 해당 컴포넌트들을 모두 같이 갱신한다.

일반적으로 invalidation 메소드는 사용자가 직접 호출하는 것이 아니라, 컴포넌트의 setter 메소드나 컴포넌트 클래스의 다른 메소드에서 필요한 경우 호출된다.

컴포넌트의 기본 구조

package components
{
	public class CustomerComponent
	{
		public function CustomerComponent()
		{
			super();
			
			//other code
		}
	}
}

생성자를 사용해서 클래스의 속성의 초기 값을 설정한다. 예를 들어 속성이나 스타일의 초기값을 지정하거나, 배열과 같은 구조체를 초기화 할 수 있다. 생성자에서 화면에 표시될 자식 오브젝트를 생성해서는 안된다. 생성자는 오직 컴포넌트 속성의 초기 값을 설정하기 위한 용도로 사용한다. 만약 자식 컴포넌트를 생성하고자 한다면 createChildren() 메소드에서 생성한다. 

Button 컴포넌트를 확장한 사용자 컴포넌트

package components
{
	import mx.controls.Button;
	
	public class MyButton extends Button
	{
		public function MyButton()
		{
			super();			
			label = "Button";
			setStyle("cornerRadius", 5);
			setStyle("color", 0xFFFFFF);
		}
	}
}

FLEX 사용자 컴포넌트를 사용한 코드

	
		<--![CDATA[
			import components.MyButton;
			private function init():void{
				var button:MyButton = new MyButton();
				this.addChild(button);				
			}
		]]>