Flex 기본 6강 - Flex Source 이해하기 (MXML) -

 Flex Source 이해하기

 앞에서와 같은 방법으로 아주 간단하게 애플리케이션을 만들 수도 있기는 합니다. 하지만 조금 더 기능적인 애플리케이션을 만들 때는 텍스트 에디터(Source 모드)에서 코드를 직접 입력해야 하는 경우가 더 많습니다. 따라서 Flex를 이용해서 좋은 애플리케이션을 만들기 위해서는 Flex에 사용되는 Language를 알 필요가 있습니다.

 Flex에서 주로 사용하는 언어는 MXML과 ActionScript3.0입니다. MXML (Macromedia eXtensible Markup Language)은 컴포넌트들을 표현하는데 주로 사용됩니다. ActionScript3.0은 원래 Flash의 Script언어로써 event(마우스 클릭, 키보드 입력, 마우스 드래그 등)가 발생했을 시 어떤 결과를 보여주는데 사용이 됩니다. 다음은 앞에서 우리가 만든 애플리케이션의 Source모드 화면입니다. 안에 들어있는 부분은 ActionScript3.0 이고 그 외 나머지 부분은 MXML입니다.

 

1.  MXML

  MXML은 XML(eXtensible Markup Language)을 기반으로 한 언어로써 우리가, HTML을 이용, 코딩작업을 통해 웹문서를 만들듯, FLEX화면을 만드는 언어 중 한가지입니다. 즉, MXML은 PHP와 같은 프로그래밍 언어보다는 HTML과 같이 화면을 보여주는 언어에 가까운 것이죠. 그러면 지금부터 Flex에서 MXML을 어떻게 사용하는지 간단하게 알아보도록 하겠습니다. 

(1) 열었으면 닫아야 한다. 그리고 큰 것이 작은 것을 포함한다.

 HTML 태그를 처음 배울 때를 생각해보세요. 혹시 그때 “열었으면 닫아야 합니다.”, “열고 닫는 것은 항상 쌍으로 붙어 다닙니다.” 라는 말들을 듣지 않았나요? 예를 들어 table태그를 사용하려면 <table>로 시작해서 </table>로 끝나야 한다는 식으로 말이죠. MXML도 마찬가지입니다. 태그를 사용해서 Flex에 있는 컴포넌트를 불러오기 위해서는
<mx:컴포넌트 명>로 시작해서 </mx:컴포넌트 명>닫아야 합니다.

 그리고 큰 규모의 태그가 작은 규모의 태그를 포함합니다. 예를 들어 HTML에서 테이블태그의 경우 <table>은 표 전체를 의미하고 <tr>은 표(<table>) 안에 있는 줄, <td>는 줄(<tr>) 안에 있는 칸을 의미하기 때문에 ‘<table> 》 <tr> 》 <td>’의 관계가 성립되어서 <table>과</table> 사이에 <tr>과 </tr>이 들어가고 <tr>과</tr>사이에 <td>와 </td>가 들어갑니다. MXML도 마찬가지입니다. 앞에서 만들어본 Hello!Flex 예제의 경우 레이아웃 컴포넌트인 panel 컴포넌트가 TextInput 컴포넌트보다 더 큰 규모이기 때문에 <mx:Panel>과 </mx:Panel> 사이에 <mx:TextInput>가 들어간 것입니다. 

아래 표는 HTML과 MXML을 비교한 것입니다. 보시면 조금 더 쉽게 이해가 가실 겁니다.

 

 

(2) 컴포넌트 사용하기

1) 컴포넌트 불러오기

 Hello! Flex 예제에서는 Design뷰에서 컴포넌트를 마우스로 드래그하여 작업 스테이지로 불러왔었습니다. 하지만 Source뷰에서도 간단하게 태그를 입력하여 컴포넌트를 불러올 수 있습니다. 방법은 간단합니다. <mx:컴포넌트 명>을 입력하면 됩니다. 물론 마지막에 </mx:컴포넌트 명>으로 닫아줘야 하겠죠? 예를 들어서 Panel 컴포넌트를 사용하고 싶다면 <mx:Panel>이라고 입력하고 뒤에서 </mx:Panel>로 닫아주면 됩니다.

2) 컴포넌트 속성 입력하기

 <mx:컴포넌트 명>을 입력하여 컴포넌트를 불러왔으면 컴포넌트의 크기나 정렬, title 같은 컴포넌트의 속성도 입력해야 합니다. 예를 들어 HTML에서 표(table)를 만들 때 표의 넓이(width)나 정렬(align)을 입력하듯이 말이죠.

 컴포넌트의 속성을 입력하는 방법은 간단합니다. <mx:컴포넌트 명 속성=“값”> 이라고 입력하면 됩니다. 예를 들어 Panel컴포넌트를 불러와서 넓이를 400, 높이를 300, 제목을 Panel, 정렬을 가운데로 하고 싶다면 아래와 같이 입력하면 됩니다.

 

Panel 컴포넌트 외에 다른 컴포넌트들도 마찬가지입니다. <mx:컴포넌트 명 속성=“값”>의 규칙을 벗어나지 않습니다. 그러면 이번엔 Button 컴포넌트의 속성을 입력해보도록 하죠.

 

모양의 버튼을 나오게 하려면 아래와 같이 입력하면 됩니다. label은 버튼위에 나올 텍스트라고 생각하시면 됩니다.

3) 코드 줄여서 입력하기

 만약에 위의 코드들을 줄여서 쓰고 싶은 경우에는 <mx:컴포넌트 명 속성=“값”/> 이라고 입력하면 됩니다. 예를 들어, 위에서 설명한 버튼 컴포넌트의 경우 <mx:Button label="Submit"/> 이라고 입력하면 되는 것이지요.

 

(3) 꼭 지켜야 할 규칙

1) 선언하기

 Flex 프로그램을 실행시킨 다음에 mxml 파일을 생성 시키고 Source 뷰를 클릭하면 아래와 같은 그림이 나올 것입니다.

 

첫 줄에 있는 <?xml version="1.0" encoding="utf-8"?>은 XML 언어를 사용하겠다는 선언문이기 때문에 지우면 안 됩니다. 그리고 첫 줄 첫 칸부터 이 선언문이 들어가 있어야 합니다. 선언문 앞에 스페이스(한 칸 띄움)가 들어가 있으면 안 됩니다.

 그리고 작업에 사용되는 모든 코드는 그 아랫줄에 있는

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">와 </mx:Application>

사이에 입력이 되어야 합니다.

 물론, Flex 프로그램을 실행시켜서 작업할 mxml파일을 생성시키면 자동으로 위의 코드들이 입력되기 때문에 크게 걱정할 일은 아닙니다. 다만 작업도중 실수로 위의 코드들을 건드리는 일이 가끔 있기 때문에 설명 드리는 것입니다.  

 

2) 대문자와 소문자 구분

 XML은 사실 좀 예민한 언어라고 할 수 있습니다. 왜냐하면 HTML과 달리 대문자와 소문자를 구분하기 때문입니다. 예를 들어 HTML에서는 <table>과 <TABLE>이 같은 것으로 해석이 되지만 XML에서는 그렇지가 않다는 것이지요. 따라서 XML기반의 언어인 MXML을 사용하는 Flex에서는 코드를 작성할 때 <mx:Button>과 <mx:button>은 다른 것으로 해석이 됩니다. 그래서 Flex에서는 코드를 작성할 때 더욱 신중해야 합니다.

 일반적으로 컴포넌트를 불러오는 태그를 작성할 때는 컴포넌트 명의 첫 글자를 대문자로 쓰는 경우가 많습니다. 예를 들어 <mx:DateChooser>처럼 말이죠. 만약에 <mx:datechooser>라고 입력한다면 오류가 나서 컴포넌트가 화면에 나타나지 않습니다.

 

(4) 편리한 자동완성 기능

  프로그래밍을 집중적으로 배우지 않는 우리 인터넷미디어 전공생들에겐 코드를 직접 입력하는 것이 쉽지 않을 것입니다. (그 마음 충분히 이해합니다.) 일단 태그를 외우는 것부터가 쉽지가 않지요. 하지만 걱정하지 마세요. Flex는 코드를 자동으로 만들어주는 기능이 있습니다. 우리가 어떤 태그의 첫 글자를 입력하면 그 글자로 시작되는 몇 개의 태그들이 자동으로 나타나기 때문에 우리들은 그 태그들 중에 우리가 사용할 태그를 고르기만 하면 됩니다. 아래 그림처럼 말이죠.