Metadata에 대해

[Event]

컴포넌트에 사용자가 직접 이벤트를 구성하고자 할때 사용한다.

기본 구성 방법은 아래와 같다.

[Event(name="eventName", type="package.eventType")]

아래는 myClickEvent 라는 이름으로 Event라는 이벤트를 만들어 낸 것이다.

[Event(name="myClickEvent", type="flash.events.Event")]

이와같이 이름은 사용자가 원하는 것으로 만들 수 있으며
type은 기본 이벤트 클래스의 Event 또는 서브 클래스 Event중 하나를 사용한다.

아래는 Event 메타데이터를 실제로 사용해본 예제이다.
textInput 에 키를 입력하면 해당 키 코드를 메세지로 출력하고 그 글자를 바로 지워준다.
소스에 나와있듯이 설정한 Event 를 사용자가 지정한 이름으로 mxml에서 불러올 수 있다.

EventTestKeyEvent.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" <br /> keyDown="keyDownMethod(event)"> <mx:Metadata> [Event(name="numberCheck", type="flash.events.Event")] </mx:Metadata> <mx:Script> <![CDATA[ import mx.controls.Alert; private function keyDownMethod(e:KeyboardEvent):void { mx.controls.Alert.show( e.charCode.toString() ); this.text = ""; dispatchEvent(new Event("numberCheck")); } ]]> </mx:Script> </mx:TextInput>
EventTest.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:myComp="*" layout="absolute"> <mx:Script> <![CDATA[ private function eventResult():void { trace('numberCheck Event'); } ]]> </mx:Script> <myComp:EventTestKeyEvent numberCheck="eventResult();" /> </mx:Application>

[Style]

컴퍼넌트의 스타일 properties 의 MXML 태그 속성을 정의할 수 있다.
글자 색, 크기, 백그라운드 색 등등의 style을 지정할 수 있다.

기본적인 문장 구조는 아래와 같다.

[Style(name="style_name"[, property="value",...])]

name String Style 이름을 지정한다. type String 스타일 properties 에 기입하는 값의 데이터형을 지정한다. Number 나 Date 등의 ActionScript 데이터형이 아닌 경우는, packageName.className 라고 하는 형식의 수식 클래스명을 사용한다. arrayType String 데이터형이 Array 인 경우,arrayType 는 Array 요소의 데이터형을 지정한다. Number 나 Date 등의 ActionScript 데이터형이 아닌 경우는, packageName.className 라고 하는 형식의 수식 클래스명을 사용한다. format String properties 의 단위를 지정한다. 예를 들어,데이터형으로서 "Number" 을 지정하는 경우는,format="Length" 를 지정해 스타일의 길이를 픽셀 단위로 정의할 수 있다. 또는,type="uint" 를 지정하는 경우는,format="Color" 를 설정해 스타일의 RGB 칼라를 정의할 수 있다. enumeration String 스타일 properties 의 후보치의 열거형 리스트를 지정합니다. inherit String properties 를 상속 받을 수 있는지 여부를 설정한다. 유효한 값은,yes 및 no 이다.

Flex 내의 Button.as 에는 아래와 같이 사용되었다.

Style 속성을 지정한다.
[Style(name="paddingBottom", type="Number", format="Length", inherit="no")]

getStyle로 paddingButton값을 받아 설정한다.
( 물론 값을 설정하기 위해 더 복잡한 구성으로 되어있지만 간단하게만 나타낸 것이다.)
var paddingBottom:Number = getStyle("paddingBottom");

mxml에서 아래와 같이 사용한다.
<mx:Button paddingButtom="20" />

[IconFile]

Flex Builder 의 [Insert] 바에 있는 컴퍼넌트를 나타내는 이미지를 변경 할 수 있다.

기본 문장 구조는 아래와 같이 구성되어 있다.

[IconFile("fileName")]

Flex 내의 Button.as 에는 아래와 같이 사용되었다.

[IconFile("Button.png")]

[Bindable]

public properties 가 데이터 바인딩식의 소스인 경우, Flex 는 소스 properties 의 변경시에 자동적으로 소스 properties 의 값을 destination properties 에 복사합니다. 다만, 복사를 실행하도록(듯이) Flex 에 통지하기 위해서는,[Bindable] metadata tag 를 사용해 properties 를 Flex 에 등록해, 소스 properties 에 이벤트를 송출(Dispatch)시킬 필요가 있습니다. 라고 FlexDoc에 나와있다.
다시 말해 두개의 서로 다른 data를 연결하여 한쪽에서 값의 변경이 이뤄지면 다른 한쪽에서도
똑같이 값의 변경이 이뤄지게 하는 것이다.

기본 문장 구조는 아래와 같이 구성되어 있다.

[Bindable] [Bindable(event="eventname")]

이벤트 명을 생략하면 자동적으로 propertyChange 라고 하는 이벤트를 생성한다.

사용예는 아래와 같다.

1.

[Bindable]
public class TextAreaFontControl extends TextArea {}

클래스에 설정을 하는 경우 클래스 내의 모든 data에 적용이 된다.
이렇게 하는 경우 [Bindable(event="propertyChange")] 와 같은 표현이 된다.

2.

[Bindable] public var maxFontSize:Number = 15; [Bindable] public var minFontSize:Number = 5; 특정 변수에 Bindable을 설정할 수도 있다.

3.

private var _maxFontSize:Number = 15; [Bindable(event="maxFontSizeChanged")] // public getter 메소드를 정의한다 public function get maxFontSize() :Number { return _maxFontSize; } // public setter 메소드를 정의한다 public function set maxFontSize(value:Number) :void { if (value <= 30) { _maxFontSize = value; } else _maxFontSize = 30; // 이벤트 오브젝트를 작성한다 var eventObj:Event = new Event("maxFontSizeChanged"); dispatchEvent(eventObj); } getter/setter에 bindable을 지정할 수도 있다.

[Inspectable]

inspectable은 mxml 코드상에서 코드힌트가 나오도록 정의하는 역할을 한다.
[Inspectable] metadata tag 는, properties 의 변수 선언, 또는 그 properties 에 바인드 되는 setter 및 getter 메소드명 위에 선언할 수 있다.

기본적인 문장구조는 아래와 같다.

[Inspectable(attribute=value[,attribute=value,...])]
property_declaration name:type;

[Inspectable(attribute=value[,attribute=value,...])]
setter_getter_declarations;

properties	데이터형	설명
category	String	properties 를, Flex Builder 유저 인터페이스로 Property inspector 내의 특정의 부범위로 분류합니다.
defaultValue	String 또는 Number	Inspectable properties 의 디폴트치를 설정합니다. 이 properties 는, getter 함수 또는 setter 함수로 사용되는 경우에 필요합니다. 디폴트치는 properties 정의에 의해 정해집니다.
enumeration	String	그 properties 로 허용 되는 정당한 설정치의 칸마 단락 리스트를 지정합니다. item1,item2,item3 등의 값만 지정할 수 있습니다.
environment	String	허용 하지 않는 Inspectable properties (none), Flex Builder 에서만 사용하는 properties (Flash), 또는, Flex 에서만 사용해 Flex Builder 에서는 사용하지 않는 properties (MXML)를 나타냅니다.
format	String	properties 가 값을 파일 패스로 보관 유지하고 있는 것을 나타냅니다.
listOffset	Number	List 치에의 디폴트의 인덱스를 지정합니다.
name	String	properties 의 표시명 (예를 들어,Font Width 등)을 지정합니다. 지정하지 않으면_fontWidth 등의 properties 명이 사용됩니다.
type	String	형태 지정자를 지정합니다. 생략 하면, properties 의 데이터형이 사용됩니다. 사용할 수 있는 값은 다음과 같습니다. Array Boolean Color Font Name List Number Object String properties 가 배열인 경우는, 그 배열로 유효한 값을 리스트 할 필요가 있습니다.
variable	String	이 파라미터를 바인드 하는 대상의 변수를 지정합니다.
verbose	Number	verbose properties 를 포함하도록(듯이) 유저가 지정했을 경우에게만, 이 Inspectable properties 가 Flex Builder 유저 인터페이스에 표시되는 것을 나타냅니다. 이 properties 가 지정되어 있지 않은 경우, Flex Builder 에서는, 그 properties 를 표시하는 것이라고 봅니다.

아래는 실제 사용 방법이다.

[Inspectable(type="String", enumeration="left,right", defaultValue="left)]private var textPlacement:String;이렇게 하면 mxml상에서 해당 컴포넌트를 사용할 때 lt;myComp:TextP textPlacement 라고 하면 left, right값을 설정할 수 있도록 code hint가 보여지게 된다.