[공지]이미지나 링크가 깨졌다면 댓글 부탁드립니다.

1. 서버로부터 XML로 구성된 Meun데이타를 HttpService를 통해 받아와 Tree컴포넌트에 바인드
2. Drag&Drop을 이용하여 각 item 위치 수정후 서버에 Menu구성 Update, HTTPSerivce이용
3. Double Click을 이용하여 item의 이름정보 및 값을 수정하여 서버에 전송하여 Menu Table Update
4. 선택한 메뉴(글)삭제, 서버 Update실시
5. 선택시 Javascript와 통신하여 해당 명령 수행(가령, 글을 보여주는 기능)
6. Javascript로 부터 명령을 받아 원하는 내용이 속한 폴더를 expand

여기에서는 1번을 구현하고자 한다. 이를 구성하기 위해서 기본적으로 mx.rpc.http.HTTPService에 대해서 알필요가 있고 XML데이타를 받기위해 무엇을 준비해야하는가 생각할 필요 있다.

먼저 사용할 XML 데이타는 다음과 같다. 이 XML데이타는 이미 만들어져 있는 경우이지만 PHP나 ASP와 같은 웹프로그램으로 DB로 부터 해당정보를 읽어와 동적으로 만들 수도 있을 것이다. 여기서 msg는 ok가 있는 이유는 XML를 요청한 곳에 이 데이타는 DB로 부터 제대로 읽어왔음을 뜻하는 표시로 사용되며 만약 error가 있는 경우 다른 msg를 넣으면 된다.

<?xml version="1.0" encoding="utf-8" ?>
<root>
 <msg>ok</msg>
  <nodes>
  <node  data="1" label="메뉴 1">
   <node  data="1" label="1-1"/>
   <node  data="2" label="1-2"/>
  </node >
  <node  data="3" label="메뉴 2">
   <node  data="4" label="2-1"/>
   <node  data="5" label="2-2"/>
   <node  data="6" label="2-3"/>
   <node  data="7" label="메뉴 3">
    <node  data="8" label="3-1"/>
    <node  data="9" label="3-2"/>
   </node>
  </node>
 </nodes>
</root>
   

아래 소스는 위의 XML 파일을 HTTPService를 이용해 읽어와 Tree에 바인드하는 예제이다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="init()" initialize="System.useCodePage=true">
 
 <mx:Style>
  Application
  {
   fontSize:12pt;
  }
 </mx:Style>
 <mx:Script>
  <![CDATA[
   import mx.collections.*;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.http.HTTPService;

   public var httpServ:HTTPService;
   
   [Bindable]
   public var xlcData:XMLListCollection;
   
   ////////////////////////////////////////////
   // 초기화
   // 1. HTTPSerivce를 생성
   // 2. 바로 서버로부터 XML 데이타를 요청한다.
   ////////////////////////////////////////////
   public function init():void
   {
    httpServ = new HTTPService();
    request("http://localhost/Path/category.xml");
   }  
   
   ////////////////////////////////////////////
   // XML 요청
   // 1. POST방식으로 결과물을 E4X형태로 한다.
   // 2. 결과를 받기 위해 Listener Handler함수를 선언
   ////////////////////////////////////////////
   public function request(url:String, params:Object=null):void
   {
    this.httpServ.url = url;
    this.httpServ.method = "POST";
    this.httpServ.resultFormat="e4x";
    this.httpServ.addEventListener("result", resultHandler);
    this.httpServ.addEventListener("fault", faultHandler);
    this.httpServ.send(params);
   }

   ////////////////////////////////////////////
   // XML 결과를 받았을 경우
   // 1. XMLList에 결과를 임시로 저장
   // 2. 적합한 데이타인지 확인
   // 3. nodes요소만 XMLListCollection으로 생성
   // 이는 동적으로 Tree에 바인드[Bindable]됨
   ////////////////////////////////////////////  
   public function resultHandler(e:ResultEvent):void
   {
    var xlData:XMLList = new XMLList(e.result);
    if(xlData.elements("msg").toString()!="ok")
    {
     mx.controls.Alert.show(xlData.elements("msg").toString(),"Error");
    }
    else
    {
     xlcData = new XMLListCollection(xlData.elements("nodes"));
    }       
   }
   
   ////////////////////////////////////////////
   // XML 데이타 요청에 대한 실패가 있을 경우 호출됨
   ////////////////////////////////////////////  
   public function faultHandler(e:FaultEvent):void
   {
    mx.controls.Alert.show("데이타를 읽는 중 에러\n"+e.fault.faultString);
   }

  ]]>
 </mx:Script>
 <mx:Panel width="100%" height="200" layout="absolute" title="Tree와 HttpService 수정 - 지돌스타(jidolstar.com)">
  <mx:Tree id="trCategory" 
   labelField="@label"
   dataProvider="{xlcData}"
   showRoot="false"
   dragMoveEnabled="true"
   x="0" y="0" width="100%" height="100%"/>  
 </mx:Panel>
 
</mx:Application>

아래 파일은 XML 데이타와 프로그램 소스파일이다.

category.xml

TreeTest.mxml

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

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

Adobe Flash Platform flex, HTTPService, Tree, XML