DaeYoung's Blog :: MXML은 플렉스 애플리케이션을 XML로 기술한다 XML/MXML

http://blog.naver.com/maxon1/100013547598

MXML은 플렉스 애플리케이션을 XML로 기술한다
MXML은 XML 기반이므로 자바 관련 IDE는 물론 메모장과 같은 텍스트 에디터만 있어도 쉽게 코딩할 수 있다. 또한 플렉스 전용 IDE인 브래디에서는 위지윅 방식의 코딩이 가능하다. 브래디는 플렉스 프로그램 작성시 레이아웃과 UI, 데이터 서비스 등 프레젠테이션 부분을 표현하는 데에 사용된다. MXML은 HTML에 비유될 수 있는데 그 특징은 다음과 같다.

◆ 유사점 : MXML은 HTML이 웹에서 보이는 화면을 태그로 표현하는 마크업 언어인 것처럼 플렉스에서 어떤 컴포넌트를 어떻게 보이도록 할 것인가를 기술하는 마크업 언어이다. 이것은 HTML처럼 각 컴포넌트의 속성을 지정함으로써 화면을 표현할 수 있다. 플렉스에서 사용하는 비주얼한 컴포넌트들은 <화면 5>의 컨트롤과 <화면 6>의 컨테이너로 구성되며, 컨트롤은 컨테이너에 담겨서 배치된다는 점에서 자바의 AWT와 유사하다.

◆ 차이점 : HTML은 지정된 태그만 가능하나 MXML은 커스텀 컴포넌트도 표현할 수 있다. 또한 HTML은 브라우저 화면에 나타날 것만을 기술하지만 MXML은 추가로 데이터와 연동하는 부분도 기술한다.

◆ MXML 문법 : MXML은 XML 문법만 알면 쉽게 이해할 수 있다. XML 문법을 따르므로 구조적이며 가독성이 높다. 다음의 코드는 'Hello Flex'라는 메시지를 Label 컨트롤에 찍어주는 간단한 코드이다. 2째 줄은 XML의 시작을 알리는 부분이며 인코딩 방식을 지정한다. 만약에 MXML 안에 한글이 있다면 <리스트 3>처럼 인코딩을 'euc-kr'로 지정해야 파싱 에러가 안 난다. 3째 줄의 <mx:Application>은 MXML의 루트 태그로 여기서부터 MXML이 시작되며 </mx:Application>으로 끝난다. 또한 'mx'라는 네임스페이스 사용을 나타내고 있으며, 이에 모든 태그에는 'mx'가 붙는다. 4째 줄은 Label 컨트롤을 쓰겠다는 것이며, Label에 텍스트 속성은 'Hello Flex'로 하고 폰트 크기는 20이다. 이처럼 HTML에서 사용했던 여러 가지 속성은 MXML 태그의 프로퍼티로 제공되는데, MXML 태그에는 컴포넌트 속성, 이벤트, 스타일, 이벤트 반응(behavior) 등을 지정할 수 있다. 이는 액션스크립트의 함수로써 접근과 제어가 가능하다.

// 간단한 플렉스 예제
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Label text="Hello Flex" fontSize="20"/>
</mx:Application>

// 간단한 플렉스 예제(한글)
<?xml version="1.0" encoding="euc-kr"?>
…중략…

액션스크립트는 이벤트, 에러 및 데이터를 처리하는 스크립트이다
플렉스의 UI는 이벤트 중심으로 작동한다. 플렉스에서는 사용자가 발생시키는 이벤트 유형을 정의하고, 어떻게 반응할 것인가를 액션스크립트로 기술한다. 액션스크립트로써 이벤트를 처리하는 방법은 자바스크립트와 유사하다. 실행 중에 발생하는 에러나 데이터 검증 에러를 감지해 사용자에게 메시지를 전달하며, 플렉스 컨트롤 중에서 배열과 같은 데이터가 있어야 화면에 보여지는 것들(예 : 리스트, 그리드, 트리 메뉴 등)에 다양한 방법으로 내외부 데이터를 제공한다.

액션스크립트는 문법, 용도 등에서 자바스크립트와 유사하지만 차이점도 있다. 하나는 Document, Window, Anchor와 같은 브라우저 관련 객체를 지원하지 않는다는 것이다. 이는 일반 웹 페이지가 페이지(윈도우) 중심으로 움직이는 것과는 달리 플렉스는 한 애플리케이션에서 화면을 모두 처리하기 때문이다. 그리고 자바스크립트는 String 값의 길이가 ‘0’이 아니면 true를 리턴하고, ‘0’이면 false를 리턴하는 반면 액션스크립트는 String을 number로 변환해 ‘0’이면 false를 리턴하고, 아니면 true를 리턴한다.

로그인