플래시와 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은 크게 두가지 특징이 있는데, 가장 큰 특징은 웹페이지를 예쁘게 꾸며주는 것이고 또 다른 특징은 하이퍼 텍스트 기능으로 다른 페이지를 링크(연결)하는 것이 쉽다는 것이다.

2-2. XML

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

* 메모장 XML 문서의 첫줄에

를 입력하고 파일이름은 ~.xml로 저장하면 된다.

l 마크업 언어에 대하여

- 마크업 언어는 문서의 형태와 구조에 의미를 부여하기 위한 언어이다.

- 문서사이에 태그를 삽입하여 웹 브라우저가 그 태그를 해석하여 문서의 크기 색상등을 표현한다.

- 마크업 언어는 기초요소(element), 속성(attribute), 실체요소(entity)로 구성된다.

- 기초요소 : 기초요소는 노드라고도 하며 글의 전체 구조와 세부적인 특징을 묘사할 수 있다. 시작태그와 끝태그가 필요하다.

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

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

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

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

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

- 마크업 언어의 사용 예

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

안녕하세요

3. XML의 주요특징

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

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

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

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

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

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

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

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

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

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

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

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

이러한 자유로운 내용의 확장성은 데이타베이스에서 테이블을 추가하는 것과 같은 전통적인 확장성을 능가하는 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은 반드시 시작태그가 끝태그를 쌍으로 묶어야만 한다. 만약 태그안에 데이터 자료가 없다면 아래와 같아 사용할 수 있다.

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

여기서 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 객체의 메소드 요약

7-2. 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 객체의 컬렉션 요약

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

플래시에서 지원하는 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문서를 플래시에서 만들기

l XML 문서 만드는 과정

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

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

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

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

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

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

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

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

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

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

4. XML 문서 해석하기

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

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

l XML 문서를 플래시 내부에서 처리할 때는 parseXML() 메소드의 괄호()안에 문자열로 입력하면 된다.

l 주의점 : 괄호 안에 공백,탭,엔터가 들어가면 안된다

l 공백,탭,엔터들도 플래시에서는 하나의 Element(노드)로 간주한다

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

. XML.load() – 메소드

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

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

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

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

. firstChild와 nextSibling

. lastChild, parentNode, previousSibling

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

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

출처 : My Great History Diary

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

< 참고 - 테스트 >

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