예전에 Javascript와 Flex를 external interface를 이용하여 연계하는 방법을 소개했습니다. (Flex 차트와 Javascript 연결) 이 방법을 사용하면 Flex 차트를 웹 컴포넌트로 사용하고 대부분을 javascript로 화면을 구성할 수 있어 한 번 작성한 Flex 차트를 여러 모로 활용할 수 있는 장점이 있습니다. 즉 Flex 차트는 오직 차트 기능만을 제공하고 그 외 로직은 외부(javascript)로 분리하는 방법이죠.

문제점

이런 방법을 사용하면 동기화 문제가 발생합니다. 즉 다음과 같은 상황이 발생할 수 있습니다.

위 그림이 이것이 동작하는 방식인데 Javascript의 호출이 너무 빨라 Flex 차트가 로딩되기 전에 3번 흐름이 먼저되는 경우가 발생할 수 있습니다. 그럴 경우 개체가 undefined라는 에러가 발생합니다. 즉 Flex가 생성되기 전 Flex를 호출하게 됩니다.

Javascript와 html이 로딩되어 동작하는 것과 Flex가 로딩되는 것이 별도로 진행되기 때문에 이런 에러가 발생합니다. 이것은 비단 이 경우 뿐만 아니라 Flex의 External Interface를 사용할 경우 발생할 수 있는 문제입니다.

해결방법

위 경우 Flex 차트가 준비(로딩)되어야 애플리케이션 동작이 가능하기에 Flex 차트가 로딩되면 위 과정을 수행하는게 좋습니다. 그런데 아쉽게도 javascript에서 Flex가 로딩되었는지 알 수 있는 이벤트는 찾지 못했습니다. 그 대신 Flex가 로딩되었는지 알려주는 이벤트를 다음과 같은 방법으로 구현할 수 있습니다.

1. Flex가 초기화되면 Flex는 Javascript에게 초기화되었다고 알려줍니다. 즉 Javascript의 function을 호출합니다.

2. Javascript는 그제야 서버호출을 하거나 비즈니스 로직을 수행합니다.

3. 그리고 Flex 차트를 호출합니다. (이미 로딩된 후입니다.)

아래 소스는 Flex 초기화 메소드에서 맨 끝에 Javascript를 호출하는 Flex 소스입니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" initialize="initApp()" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> <mx:Script> <![CDATA[ ... private function initApp():void { if (ExternalInterface.available) { ExternalInterface.addCallback("setDataStr", setDataStr); } // initApp 마지막에... if (Application.application.parameters.initCallback) { ExternalInterface.call(Application.application.parameters.initCallback); } } ]]> </mx:Script> ... </mx:Application>

14행에서 파라메터로 전달받은 initCallback을 javascript 함수명으로 호출을 합니다.

아래는 HTML내의 Flex 객체 Object 태그입니다. initCallbaack 파라메터로 호출받을 javascript 함수를 넘깁니다.

이러면 Flex가 초기화되면 send라는 javascript 함수를 호출하겠네요.

마지막으로 Javascript 입니다.

function send() { Ext.Ajax.request({ url: 'getSomeData.json', success: function (result, request) { barchart= findGraphControl(); barchart.setDataStr(result.responseText); }, failure: function ( result, request) { Ext.MessageBox.alert('Failed', result.responseText); } }); }

 이 부분은 별반 다를 게 없습니다.

우리는 Flex 컴포넌트를 이런 방법으로 많이 사용하고 있어 이런 방법으로 해결했습니다. 또 다른 방법이 있기는 한데 이 방법이 아직 가장 안정적입니다.

더 좋은 방법을 없을까요?

크리에이티브 커먼즈 라이선스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.