오랫만에 블로그 유입경로를 보다가 코리아몽키라는 분의 블로그를 알게 되었습니다.  [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 때문에 무지 편한 느낌이라.. ;^)

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

제목이 좀 뜬금없다... 라고 생각하시는 분이 있으실 것 같습니다. ;)

'XML 그냥 toString() 하던지 toXMLString() 하면 String 만들어주잖아?' 라고 말이죠.
물론 XML의 toXMLString() 메소드를 호출하면 String 으로 만들어줍니다. 다만, 이게 개행문자(\n)가 포함되어있어서 문제가 됩니다. (개행문자 같은 metasequences는 이 곳을 참고하세요.)

var sourceXML:XML = <root> <items> <item classtype='UIComponent' id='myUIComponent' x='10' y='10' width='20' height='20'/> <item classtype='Canvas' id='myCanvas' x='20' y='40' width='30' height='30'/> <item classtype='Panel' id='myPanel' x='30' y='60' width='40' height='40'/> </items> </root>; var xmlString:String = sourceXML.toXMLString(); var targetXML:XML = new XML(xmlString);

위와 같은 코드가 있다고 할 때에 sourceXML.toXMLString() 해서 나온 String을 담고 있는 xmlString 에는 무엇이 들어있을까요?
XML을 String으로 만들었으니 아래와 같이 있겠죠?

 <root><items><item classtype="UIComponent" id="myUIComponent" x="10" y="10" width="20" height="20"/><item classtype="Canvas" id="myCanvas" x="20" y="40" width="30" height="30"/><item classtype="Panel" id="myPanel" x="30" y="60" width="40" height="40"/></items></root>

실제로 위와 같이 들어있을까요? 아닙니다. 실제 아래와 같이 개행문자가 포함된 아래의 String이 들어있습니다.

 <root>\n  <items>\n    <item classtype="UIComponent" id="myUIComponent" x="10" y="10" width="20" height="20"/>\n    <item classtype="Canvas" id="myCanvas" x="20" y="40" width="30" height="30"/>\n    <item classtype="Panel" id="myPanel" x="30" y="60" width="40" height="40"/>\n </items>\n</root>

XML을 toXMLString()으로 String으로 만들면 계층구조에 맞게 개행문자를 넣어서 String을 만들어줍니다. 그래서 해당 String을 trace() 를 해보면 아래와 같이 콘솔에 XML의 계층구조로 보이게 됩니다. ( toString() 을 사용해도 마찬가지 입니다.)

Flex에서 위의 xmlString 을 다시 XML 로 만들더라도 아무런 문제는 없습니다. (targetXML 에 sourceXML과 같은 XML 이 아무런 문제없이 담깁니다.) 하지만, 이렇게 변환된 String을 서버에서 사용시 문제가 생깁니다. 저는 HTTPService에서 자바 서블릿(Servlet)을 호출하여 위와 같은 XML 데이터(파라미터 이름:mydata)를 보내어서 일련의 작업을 하려고 했습니다.  아래는 해당 값을 받는 서블릿입니다.

import java.io.IOException; import java.io.StringReader; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import org.w3c.dom.Document; import org.xml.sax.InputSource; public class myServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String requestXML = request.getParameter("mydata"); // XML데이터를 받음. Document document = convertDocument(requestXML);// Document로 변환함 // something.... } public Document convertDocument(String requestXML) { DocumentBuilderFactory factory = null; DocumentBuilder builder = null; Document document = null; try { // String을 XML 형태로 변환하자 factory = DocumentBuilderFactory.newInstance(); factory.setValidating(true); builder = factory.newDocumentBuilder(); document = builder.parse(new InputSource(new StringReader(requestXML))); } catch(Exception ex) { // 에러를 출력 } return document; } }

request.getParameter("mydata");  라고 구현하여서 실제 Flex 에서 보낸 XML 데이터를 String에 담았습니다. 그러나 이때 이 정보를 DOM 파서를 이용하여 실제 XML로 처리하고 싶어 Document 객체를 만들어 쓰는 과정에서 문제가 생깁니다. 각 노드들의 정보를 가지고 올때 이상한 문자 들어있지 않나...;; Flex에서는 XML을 보냈으나 실제 서블릿에서 받는 데이터는 개행문자가 담겨있는 위와 같은 String 이기 때문입니다.

이러한 문제때문에 Flex에서 XML 을 String으로 만들때 개행문자를 없애는 것에 대해 고민을 했습니다.
답이 안나오더군요. -_-; 어떻게 해야되는지도 모르겠고요. 해서 toXMLString() 대신에 사용할 정적 메소드를 하나 만들었습니다.

수정 전 소스 열기

위의 Utils.toXMLString()을 이용하여 다시 XML을 String으로 변환해보면 (var xmlString:String = Utils.toXMLString(sourceXML);) 맨 처음 예를 들었던 것과 같이 개행문자와 빈칸이 없는 String을 보실 수 있습니다. (노드사이에 빈칸이 있으면 그 것도 문제가 되더라구요)

코드가 좀 추합니다. ^^; 서버에서 제가 잘못처리해서 문제가 되었을지도 모르겠습니다.
더 좋은 방법을 아시는 분께서는 피드백 주시면 정말 감사하겠습니다. :)

2008. 6. 3. 추가

이정웅님께서 XML을 toString() 이나 toXMLString() 하면 개행문자가 포함되는 것에 대한 이유를 알려주셨습니다.
다름아닌 XML 클래스의 prettyPrinting 속성이 있었네요. 기본값이 true 인데, false 로 바꾸면 한줄로 주르륵 나옵니다. ㅜㅜ
(이쁘게 프린팅한다라... ㅜㅜ)

FLEX에서 XML에 있는 값을 가져다 쓰던 도중에 Boolean 값으로 변경을 해야되는 경우가 생겼습니다.
다른 언어라면 Boolean("true") 이렇게 하면 true값이 나올법도 한데,
플렉스는 좀 다르더라구요. 다음은 레퍼런스에 있는 표입니다.

Data type or value	Result of conversion to Boolean
String	false if the value is null or the empty string (""); true otherwise.
null	false
Number, int or uint	false if the value is NaN or 0; true otherwise.
Object	false if the instance is null; true otherwise.

String은 empty string("")이나 null일때는 false를 반환하고 그외에는 true를 반환한다고 합니다.
그렇다면 "true"나 "false"나 둘다 true를 반환하겠지요? ㅡㅡ;
그래서 저는 다음과 같이 변환하여 보았습니다.

value가 true이면 true를 반환하게  " " 를, 아니면 null을 넣어서 false를 반환하게 했답니다.

그러나 이게 좀 쓰기가 복잡하다는 거죠. (타이프하기가 귀찮....;)
그래서 Flex Component 카페에 질문을 올렸고, 카페 매니저이신 '브라이언'님이 다음과 같은 방법을 일러주셨습니다.

제가 쓴 방법보다 훨 간단하게 쓸 수 있겠더군요.

혹시나 해서 테스트도 해보았습니다.
 

위와 같이 테스트를 하였습니다.
(테스트한 방법은 지돌스타님 포스트를 참고하였습니다.)

Flex Component 카페에서 활동하시는 회원이신 지돌스타님과 이인준님의 도움을 받아서
3대의 컴퓨터에서 오백만번씩 돌려서 테스트 결과

    검쉰 맘대로 캐스팅 : 15142
    브라이언님이 가르켜주신 방법 : 18855

거의 동일하게 제가 한 방법이 약간 빨랐습니다만(하나씩도 해보고 순서도 바꿔봤습니다),
오백만번 돌릴 일도 없고, 브라이언님이 가르켜주신 방법이 간단하니
앞으로 XML을 Boolean형으로 Casting 하는 것은 contains("true") 이렇게 해야겠습니다.  

단 String형의 "true" 값은 제가 하는 방식대로 하려고 다음과 같이 static function을 만들었습니다.



좋은 의견 있으시면 덧글이나 트랙백 부탁드립니다. ;)