플렉스 커스텀 컴포넌트

초보강좌 입니다.

간략한 강좌~ㅋ

복습하는 의미겸 as와 mxml 컴포넌트의 다른점을 볼겸 플렉스 커스텀 컴포넌트를 만들어 보겠습니다.

먼저 메인이 될 MXML을 만들고 컴포넌트로 할당할 as와 mxml을 만들어 봅시다.


asTraining.mxml


<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="absolute"> </mx:Application>

확장 커스텀컴포넌트가 될 as,,

액션스크립트 클래스 생성하고

이렇게 넣어주면 됩니다.

제가 만들어 볼것은 버튼이라 버튼으로 만들었습니다. 

요런 팩키지가 생겨납니다.


mxml은

요기서 위에 MXML 컴포넌트로 열면 됩니다. ㅎㅎ



---


이제 코딩

메인코딩은 이처럼 했습니다.


<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white" layout="absolute" xmlns:kd="asTraining.*"> <!-- kd 라고 참조걸었습니다. --> <mx:Script> <![CDATA[ public var m_str:String = "하하하 테스트 커스텀컴포넌트 KDuk's"; private function asClick():void { var strReturnAS:String; strReturnAS = ""; asbtn.setAS_str(m_str, "asTEST(Kduk's) - AS3.0"); asbtn.showStr(); strReturnAS = asbtn.getAS_str(); text.text = strReturnAS; } // 액션스크립트로 만든 컴포넌트 동작 이벤트입니다. private function mxClick():void { var strReturnMX:String; strReturnMX = ""; mxbtn.setMX_str(m_str, "mxTEST(Kduk's) - MXML"); mxbtn.showStr(); strReturnMX = mxbtn.getMX_str(); text.text = strReturnMX; } // MXML로 만든 컴포넌트 동작 이벤트 입니다. ]]> </mx:Script> <kd:asButton label="asBtns" id="asbtn" click="asClick();" x="58" y="45" /> <!-- kd로 불러온 버튼들 위가 as 아래가 mxml --> <kd:mxButton label="mxBtns" id="mxbtn" click="mxClick();" x="178" y="45"/> <mx:TextArea id="text" x="58" y="151" width="220" height="25" fontSize="12" fontWeight="bold"/> </mx:Application>



---



asButton.as 파일 입니다.

package asTraining { import mx.controls.Alert; import mx.controls.Button; public class asButton extends Button { private var as_str:String; private var as_titlestr:String; [Embed(source="assets/export.png")] private var test1_icon:Class; public function asButton() { super(); as_str = ""; as_titlestr = ""; this.width = 100; this.height = 100; this.setStyle("icon", test1_icon); // 시작시 데이터 클리어 및 사이즈, 스탈을 적용할수 있습니다. } public function setAS_str(str:String, titlestr:String):void { as_str = str; as_titlestr = titlestr; // Alert로 갈 set } public function getAS_str():String { return as_titlestr; // TEXTAREA 로 갈 get } public function showStr():void { Alert.show(as_str, as_titlestr); } // Alert 이벤트를 여기다 주었습니다. } }



---



mxButton.mxml 파일입니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Button xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.controls.Alert; [Bindable] private var mx_str:String; [Bindable] private var mx_titlestr:String; [Embed(source="assets/openNav.png")] private var test2_icon:Class; private function init():void { this.width = 100; this.height = 100; this.setStyle("icon", test2_icon); mx_str = ""; mx_titlestr = ""; // 별 다른게 없습니다. 크레션컴플리트할때 사이즈, 스탈같은 속성 정해주고, } public function setMX_str(str:String, titlestr:String):void { mx_str = str; mx_titlestr = titlestr; } public function getMX_str():String { return mx_titlestr; } // set get 이벤트 as랑 같습니다. public function showStr():void { Alert.show(mx_str, mx_titlestr); } // 이것도 쌤쌤 ㅋ ]]> </mx:Script> </mx:Button>





이렇게 적용시킨 실행본이,,







이상 허접강좌 였습니다 =ㅅ=;;