Flex - httpService의 return값을 계층형 데이터 구조로 받기(httpService / XMLList)

데이터 연동 과정에서 가장 많이 사용하는것이 httpservice와 ArrayCollection항목일것이다.

그런데 가끔 사용하다보면 데이터를 계층형 형태로 보내고 있는데 tree 메뉴 값 같이..

그때마나 xmllist형태로 바꾸는 귀찮은 과정을 거치게 된다. 구지 xmllist형태를 쓰지 않아도 되지만

그래서 httpservice를 그냥 xmllist형태로 받으면 되지 않을까 생각 했다.

작업은 간단하게 진행되었다. 이론에 충실하다면.. 나도 동영상 강의를 보다가 알았다..ㅎㅎ

기본적인 httpservice의 return 값 형태는 arrayCollection형태이다.

그런데 tree메뉴같은 메뉴를 구성할때 xmllist로 받아서 구성하면 편리하다. 그래서 어떻게 할까 고민하다가
함수를 만들어 사용해도 되지만 구지 그럴필요는 없을것 같다. 그냥 httpservice를 xmllist형태로 받으면 되
지 않을까..ㅎㅎㅎ 그럼 될거 같다..ㅋㅋ

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

기본적으로 httpservice를 사용할때 resultFormat="e4x"형태로 해준다.
그리고 e4x형태로 리턴 받을때 중요한것이 ResultEvent의 event depth가 될것이다.

<?xml version="1.0" encoding="utf-8" ?>
<data>
 <menu name="Menu1" menuID="1">
  <item name="Menu1 Sub1" menuID="1_1" />
  <item name="Menu1 Sub2" menuID="1_2" />
 </menu>
 <menu name="Menu2" menuID="2">
  <item name="Menu2 Sub1" menuID="2_1" />
  <item name="Menu2 Sub2" menuID="2_2" />
 </menu>
 <menu name="Menu3" menuID="3">
  <item name="Menu3 Sub1" menuID="3_1" />
  <item name="Menu3 Sub2" menuID="3_2" />
  <item name="Menu3 Sub3" menuID="3_3" />
 </menu>
</data>


위와 같이 데이터가 리턴될경우 return 받을때 arrayCollection으로 리턴을 받았다면 ResultEvent의 위치는
data = event.result.data.menu가 될것이다.

하지만 resultFormat을 e4x형태로 해주고 return 받을때는
data = event.result.menu로 변경해주어야 된다.

리턴되는 데이터의 root depth가 변경된다. 이걸 정확히 확인 할려면 아래와 같이 놓고 테스트를 해보면 쉽게 알수 있다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 backgroundColor="#FFFFFF" creationComplete="initApp();">
 
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   import mx.rpc.events.ResultEvent;
   
   [Bindable]
   private var arrResult:XMLList;
   
   private function initApp():void
   {
    xmlData.send();
   }   
   
   public function xmlDataHandler(event:ResultEvent):void
   {
    arrResult = event.result.data.menu;
    
    menuTree.dataProvider = arrResult;
    
   }
   
  ]]>
 </mx:Script>
 
 <mx:HTTPService id="xmlData" url="http://pds13.egloos.com/pds/200904/24/99/BlogData1.xml" result="xmlDataHandler(event);" resultFormat="e4x" />

 <mx:Tree id="menuTree" width="300" height="100%" labelField="@name"/>

 
</mx:Application>

위와 같이 사용했다면 아무런 값도 tree에 바인딩 되지 않을것이 아마 하얀 화면만 나타날것이다.

위에 소스에서 arrResult = event.result.menu로 변경을 하고 실행해본다면 return 되는 데이터가 정확히 tree에 바인딩 되는것을 알수 있다.

BlogData1.xml

HttpService_xmllist.swf