쉬어가더라도 멈추지마..

플렉스로 작업하다 보명 종종 컴파일된 파일에 접근해야하는 경우가 생깁니다. 플렉스로는 실제 플래시의 화려한 모션을

구현한다는것은 노가다에 가까운 일이므로.. 플렉스와 플래시로 연동만 잘하면 좋긴하지만 몇가지 문제점들이 있습니다.

컴파일된 SWF 를 플렉스에 가져오는 방법은 수없이 많습니다만 중요하다고 생각되는 몇가지만 적어보았습니다.

1. 외부 SWF 파일의 초기화 시점에대한 실수

외부 SWF 파일을 로드하기 위해서 기본적인 SWFLoader 컨텐츠가 있긴하지만 로드후에 바로 함수를 적용시킬때 종종

null 객체 참조오류에 부딛힌분들이 계실겁니다. 또는 애꿏은 플래시를 탓하던가 말이죠. 사실 SWFLoader 의

complete 이벤트만으로는 로드후에 초기화 함수를 호출하는데 문제가 있습니다. complete 이벤트는 다운로드를 모두 받았을때의

시점을 이야기하는것이기 때문이죠. 실제 로드후에 초기화 함수를 호출하려면 컨텐츠의 이벤트를 트리거 해야합니다.

플렉스로 만들어진 SWF파일의 경우 MovieClip 이 아니기 때문에 조금 다릅니다.

2. 함수나 객체에 접근하기

플래시와 플렉스의 경우 구조 자체가 많이 다르기 때문에 접근하는 방법도 서로 다릅니다.

플래시는 root 플렉스는 application 으로 접근합니다.

함수나 변수에 접근할때 반드시 네임스페이스가 public 로 설정되어야 한다는 점도 잊지 마시기 바랍니다.

Flex를 어느 정도 하신 분들이라면 HTTPService 사용과 데이터 바인딩(binding)에 익숙해지셨겠지만, 제가 만난 분들 중에도

종종 실수를 하시는 분들이 계십니다. 그만큼 자주 사용하면서도 실수하기 쉬운부분입니다. 이번엔 HTTPService 에서 데이터를 읽어와

DataGrid까지 바인딩(binding)시키는 부분에서 실수하기 쉬운 부분에 대해 자세히 설명하려 합니다.

먼저 아래처럼 웹서비스(web service)를 선언해줍니다.

여기서 result="resultHandler(event)" 는 이벤트 내부적으로 event 라는 이벤트 인스턴스(instance)가 생성되는데 이것을

콜백함수(callback function)에 넣겠다는 뜻입니다. resultFormat 은 대부분 웹서비스는 XML 기반으로 데이터를 연동시킬 목적으로

구현할것이라면 e4x 라고 선언해주어야 나중에 뒷탈(?)이 없습니다. 그렇지 않으면 종종 원치않은 바이너리가 들어가는 경우가 생깁니다.

많은 분들이 이 부분에서 실수를 하는데 '예제로 배우는 Adobe 플렉스 2' 에 (저를 포함한 많은 분들이 이 책으로 시작하셨죠)

DataGrid 에 데이터를 바인딩 시키기는 부분이 나오는데 책에서는 HTTPService.lastResult 를 바로 DataGrid에 바인딩 시킵니다.

HTTPService.lastResult 을 바로 DataGrid에 바인딩 시켰을경우 데이터가 1개의 노드가 존재할때 문제가 null 객체에 접근 에러가

뜨고 말지요. XML이 한개 였을경우 데이터가 어레이(array) 형태가 아닌 오브젝트(object) 형태라고 인식하기 때문입니다. 때문에

번거롭지만 위 처럼 XMLList를 통해 어레이(array) 형태란것을 인식시키고 이것을 바인딩된 변수 dataset에 넣어주는것입니다.

저 함수에서 DataGrid.dataProvider 에 넣어줄수도 있지만 그렇게 했을경우 정상적인 바인딩이 이루어지지 않을뿐더러 버그를

유발할수도 있습니다. 외부로 들어온 데이터는 저렇게 모두 바인딩 변수에 넣어주시는 편이 좋습니다. 

바인딩을 설명하기위해 dataProvider 에 ArrayCollection 을 넣어서 설명하는 부분 때문에 ArrayCollection 에 담는 분도

계시더구요. 전에도 잠깐 언급했듯이 HTTPService 는 기본 XMLListCollection 을 사용하는것이 정석입니다.

XMLListCollection를 사용해야지만 또 나중에 필터링에 대해 깊이 들어갈때 도움이 됩니다.

마무리는 다음과 같이 선언해주면 끝입니다. 간단하지만 의외로 실수하기 쉬운 부분이죠.

이번에는 ResourceManager 를 이용하여 리소스들을 동적으로 로드 시키는 방법을 해보겠습니다.

ResourceManager 에는 동적으로 별도로 컴파일된 리소스들을 읽어오는 메소드 loadResourceModule 를 지원하고 있습니다.

StyleManager 가 CSS 을 컴파일하여 동적으로 읽어오는 방법이 있듯이 ResourceManager 또한 별도로 컴파일된

리소스 모듈이라 불리우는 컴파일된 파일을 읽어오는 방법을 지원하고 있습니다.

그럼 loadResourceModule 를 사용하여 컴파일된 리소스를 읽어오기에 앞서 ResourceModule 를 만드는 방법을 살펴 보겠습니다.

ResourceModule 의 기본이될 Application 을 하나 생성하고 ResourceBundle 을 지정합니다.

리소스 파일을 생성하는 방법과 ResourceBundle 사용법은 앞에서 설명드렸기에 넘어가겠습니다.

이렇게 간단하게 한개의 Application 안에 resourceBundle 를 설정하고 컴파일 하는것 만으로 ResourceModule 는 완성됩니다.

이제 컴파일된 ResourceModule 를 읽어오겠습니다.

<?xml version="1.0"?>
<!-- modules/EventApp.mxml -->
<mx:Application xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml" width="900" height="100%" backgroundGradientAlphas="[0.0, 0.0]">
    <mx:Script>
        <![CDATA[
            [Bindable]
            public var selectedItem1:Object;
        ]]>
    </mx:Script>
    <mx:ComboBox
        width="215"
        labelField="label"
        close="selectedItem1=ComboBox(event.target).selectedItem">
        <mx:dataProvider>
            <mx:Object label="Select Coverage"/>       
            <mx:Object
                label="Life Insurance"
                module="insurancemodules/LifeInsurance.swf"
            />
            <mx:Object
                label="Auto Insurance"
                module="insurancemodules/AutoInsurance.swf"
            />         
            <mx:Object
                label="Home Insurance"
                module="insurancemodules/HomeInsurance.swf"
            />
        </mx:dataProvider>
    </mx:ComboBox>

    <mx:Panel width="100%" height="100%">
        <CustomModuleLoader id="mod"
            width="100%"
            url="{selectedItem1.module}"
        />
    </mx:Panel>
    <mx:HBox>
        <mx:Button label="Unload" click="mod.unloadModule()"/>
        <mx:Button label="Nullify" click="mod.url = null"/>
    </mx:HBox> 
</mx:Application>




customModuleLoader.mxml

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- modules/CustomModuleLoader.mxml -->
<mx:ModuleLoader xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" creationComplete="init()">
  <mx:Script>
    <![CDATA[
    public function init():void {
        addEventListener("urlChanged", onUrlChanged);
        addEventListener("loading", onLoading);
        addEventListener("progress", onProgress);
        addEventListener("setup", onSetup);
        addEventListener("ready", onReady);
        addEventListener("error", onError);
        addEventListener("unload", onUnload);

        standin = panel;
       /*  removeChild(standin); */       
    }
   
    public function onUrlChanged(event:Event):void {
        if (url == null) {
            if (contains(standin))
                removeChild(standin);
        } else {
            if (!contains(standin))
                addChild(standin);
        }
        progress.indeterminate=true;
        unload.enabled=false;
        reload.enabled=false;
    }

    public function onLoading(event:Event):void {
        progress.label="Loading module " + url;
        if (!contains(standin))
            addChild(standin);

        progress.indeterminate=true;
        unload.enabled=false;
        reload.enabled=false;
    }
   
    public function onProgress(event:Event):void {
        progress.label="Loaded %1 of %2 bytes...";
        progress.indeterminate=false;
        unload.enabled=true;
        reload.enabled=false;
    }
   
    public function onSetup(event:Event):void {
        progress.label="Module " + url + " initialized!";
        progress.indeterminate=false;
        unload.enabled=true;
        reload.enabled=true;
    }
   
    public function onReady(event:Event):void {
        progress.label="Module " + url + " successfully loaded!";
        unload.enabled=true;
        reload.enabled=true;

        if (contains(standin))
            removeChild(standin);
    }
   
    public function onError(event:Event):void {
        progress.label="Error loading module " + url;
        unload.enabled=false;
        reload.enabled=true;
    }
   
    public function onUnload(event:Event):void {
        if (url == null) {
            if (contains(standin))
                removeChild(standin);
        } else {
            if (!contains(standin))
                addChild(standin);
        }
        progress.indeterminate=true;
        progress.label="Module " + url + " was unloaded!";
        unload.enabled=false;
        reload.enabled=true;
    }
   
    public var standin:DisplayObject;
    ]]>
  </mx:Script>

  <mx:Panel id="panel" width="100%">
    <mx:ProgressBar width="100%" id="progress" source="{this}"/>
    <mx:HBox width="100%">
      <mx:Button id="unload"
        label="Unload Module"
        click="unloadModule()"
      />
      <mx:Button id="reload"
        label="Reload Module"
        click="unloadModule();loadModule()"
      />
    </mx:HBox>
  </mx:Panel>
</mx:ModuleLoader>