[Flex3] MXML 에 대하여 / About MXML

Reference : http://livedocs.adobe.com/flex/3/html/mxml_2.html#137183

Flex 어플리케이션은 MXML 과 ActionScript 로 작성합니다. MXML 은 사용자 인터페이스 컴포넌트를 배치하기 위해 사용하는 XML 마크업 언어입니다. 서버의 데이터 소스에 접근하거나, 사용자 인터페이스 컴포넌트와 데이터 소스 사이의 바인딩과 같은 어플리케이션의 눈에 보이지 않는 면을 선언적으로 정의하기 위해 MXML을 사용하기도 합니다. (서버의 데이터 소스에 접근하거나, 사용자 인터페이스 컴포넌트와 데이터 소스 사이의 바인딩 등)

HTML 처럼, MXML 은 사용자 인터페이스를 정의하는 태그를 제공합니다. HTML을 다뤄봤다면 MXML 이 무척 친근하게 보일 것입니다. 하지만 MXML 은 HTML 에 비해 더 구조화되어 있고, 더 풍부한 태그 집합을 제공합니다. 예를 들어, MXML 은 데이터 그리드, 트리, 탭 내버게이터(navigator), 어코딩(accordion), 메뉴 와 같은 눈에 보이는 태그뿐 아니라, 웹 서비스 연결, 데이터 바인딩, 애니메이션 효과와 같은 눈에 보이지 않는 컴포넌트에 대한 태그도 포함합니다.

MXML 과 HTML 의 가장 큰 차이중 하나는 MXML 로 정의된 어플리메이션이 SWF 로 컴파일된다는 것입니다. 이 파일은 페이지 기반의 HTML 어플리케이션에 비해 더 풍부하고 동적인 사용자 인터페이스를 제공해주는 Adobe® Flash® Player 나 Adobe® AIR™ 에서 보여집니다.

한 파일, 또는 여러 파일에 MXML 어플리케이션을 작성할 수 있습니다. MXML 은 MXML 이나 ActionScript 파일에 작성된 custom 컴포넌트도 지원합니다.

Writing a simple application
간단한 어플리케이션 작성

MXML 파일이 보통의 XML 파일이기 때문에 개발 환경에 대한 선택의 폭이 넓습니다. 간단한 텍스트 편집기나, XML 전용 편집기, 텍스트 편집을 지원하는 통합 개발 환경에서 MXML 코드를 작성할 수 있습니다.  Flex 는 어플리케이션 개발을 위한 전용 IDE 인 Adobe® Flex® Builder™ 를 지원합니다.

아래의 예제는 간단한 "Hello World" 어플리케이션입니다. 이 어플리케이션은 <mx:Application> 태그로 구성되고, 내부에  <mx:Panel> 태그와 <mx:Label> 태그가 정의되어 있습니다. <mx:Application> 태그는 항상 Flex 어플리케이션의 최상위 태그이고, Application 컨테이너를 정의하기 위해 사용됩니다. <mx:Panel> 태그는 타이틀 바, 타이틀, 상태(status) 메시지, 보더(border), 내부 컴포넌트를 위한 컨텐트 영역 등을 포함하는 Panel 컨테이너를 정의합니다. <mx:Label> 태그는 텍스트를 보여주는 간단한 사용자 인터페이스 컴포넌트인 Label 컨트롤을 나타내고 있습니다.

<?xml version="1.0"?>
<!-- mxml\HellowWorld.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Panel title="My Application" 
        paddingTop="10" 
        paddingBottom="10"
        paddingLeft="10" 
        paddingRight="10"
    >
        <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>
    </mx:Panel>
</mx:Application>

이 예제의 실행 파일(SWF) 은 아래와 같습니다: 

이 코드를 hello.mxml 라는 이름의 파일로 저장하십시오. MXML 파일 이름은 반드시 .mxml 확장자로 끝나야 합니다.

아래의 이미지는 웹 브라우저 창에 그려진 "Hello World" 어플리케이션을 보여주고 있습니다.:

About XML encoding
XML 인코딩

문서의 첫 번째 행은 XML 의 옵션을 명시합니다. 이 것은 MXML 파일이 인코딩 된 방법을 나타내는 인코딩 정보를 지정하는 좋은 예입니다. Many editors let you select from a range of file encoding options. On North American operating systems, ISO-8859-1 is the dominant encoding format, and most programs use that format by default. You can use the UTF-8 encoding format to ensure maximum platform compatibility. UTF-8 provides a unique number for every character in a file, and it is platform-, program-, and language-independent.

If you specify an encoding format, it must match the file encoding you use. The following example shows an XML declaration tag that specifies the UTF-8 encoding format:

<?xml version="1.0" encoding="utf-8"?>

About the <mx:Application> tag
<mx:Application> 태그

<mx:Application> 태그는 Flex 어플리케이션의 최상위 태그로, 일 뿐 아니라 Application 컨테이너를 나타냅니다. container 는 다른 컴포넌트를 내부에 가지는 사용자 인터페이스 컴포넌트로, 내부 컴포넌트를 위치시키는 고유의 레이아웃 규칙을 갖고 있습니다. 기본적으로, Application 컨테이너는 내부 컴포넌트를 위에서 아래로 배치합니다. Application 컨테이너 내부에 위에서 본 Panel 컨테이너와 같은 여러 종류의 컨테이너를 포함하여, 여러 가지 규칙에 따라 사용자 인터페이스를 배치할 수 있습니다. 자세한 정보는 Using Flex Visual Components 에서 볼 수 있습니다.

About MXML tag properties
MXML 태그 속성

<mx:Label> 태그의  text, fontWeight, fontSize 속성 같은 MXML 태그 속성을 통해 선언적으로 컴포넌트의 초기 상태를 설정할 수 있습니다. 실행 중에 컴포넌트의 상태를 변경하기 위해 <mx:Script> 태그에서 ActionScript 코드를 사용할 수 있습니다. 자세한 정보는 Using ActionScript 에서 볼 수 있습니다.

Compiling MXML to SWF Files
MXML 파일을 SWF 파일로 컴파일

컴파일된 SWF 파일이나 AIR 어플리케이션에 포함된 SWF fuke 형태로 어플리케이션을 설치할 수 있습니다. Adobe LiveCycle Data Services ES 가 있다면 어플리케이션을 MXML 파일과 AS 파일 세트의 형태로 어플리케이션을 설치할 수 있습니다.

Flex Builder를 사용하고 있다면, Flex Builder 에서 컴파일하고, 컴파일된 SWF 파일을 실행할 수 있습니다. 어플리케이션이 정확하게 실행된 후, 웹서버나 어플리케이션에 복사하여 설치합니다. 그러면 사용자는 폼에서 HTTP 요청(request) 를 생성하여 설치된 SWF 파일에 접근할 수 있습니다:

http://hostname/path/filename.html

Flex 는 MXML 파일을 컴파일 하는 mxmlc 라는 이름의 command-line MXML 컴파일러도 제공합니다. 아래의 예제에서 보이는 것처럼, mxmlc 을 사용하여 command line 에서 hello.mxml 을 컴파일 할 수 있습니다:

cd flexInstallDir/bin
mxmlc --show-actionscript-warnings=true --strict=true c:/appDir/hello.mxml

이 예제에서, flexInstallDir 는 Flex 설치 디렉토리이고, appDir 는 hello.mxml 이 있는 디렉토리 입니다. 컴파일 결과로 생기는 SWF 파일인 hello.swf 도 hello.mxml 과 같은 디렉토리에 생성됩니다.

mxmlc 에 대한 더 많은 정보는 Using the Flex Compilers 에서 볼 수 있습니다. 디버거 버전의 Flash Player 에 대한 더 많은 정보는 Logging 에서 찾을 수 있습니다.

The relationship of MXML tags to ActionScript classes
MXML 태그와 ActionScript 클래스와의 관계

Adobe 는 Flex 를 ActionScript 클래스 라이브러리로 구현했습니다. 클래스라이브러리는 컴포넌트(컨테이너와 컨트롤), 매니저 클래스, 데이터 서비스 클래스 등으로 구성됩니다. 클래스 라이브러리와 함께 MXML과 ActionScript 를 사용하여 어플리케이션을 개발하게 될 것입니다.

MXML 태그는 ActionScript 클래스나 클래스의 속성과 대응됩니다. 예를 들어, Flex 는 Flex Button 컨트롤을 정의하는 ActionScript Button 클래스를 생성합니다. MXML 에서, 아래와 같은 코드를 사용하여 Button 컨트롤을 생성합니다. 그러면 Flex 는 MXML 태그를 해부하고, 컴파일하여 관련된 ActionScript 객체로 이루어진 SWF 파일을 생성합니다:

<mx:Button label="Submit"/>

MXML 태그를 사용하여 컨트롤을 선언하면 그 클래스의 인스턴스 오브젝트가 생성됩니다. 이 MXML 코드는 Button 객체를 생성하고, Button 객체의 label 속성을 "Submit" 이란 스트링으로 초기화합니다.

ActionScript 에 대응되는 MXML 태그는 ActionScript 클래스와 같은 명명 규칙을 가집니다. 클래스 이름은 대문자로 시작하고, 여러 단어를 사용하여 지은 이름의 경우 단어의 첫글자는 대문자로 정해야 합니다. 모든 MXML 태그 어트리뷰트는 ActionScript 객체의 프라퍼티와 대응됩니다.(이 문장을 제외한 다른 문서에서는 property 와 attribute 를 모두 속성이라고 번역하도록 하겠습니다.) 객체에 적용되는 스타일이나, 또는 객체의 이벤트 리스너를 예로 들 수 있습니다. Flex 클래스 라이브러리와 MXML 태그 신택스에 대한 완벽한 설명은 Adobe Flex Language Reference 에서 볼 수 있습니다.

Understanding a Flex application structure
Flex 어플리케이션 구조 이해

하나의 파일이나 여러 개의 파일에 나눠서 MXML 어플리케이션을 작성할 수 있습니다. 일반적으로 <mx:Application> 태그가 있는 메인 파일을 정의합니다. 그러면 MXML 파일 이나 ActionScript 파일, 또는 두 언어를 모두 사용하여 작성된 파일을 메인 파일에서 참조할 수 있습니다. 

코딩 관례는 Flex 어플리케이션을 별개의 태스크를 수행하는 기능 단위/모듈로 나누는 것입니다. Flex 에서, 어플리케이션을 서로 다른 모듈에 대응되는 MXML 파일과 ActionScript 파일로 나눌 수 있습니다. 어플리케이션을 여러 모듈로 나눔으로써 아래와 같은 많은 혜택을 제공받을 수 있습니다:

Ease of development
개발의 용이함

서로 다른 개발자 또는 개발 그룹이 독립적으로 모듈을 개발하고 디버깅할 수 있습니다.

Reusability
재사용성

서로 다른 어플리케이션에서 모듈을 재사용하면 같은 작업을 반복하지 않아도 됩니다.

Maintainability
유지보수성

어플리케이션의 한 파일에 작성되어 있는 경우에 비해 에러를 더 빠르게 찾고 디버깅할 수 있습니다.

Flex 에서, 모듈은 MXML 이나  ActionScript 에 구현된 사용자정의 컴포넌트에 대응됩니다. 이 사용자 정의 컴포넌트는 다른 사용자정의 컴포넌트를 참조할 수 있습니다. Flex 에서 컴포넌트 참조시 level of nesting 에 제한이 없습니다. 어플리케이션에서 필요한 대로 컴포넌트를 작성할 수 있습니다.