상세 컨텐츠

본문 제목

외부파일과 연동하는 법을 배워 봅시다. (Loader, XML) 액션스크립트 XML 연동 관련

ADOBE/ ActionScript

by AlrepondTech 2014. 11. 20. 10:41

본문

반응형

 

 

 

=================================

=================================

=================================

 

 

 

 

 

 

 

 

출처: http://bbora.com/bbs/zboard.php?id=study&page=5&sn1=&divpage=1&category=2&sn=off&ss=on&sc=on&select_arrange=headnum&desc=desc&no=296

 

레이어를 만들고,
이름을 Action 으로 하고
액션창에 다음과 같이 설정한다.

System.useCodepage = true; 
myMenu = new XML();
myMenu.ignoreWhite = true;
myMenu.load("menu.xml");
myMenu.onLoad = function() {
        menu_name = new Array();
        menu_url = new Array();
        var i = 1;
        var ref = myMenu.firstChild.firstChild;
        for (var contain = ref; contain != null; contain = contain.nextSibling) {
                menu_name[i] = contain.firstChild.firstChild.nodeValue;
                menu_url[i] = contain.childNodes[1].firstChild.nodeValue;
                i++;
        }
        for (var k=0; k<menu_name.length; k++) {        
                _root["menu"+k].menuName.text = menu_name[k];
                _root["menu"+k].linkURL = menu_url[k];                
                _root["menu"+k].onRelease = function() {
                        getURL(this.linkURL,'_blank');
                };
        }        
};

레이어를 추가하고
이름을 menu 로 한 후

무비클립을4개 만들고, 
무비클립의 이름을 
menu1
menu2
menu3
menu4
라고 한다.

무비클립 안으로  동적텍스트를 만들고,
인스턴트 네임을 menuName 이라고 한다.

 

menu.xml 파일을 만든다.


<?xml version="1.0" encoding="euc-kr"?>
<menu>
        <item>
                <name>메뉴네임1</name>
                <url>주소</url>
        </item>
        <item>
                <name>메뉴네임2</name>
                <url>주소</url>
        </item>
        <item>
                <name>메뉴네임3</name>
                <url>주소</url>
        </item>
        <item>
                <name>메뉴네임3</name>
                <url>주소</url>
        </item>
</menu>

 

 

 

=================================

=================================

=================================

 

 

 

출처: http://m.blog.daum.net/racoon28/83

 

플래시의 멋진점의 하나는 외부의 소스파일들을 교체하면서 유지보수할 수 있도록 개발할수 있다는 것입니다.

가령 동일한 네임의 이미지를 교체한다든가 XML에서 링크값을 교체하는 등의 방법으로 사이트에서 유지보수 할수 있도록 만들수 있습니다.

이는 Flash UI에서 추구하는 궁극의 목표입니다.

이 방법으로 웹어플리케이션을 만들어야 유지보수가 되도록 만들 수 있는 것입니다.

 

내멋대로 하드코딩은 업계에서 왕따가 되는 지름길입니다.

 

먼저 Loader 클래스에 대해 알아볼까요?

 

(예제1)

이 예제는 로더객체를 생성하여 외부 이미지를 로더 객체로 불러와서 스테이지에 addChild하는 기본예제입니다.

 

//로더 생성하는 방법
//로더를 사용할 때는 html과 swf를 같은 경로에 둔다.

var loader:Loader = new Loader();

//리퀘스트 생성 

var requestobj:URLRequest = new URLRequest("1_Loader1.jpg");

//로드 : jpg, gif, png, swf만 불러올수 있다.

loader.load(requestobj);addChild(loader);

 

 

1_Loader1.zip
다운로드

 

 

(예제2)

이 예제는 로드객체에 바로 addChild하지 않고 로딩 이벤트가 끝난후에 addChild하는 방법입니다.

첫번째 방법보다는 네트워크 오류로 부터 더 안전합니다.

import flash.display.Loader;
import flash.events.Event;

 

var url:String = "1_Loader2.jpg";
var req:URLRequest = new URLRequest(url);
var ldr:Loader = new Loader();
ldr.load(req);

//1. 첫번째 방법 - 그냥 로더를 addChild
//addChild(ldr);

//2. 두번째 방법 - 로딩완료시 이벤트리스너 등록

ldr.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(e:Event):void {
 addChild(e.target.loader);

}

 

 

1_Loader2.zip
다운로드

 

 

드디어 올것이 왔습니다.

XML을 플래시에서 사용하는 방법을 알아보겠습니다.

 

XML Class란?
XML 데이터를 제어하기 위한 클래스로 XML 객체를 사용하는 메서드와 속성이 들어있는 클래스입니다.

AS3.0에서는 XML을 편리하고 효율적으로 다룰 수 있도록 되어 있습니다.

많은 속성과 메서드가 있지만 몇가지 대표적인 것만 몇가지 알아보고 실습예제로 넘어가겠습니다.

 

 

XML Class 속성
속성 : 데이터 유형

ignoreWhitespace

 : Boolean [static] 파싱 도중 텍스트 노드의 시작 부분과 끝 부분에 있는 공백 문자를 무시할지 여부를 결정

 

XML Class 메서드
메서드(매개 변수) : 반환 유형 
XML(value:Object) 새 XML 객체를 만든다.
attributes():XMLList 지정된 XML 객체의 특성 값 목록을 반환

 

 

URLLoader클래스

 

URLLoader Class란?
데이터를 URL에서 다운로드한 다음 ActionScript에서 사용할 수 있게 하는 클래스. 다운로드 진행 상황에
대한 알림을 전송하며, 이 진행 상황은 전달된 이벤트뿐 아니라 bytesLoaded 및 bytesTotal 속성을
통해서도 모니터링할 수 있다.


URLLoader 클래스는 URL에서 텍스트, 이진 데이터 또는 URL 인코딩된 변수 형식으로 데이터를
다운로드한다.


 

 

URLLoader Class 속성


속성 : 데이터 유형 
bytesLoaded : uint = 0         로드 작업 중 지금까지 로드한 바이트 수
bytesTotal : uint = 0             다운로드한 데이터의 총 바이트 수

data

 : *                             

로드 작업으로 수신된 데이터


dataFormat : String = "text"   다운로드하는 데이터를 텍스트(URLLoaderDataFormat.TEXT), 원시 이진 데이터

                                        (URLLoaderDataFormat.BINARY) 또는 URL 인코딩된 변수(URLLoaderDataFormat.VARIABLES)

                                        중 어떤 형식으로 수신할 것인지 제어

 

 

URLLoader Class 메서드


메서드(매개 변수) : 반환 유형
URLLoader(request:URLRequest = null)    URLLoader 객체를 만든다.
close():void                                          진행 중인 로드 작업을 닫는다.
load(request:URLRequest):void               지정된 URL에서 데이터를 보내거나 로드한다.

 

 

URLLoader Class 이벤트


이벤트 설명

Event.COMPLETE 

수신된 모든 데이터가 디코딩된 후 URLLoader 객체의 data 속성에 배치되면 전달

IOErrorEvent.IO_ERROR

 URLLoader.load() 호출로 치명적인 오류가 발생하여 다운로드가 중단되면 전달

(예제1)

---------- sample.xml ------------------

<?xml version ="1.0" encoding="UTF-8" ?>
<성적>
 <학생>
  <이름>김종훈</이름>
  <국어>95</국어>
  <영어>80</영어>
  <수학>90</수학>
  <총점>265</총점>
  <평균>265</평균>
 </학생>
 <학생>
  <이름>이강호</이름>
  <국어>80</국어>
  <영어>92</영어>
  <수학>60</수학>
  <총점>232</총점>
  <평균>77.3</평균>
 </학생>
 <학생>
  <이름>정호영</이름>
  <국어>96</국어>
  <영어>90</영어>
  <수학>92</수학>
  <총점>278</총점>
  <평균>92.7</평균>
 </학생>
</성적>

 

------------xml1.fla ----------

//XML Example 1

var urlLoader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest("sample1.xml");
urlLoader.load(req);
urlLoader.addEventListener(Event.COMPLETE, completeHandler);function completeHandler(e:Event):void{
 var xml:XML = new XML(e.target.data);

 //trace(xml) 
 //trace(xml.학생);

 trace(xml.학생.국어);

}

 

//XML Example 2

var urlLoader:URLLoader = new URLLoader();
var req:URLRequest = new URLRequest("sample1.xml");
urlLoader.load(req);
urlLoader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(e:Event):void{
 var xml:XML = new XML(e.target.data);
 trace(xml.학생.length()); //학생 노드 갯수 출력
}

 

 

//XML 예제 3 -  속성값에 접근하기

//속성제어


var xml:XML =<books>
  <book id="IS1920034" author="김철수">
   <title>김종훈</title>
   <cost>95</cost>
   <date>2010-02-10</date>
  </book>
  <book id="IS1920034" author="kkk">
   <title>김종훈</title>
   <cost>95</cost>
   <date>2010-02-10</date>
  </book>
 </ books>;
trace(

xml.book[0].@id

);

 //IS1920034 출력

 

메뉴만들기 예제

----- navi.xml -------------

<?xml version ="1.0" encoding="euc-kr" ?>
<navi>
 <menu_item>
  <menu_title>네이버</menu_title>
  <menu_link><![CDATA[http://www.naver.com]]></menu_link>
 </menu_item>
 <menu_item>
  <menu_title>다음</menu_title>
  <menu_link><![CDATA[http://www.daum.net]]></menu_link>
 </menu_item>
 <menu_item>
  <menu_title>야후</menu_title>
  <menu_link><![CDATA[http://www.yahoo.com]]></menu_link>
 </menu_item>
 <menu_item>
  <menu_title>코리아</menu_title>
  <menu_link><![CDATA[http://www.korea.com]]></menu_link>
 </menu_item>
</navi>

 

----- navi.fla ----------

//XML은 UTT-8이 표준이다.
//만일 euc-kr로 저장한 경우
//한글 깨지지 않게 하려면 이 코드를 꼭 써 줘야 한다.
System.useCodePage = true;
//1. 객체 생성
var urlLoader:URLLoader = new URLLoader();
//2. 데이터가 도착하면 할 일 등록
urlLoader.addEventListener(Event.COMPLETE, completeHandler);
//3. 데이터 호출

 

urlLoader.load(new URLRequest("navi.xml"));

 

function completeHandler(e:Event):void{
 var xml:XML = new XML(e.target.data);
 
 for(var i:uint=0; i<xml.menu_item.length(); i++){
  var menu_mc:Menu_class = new Menu_class();  
  menu_mc.x = 20;
  menu_mc.y = i*(menu_mc.height+5) + 30;
  menu_mc.txt.text = xml.menu_item[i].menu_title;
  menu_mc.linkurl = xml.menu_item[i].menu_link;  
  trace(menu_mc.linkurl);
  this.addChild(menu_mc);
  menu_mc.buttonMode = true;
  menu_mc.mouseChildren = false; //무비클립안에 텍스트가 있는 경우 텍스트필드의 기능을 없앤다.
  menu_mc.addEventListener(MouseEvent.CLICK, clickHandler);
 }
}
function clickHandler(e:MouseEvent):void{
 var menu_mc = e.target as Menu_class;
 trace(menu_mc);
 navigateToURL(new URLRequest(menu_mc.linkurl));
}

 

 

XML갤러리예제

----- imageData.xml -------------

<?xml version="1.0" encoding="EUC-KR" ?>
<images>
 <path>images/img_0.jpg</path>
 <path>images/img_1.jpg</path>
 <path>images/img_2.jpg</path>
 <path>images/img_3.jpg</path>
 <path>images/img_4.jpg</path>
</images>

 

 

----- navi.fla ----------

//xml
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, completeHandler);
urlLoader.load(new URLRequest("imageData.xml"));

//path
var first_path:String;

// container
var imgContainer:Sprite = new Sprite();

// image Loader
var ldr:Loader = new Loader();

function completeHandler(e:Event):void{
 var xml:XML = new XML(e.target.data);
 first_path = xml.path[i];
 ldr.load(new URLRequest(first_path)); 
 imgContainer.addChild(ldr);
 addChild(imgContainer); 
 imgContainer.x = 150;
 imgContainer.y = 50; 

 for(var i:uint=0; i<xml.path.length(); i++){
  var th:MovieClip = new MovieClip();
  th.name = "menu"+i
  th.linkurl = xml.path[i];
  
  var ldr_i:Loader = new Loader();
  ldr_i.load(new URLRequest(xml.path[i]))
  th.addChild(ldr_i);
  addChild(th);
  
  th.scaleX = 0.2;
  th.scaleY = 0.2;  
  th.x = i*130+ 50;
  th.y = 400;
  
  th.buttonMode = true;
  th.addEventListener(MouseEvent.CLICK, clickHandler);
 }
}

 

 

function clickHandler(e:MouseEvent):void{
 var th = e.currentTarget as Sprite;
 trace(th.name);
 trace(th.linkurl);
 ldr.load(new URLRequest(th.linkurl));
}

 

 

=================================

=================================

=================================

 

 

 

반응형

 

 

728x90

 

 

 

출처: http://duraboys.tistory.com/144

 

 

플래시와 XML (Extensible Markup Language)

1. XML이란?

XML을 사용하기 위해서 두가지를 이해해야 하는데, 하나는, XML이란 무엇인지 이해하는 것이며, 다른 하나는 플래시에서 XML은 어떻게 다루는 지를 이해하는 것이다.

 

1.      XML 역사-         1998년 2월 WC3에서 XML 1.0이라는 이름으로 발표.-         SGML(Standard Generalized Markup Language)는 XML의 어버이 언어인데, 이 언어는 1986년에 ISO에서 제정한 것으로 웹에서 사용하기 쉬운 기능을 뽑아 가변게 만든 것이다.-         SGML은 서로 다른 컴퓨팅 환경에서 컴퓨터간 문서 교환을 주목적으로 만든 마크업 언어며, 이 이후에 SGML을 응용하여 HTML과 XML이 웹에서 문서를 꾸미는 차세대 마크업언어로 탄생되었다.-         SGML은 발표된 지는 오래되었지만, 너무 복잡하여 널리 보급되지는 못했다.-         문법도 까다롭고, 그 기능을 정의한 설명서가 너무 방대할 뿐만 아니라,링크 기능 및 인터넷 기반에 적당하지 못했다.-         이러한 단점을 보안하고 발전시켜 HTML과 XML이 탄생된 것이다.

 

2.      HTML과 XML의 비교

간혹 XML을 HTML의 확장언어라고 보는 경우도 있는데, 이 두언어의 관계는 굉장히 다르다.

 

2-1. HTML (Hyper Text Markup Language)

- HTML은 크게 두가지 특징이 있는데, 가장 큰 특징은 웹페이지를 예쁘게 꾸며주는 것이고 또 다른 특징은 하이퍼 텍스트 기능으로 다른 페이지를 링크(연결)하는 것이 쉽다는 것이다.

<html>
 <head>
   <title>HTML</title>
 </head>
 <body bgcolor=”white” text=”black” link=”blue” vlink=”purple”>
<font face=”굴림체”>
<h1>문장에 색깔, 글자체 변경</h1>
<a href=”http://www.daum.net”>다음</a>
 </body>
</html>

 

2-2. XML

- XML은 HTML과 달리 사용자가 태그를 만들 수 있다. 예를  들어 우리학교에 멀티미디어학과에 다니는 친구에 대하여 알고 싶다면 XML로 다음과 간이 표현할 수 있다.

<?xml version=”1.0” encoding=”ECU-KR”?>
<우리학교>
 <멀티미디어학과>
<이름>기훈</이름><성별>남</성별>
<학년>4학년</학년>
<거주지>갈월동</거주지>
 </멀티미디어학과>
</우리학교>

 

* 메모장 XML 문서의 첫줄에

<?xml version=”1.0” encoding=”ECU-KR”?>를 입력하고 파일이름은 ~.xml로 저장하면 된다.

 

l       마크업 언어에 대하여-         마크업 언어는 문서의 형태와 구조에 의미를 부여하기 위한 언어이다.-         문서사이에 태그를 삽입하여 웹 브라우저가 그 태그를 해석하여 문서의 크기 색상등을 표현한다.-         마크업 언어는 기초요소(element), 속성(attribute), 실체요소(entity)로 구성된다.-         기초요소 : 기초요소는 노드라고도 하며 글의 전체 구조와 세부적인 특징을 묘사할 수 있다. 시작태그와 끝태그가 필요하다.

) <시작태그> </끝태그>

-         속성 : 기초요소들은 시작태그 안에서 속성들을 가질 수 있다.

) <시작태그 속성=”값”>

-         실체요소 : 실체요소는 여는 태그와 닫는 태그 사이의 문자를 말한다.

) <시작태그> 실체요소 </끝태그>

-         마크업 언어의 사용 예

<body bgcolor=”white” ” text=”black” link=”blue” vlink=”purple”>

안녕하세요

</body>

 

3.      XML의 주요특징

3-1. 데이터의 표현이 자유롭다.

- XML은 문서를 구조화하여 그 자체로 데이터를 표현할 수 있기 때문에 HTML보다 훨씬 막강한 표현력을 가지고 있다

- XML의 문서적 구조는 문서에서 필요한 내용만 뽑아서 표현할 수 있도록 해준다.

- XML은 데이터를 구조화하는 것이 그 주목적이기 때문에 HTML처럼 데이터를 서식하는 태그가 없다.

- 하지만 스타일시트를 만들어 데이터를 서식하게 하는데, 이러한 스타일 시트를 XSLT(eXtensible Stylesheet Language Transformations)이라고 하는데, 이것을 이용하여 XML문서를 여러가지 모습으로 표현할 수 있다.

 

* XSLT를 이용하여 데이터를 표현하는 장점

- 데이터의 구조와 스타일 시트가 분리되어 있기 때문에 문서의 스타일만 바꿀 수 있다.

- 즉, 데이터의 내용을 수정하지 않고도 문서의 모양을 바꿀 수 있다.

- 이것은 서식을 바꾸어야 할 때 문서 전체의 코드를 수정해 주어야 하는 HTML에서 진일보된 특징이다.

 

3-2. 데이터의 확장성이 뛰어나다.

- XML 문서는 추가하기가 매우 쉽다. 그냥 XML문서 끝부분에 상위 노드와 같은 구조로 기술하면 된다.

<?xml version=”1.0” encoding=”ECU-KR”?>
<우리학교>
 <멀티미디어학과>
<이름>기훈</이름><성별>남</성별>
<학년>4학년</학년>
<거주지>갈월동</거주지>
 </멀티미디어학과>
</우리학교>

위 소스에 한 학생의 정보를 추가로 입력하려면 같은 구조의 내용을 추가하면 된다.

<?xml version=”1.0” encoding=”ECU-KR”?>
<우리학교>
 <멀티미디어학과>
<이름>기훈</이름><성별>남</성별>
<학년>4학년</학년>
<거주지>갈월동</거주지>
 </멀티미디어학과>
<멀티미디어학과>
<이름>이지선</이름>
<성별>여</성별>
<학년>3학년</학년>
<거주지>탄현동</거주지>
 </멀티미디어학과>
</우리학교>

이러한 자유로운 내용의 확장성은 데이타베이스에서 테이블을 추가하는 것과 같은 전통적인 확장성을 능가하는 XML의 장점이다.

XML 문서는 문서의 전체 구조를 다시 기술할 필요가 없을 뿐 아니라 XML문서를 사용하는 프로그램에 영향을 주지 않고도 자유롭게 데이터를 수정, 확장할 수 있기 때문이다.

 

3-3. 검색이 용이하다.

- XML은 데이터의 구조와 문서가 나타나는 표현(스타일)이 분리되어 있어 스타일만 바꾸면 데이터의 수정 없이 문서의 모양을 바꿀 수 있다.

- 데이터의 확장성 또한 뛰어나다

- XML이 HTML을 뛰어넘는 차세대 언어로서 주목 받고 있는 이유는 다른 언어가 갖지 못한 특징이 있기 때문인데, 그것은 데이터가 어디에 있는지 금방 찾을 수 있다는 것이다.

, 검색이 가능하다는 것이다. 데이터베이스가 아닌 문서 자체에서 질의 및 검색을 할 수 있다는 것은 대단히 큰 특징이다. 이러한 특징은 데이터가 구조화되어 있기 때문에 가능한 일이다.

 

l         구조화된 데이터는 데이터베이스처럼 질의(Query)를 할 수 있어 사용자의 입맛에 따라 데이터를 이용할 수 있기 때문이다.l         이러한 XML의 특징(데이터의 표현성확장성) 때문에 XML은 HTML과 비교가 되지 않는다.l         XML은 그 기술과 내용에 있어 책 한권으로 만들어도 부족하지만, 우리는 XML을 이용한 플래시와 연동 부분을 다루기 위한 부분만 언급하도록 한다.

 

4.      DOM (Document Object Model)

 XML에서는 어떻게 데이터에 접근하고 원하는 자료를 뽑아낼 수 있나?

 

XML은 DOM기술을 통하여 데이터를 처리할 수 있다. 즉, 플래시가 XML문서를 해석하고 원하는 데이터를 추출하고, 수정하는 등의 일을 하려고 할 때 필요한 기술이 바로 DOM기술이다.

 

DOM 기술이란 ‘문서에 접근하는 방법을 갖고 있는 도구들의 모음’이다.

쉽게 말해 DOM은 플래시와 같은 프로그램에서 XML을 다룰 수 있는 도구이다. DOM은 문서에 접근하고 조작하기 위해서 문서를 계층적 구조로 정의하고 있다. 그래서 DOM을 지원하는 프로그램 언어는 자유롭게 XML 구조의 문서를 다룰 수 있다.

 

) 문서를 계층적으로 구조화한다는 말은 아래의 그림과 같다.

 

 

XML문서를 계층화하여 트리 형태로 보면 하나의 노드(요소:element)를 기준으로 밑으로 내려가면서 자식노드가 되고 위로 올라가면 부모노드가 된다. 그리고 각각의 노드는 DOM이 정의해 놓은 메소드와 속성들을 통해 접근할 수 있다. 즉, DOM은 각각의 노드들에게 접근할 수 있는 인터페이스를 제공하는 것이다. 이러한 원리 때문에 DOM을 지원하는 프로그램 언어는 자유롭게 XML 구조의 문서를 다룰 수 있다.

 

DOM을 지원하는 프로그램 언어에는 자바스크립트, VB 스크립트 등 askg은 언어들이 있는데, 플래시 또한 DOM을 지원하고 있다. 플래시는 XML Object 언어를 통해 DOM을 지원한다.

 

l         플래시에서 XML문서로 접근하는 원리1.      DOM에서 정의한 모델들을 XML Object가 메소드와 프로퍼티로 가지고 있다.2.      그렇기 때문에 XML Object가 XML문서를 불러들여 해석하고 검색할 수 있다.3.      또한, PHP, ASP등 서버사이드 언어와 같이 사용하면서 수정할 수도 있다.

 

5.      XML의 기본구조

XML 구조는 3부분으로 되어 있는데, XML 선언부문서형 정의, XML 몸체이다.

 

 

5-1.          XML 선언부

XML 버전과 문자 코드를 선언한다.

XML 버전이란 W3C에서 정의한 XML 스팩버전을 뜻하는데, 이 버전을 표기함으로 XML 해석기(Parser)에게 알려준다.

Encoding은 어떤 문자를 사용할지를 나타내는데,

한글을 사용하려면 encoding=”ECU-KR”?이라고 입력하면 된다.

 

5-2.          문서형 정의 부분 (DTD 또는 스키마)

이 부분은 DTD(Document Type Definition)나 스키마(Schema)를 기술하는 곳이다.

DTD 또는 스키마는 XML 문서를 구성하는 요소들을 정의하는 곳으로 이러한 구성요소는 사용자가 만들어 낼 수 있다.

예를 들어 태그안에 어떤 속성이 들어있는지, 몇 개의 데이터를 구성할 수 있는지, 계층간의 구조는 어떻게 표현할 수 있는지 등에 대해 정의할 수 있으며 이것을 DTD 또는 스키마라고 한다.

DTD는 문서 내부에 쓰이는 DTD와 외부에서 불러오는 DTD로 분리할 수 있다.

 

하지만 개인 혼자서 사용하는 XML문서에는 DTD가 그다지 필요하지 않다. DTD를 필요로 하는 XML 문서는 기업간의 문서를 통합하는 등의 규모가 큰 프로젝트라고 할 수 있기 때문이다.

 

하나의 예를 들어 기업간 XML 문서를 공유한다고 하면 XML 문서를 기술하는 양식 즉, 태그는 몇 개를 사용하고 어떤 계층 구조로 할 것인지 등을 미리 정해두고 반드시 같은 양식을 사용해야지만 공유해서 사용할 수 있기 때문이다.

 

우리가 사용할 플래시에서는 DTD부분을 읽지 않는다. 따라서 플래시 하나로 XML문서를 다룰 때는 DTD부분은 크게 중요하지 않을 수 있다. 하지만, XML문서를 다른 애플리케이션에 동일하게 적용하기 위해서는 DTD부분을 알고 있어야만 하므로 이해해 두도록 한다.

 

5-3.          XML 문서 몸체(Body)

XML의 구조 중 마지막 세 번째 부분은 실제 문서를 작성하는 몸체부분이다.

 

HTML과 달리 XML은 굉장히 까다로운 언어이다. DTD나 스키마는 나중에 공부하더라도 상관없지만 실제로 XML 문서를 기술하는 몸체 부분은 W3C에서 만든 XML 스펙에 맞도록 기술해야 한다. 그래야 플래시에서 XML Object를 잘 읽어들일 수 있기 때문이다.

 

XML 태그를 기술할 때 주의할 점

l         모든 태그들은 쌍을 이루어야 한다.

생략이 기능한 태그가 있는 HTML과 달리 XML은 반드시 시작태그가 끝태그를 쌍으로 묶어야만 한다. 만약 태그안에 데이터  자료가 없다면 아래와 같아 사용할 수 있다.

<BR></BR>  à <BR />

l         반드시 최상위 노드는 한 개의 root 노드로 시작한다

<멀티미디어학과>
<이름>이지선</이름>
<성별>여</성별>
<학년>3학년</학년>
<거주지>탄현동</거주지>
 </멀티미디어학과>

여기서 ROOT노드는 <멀티미디어학과>이다

, XML 문서의 시작은 하나의 ROOT노드에서 시작한다.

l         XML 태그는 계층적 구조로 이루어지기 때문에 적절한 중첩이 되는지 확인한다.

밖에 있는 노드(부모 노드)는 안에 있는 노드들(자식노드)을 완전히 포함해야 한다. 자식노드가 부모노드에 있지 않으면 잘못된 XML 문서이다.

 

 

6.      Well-Formed XML 문서와 Valid XML 문서. Well-Formed XML 문서

DTD나 스키마를 사용하지 않고 최소한의 문법에 맞게 기술한 XML문서를 말한다.

 

. Valid XML 문서

DTD를 가지고 있으며 그 DTD에 따라 제대로 만들어진 XML 문서를 말한다. Valid XML은 당연히 well-Formed하다

 

7.      XML을 다루는 메소드와 속성 및 기타특성

절대 외우지 말고, ‘아! 이 메소드는 이럴 때 이렇게 사용하는 것이구나’라고만 이해하도록하자

7-1. XML 객체의 메소드 요약

메소드 설명
XML.appendChild 지정된 객체의 자식 목록 끝에 노드를 추가
XML.cloneNode 지정된 노드를 복제하고, 선택 반복적으로 모든 자식을 복제
XML.createElement 새로운 XML 요소를 만든다
XML.createTextNode 새로운 XML 텍스트 노드를 만든다
XML.getBytesLoaded 지정된 XML 문서용으로 로드된 바이트 수를 반환
XML.getBytesTotal XML 문서의 크기를 바이트수로 반환
XML.hasChildNodes 지정된 노드에 자식노드가 있으면 true, 그렇지않으면 false를 반환
XML.insertBefore 지정된 노드의 자식 목록에서 기존 노드 앞에 노드를 삽입
XML.load URL에서 XML 객체가 지정하는 문서를 로드
XML.parseXML XML문서를 지정된 XML 객체 트리로 파싱
XML.removeNode 지정된 노드를 부모에서 제거
XML.send 지정된 XML 객체를 URL로 보낸다
XML.sendAndLoad 지정된 XML 객체를 URL로 보내고, 서버 응답을 다른 XML 객체로 로드
XML.toString 지정된 노드와 자식을 XML 텍스트로 변환

 

7-2. XML 객체의 속성 요약

속성 설명
XML.contentType 서버에 전송된 MIME 유형 (읽기/쓰기)
XML.docTypeDecl XML 문서의 DOCTYPE 선언에 대한 정보를 설정하고 반환 (읽기/쓰기)
XML.firstChild 지정된 노드의 목록에서 첫 번째 자식을 참조(읽기전용)
XML.ignoreWhite True로 설정된 경우 공백만 포함한 텍스트 노드는 파싱과정에서 버려진다(읽기/쓰기)
XML.lastChild 지정된 노드의 목록에서 마지막 자식을 참조(읽기전용)
XML.loaded 지정된 XML 객체가 로드되었는지 확인(읽기전용)
XML.nextSibling 부모노드의 자식목록에서 다음 형제 노드를 참조(읽기전용)
XML.nodeName XML 요소의 태그 이름을 반환(읽기/쓰기)
XML.nodeType XML dyth Ehsms 텍스트 노드등 지정된 노드의 유형을 반환(읽기전용)
XML.Value 노드가 텍스트 노드일 경우 지정된 노드의 텍스트를 반환(읽기/쓰기)
XML.parentNode 지정된 노드의 부모노드를 참조(읽기전용)
XML.previousSibling 부모노드의 자식목록에서 이전 형제 노드를 참조(읽기전용)
XML.status XML 문서 파싱작업의 성공 또는 실패를 나타내는 숫자 상태의 코드를 반환(읽기전용)
XML.xmlDecl XML 문서의 문서선언에 대한 정보를 설정하고 반환(읽기/쓰기)

MIME (Multipurpose Internet Mail Extension)이란?

말 그대로를 풀이 하면 "다목적 인터넷 메일 확장"이라고 할 수 있다.
좀더 알기 쉽게 표현한다면 "인터넷 메일 교환을 위한 멀티미디어 문서 타입의 정의"라고 할 수 있다.
MIME(마임 이라고 읽습니다)은 7개 타입으로 구분을 하는데
각각 text, multipart, message, application, image, audio, video 이다. 그리고 각 타입의 하위로 그 아래의 타입들이 존재한다.
예를 들면 video는 그 아래로 avi, mpeg, mov 등이 있을 수 있다.
MIME이 존재하는 이유는 인터넷 메일로 자료를 주고 받을 때 서로 주고 받는 문서의 타입을 정의함으로써 이를 보내고 받는 쪽이 원활하게 함이 그 이유인데,
누군가 어떤 문서를 보냈는데 받는 메일 서버가 이를 해석하지 못한다면 바로 ASCII(아스키)문자로만 나타날 수도 있고, 내가 보낸 파일은 워드 파일인데 받은 서버가 이를 제대로 인식하지 못해서 ASCII 코드만 나타난다면 황당할 것이다.
그래서 나온 규격이며 MIME도 버전이 있어서 계속 개량되고 새로운 타입들을 만들어 내고 있다

7-3. XML 객체의 컬렉션 요약

Collection 설명
XML.attributes 지정된 노드의 모등 속성을 포함하는 관련 배열을 반환(읽기/쓰기)
XML.childNodes 지정된 노드의 자식 노드에 대한 참조가 포함된 배열을 반환(읽기/쓰기)

 

7-4. XML 객체의 이벤트 핸들러 요약

이벤트 핸들러 설명
XML.onData XML 텍스트가 서버에서 완전히 로드된 경우 또는 서버에서 XML 텍스트를 다운로드할 때 오류가 발생하는 경우 호출되는 콜백 함수
XML.onLoad Load 및 sendAndLoad에 대한 콜백함수

 

플래시에서 지원하는 XML을 다루는 메소드와 속성, 배열, 이벤트 핸들러만 대충 정리해도 위와 같이 많은데, 모두 암기하려 하지 말고, 사전을 찾아보듯 필요한 액션이 나왔을 때 그 부분을 찾아 사용법을 보고 응용하길 바란다.

 

예를 들어, 소리에 관한 액션은 Sound Object, 무비클립에 대한 액션은 MoviClip Object, 색에 대한 액션은 Color Object, XML은 XML Object에 있다는 식으로 이해한 후 이 객체속에 있는 기능들은 필요할 때마다 하나씩 찾아보면서 공부하는 것이 바람직한다고 생각한다.

 

플래시에서 XML 데이터 처리 기법

1.      XML 문서작성하기

XML 객체의 메소드 중

XML.appendChild (지정된 객체의 자식 목록 끝에 노드를 추가한다)XML.createElement (새로운 XML 요소를 만든다)XML.createTextNode (새로운 XML 텍스트 노드를 만든다)

세가지는 만들어진 XML 문서를 불러와서 접근하는 것이 아니고, 플래시에서 직접 XML 문서를 만드는 메소드이다.

 

예제) 아래의 XML문서를 플래시에서 만들기

<멀티미디어학과>
<이름>이지선</이름>
<성별>여</성별>
<학년>3학년</학년>
</멀티미디어학과>

 

l         XML 문서 만드는 과정

 1. XML.createElement()를 사용해서 노드를 생성

 2. 노드에 해당하는 TEXT를 입력하기 위해 XML.createTextNode()메소드 사용

       3. 마지막으로 XML.appendChild()메소드를 사용하여 XML 문서를 형성한다.

  

   XML.createElement() 메소드 – 노드 생성하기

 // XML을 사용하기 위해 객체 생성
myXML = new XML( );//노드 생성
MyXML.createElement ("멀티미디어학과"); trace(MyXML.createElement ("멀티미디어학과"));
// XML을 사용하기 위해 객체 생성
myXML = new XML( );//노드 생성
Node = MyXML.createElement ("멀티미디어학과"); 
Trace(Node);

 

   XML.appendChild () 메소드 – 자식노드 추가

// XML을 사용하기 위해 객체 생성
myXML = new XML( );//노드 생성
Node = MyXML.createElement ("멀티미디어학과"); 
trace(myXML);
// XML을 사용하기 위해 객체 생성
myXML = new XML( );//노드 생성
Node = MyXML.createElement ("멀티미디어학과"); 
MyXML.appendChild(node);trace(myXML);

XML.createTextNode() 메소드 – 문자(text) 데이터 만들기

myXML = new XML(); // XML을 사용하기 위해 객체 생성// 노드 생성
node = myXML.createElement ("이름"); 
//<이름>이지선</이름> 을 작성
text = myXML.createTextNode("이지선");
node.appendChild(Text);trace(node);
myXML = new XML();aaa = myXML.createElement ("멀티미디어학과"); node = myXML.createElement ("이름"); 
text = myXML.createTextNode("이지선");
node.appendChild(text);aaa.appendChild(node)myXML.appendChild(aaa);trace(myXML);
myXML = new XML(); // XML을 사용하기 위해 객체 생성// 노드 생성
aaa = myXML.createElement ("멀티미디어학과");  
//<이름>이지선</이름> 을 작성
node = myXML.createElement ("이름"); 
text = myXML.createTextNode("이지선");
node.appendChild(Text);aaa.appendChild(node); //부모노드<멀티미디어학과>에 연결 
//<성별>남</성별> 을 작성
node1 = myXML.createElement ("성별"); 
text1 = myXML.createTextNode("여");
node1.appendChild(Text1);
aaa.appendChild(node1); //부모노드<멀티미디어학과>에 연결 
//<학년>유광열</학년> 을 작성node2 = myXML.createElement ("학년"); 
text2 = myXML.createTextNode("3학년");
node2.appendChild(Text2);
aaa.appendChild(node2); //부모노드<멀티미디어학과>에 연결 
myXML.appendChild(aaa);  //XML최상위노드에 연결trace(myXML);

 

2.      XML 문서에 있는 특정 요소(노드) 복사하기

XML.cloneNode() 메소드 – 노드 복사

myXML = new XML();aaa = myXML.createElement("멀티미디어학과");node = myXML.createElement("이름");
text = myXML.createTextNode("이지선");
node.appendChild(Text);aaa.appendChild(node);myXML.appendChild(aaa);trace(myXML);
copyXML = myXML.cloneNode(true);copyXML1 = aaa.cloneNode(false);
trace(copyXML);
trace(copyXML1);

 

3.      XML 문서의 특정 노드에 자식 노드들의 존재여부 확인하기

XML.hasChildNode() 메소드 – 지정된 노드에 자식이 있으면 true, 없으면 false

myXML = new XML();aaa = myXML.createElement ("멀티미디어학과"); node= myXML.createElement ("이름"); 
text = myXML.createTextNode("유광열");node.appendChild(Text);aaa.appendChild(node);myXML.appendChild(aaa);  
if (myXML.hasChildNodes) {
             trace("자식노드가 존재합니다.");
             } else {
             trace("자식노드가 존재하지 않습니다..");
}

 

4.      XML 문서 해석하기

XML.parseXML(source) – 플래시 내부에서 XML 문서를 해석

예제) 아래의 XML 코드를 parseXML() 을 사용하여 플래시 내부에서 처리하기

<상품>
 <분류>7</분류>
 <이름>카메라</이름>
 <가격>300000</가격>
 <사진>카메라.jpg</사진>
</상품>

 

myXML = new XML( );myXML.parseXML("<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>");trace(myXML);
myXML = new XML( );source="<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>"
myXML.parseXML(source);trace(myXML);

 

l         XML 문서를 플래시 내부에서 처리할 때는 parseXML() 메소드의 괄호()안에 문자열로 입력하면 된다.l         주의점 : 괄호 안에 공백,탭,엔터가 들어가면 안된다l         공백,탭,엔터들도 플래시에서는 하나의 Element(노드)로 간주한다

 

5.      외부에서 XML 문서를 플래시로 불러오기

XML.load() – 메소드

  XML 문서를 불러와서 XML 계층 구조로 변환하는 메소드

XML.OnLoad() – 이벤트 핸들러

XML 문서가 모두 외부에서 받아지고 난 후, 자동으로 지정된 함수를 호출한다

 

 

System.useCodepage = true;myxml = new XML();//로딩이 되면 loadEND 함수 실행
myxml.onLoad = loadEnd;myXML.load("상품.xml");function loadEnd() {
             // trace(myXML)과 같음
             trace(this);
}

 

6.      플래시에서 XML 문서의 특정 노드 접근하기

firstChild와 nextSibling

myXML = new XML();source="<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>"
myXML.parseXML(source);// myXML 이하에 자손들이 모두 출력됩니다.
trace(myXML);
 //<상품> 이하 자손들이 모두 출력됩니다.
trace(myXML.firstChild);
// <분류> 이하 자손들이 출력됩니다.
trace(myXML.firstChild.firstChild);
// <이름> 이하 자손들이 출력됩니다.
trace(myXML.firstChild.firstChild.nextSibling);
// <가격> 이하 자손들이 출력됩니다.
trace(myXML.firstChild.firstChild.nextSibling.nextSibling);
// <사진> 이하 자손들이출력됩니다.
trace(myXML.firstChild.firstChild.nextSibling.nextSibling.nextSibling);

 

lastChildparentNodepreviousSibling

myXML = new XML();source="<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>"
myXML.parseXML(source); 
trace(myXML.firstChild.lastChild);
trace(myXML.firstChild.lastChild.previousSibling);
trace(myXML.firstChild.lastChild.previousSibling.parentNode);

 

. 텍스트 값이나 노드 이름을 가져오는 속성들

myXML = new XML();source = "<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>";
myXML.parseXML(source);trace(myXML.firstChild.nodeName);
trace(myXML.firstChild.firstChild.nodeValue);
trace(myXML.firstChild.firstChild.firstChild.nodeValue);
trace(myXML.firstChild.nodeType);
trace(myXML.firstChild.firstChild.firstChild.nodeType);

 

7.      외부에서 불러온 XML 문서에 공백 제거하기

<상품>
             <분류>7</분류>
             <이름>카메라</이름>
             <가격>300000</가격>
             <사진>카메라.jpg</사진>
</상품>

 

<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>

 

System.useCodepage = true;myXML = new XML();myXML.ignoreWhite = truemyXML.onLoad = loadEND;myXML.load("상품.xml");function loadEnd() {
             trace(myXML.firstChild.firstChild.nodeName);
}

 

 

 

출처 : My Great History Diary

 

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






< 참고 사항 >
<블로그>
   <메뉴1>플래시</메뉴1>
</블로그>

1) myXML.nodeType 속성(읽기전용) : nodeType이 1이면 '노드'이고, 3이면 '텍스트'를 말합니다. 
2) myXML.nodeName : 노드 -> 블로그, 메뉴1
3) myXML.nodeValue : 텍스트 -> 플래시



< 참고 - 테스트 >

myXML = new XML( );

myXML.parseXML("<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>");

trace(myXML);
//<상품><분류>7</분류><이름>카메라</이름><가격>300000</가격><사진>카메라.jpg</사진></상품>

trace(myXML.firstChild.firstChild);
//<분류>7</분류>
trace(myXML.firstChild.firstChild.nextSibling);
//<이름>카메라</이름>
trace(myXML.firstChild.firstChild.nextSibling.nextSibling);
//<가격>300000</가격>
trace(myXML.firstChild.lastChild);
//<사진>카메라.jpg</사진>

 

trace(myXML.firstChild.nodeType);  //1
trace(myXML.firstChild.firstChild.nodeType); //1
trace(myXML.firstChild.firstChild.firstChild.nodeType);  //3
trace(myXML.firstChild.firstChild.firstChild.firstChild.nodeType);  //undefined

 

trace(myXML.firstChild.nodeName);  //상품
trace(myXML.firstChild.firstChild.nodeName);  //분류
trace(myXML.firstChild.firstChild.firstChild.nodeName);  //null

trace(myXML.firstChild.firstChild.firstChild.firstChild.nodeName);  //null

 

trace(myXML.firstChild.nodeValue);  //null
trace(myXML.firstChild.firstChild.nodeValue);  //null
trace(myXML.firstChild.firstChild.firstChild.nodeValue);  //7
trace(myXML.firstChild.firstChild.firstChild.firstChild.nodeValue);  //undefined

 

=================================

=================================

=================================

 

 

반응형


관련글 더보기

댓글 영역