XML과 MXML의 이해

웹페이지가 HTML 태그로 만들어진 것처럼 플렉스에서 XML 태그를 이용해 화면 요소를 정의한 것을 MXML이라고 한다.

MXML은 XML 태그를 사용하기 때문에 XML의 문법을 따른다.




<XML의 이해>

XML은 확장 마크업 랭귀지(eXtended Markup Language)의 약어로서 태그를 이용해 데이터를 구조적으로 표현하는 데 사용한다.

XML은 플렉스뿐만 아니라 여러분야에서 데이터 또는 화면을 구조적으로 정의하는데 사용된다. 




<XML의 구조>

XML은 지시문, 루트 엘리먼트(루트태그), 자식 엘리먼트로 구성된다.

-처리지시문: 문서의 인코딩 방식을 설정하는 부분으로서 플렉스에서는 'utf-8'을 사용한다. 'utf-8'을 사용하면 다국어 처리가 가능하다.

-루트 엘리먼트(루트태그):처리 지시문 다음에 오는 태그로서 그 XML문서에서는 하나만 존재해야한다. 
                                    또한 자식엘리먼트는 루트 엘리먼트 안에 반드시 포함되어야한다.

-자식 엘리먼트: 루트 엘리먼트 안에 포함되는 것으로서 데이터를 구조적으로 표현한다.

 *인코딩방식
한국은 예전 관행이 남아 국내 일부 사이트에서는 euc-kr을 사용하는 곳도 있는데, 그렇게하면 utf-8을 사용하는 플렉스에서 한글이 꺠진다.
그럴 떄는 System.useCodePage=true로 설정하면 한글을 볼수있다. 하지만 이것도 운영체제가 한국어인 PC에만 해당되므로
근본적으로 utf-8을 사용해 데이터를 처리할 것을 권한다.

<XML의 주요 개념>

HTML도 태그를 이용한다는  점에서 XML과 유사하지만 다음과 같은 차이점이 있다.

-HTML태그는 사용할 수 있는 태그의  종류가  한정적이지만  XML은 태그를 필요한 만큼 사용자가 정의해서 사용할 수 있다.
-HTML태그는 시작태그와 종료태그의 짝이나 문법에 약간 오류가 있더라도 에러 없이 사용할 수 있지만 XML은 문법적인 오류가 있으면 쓸 수 없다.

1) XML 파싱과 파서
HTML은 문법 체크를 느슨하게 하지만 XML은 엄격하다. 이러한 과정을 XML파싱이라고 하며 전용파서에서 처리한다.
XML 파서에는 태그의 중첩구조를 트리 구조로 표시해 DOM(Document Object Model)파서와 XML을 파싱할 때 발생하는 이벤트에서 데이터를 처리하는
SAX(Simple API for MXL) 파서가 있다. 웹브라우저와 이클립스에는 DOM파서가 내장되 있다.

2) wel-formed문서와 valid 문서
파싱했을 때 문법적인 오류가 없는 XML 문서를 wel-formed 문서라고 한다. valid 문서는 문법적인 오류가 없을 뿐만 아니라 태그의 순서와 속성까지 엄격하게 정의하는 DTD(Document Type Definition)까지 준수하는 문서다. valid문서는 주로 서버설정파일에 사용되며 WAS(Web Application Server)의 Web.xml이 대표적인 예다.

3) 엘리먼트의 노드값과 속성값
엘리먼트는 XML 문서를 논리적으로 구성하는 단위로서, 하나의 엘리먼트는 시작태그와 종료태그로 구성된다. 시작태그와 종료태그 안에는 노드값 또는 여타 엘리먼트가 들어갈수있다. 다음은 <finerss>라는 엘리먼트에 노드값과 하위 엘리먼트를 표시한 예다.

-노드값 표시
<finerss>http://finerss.tistory.com</finerss>

-하위 엘리멘트표시
<finerss>

<url>http://finerss.tistory.com</url>

</finerss>

또한 시작태그 안에는 속성값을 정의할 수 있다. 다음은 <finerss>라는 엘리먼트에 url이라는 속성을 정의한 2가지 예다.

-시작,종료태그 모두 표시
<finerss url="http://finerss.tistory.com"> </finerss>

-종료태그 생략
<finerss url ="http://finerss.tistory.com"  />

4)주석과 CDATA 섹션
주석은 파싱되지 않도록 하는 텍스트로서 HTML처럼 <!-- 주석내용 -->의 형식으로 기술한다.
그래서 주석은 데이터 구조에는 반영되지 않는다. 하지만 CDATA 섹션은 모든 문자를 텍스트 그대로 처리하도록 하면서 데이터 구조에도 반영된다.
예를 들어 데이터에 '>' 나 '<' 같은 기호가 들어가면 태그로 인지되므로 파싱에러가 발생한다. 따라서 그런부분은
<![CDATA[내용]]> 으로 처리를 해줘야 파싱 에러가 발생하지 않는다. 플렉스에서는 액션스크립트를 정의하는 영역을 CDATA 섹션으로 처리한다.

-CDATA 섹션 처리가 안 된 경우
<finerss>
<url><http://finerss.tistory.com></url>
</finerss>

-CDATA 섹션 처리가 되어 있는 경우
<finerss>
      <url>
              <![CDATA[http://finerss.tistory.com>]]
      </url>
</finerss>


5)엔티티 레퍼런스
<,>,&,'," 같은 기호는 XML에서 특수한 의미로 사용되는 문자다.하지만 문자그대로를 테이터로 표현해야 할경우가있는데
그럴경우 밑에표와같이 엔티티 레퍼런스로 표현을 해줘야한다.

개체

표현 문자

&lt;;	<
&gt;	>
&amp;	&
&apos;	'
&quot;	"

6) 네임스페이스
XML 네임스페이스는 동일한 이름의 태그를 구분하고 애플리케이션에서 다르게 처리하도록 하는데 사용한다. 플렉스에서는 컴포넌트 계열(패키지 경로)를 분리해 처리하는데 사용된다. 예를 들어 플렉스에서 <s:Button>과 <mx:Button> 둘 다 버튼이긴 하지만, 전자는 플렉스 4에서 새로 추가된 spark 계열의 버튼이고 후자는 플렉스 4 이전에 할로 계열 버튼이다.





MXML은 XML을 확장해 정의한 것이기 떄문에 XML의 문법이 곧 MXML의 문법이다. 따라서 MXML은 다음과 같이 사용해야 한다.



<MXML 문법의 7가지 규칙>

규칙1. MXML은 다국어 표현을위해 UTF-8 사용을 권장한다.
첫 줄의 인코딩 속성을 변경하면 다른 코드셋을 사용할 수 있다.
-UTF-8 코드셋 : <?xml version="1.0" encoding="utf-8"?>
-EUC-KR 코드셋 : <?xml version="1.0" encoding="euc-kr"?>

규칙2. 루트 태그는 하나여야 한다.
플렉스는 웹 애플리케이션의 경우 3버전은 <mx:Application>, 4.x 버전은 <s:Application>  이 루트태그이다.

규칙3. 태그는 대소문자를 구분한다.

규칙4. 태그를 열었으면 반드시 닫아줘야 한다.
태그는 '<태그>' 로 시작해서 '</태그>' 로 끝난다. 하위 엘리먼트가 없는 태그는 '<태그/>' 로 쓸 수도있다.

규칙5. 태그는 다른 태그를 포함할 수 있지만 엇갈리게 쓸 수는 없다.
<mx:Button>                (o)                     <mx:Button>                  (x)
       <mx:Label>                                            <mx:Label>
       </mx:Label>                                           </mx:Button>
</mx:Button>                                         </mx:Label>

규칙6. 태그의 속성은 큰따옴표나 작은따옴표로 표시한다.
<mx:Button 속성명='xxx' />  와 <mx:Button 속성명="xxx" /> 의 결과는 같다.

규칙7. 태그의 속성은 하위 엘리먼트로 빼내어 쓸 수 있다.
속성 <mx:Button label="Test" /> 와 하위 엘리먼트로 표현한 <mx:Button><mx:label>Test</mx:label></mx:Button>은 동일한 내용이다.



<MXML과 플렉스 컴포넌트의 관계>

플렉스 빌더의 컴포넌트 뷰에 있는 컴포넌트들을 디자인 에디터로 끌어다 놓고 소스보기를 하면 그 컴포넌트에 해당하는 MXML 태그 코드가 생성되 있다. 이는 하나의 MXML 태그는 하나의 플렉스 컴포넌트와 매핑돼 있기 떄문이다. MXML과 실제 태그가 나타내는 플렉스 컴포넌트의 이름은 동일하다.




<XML네임스페이스>

네임스페이스는 태그의 속성처럼 다음과 같이 정의한다. URI에는 웹사이트 주소나 패키지 주소가 들어갈 수 있다. URI는 파서가 태그를 구분지어 처리하기 위해 사용하는 것이므로 유효한 웹사이트 주소가 들어갈 필요는 없다.

xmlns:네임스페이스명="URI"

네임스페이스는 정의가 된 엘리먼트를 포함한 자식 엘리먼트에 적용할 수 있다.
루트엘리먼트에 적용하면 모든 자식 엘리먼트가 그 네임스페이스를 사용할수있다
플렉스4에는 다음과같은 네임 스페이스가 루트 엘리먼트에 정의되어있다.

-xmlns:"http://ns.adobe.com/mxml/2009"
화면요소가 아닌 데이터나 로직 처리를 위한 엘리먼트에 적용된다.
ex><fx:Script>, <fx:Declaration>

-xmlns:s="library://ns.adobe.com/flex/spart"
플렉스 4에 새로이 추가된 spark계열의 컴포넌트에 사용하고자 할때 정의한다.

-xmlns:mx="livrary://ns.adobe.com/flex/mx"
플렉스 4 이전 버전에서 사용되는 할로 계열의 컴포넌트를 사용하고자 할떄 정의한다.

플렉스에서 네임스페이스를 추가하는 경우는 사용자 정의 컴포넌트의 패키지 경로를 지정할 때다. 알고보면 fx,s, mx의경우도 URI가 웹사이트 주소와 유사하지만 내부적으로는 플렉스 프레임웍 패키지의 경로를 처리하도록 되어있다.




<데이터바인딩>

데이터 바인딩은 특정 컴포넌트에서 사용할 데이터를 연결해주는 것이다. 무엇보다도 데이터가 바뀌면 플렉스가 해당 데이터를 사용하는 컴포넌트에게 변경사항을 알려 화면이 자동으로 업데이트된다는 장점이 있다.

*플렉스에서 데이터바인딩을 이용하면 데이터변경에 따른 화면 업데이트를 별도로 코딩하지 않아도 된다. 따라서 변경될 가능성이 있는 데이터를 화면에 보여줄 때는 데이터바인딩을 이용해야한다.

데이터바인딩을 하려면 참조하려는 변수값에 대해 속성명="{변수}" 로 해줘야한다.

*플렉스 4부터는 양방향 데이터바인딩을 사용할 수 있기떄문에 @기호를 {} 앞에붙여주면 두컴포넌트 모두 서로에게 데이터 변경을 적용할 수 있다.
 
만일 바인딩하려는 데이터가 액션스크립트 변수라면 변수명 앞에 [Bindable] 라고 표시해줘야한다.