농부와 컴퓨터/FLEX 4 & AIR

Passing from FLEX 4 ArrayCollection to JAVASCRIPT

금오귤림원 2010. 5. 3. 02:00

호출프로그램(메인 HTML파일) :
  <script type="text/javascript">
   // 플렉스 이미지 업로드 컴포넌트를 포함하는 HTML 파일 호출
   function showDialog() {
    document.getElementById("플렉스 이미지업로드 컴포넌트를 포함하는 HTML파일을 호출하는 버튼").disabled = true;
    var rtnValue = null;
    var url = "플렉스이미지업로드를 포함하는HTML파일.html";
    if (window.showModalDialog) {
     var ieFeatures = "dialogWidth:705px;"
      + "dialogHeight:696px;"
      + "edge:raised;"
      + "help:no;"
      + "scroll:no;"
      + "resizable:no;"
      + "status:no;"
      + "unadorned:no;";
     rtnValue = showModalDialog(url, window, ieFeatures);
    } else {
     var windowName = "sampleDialog"
     var mozillaFeatures = "width=705,"
      + "height=696,"
      + "toolbar=no,"
      + "location=no,"
      + "directories=no,"
      + "status=no,"
      + "menubar=no,"
      + "scrollbars=no,"
      + "resizable=no,"
      + "modal=yes";
     rtnValue = window.open(url, windowName, mozillaFeatures);
    }

    if(rtnValue == null) {
     ;
    } else {
     dispAcceptedData(rtnValue);  // 업로드 후 리턴된 업로드 이미지 각 각의 정보를 처리.
    }
   }   

   // 플렉스로부터 로컬이미지파일들을 업로드하고 난 후, 그 업로드된 이미지 파일들에 대한 정보를 리턴받음.
   function dispAcceptedData(acceptedValue) {
    if(acceptedValue == null) {
     alert("전달받은 자료가 없습니다");
    } else {
     var viewPort = document.getElementById("viewAcceptedData");
     viewPort.style.display = "block";
     var tmpValue = "";
     for(i=0; i<acceptedValue.length; i++) {
      tmpValue += ( (i+1) + " : " + acceptedValue[i].label + ", " + acceptedValue[i].assigned + ", " + acceptedValue[i].description + "\n" );
     }
     viewPort.innerText = tmpValue;
     tmpValue = "";
    }
    document.getElementById("callPopup").disabled = false;
   }
  </script>

----------------------------------------------------------------------------------

피호출프로그램(플렉스 이미지 업로드 컴포넌트를 포함하고 있는 HTML파일) :
  <script type="text/javascript">
   function closeWindow(value) {
    window.returnValue = value;
    window.close();
   }
  </script>

----------------------------------------------------------------------------------

플렉스 이미지 업로드 컴포넌트 :

 <fx:Script>
  <![CDATA[
       .
       .
       .
   import flash.external.*;
       .
       .

   private function rtnCallWin():void
   {
    if (ExternalInterface.available) {
     var passingValues:Array = new Array(타일리스트의 데이터프로바이더로사용되는 바인더블 어레이컬렉션.length-1);
     for(var i:int=0; i<타일리스트의 데이터프로바이더로사용되는 바인더블 어레이컬렉션.length; i++) {
      var passingValue:Object = new Object();
      passingValue = 타일리스트의 데이터프로바이더로사용되는 바인더블 어레이컬렉션[i]
      passingValues[i] = passingValue;
     }
     ExternalInterface.call("closeWindow", passingValues);

    } else {
     Alert.show("ExternalInterface 가 활성화 되지 않았습니다.", "ExternalInterface 정보창");
    }
   }
  ]]>
 </fx:Script>

----------------------------------------------------------------------------------

1. 플렉스 4 의 <s:List>에 사용된 데이터프로바이더의 데이터타입은 Arraycollection.
2. 이 Arraycollection 타입의 변수에는 서버측으로 업로드된 이미지 각 각에 대한 상세정보가 포함됨.
3. 이 상세정보를 메인에서 리턴받아, 서버측 데이터베이스로 전송할 자료로 사용하고자 함.
4. 즉, 플렉스 컴포넌트에서 업로드할 각 이미지들에 대해, 필요한 정보들(예를들어 사진설명, 대표사진지정 등...)을 설정하고 난 후 서버로 업로드. 업로드 동작이 성공적으로 끝난 후, 설정된 정보들을 메인의 Javascript에서 리턴받아 게시판의 게시물을 완성한 다음 서버로 작성된 모든 내용(업로드된 이미지의 주소 및 상세정보 등)을 전송하는 목적

5. 플렉스측의 Arraycollection 타입의 변수는 Javascript 측에서 Array 타입으로 받기는 하지만, 그 배열안의 데이터들을 Object 형태로 받지 못함. 따라서 업로드된 각 이미지에 대한 상세정보를 추출하여 가공할 수 없음.

6. 따라서, 플렉스측에서 자바스크립트측으로 타일리스트의 데이터프로바이더로 사용된 Arraycollection 타입의 변수를 직접 전송하기 이전에, 데이터프로바이더내의 각 요소를 오브젝트 타입으로 변환한 다음, 그 들을 하나의 Array 타입의 변수에 묶어 자바스크립트로 넘겨 주어야 함.

7. 자바스크립트측에서는 넘겨받은 Array타입의 변수를 그 안의 요소갯수만큼 루핑을 통해 추출하여 사용.