오랫만에 블로그 유입경로를 보다가 코리아몽키라는 분의 블로그를 알게 되었습니다.  [Actionscript 3.0] 간단하게 만들어 본 XML to arrayColection 함수 라는 글에서 제 글을 인용하셨더라구요. ;) 위의 글 말미에 코리아몽키님이 가진 의문이 있으셔서 덧글을 달다가 덧글이 좀 길어질 듯 하여, 간만에 포스팅을 하려고 합니다. ;)

'왜 XML을 Object로 파싱하여 그 데이터를 처리하고 이용하는 방법에 대해서 정리된 자료가 없는 것인가?' 라는 의문은 다른 각도로 접근해봐야 할 것 같습니다. '왜 방법이 없는가'에서 'XML을 Object로 파싱하지 않고 사용할 방법이 있는가?' 라는 것으로 말이죠. 단도직입적으로 말씀드리자면, XML 을 받은 것을 Object 로 변환해야할 필요성이 크지 않다는 것입니다(꼭 필요한 경우도 있겠습니다만). 게다가 XML 그대로 사용하는 것도 가능하고 HTTPService를 이용하면 XML을 Object로 변환 한 결과를 바로 받을 수도 있기 때문입니다.

그럼 먼저 HTTPService 를 이용하여 다양한 형태로 결과를 받는 방법에 대해서 알아보겠습니다.

HTTPService 의 resultFormat
HTTPService에는 resultFormat 이라는 속성이 존재합니다. 이는 HTTP를 호출하여 받은 결과값을 어떤 식으로 파싱할 것인지에 대해서 설정하는 속성인데, 아래의 표와 같이 총 6가지로 설정 가능합니다.

object	ActionScript의 Object 들의 트리형식으로 XML 을 파싱하여 반환합니다. (기본값)
array	ActionScript의 Object 들의 트리형식으로 XML 을 파싱하여 반환되나, 최상위의 Object가 Array가 아니라 새로 생성된 Array의 첫 번째 아이템이 됩니다. 만약 makeObjectsBindable 속성이 true로 설정되어 있을 경우 최상위 Array는 ArrayCollection으로 반환됩니다.
xml	ActionScript 의 XMLNode Object로 이루어진 XML로 XML을 파싱하여 반환합니다.
flashvars	ActionScript Object로 name과 value가 쌍으로 되어 있는(page=1) 텍스트를 파싱하여 반환합니다.
text	받은 그대로를 text로 반환합니다.
e4x	ECMAScript for XML(E4X)를 이용할 수 있는 ActionScript 의 XMLNode Object로 이루어진 XML로 XML을 파싱하여 반환합니다.

resultFormat를 object나 array로 설정하면 Object로 변환된 XML 데이터(서버측이 전달해준)를 전달받게 됩니다. 따로 파싱할 필요가 없는 것이죠. 물론 e4x나 xml로 설정하여  XML로 받아와서 사용할 수도 있습니다. 또는 특정 프로토콜에 의해 생성된 데이터라면 text로 설정하여 String 으로 받은 다음 프로토콜에 맞게 파싱하여 사용할 수도 있을 것입니다. (마치 구분자를 이용하여 소켓통신시 데이터 전달하는 것과 같이)

Object로 파싱하여 사용
object로 resultFormat을 설정하여 데이터를 받아오는 예제를 한번 보겠습니다.
본 블로그의 rss를 읽어서 DataGrid에 넣어주는 예제인데, 우선 RSS 정보를 읽기 위해 구조를 먼저 보면 (우측이미지 참조) channel이라는 노드의 하위에 블로그의 정보들(타이틀, 주소, 이미지정보 등)이 있고 포스트의 정보는 item 이라는 노드들에 들어있습니다.

예제에서는 이 item 노드들을 가져다가 DataGrid에 넣어줄 것입니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="300" fontSize="12" creationComplete="{init()}" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" borderStyle="solid"> <mx:HTTPService id="myHTTPService" useProxy="false" resultFormat="object" url="http://blog.flashplatform.kr/rss" result="{resultHandler(event)}" fault="{faultHandler(event)}"/> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; private function init():void { myHTTPService.send(); } private function resultHandler(event:ResultEvent):void { var rssData:Object = event.result.rss; var items:ArrayCollection = rssData.channel.item; myDataGrid.dataProvider = items; } private function faultHandler(event:FaultEvent):void { Alert.show("RSS 를 가져오지 못했습니다.", "알림"); } ]]> </mx:Script> <mx:Label x="10" y="10" text="RSS Reader" fontWeight="bold"/> <mx:Label y="10" text="resultFormat - object" right="10"/> <mx:DataGrid id="myDataGrid" left="10" right="10" bottom="10" top="35"> <mx:columns> <mx:DataGridColumn headerText="제목" dataField="title"/> <mx:DataGridColumn headerText="작성자" width="60" dataField="author" textAlign="center"/> <mx:DataGridColumn headerText="작성일" width="80" dataField="pubDate"/> </mx:columns> </mx:DataGrid> </mx:Application>

위의 예제에서 resultHandler 메소드를 잠시 보시면 위에서 말한 item 노드들을 찾아서 DataGrid 에 넣어주는 구문을 보실 수 있으십니다. 위의 rss의 트리구조와 같이 Object 로 파싱되어 있기 때문에 동일하게 rss.channel.item 이런 식으로 item 을 읽어오고 있습니다. (하단 이미지 참조)



XML 그대로 사용하기
Flex의 DataGrid, Tree 와 같이 자주 사용하는 컴포넌트의 설계적 특성상 Object 혹은 XML 중 어떤 하나가 더 빠르다는 이야기는 둘째 치고라도 위의 예제같은 경우는 XML을 그대로 사용하시는 것이 오히려 개발 시에는 편할 수도 있습니다. 왜냐하면 resultHandler에 구현된 로직때문인데, resultFormat 속성을 e4x로 설정하여 결과로 받은 XML은 E4X를 사용할 수 있기 때문입니다. E4X에 대한 설명은 생략하도록 하겠습니다. 간단한 E4X에 대한 예제는 여기를 참고하세요.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="600" height="300" fontSize="12" creationComplete="{init()}" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" borderStyle="solid"> <mx:HTTPService id="myHTTPService" useProxy="false" resultFormat="e4x" url="http://blog.flashplatform.kr/rss" result="{resultHandler(event)}" fault="{faultHandler(event)}"/> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.rpc.events.FaultEvent; import mx.rpc.events.ResultEvent; private function init():void { myHTTPService.send(); } private function resultHandler(event:ResultEvent):void { var rssData:Object = event.result as XML; myDataGrid.dataProvider = rssData..item; } private function faultHandler(event:FaultEvent):void { Alert.show("RSS 를 가져오지 못했습니다.", "알림"); } ]]> </mx:Script> <mx:Label x="10" y="10" text="RSS Reader" fontWeight="bold"/> <mx:Label y="10" text="resultFormat - e4x" right="10"/> <mx:DataGrid id="myDataGrid" left="10" right="10" bottom="10" top="35"> <mx:columns> <mx:DataGridColumn headerText="제목" dataField="title"/> <mx:DataGridColumn headerText="작성자" width="60" dataField="author" textAlign="center"/> <mx:DataGridColumn headerText="작성일" width="80" dataField="pubDate"/> </mx:columns> </mx:DataGrid> </mx:Application>
resultFormat 속성을 e4x로 설정하고, resultHandler 메소드에서 e4x를 사용하여 간단하게 item을 DataGrid에 넣도록 구현하였습니다. 위의 예제와 비교하여 보셔도 크게 다른 것은 느끼지 못하실 것입니다. 오히려 위의 예제에서는 item 노드를 찾기가 훨씬 쉽게 되어있죠.



개발자 마다 스타일에 따라 차이는 있겠습니다만, 저의 경우는 HTTPService를 이용하는 어플의 경우 XML을 기반으로 데이터를 운용하고 있고, RemoteObject의 경우에는 VO를 기준으로 데이터를 운용하고 있습니다. 아무래도 HTTPService를 사용하는 경우는 서버와 주고받는 데이터를 XML기반으로 움직이는 것이 E4X 때문에 무지 편한 느낌이라.. ;^)

다른 분들은 어떻게 데이터를 운용하시는지 저도 궁금하네요. ;^) 트랙백 부탁드립니다.

ActionScript에서 배열은 Array 를 사용하게 됩니다.
Java 와 달리 동적배열이어서 크기를 정하지 않고 임의대로 push, pop 등의 메소드를 통해 편리하게 사용할 수 있습니다. (Java에서는 ArrayList를 사용하시면 편리하죠!)

얼마전에 읽었던 Flex3 in Action 에 보면 'Working with ActionScript' chapter에 Array에 대해서 설명하고 있는데요, 여기에 다름과 같이 배열에 대해서 정의를 하고 있습니다.

제가 Flex를 처음 접했을 때 이해가 안되던 부분은 Array와 ArrayCollection 에 대한 것이었습니다. Array를 이용해서 ArrayCollection을 만들긴 했었는데, 왜 그렇게 만들어야 하는지 조차 이해를 못했었죠. ;)

우선 Array 에 대해서 알아봐야겠습니다.
Flex 에 Array 는 자바의  Array와는 달리 동적이어서 크기를 지정하지 않고 임의대로 push, pop 메소드를 이용하여 아이템을 추가 및 삭제할 수 있습니다. 다만, 특정 인덱스 위치에 아이템을 추가한다 던가, 삭제한다던가 하는 것은 불가능 합니다. splice 메소드를 이용하여 특정 위치의 값에 대해 컨트롤 할 수 있습니다만, 상당히 번거롭습니다. 그리고 Array의 특정 아이템이 변경될 경우에 그 변경여부를 즉각 알 수가 없습니다. (var array:Array = new Array() 하는 것 보다 var array:Array = [] 이렇게 하시는 것을 추천합니다. 전자는 느립니다. 왜그런지는 자세히는 모르겠습니다. 에이레네님의 글을 보고 알았거든요 ㅎ)
/** * Array 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; array[0] = 0; trace(array); // Output: 0,2,3,4,5 array.push(6, 7); trace(array); // Output: 0,2,3,4,5,6,7 array.pop(); trace(array); // Output: 0,2,3,4,5,6 trace(array.length); // Output: 6 array.length = 2; trace(array); // Output: 0,2

이를 가능하도록 하여주는 것이 ArrayCollection 입니다.
다 시 말해서 ArrayCollection은 Array의 wrapper 클래스로 Array의 데이터를 핸들링해주는 역할을 합니다. 엄밀히 말해서는 ArrayCollection이 상속받은 ListCollectionView 클래스에서 지원해주죠. ArrayCollection은 단지 Array를 받을 source 라는 속성과 클래스 직렬화를 위한 readExternal, writeExternal 메소드(IExternalizable 인터페이스를 구현)만이 작성되어 있습니다.
/** * ArrayCollection 실제 구현 코드 */ public class ArrayCollection extends ListCollectionView implements IExternalizable { include "../core/Version.as"; public function ArrayCollection(source:Array = null) // 생성자 { super(); this.source = source; // Array를 생성자에 할당하면 source속성에 넣음 } [Inspectable(category="General", arrayType="Object")] [Bindable("listChanged")] //superclass will fire this public function get source():Array { if (list && (list is ArrayList)) // list가 null이 아니고 ArrayList 형태일때 { return ArrayList(list).source; // ArrayList의 source인 Array를 반환 } return null; } public function set source(s:Array):void { list = new ArrayList(s); // source로 들어온 Array를 ArrayList형태로 할당한다. } /** * 직렬화를 위한 메소드 * 본 포스트에서는 언급하지 않음. */ public function readExternal(input:IDataInput):void { if (list is IExternalizable) IExternalizable(list).readExternal(input); else source = input.readObject() as Array; } public function writeExternal(output:IDataOutput):void { if (list is IExternalizable) IExternalizable(list).writeExternal(output); else output.writeObject(source); } }

그렇다면 ListCollectionView에 대해서 알아봐야겠습니다. 
ListCollectionView 는 ICollectionView, IList, IMXMLObject 이렇게 3가지의 인터페이스를 구현하고 있습니다.(ListCollectionView 는 ArrayCollection과 XMLListCollection이 상속받고 있습니다. ArrayCollection은 Array에 대해서 컨트롤 하지만, XMLListCollection은 XML의 List 형태인 XMLList에 대해 컨트롤 합니다.) 여기서 중요하게 보아야 할 것은 처음 2개인 ICollectionView, IList 인터페이스입니다.

ICollectionView 인터페이스는 해당 Collection에서 데이터를 변경하지 않고, 데이터의 정렬 또는 필터링을 가능하게 해줍니다. 또한 해당 Collection에서 IViewCursor를 제공하여서 데이터에 대한 접근 및 변경을 지원합니다.
/** * sort 관련 예제 */ var array:Array = ["철이","똘이","찰스","뽀삐","순희","영희","나비"]; var myAC:ArrayCollection = new ArrayCollection(array); var sort:Sort = new Sort(); sort.fields = [new SortField(null, true)]; myAC.sort = sort; myAC.refresh(); trace(array); // Output: 철이,똘이,찰스,뽀삐,순희,영희,나비 trace(myAC); /* Output: (Array)#0 [0] "나비" [1] "똘이" [2] "뽀삐" [3] "순희" [4] "영희" [5] "찰스" [6] "철이" */
/** * IViewCursor 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; var myAC:ArrayCollection = new ArrayCollection(array); var myCursor:IViewCursor = myAC.createCursor(); while (!myCursor.afterLast) { // 커서가 해당 Collection의 마지막까지 이동할떄까지 // doSomething.... myCursor.moveNext(); // 커서를 다음으로 이동 } // 루프 종료시 커서의 current는 아이템의 마지막에 위치 myCursor.insert(6); trace(array); // Output: 1,2,3,4,5,6 myCursor.movePrevious(); myCursor.remove(); trace(array); // Output: 1,2,3,4,5
IList 인터페이스는 ICollectionView에서 IViewCursor를 이용한 순차적인 데이터접근과 달리 인덱스를 기반으로 하여 데이터에 대한 접근 및 변경을 지원합니다.
/** * IList 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; var myAC:ArrayCollection = new ArrayCollection(array); myAC.addItem(6); // 배열의 맨 마지막에 6의 추가 trace(array); // Output: 1,2,3,4,5,6 myAC.addItemAt(7, 1); // 1번째에 7을 추가 trace(array); // Output: 1,7,2,3,4,5,6 myAC.removeItemAt(1); // 1번째 항목을 제거 trace(array); // Output: 1,2,3,4,5,6 trace(myAC.getItemIndex(3)); // 3이 몇번째 항목인지 조사 Output: 2 trace(myAC.getItemAt(3)); // 3번째 항목의 값 받기 Output: 4

여기서 한가지 재미있는 것은 ListCollectionView는 내부적으로 IList 인터페이스를 이용하여 원본 데이터를 관리하고 있습니다. 위의 ArrayCollection에서 source에 Array를 반영해줄때 list 라는 변수에 넣어주는데 이 list 변수가 ListCollectionView에 보면

private var _list:IList;

와 같이 선언되어 있음을 알 수 있습니다.
ArrayCollecton 의 경우 Array, XMLListCollection의 경우 XMLList가 그 원본 데이터가 됩니다. 하지만 Array 와 XMLList 는 IList 인터페이스를 구현하고 있지 않습니다. 그렇기때문에 ArrayCollection에서는 IList를 구현하는 ArrayList, XMLListCollection에서는 XMLListAdapter 클 래스를 이용합니다. 이 2개의 클래스는 레퍼런스에서도 설명되어있지 않고, 빌더에서 Content Assist로도 나타나지 않습니다. 사용하기 원치 않았던 듯 합니다. ;) 하지만 ArrayCollection을 사용하기는 싫고 간편하게 데이터 접근이 필요한 경우에는 ArrayList를 사용해보는 것도 괜찮을 것 같습니다. (자바의 ArrayList 랑 똑같다고 생각이 듭니다.)
/** * ArrayList 관련 예제 */ var array:Array = [1, 2, 3, 4, 5]; var myAL:ArrayList = new ArrayList(array); myAL.addItem(6); // 배열의 맨 마지막에 6의 추가 trace(array); // Output: 1,2,3,4,5,6 myAL.addItemAt(7, 1); // 1번째에 7을 추가 trace(array); // Output: 1,7,2,3,4,5,6 myAL.removeItemAt(1); // 1번째 항목을 제거 trace(array); // Output: 1,2,3,4,5,6 trace(myAL.getItemIndex(3)); // 3이 몇번째 항목인지 조사 Output: 2 trace(myAL.getItemAt(3)); // 3번째 항목의 값 받기 Output: 4

그럼 이상으로 간단하게 ArrayCollection에 대해 정리해보았습니다. 저도 이만 자야겠습니다. ;)