내 심장이 뛰고 있는 한. 열정적인 삶을 살고 싶다.

[이 글은 liveDoc과 professional Flex 2 programming을 통해 공부한 내용을 Posting 한 것임]

[DefaultProperty] metadata tag는 클래스의 기본속성으로서 단일 속성을 지정하는데 사용된다.

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

[DefaultProperty("propertyName")]

MXML 파일내에서 컴포넌트를 사용할 경우에 컴포넌트의 디폴트 속성의 이름을 정의하며,
1개의 디폴트 속성을 정의할 수 있다.

다음 예제는 커스텀 textArea 클래스이다. 이 간단한 클래스는 DefaultProperty로 text속성을 컨트롤하기 위한 defaultText를 지정하고 있다

-TextAreaDefaultProp.as

package myComponents
{
	//myComponents/TextAreaDefaultProp.as
	import mx.controls.TextArea;
	
	[DefaultProperty("defaultText")]

	public class TextAreaDefaultProp extends TextArea
	{
		public function TextAreaDefaultProp() 
        {
            super();
        }       

        public function set defaultText(value:String):void 
        {
            if (value!=null)
            text=value;
        }

        public function get defaultText():String 
        {
            return text;
        }

	}
}

다음은 위의 textArea 클래스를 mxml root태그로 정의해 사용할 경우이고,
이 mxml 컴포넌트내에서 속성값을 지정하려면 주석으로 처리한 것처럼 반드시 자식태그로 속성 값을 지정하여야 한다.
-TextAreaDefaultPropMXML.mxml<?xml version="1.0"?> <!--myComponents/TextAreaDefaultPropMXML.mxml --> <!-- ActionScript 클래스를 mxml 루트 태그로 정의 --> <MyComp:TextAreaDefaultProp xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*"> <!-- DefaultProperty를 지정한 ActionScript 클래스를 mxml 루트 태그로 정의했을 경우 이 mxml컴포넌트 내에서 속성값을 지정하려면 반드시 아래와 같이 자식태그로 속성값을 지정해줘야 한다. --> <!--<MyComp:defaultText>Hello</MyComp:defaultText> --> </MyComp:TextAreaDefaultProp>

다음 예제는 커스텀 button 클래스이다. DefaultProperty로 label속성을 컨트롤하기 위한 defaultLabel를 지정하고 있다

-ButtonDefaultProp.as

package myComponents
{
	//myComponents/ButtonDefaultProp.as
	import mx.controls.Button;
	
	[DefaultProperty("defaultLabel")]
	
	public class ButtonDefaultProp extends Button
	{
		public function ButtonDefaultProp()
		{
			super();
		}
		
		public function set defaultLabel(value:String):void 
		{
            if (value!=null)
            label=value;
        }

        public function get defaultLabel():String 
        {
            return label;
        }
		
	}
}

TextAreaDefaultProp.as와 ButtonDefaultProp.as에서 [DefaultProperty("defaultText")] 와 [DefaultProperty("defaultLabel")]은
각각 [DefaultProperty("text")], [DefaultProperty("label")]로 바꾸어도 제대로 동작한다.
이유는 textarea의 text속성과 button클래스의 label속성은 public속성이기때문에 각각의 클래스에
선언된 getter/setter는 무시된 채 속성 값을 지정할 수 있는 것이다.

다음은  위에서 언급한 클래스들을 사용한 mxml 어플리케이션이다.

-MainDefaultProp.mxml

<?xml version="1.0"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*"> <!-- defaultProperty 메타태그를 지정하지 않았을 경우 반드시 자식태그로 속성값을 지정 --> <!-- <MyComp:TextAreaDefaultProp> <MyComp:defaultText>Hello</MyComp:defaultText> </MyComp:TextAreaDefaultProp> --> <!-- defaultProperty 메타태그 지정시 자식태그 생략 가능--> <MyComp:TextAreaDefaultProp>Hello</MyComp:TextAreaDefaultProp> <!-- as 클래스를 mxml 루트 태그로 정의해 사용할 경우(TextAreaDefaultPropMXML.mxml를 사용) 1. (mxml 어플리케이션이 아닌 mxml컴포넌트 내부에서 속성값 지정시 컴포넌트 내에서 반드시 자식태그로 속성값을 지정해줘야 한다) --> <!--<MyComp:TextAreaDefaultPropMXML/> --> <!-- as 클래스를 mxml 루트 태그로 정의해 사용할 경우(TextAreaDefaultPropMXML.mxml를 사용) 2. (mxml 어플리케이션에서 속성값 지정시 위에서 두번째와 동일하게 자식태그로 속성값 지정할 필요 없음) --> <!--<MyComp:TextAreaDefaultPropMXML>hello</MyComp:TextAreaDefaultPropMXML> --> <!-- defaultProperty 메타태그를 지정하지 않았을 경우 반드시 자식태그로 속성값을 지정 --> <!-- <MyComp:ButtonDefaultProp width="100" height="30"> <MyComp:defaultLabel>Hello</MyComp:defaultLabel> </MyComp:ButtonDefaultProp> --> <!-- defaultProperty 메타태그 지정시 자식태그 생략 가능--> <MyComp:ButtonDefaultProp width="100" height="30">Hello</MyComp:ButtonDefaultProp> <!-- 다음과 같이 default value의 타입 지정도 가능--> <!-- <MyComp:ButtonDefaultProp width="100" height="30"> <mx:String>Hello</mx:String> </MyComp:ButtonDefaultProp> --> <!--ComboBox.as 클래스에 [DefaultProperty("dataProvider")] 정의되어 있어 아래와 같이 생략 가능--> <mx:ComboBox> <!--<mx:dataProvider> --> <mx:ArrayCollection> <mx:String>hello</mx:String> <mx:String>flex</mx:String> <mx:String>air</mx:String> </mx:ArrayCollection> <!--</mx:dataProvider> --> </mx:ComboBox> </mx:Application>

다음은 defaultProperty를 사용해 template 컴포넌트를 사용하는 법을 알아보도록 하겠다.
http://weblogs.macromedia.com/pent/archives/2006/03/component_templ.html 를 참고해서 만들었다.
일단 panel컴포넌트를 아래와 같이 하나 만들도록 한다.

-1.1 SearchPanel.mxml
<?xml version="1.0" encoding="utf-8"?> <!--myComponents/SearchPanel.mxml --> <mx:Panel title="searchTemplate" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"> </mx:Panel>

-1.2 PanelTemplate.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:MyComp="myComponents.*"> <MyComp:SearchPanel> <mx:Form top="0" left="0"> <mx:FormItem label="Name:"> <mx:TextInput /> </mx:FormItem> <mx:FormItem label="Address:"> <mx:TextInput /> </mx:FormItem> </mx:Form> </MyComp:SearchPanel> </mx:Application>
어플리케이션에서 panel컴포넌트에 form을 추가하는 소스이며 이상없이 panel컴포넌트에 addChild된다.


SearchPanel을 template으로 만들어서 여기저기서 원하는 form을 addChid해서 공용으로 쓸 수 있게
만드려고 하는데 panel 하단에 controlBar를 추가하고 search Button과 help Button을 추가한 후 실행해보자.

-1.3 SearchPanel.mxml
<?xml version="1.0" encoding="utf-8"?> <!--myComponents/SearchPanel.mxml --> <mx:Panel title="searchTemplate" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"> <mx:ControlBar id="controlbar"> <mx:Button label="Search" /> <mx:Button label="Help" /> </mx:ControlBar> </mx:Panel>

PanelTemplate.mxml을 실행하게 되면 다음과 같이 런타임 에러가 발생한다.

Error: Multiple sets of visual children have been specified for this component (component definition and component instance).

정의된 template형태로 여러곳에서 사용하기 위해 SearchPanel.mxml 컴포넌트에 title및 search, help button이 addChild된 controlbar를 정의했다. 그러나 mxml태그로 이 panel 컴포넌트에 form을 추가하면 에러가 발생하는데
아래와 같이 어플리케이션에서 mxml로 form을 추가하지 않고 actionScript로 처리하면 이상없이 addchild되는 것을 볼 수 있다.
panel 컴포넌트에 form을 추가하고 또한 panel 컴포넌트 안에 addChild된 controlBar에도 template을 사용하는 자가 자기가 원하는 button을 addChild하도록 처리한 예는 다음과 같다.

-1.4 ActionScript로 form을 추가하도록 수정된 어플리케이션 PanelTemplate.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:MyComp="myComponents.*" creationComplete="initApp();"> <mx:Script> <![CDATA[ import mx.controls.TextInput; import mx.containers.FormItem; import mx.containers.Form; import mx.controls.Button; private function initApp():void { var frmTest:Form = new Form(); var frmItem1:FormItem = new FormItem(); frmItem1.label = "Name : "; var tiTest1:TextInput = new TextInput(); frmItem1.addChild(tiTest1); var frmItem2:FormItem = new FormItem(); frmItem2.label = "Address : "; var tiTest2:TextInput = new TextInput(); frmItem2.addChild(tiTest2); frmTest.addChild(frmItem1); frmTest.addChild(frmItem2); pnlTest.addChild(frmTest); var btnTest:Button = new Button(); btnTest.width = 100; btnTest.height = 23; btnTest.label = "addButton"; pnlTest.controlbar.addChild(btnTest); } ]]> </mx:Script> <MyComp:SearchPanel id="pnlTest"/> </mx:Application>


허나 이는 너무 불편해 보인다. 만약 이 어플리케이션에 서로 다른 형태의 form을 가진 다수의 searchPanel을
정의해서 보여준다고 하면 직관적이지도 못하고 번거롭게 액션코드를 코딩해야 한다.
(전적으로 내 생각^^)
그럼 어떻게 해야 처음에 mxml태그로 form을 추가했듯이 편하게 사용할 수 있을 것인가.
searchPanel을 다음과 같이 수정하고 이전처럼 mxml태그로 form을 추가해보자.

-1.5 SearchPanel.mxml
<?xml version="1.0" encoding="utf-8"?> <!--myComponents/SearchPanel.mxml --> <mx:Panel title="searchTemplate" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="addSubComponents();"> <mx:Script> <![CDATA[ // Panel에 addChild될 컨트롤 배열 private var _myChildren:Array; public function set subComponents(a:Array) : void { _myChildren = a; } public function get subComponents() : Array { return _myChildren; } private function addSubComponents() : void { if( _myChildren == null ) return; for(var i:int=0; i < _myChildren.length; i++) { this.addChild( _myChildren[i] ); } } ]]> </mx:Script> <!-- child 객체 add 지점 --> <mx:ControlBar id="controlbar"> <mx:Button label="Search"/> <mx:Button label="Help"/> </mx:ControlBar> </mx:Panel>

PanelTemplate.mxml은 다시 -1.2 로 롤백하고 실행한다.
어떤 결과가 생기는가.

-1.2 PanelTemplate.mxml을 실행하게 되면 똑같은 에러가 발생한다.

Error: Multiple sets of visual children have been specified for this component (component definition and component instance).

에러를 없애기 위해 -1.2 PanelTemplate.mxml의 line 4~11의 form태그를 <MyComp:subComponents></MyComp:subComponents>로 감싼 후 실행하게 되면 아래와 같이 이상없이 실행되는 것을 볼 수 있을 것이다.


참 쓸데없는 글과 코드를 계속해서 추가하고 있지만 뭐.. 머리가 나빠서 이렇게 안해놓으면
또 까먹으니까..ㅎㅎㅎ
각설하고 결과가 나왔지만 내가 진정 원하는 결과는 아니다.
-1.2 PanelTemplate.mxml처럼 그대로 form을 추가하고 싶다. 그래. 오래기다렸다. DefaultProperty..ㅋㅋ

searchPanel.mxml에 다음과 같이 메타태그로 defaultProperty를 지정하고 어플리케이션을
-1.2 PanelTemplate.mxml처럼 수정하고 실행하면... 이상없이 실행되는 것을 볼 수 있을 것이다.

-1.6 SearchPanel.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Panel title="searchTemplate" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="addSubComponents();"> <mx:Metadata> [DefaultProperty("subComponents")] </mx:Metadata> <mx:Script> <![CDATA[ // Panel에 addChild될 컨트롤 배열 private var _myChildren:Array; public function set subComponents(a:Array) : void { _myChildren = a; } public function get subComponents() : Array { return _myChildren; } private function addSubComponents() : void { if( _myChildren == null ) return; for(var i:int=0; i < _myChildren.length; i++) { this.addChild( _myChildren[i] ); } } ]]> </mx:Script> <!-- child 객체 add 지점 --> <mx:ControlBar id="controlbar"> <mx:Button label="Search"/> <mx:Button label="Help"/> </mx:ControlBar> </mx:Panel>

자~ 끝이 보인다.ㅋㅋ 원하는대로 자식태그를 생략해도 defaultProperty 메타태그에 의해
mxml태그로 손쉽고도 직관적으로 searchPanel 컴포넌트에 form을 추가할 수 있게 되었다.
하지만 위의 그림에서 보는 것과 같이 하얀색 부분에만 addChild할 수 있다.
하단의 controlBar에도 사용자가 원하는 것을 addChild할 수 있게 searchPanel 컴포넌트를
아래와 같이 수정해보자.

-1.7 SearchPanel.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Panel title="searchTemplate" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300" creationComplete="addSubComponents();"> <mx:Metadata> [DefaultProperty("subComponents")] </mx:Metadata> <mx:Script> <![CDATA[ // Panel에 addChild될 컨트롤 배열 private var _myChildren:Array; public function set subComponents(a:Array) : void { _myChildren = a; } public function get subComponents() : Array { return _myChildren; } private function addSubComponents() : void { if( _myChildren == null ) return; for(var i:int=0; i < _myChildren.length; i++) { this.addChild( _myChildren[i] ); } } // controlBar에 addChild될 컨트롤 배열 private var _myControlChildren:Array; public function set controlbarComponents(a:Array) : void { _myControlChildren = a; } public function get controlbarComponents() : Array { return _myControlChildren; } private function addControls() : void { if( _myControlChildren == null ) return; for(var i:int=0; i < _myControlChildren.length; i++) { controlbar.addChild( _myControlChildren[i] ); } } ]]> </mx:Script> <!-- child 객체 add 지점 --> <mx:ControlBar id="controlbar"> <mx:Button label="Search"/> <mx:Button label="Help"/> </mx:ControlBar> </mx:Panel>

이제 searchPanel 컴포넌트의 하단 controlBar에도 사용자가 원하는 컨트롤을 addChild할 수 있게 되었다.
어플리케이션 소스를 마지막으로 아래와 같이 수정 후 실행해보자..

-1.8 PanelTemplate.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:MyComp="myComponents.*"> <mx:VBox width="100%" height="100%"> <MyComp:SearchPanel id="pnlTest1"> <!--<MyComp:subComponents> --> <mx:Form top="0" left="0"> <mx:FormItem label="Name:"> <mx:TextInput /> </mx:FormItem> <mx:FormItem label="Address:"> <mx:TextInput /> </mx:FormItem> </mx:Form> <!--</MyComp:subComponents> --> <MyComp:controlbarComponents> <mx:Button width="150" height="23" label="added Button"/> </MyComp:controlbarComponents> </MyComp:SearchPanel> <MyComp:SearchPanel id="pnlTest2"> <mx:Form top="0" left="0"> <mx:FormItem label="Name:"> <mx:TextInput /> </mx:FormItem> <mx:FormItem label="phone:"> <mx:TextInput /> </mx:FormItem> </mx:Form> <MyComp:controlbarComponents> <mx:Button width="150" height="23" label="added Button2"/> </MyComp:controlbarComponents> </MyComp:SearchPanel> </mx:VBox> </mx:Application>


다음엔 [Event] 메타데이타 태그에 대해서 정리할 예정이다.
정리한다는게 쉽진 않을 일이다.ㅋㅋㅋㅋ 예제소스는 아래에~~