제가  리뷰하려고 하는 기술문서는 오창훈님께서 작성하신 'Flex와 Flash간의 파라미터 주고 받기' 라는 제목의 기술문서입니다. (이 글을 읽지 않으신 분께서는 링크를 클릭하셔서 우선 기술문서를 읽으신 후 제 포스트를 읽으시면 도움이 되실 것이라 생각됩니다. ) 위 기술문서에서는 swf 파일끼리의 파라미터의 전달에 대해서 다루고 있습니다. 크게 2가지 관점에서 이야기를 전개하고 있는데요, 해당 그림을 인용하자면 아래와 같습니다.
위의 문서에는 '1. swf에서 다른 swf파일을 로드하는 경우' 에서

• url 을 통한 데이터 전달 (파라미터)
  
• ApplicationDomain

'2. 서로 다른 영역에서 파라미터를 공유해야 하는 경우' 에서는

• ExternalInterface를 이용하는 방법
• LocalConnection을 이용하는 방법

들을 알아보고 있습니다. 이미 완성된 기술문서인만큼 서로간의 파라미터 주고 받기에 대해서는 더할나위 없이 탄탄한 내용이라 할 수 있겠습니다. 처음의 예를 들어주신 URL 뒤에 파라미터를 넣는 방법은 아주 유용한 방법입니다. swf 의 상호간의 파라미터전달 뿐만이 아니라 저 같은 경우에는 WebService나 HTTPService를 사용하는 Flex 어플에서 접속해야 할 서버주소를 파라미터를 통해서 지정하는 방법을 주로 쓰고 있습니다. 이 때 장점은 코드 내에 서버접속 주소를 하드코딩하지 않아도 된다는 장점이 있죠.

이 리뷰를 쓰게된 이유는 기술문서에서 언급하고 있지는 않지만 Flex에서 swf 파일을 로드한 경우 간편하게 swf에 접근할 수 있는 방법이 있기에 그 것을 언급하기 위함입니다. (물론 물질에 눈이 멀어서라는 이유도...) Flex에서 swf 를 SWFLoader를 통해 로드시, 해당 swf 가 ActionScript 3.0 으로 제작된 것이면 간편하게 SWFLoader 객체의 content 속성을 통해서 Flash 의 경우 MovieClip, Flex 의 경우 SystemManager 형태로 접근이 가능합니다.

Flash와 Flex 두 경우 모두 소개해보고자 합니다. 로드되는 swf 파일들은 동일하게 아래와 같이 간단하게 메소드를 제공하고 있습니다.
function set iconVisual(value:Boolean):void { myImage.visible = value; } function get iconVisual():Boolean { return myImage.visible; }
위의 코드에서 보이시는 myImage 라는 것은 Flex 의 경우 Image 객체, Flash 의 경우 MovieClip의 인스턴스명입니다. iconVisual 라는 속성을 통해 현재 myImage 가 visible 상태를 제어할 수 있게 됩니다. 위의 swf 를 로드하는 예제코드는 아래와 같습니다.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" height="450" width="750" backgroundAlpha="0.0" fontSize="12" viewSourceURL="srcview/index.html"> <mx:Script> <![CDATA[ import mx.managers.SystemManager; import mx.core.MovieClipLoaderAsset; import flash.utils.describeType; private function flexHandler():void { var s:SystemManager = SystemManager(loader1.content); var swf:child_Flex_swf = child_Flex_swf(s.application); swf.iconVisual = !swf.iconVisual; } private function flashHandler():void { var m:MovieClip = MovieClip(loader2.content); m.iconVisual = !m.iconVisual; } ]]> </mx:Script> <!-- Flex 에서 만든 swf 파일을 로드 --> <mx:Panel width="330" height="380" layout="absolute" title="Flex (AS 3.0) SWF" titleIcon="@Embed('assets/fxicon.png')"> <mx:SWFLoader width="300" height="300" id="loader1" source="swfFiles/child_Flex_swf.swf" scaleContent="true" horizontalCenter="0" verticalCenter="0"/> <mx:ControlBar horizontalAlign="right" height="40" y="300"> <mx:Button label="visible 변경" click="{flexHandler()}"/> </mx:ControlBar> </mx:Panel> <!-- Flash 에서 만든 swf 파일을 로드 --> <mx:Panel width="330" height="380" layout="absolute" title="Flash (AS 3.0) SWF" titleIcon="@Embed('assets/flicon.png')"> <mx:SWFLoader width="300" height="300" id="loader2" source="swfFiles/child_flash_swf_as3.swf" scaleContent="true" horizontalCenter="0" verticalCenter="0"/> <mx:ControlBar height="40" horizontalAlign="right"> <mx:Button label="visible 변경" click="{flashHandler()}"/> </mx:ControlBar> </mx:Panel> </mx:Application>


위의 코드에서 보실 수 있 듯, Flex 에서 만든 swf 는 SystemManager 로 접근하게 되어 SystemManager 의 application을 불러온 swf 명으로 캐스팅 하여 해당 메소드에 접근하시면 되겠습니다. Flash 의 경우는 MovieClip 형태로 들어오게 됩니다. 직접 메소드를 호출하셔도 됩니다.
물론 메소드를 호출하고 있는 예제입니다만, 각 객체들을 직접 접근하시는 것도 가능합니다. 다만, 다른 개발자와 협업이 이루어져야 된다면 특정 메소드를 구현하기로 사전에 정해놓고 그대로 사용하는게 더욱 좋겠죠? ;)
여기서 살짝 짚고 넘어가야 되는 부분은 swf가 SWFLoader에 embed 되어있는 경우는 위의 방법대로는 사용이 안된다는 것입니다. (코드를 확인해보세요. embed 안되어있죠?) embed 시에는 MovieClipLoaderAsset 형태로 들어있기때문에 위의 방법으로 접근이 불가합니다. embed시에는 어떻게 해야되는지는 잘 모르겠네요 ;^(

안타깝게도 AS2.0 으로 제작된 swf 또한 위와 같은 방법으로 접근이 불가합니다. AS 3.0 부터는 기존의 AS1.0 및 AS2.0에서 사용되던 AVM(Actionscript Virtual Machine) 과는 다른 AVM 을 사용하고 있습니다. 이전버전의 AVM을 AVM1, AS3.0 이 실행되는 AVM은 AVM2 이라고 명명합니다. (물론 Flash Player 9 버전 이후부터는 AVM1, AVM2 가 둘다 포함되어 있습니다.) AS 1.0 이나 AS 2.0으로 제작된 swf 파일의 경우 Flex(AS 3.0) 에서 로드될 경우 AVM1Movie이라는 이름의 객체로 할당이 되게 되는데요, AVM1Movie 객체와 AVM2 객체 간에 호환성(메서드 호출 또는 매개 변수 사용 등)이 없기때문에, 접근이 불가한 것이죠.
이럴때에 기술문서에서 설명하여주신 LocalConnection을 사용하시면 되겠습니다. LocalConnection에 대해서는 기술문서에 충분히 자세히 설명하고 있으니 더 이상 언급은 하지 않겠습니다. ;)
또 다른 방법도 있는데요, Flash Interface라는 것이 있습니다. 저도 검색하여 찾은 것이라 자세한 내용은 패스~^^;


ps. 코드가 필요하신 분은 위의 swf 에서 마우스 우클릭하셔서 View Source 하시면 다운로드 하실 수 있습니다 ;^)

Flex에는 크게 MXML과 ActionScript 로 구현되고 있는데, 내부적으로 MXML이 ActionScript 로 변환되어 SWF로 빌드 됩니다. MXML이 ActionScript 로 변환되는 것을 볼 수도 있는데요, keep-generated-actionscript 속성을 바꿔주면 됩니다. 속성 지정 방법은 시난님의 블로그에서 잘 정리해놓으셨습니다. (SliverLight의 경우는 Flex와 다르게 CS 코드가 XAML을 변환시키는 구조라고 하더군요)

실제로 간단하게 속성을 지정하여 변환을 하여 보면 참 새로운(이해 잘 안되는) 코드들이 마구 쏟아져나옵니다. 특정 MXML Application을 생성하면 관련된 파일 4개가 생성이 됩니다. (다른 것들은 보통 특정 스타일 지정 ActionScript 클래스이거나 속성 관련)

예를 들어 test.mxml 파일이 있다면 아래와 같이 생성이 되게 됩니다.

• test-generated.as
• test-interface.as
• _test_FlexInit-generated.as
• _test_mx_managers_System.as
  

본 포스트에서 살펴볼 것은 처음에 있는 xxx-generated.as 입니다. 이해를 쉽게 돕기 위해서 간단하게 MXML Application을 만들어보겠습니다. MXML.mxml 이라고 이름 붙혀보았습니다. (조악한 네이밍. ㅜㅜ)
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ public function clickEventHandler(evt:MouseEvent):void { trace("click"); } ]]> </mx:Script> <mx:Button label="Button" click="clickEventHandler(event)" horizontalCenter="0" verticalCenter="0" /> </mx:Application>

위와 같이 MXML이 생성이 되었다면 아래와 같이 MXML-generated.as 가 생성이 됩니다.
(설명할 부분만 수록하도록 하겠습니다. - 길이가 길어서...)
// begin class def public class MXML extends mx.core.Application { // instance variables // type-import dummies // Container document descriptor private var _documentDescriptor_ : mx.core.UIComponentDescriptor = new mx.core.UIComponentDescriptor({ type: mx.core.Application , propertiesFactory: function():Object { return { childDescriptors: [ new mx.core.UIComponentDescriptor({ type: mx.controls.Button , events: { click: "___MXML_Button1_click" } , stylesFactory: function():void { this.horizontalCenter = "0"; this.verticalCenter = "0"; } , propertiesFactory: function():Object { return { label: "Button" }} }) ] }} }) // constructor (Flex display object) /** * @private **/ public function MXML() { super(); mx_internal::_document = this; // our style settings // ambient styles mx_internal::_MXML_StylesInit(); // properties this.layout = "absolute"; // events } // initialize() /** * @private **/ override public function initialize():void { mx_internal::setDocumentDescriptor(_documentDescriptor_); super.initialize(); } // scripts // <Script>, line 4 - 11 public function clickEventHandler(evt:MouseEvent):void { trace("click"); } // end scripts // supporting function definitions for properties, events, styles, effects /** * @private **/ public function ___MXML_Button1_click(event:flash.events.MouseEvent):void { clickEventHandler(event) } // initialize style defs for MXML mx_internal static var _MXML_StylesInit_done:Boolean = false; mx_internal function _MXML_StylesInit():void { // only add our style defs to the StyleManager once if (mx_internal::_MXML_StylesInit_done) return; else mx_internal::_MXML_StylesInit_done = true; var style:CSSStyleDeclaration; var effects:Array; StyleManager.mx_internal::initProtoChainRoots(); } // embed carrier vars // end embed carrier vars // end class def }

MXML Application 이기 때문에 클래스는 Application 을 상속받고 있습니다. 그 바로 밑에 보면 흔히 쓰이지 않는 UIComponentDescriptor 타입의 변수가 보입니다.


설 명이 좀 어려운데요, 다시 말해서 MXML로 정의된 정보를 모두 가지고 있게 된다는 것입니다. 내부적으로 트리형태로 자식 컴포넌트들도 다 가지고 있게 되는데, 실제로 UIComponentDescriptor 타입의 _documentDescriptor_ 변수가 Application 이고, 그 자식으로 추가된 Button 컴포넌트는 childDescriptors로 추가되어 있습니다. 물론 Button 컴포넌트도 UIComponentDescriptor 타입이 되죠. 만약 버튼에 자식 컴포넌트가 존재했다면 childDescriptors 에 정의되어 있을겁니다.

여기서 잠시 Application에 childDescriptors로 정의된 Button 을 다시 한번 보겠습니다.
new mx.core.UIComponentDescriptor({ type: mx.controls.Button , events: { click: "___MXML_Button1_click" } , stylesFactory: function():void { this.horizontalCenter = "0"; this.verticalCenter = "0"; } , propertiesFactory: function():Object { return { label: "Button" }} })
여기서 잠시 보실 것은 Button에 설정해놓은 click 이벤트입니다. 클릭시에 "___MXML_Button1_click" 를 호출하도록 되어 있는데요, 해당 메소드로 가보면 제가 정의한 clickEventHandler 를 호출하도록 하고 있습니다.
public function ___MXML_Button1_click(event:flash.events.MouseEvent):void { clickEventHandler(event) }

특정 이벤트에 대해서 이벤트 핸들러(event handler)를 설정하게 되면 1. 해당 이벤트에 대해서 호출된 메소드를 생성하고 2. 그 메소드가 이벤트 핸들러를 호출하게 하는 방식입니다.

저는 이 구조를 처음 봤을 때 전부터 궁금했던 의문점이 하나 풀렸습니다.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12"> <mx:Script> <![CDATA[ import mx.controls.Alert; public function clickEventHandler(evt:MouseEvent, index:int):void { var message:String = "클릭한 버튼은 " + index + "번 버튼입니다."; Alert.show(message); } ]]> </mx:Script> <mx:Button x="123" y="107" label="1번 버튼" click="{clickEventHandler(event, 1)}"/> <mx:Button x="209" y="107" label="2번 버튼" click="{clickEventHandler(event, 2)}"/> </mx:Application>
위와 같은 코드가 있다고 할때에 이 것을 ActionScript 로는 어떻게 할까 하는 것이었습니다. ActionScript 로는 addEventListener 메소드를 이용해야 되는데, 핸들러 메소드에게 따로 파라미터를 던질 방법이 없었던 거죠. 커뮤니티에도 이와 같은 질문들이 가끔씩 올라왔기도 했고, 저도 상당히 궁금했었습니다.

살짝 감이 잡히시나요?
public function ___event_Button1_click(event:flash.events.MouseEvent):void { {clickEventHandler(event, 1)} } public function ___event_Button2_click(event:flash.events.MouseEvent):void { {clickEventHandler(event, 2)} }
각 버튼의 이벤트 핸들러가 생성되고 그 이벤트 핸들러에서 위에서 지정한 clickEventHandler를 호출하게 됩니다. 참 난감하더군요 ;)

아무튼 뭐 살짝 MXML이 ActionScript 로 변환되는 과정에 대해 살짝 알아보았습니다. ;)
PopupManager 관련 글은 아직 준비중입니다.. ㅜㅜ