Eirene's Blog ~ XML 데이터의 필드를 순서대로 가져오기 ~

문제점 : XML 데이터를 순서대로 가져오려고 하는데, Object를 사용하면 순서가 랜덤하게 섞인다.

해결책 : e4x 형태의 XML로 데이터를 가져온다.

보통 HTTPService에서 외부 xml 데이터를 가져올 때, resultFormat을 별도로 설정하지 않는 경우가 많다. 그런데 이렇게 할 경우에는, 데이터의 필드를 순서대로 알아올 수 없다. 이런 경우에는 resultFormat을 e4x로 설정하고, 별도의 유틸리티 클래스를 통해 해당 데이터의 필드를 순서대로 추출하면 된다.

아래 예제를 보도록 하자. 아래 예제에서는 xmlData.xml의 데이터를 HTTPService를 통해 불러와서, 데이터의 필드 순서에 따라 데이터그리드의 컬럼을 설정하고 있다. 왼쪽 데이터 그리드에서는, resultForma으로 Object를 사용해 Object 속에 있는 속성을 검사해 컬럼을 동적으로 생성하고 있고, 오른쪽 데이터그리드에서는 resultFormat으로 e4x를 사용해 XML 데이터를 직접 검사해 데이터그리드의 컬럼 필드를 정하고 있다.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init();">
	<mx:Script>
		<![CDATA[
			import mx.collections.XMLListCollection;
			import mx.controls.dataGridClasses.DataGridColumn;
			import com.joshy21.data.VO;
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import com.joshy21.utils.XMLUtil;
			
			private function init():void {
				svc.send();
				svc2.send();
			}
			private function resultHandler(event:ResultEvent):void {
				var arr:ArrayCollection = new ArrayCollection(event.result.data.row.toArray());
				var column:DataGridColumn;
				var columns:Array=[];
				for (var prop:String in arr[0]) {
					column = new DataGridColumn();
					column.dataField = prop;
					columns.push(column);
				}
				dg.columns = columns;
				dg.dataProvider = arr;
			}
			private function resultHandlerE4X(event:ResultEvent):void {
				var fields:Array = XMLUtil.getNodeNames(event.result as XML);
				var len:int = fields.length;
				var column:DataGridColumn;
				var columns:Array=[];
				for (var i:int=0; i< len;i++) {
					column = new DataGridColumn();
					column.dataField = fields[i];
					columns.push(column);
				}
				dg2.columns = columns;
				dg2.dataProvider = new XMLListCollection(event.result.elements() as XMLList);
			}
		]]>
	</mx:Script>
	<mx:HTTPService id="svc" url="xmlData.xml" result="resultHandler(event)" />
	<mx:HTTPService id="svc2" url="xmlData.xml" resultFormat="e4x" result="resultHandlerE4X(event)" />
	<mx:HBox width="100%" height="100%">
		<mx:DataGrid id="dg" width="100%" height="100%" />
		<mx:DataGrid id="dg2" width="100%" height="100%" />
	</mx:HBox>
	
</mx:Application>

이 경우 원래 데이터가 다음과 같을 때, 예상되는 데이터그리드의 컬럼 순서는, PLAN, CNT, RATIO, PLAN2, CNT2, RATIO2가 맞지만, 왼쪽 데이터그리드의 경우는 이 순서가 제 멋대로 섞이게 된다. 이를 방지하려면, 오른쪽 데이터그리드에 사용된 것처럼, resultFormat을 e4x로 설정하고, 다음과 같은 유틸리티 클래스를 사용해, 필드명을 뽑아 내야 한다. 이 클래스에서는 getNodeNames라는 static 메서드를 정의하고 있는데, 이 메서드는 와 같은 XML 데이터 구조에 적합하다. 이 클래스는 자식 노드가 있는지 확인해 이름을 문자열 형태로 저장한 배열을 반환하고 있다. 이렇게 하면, 데이터의 필드 순서가 섞이지 않고 순서대로 데이터를 화면에 보여줄 수 있다.

액션스크립트 원리 : ArrayCollection이 Array를 source로 받듯이, XMLListCollection은 XMLList를 source로 받는다. 아울러 e4x 타입으로 데이터를 받을 때, 결과를 XMLListCollection이 아닌 ArrayCollection 형태로 만들려면, 별도의 유틸리티 클래스를 작성해, XML 노드 각각에 대해 변환 과정을 거쳐야 한다.

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

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