Flex 기본 4강 - Flex와의 첫 만남(2) - 플렉스 빌더 화면구성

 Flex 화면 구성

 Flex의 버전은 Flex1을 시작으로 Flex1.5, Flex2를 거쳐 현재 Flex3까지 개발이 되어있습니다. 우리가 사용할 버전은 가장 최신 버전인 Flex3입니다. 아래 그림은 Flex3를 실행시킨 화면입니다.

아래 그림을 보시면 아시겠지만 Flex는 Flash와 달리 타임라인과 레이어가 존재하지 않습니다. 이것은 레이어를 이용하여 겹겹이 그림을 그리는 포토샵이나 Flash와 달리 Flex는 컴포넌트들을 수평 또는 수직으로 배치하는(퍼즐을 짜맞추듯이) 도구라는 것을 의미합니다.

 초등학교 때 도화지에 색종이를 붙여서 만드는 색종이 공작을 생각해보세요. 새하얀 도화지에 네모난 색종이를 붙이고 그 위에 꽃이나 풀, 구름 등을 오려 붙였었죠? 이와 비슷한 원리로 Flex는 은색도화지 위에 네모난 컨테이너 컴포넌트를 붙이고 그 안에 각종 컴포넌트들을 넣어서 애플리케이션을 구성하는 것입니다.

 

ActionScript 입력을 제외한 Flex의 기본 작업 과정은 아래와 같습니다.

①작업할 파일을 열고(선택하고) ②사용할 Component를 선택하여 ③작업스테이지로 가져온(드래그) 다음 ④속성을 입력하고 ⑤결과를 확인한다.

 

물론 Flex 프로그램 안에는 많은 기능들이 있습니다. 하지만 우리가 알아볼 것은 Flex에 대한 개념과 기본적인 사용법이기 때문에 여기에서는 작업을 할 때 가장 많이 사용하는 주요기능 몇 가지에 대해서만 알아보도록 하겠습니다. 그럼 지금부터 위에서 설명한 작업순서대로 각 뷰들의 특징들을 알아보도록 하죠. 

(1) 네비게이터 뷰

 네비게이터 뷰는 우리가 흔히 자동차 운전할 때 네비게이션을 사용하여 길을 찾아가는 것처럼 안내의 역할을 한다고 보시면 됩니다. 즉, 여러분이 작업 할 프로젝트(폴더)의 구성을 보여줌으로써 작업하는 사람이 쉽게 작업할 파일을 찾아서 열 수 있도록 해주는 것이죠. 그리고 네비게이터 뷰를 통해 프로젝트를 생성, 이동, 열기, 닫기를 할 수 있으며 프로젝트 내에 있는 파일을 이동시킬 수도 있으며 프로젝트 내 파일과 디렉토리를 추가할 수 있습니다.

네비게이터 뷰에 표시되는 사항들은 다음과 같습니다.

 

1. Project : 프로젝트는 작업한 파일들이 모이는 하  나의 폴더라고 보시면 됩니다. 따라서 폴더명이 프   로젝트명이 되는 것이죠. 옆의 그림에 나와있는  HelloFlex라는 프로젝트의 경우 폴더명도 HelloFlex가 되겠죠? 옆의 그림에는 총 4개의 프로젝트가 존재하고 각각의 프로젝트마다 작업에 필요한 파일들이 포함되어 있습니다.

2. bin-debug : bin-debug 폴더는 Flex작업의 결과물인 swf파일이 저장되는 곳입니다.

3. mxml 파일 : mxml 파일은 Flex에서 실질적으로 작업한 파일을 말하는 것으로 드림위버에서 HTML파일  이라고 생각하시면 됩니다. mxml 파일은 src폴더 안에 저장이 됩니다. 

(2)  컴포넌트 뷰

 

컴포넌트 뷰는 앞에서도 언급했지만 Flash에서 라이브러리라고 보시면 됩니다. 즉, 이미 만들어져 있는 그래픽 요소들이 모여 있는 곳이지요. 컴포넌트 뷰는 Flex 개발에 사용가능한 컴포넌트들을 커스텀(Custom), 레이아웃(Layout), 네비게이터(Navigator), 컨트롤(Control), 차트(Charts) 5가지로 보여줍니다.

● 커스텀 컴포넌트 : 만들어져 있는 컴포넌트가 아닌 사용자가 직접 만든 컴포넌트입니다. 

● 레이아웃 컴포넌트 : 컴포넌트들의 위치를 잡아주는 컴포넌트로 좌표로 지정하거나 상․하 배열, 좌우배열, 바둑판식 배열 등으로 지정할 수 있습니다. 쉽게 말해서 우리들이 홈페이지를 만들 때 레이아웃을 고려하듯이 Flex로 작업을 할 때도 컴포넌트들의 위치를 고려하여 레이아웃을 설정하는데 컴포넌트들의 위치를 잡아주는 컴포넌트가 레이아웃 컴포넌트인 것입니다.   

● 네비게이터 컴포넌트 : 탭처럼 여러 개의 화면을 보여주는 컴포넌트입니다. 네이게이터의  각 화면은 다시 레이아웃 컴포넌트를 기본으로 만들어 집니다. 

● 컨트롤 컴포넌트 : 버튼이나 체크박스 등 사용자가 직접 조작하여 반응하는 컴포넌트 입니다.

● 차트 컴포넌트 : 차트 컴포넌트는 그래프 같이 데이터를 한눈에 볼 수 있도록 디자인 할 때 자주 사용이 됩니다.  

(3) 에디터

 에디터는 컴포넌트들을 불러와 배열하는 곳으로 디자인 에디터와 텍스트 에디터가 있습니다.

드림위버에서 디자인 모드와 소스모드를 생각하시면 됩니다. 사용자는 디자인 에디터와 텍스트 에디터 중 편한 것을 선택하여 작업하면 됩니다. 

1)  디자인 에디터

디자인 에디터는 컴포넌트들을 배열하는 곳으로서 디자인 컴포넌트 뷰에서 컴포넌트를 마우스로 선택하여 디자인 에디터로 드래그함으로써 컴포넌트들을 에디터에 정렬시킬 수 있습니다. 그리고 마우스로 컴포넌트들의 크기 또한 조절을 할 수 있습니다.

 

2)  텍스트 에디터

 디자인 에디터에서 Source라는 버튼을 누르면 텍스트 에디터로 전환이 됩니다. 텍스트 에디터는 mxml 태그를 입력하여 컴포넌트를 불러오는 곳입니다. 물론 컴포넌트의 속성까지 함께 입력할 수 있습니다. 그리고 Action Script를 입력할 때는 반드시 텍스트에디터에서 해야 합니다. 텍스트 에디터는 자동입력 기능이 있어서 사용자가 편리하게 코드를 입력할 수 있습니다.

 

위의 그림은 디자인 에디터에서 Source버튼을 클릭하여 텍스트 에디터로 변환한 화면입니다. 위에 나와 있는 소스는 디자인 에디터에서 작업한 내용들을 Flex 프로그램이 자동으로 입력한 것입니다. (드림위버에서도 이런 기능이 있죠?) 즉, 디자인 에디터에 나온 그림과 위의 그림은 같은 내용이라는 것이죠. 

(4) 프로퍼티 뷰 

프로퍼티 뷰는 디자인 에디터에 있는 컴포넌트들의 속성을 입력하는 곳입니다. 예를 들어, 컴포넌트의 ID, 이벤트가 발생 했을 경우 나타나는 변화, 스타일, 레이아웃, 선의 색깔 및 알파 등 각 컴포넌트에 맞는 속성을 입력하는 것입니다.

아래 그림은 Button 이라는 컴포넌트의 프로퍼티 뷰를 나타내는 화면입니다. ID칸에 다른 컴포넌트들과 구별하기 쉬운 Button 만의 ID를 입력하는 것이고(Flash에서 각 심볼에 이름을 입력하듯이) Label에는 버튼 안에 입력 될 텍스트를 입력하는 것입니다. 그리고 On click에는 버튼을 클릭했을 시 나타나게 될 변화에 대한 명령어를 입력하면 됩니다.

 

(5) Run Test

Run Test 버튼은 작업한 것을 확인하기 위해 누르는 버튼으로 이 버튼을 누르면 사용자가 작업한 mxml 파일이 swf 파일로 컴파일 되어 결과물을 확인 할 수 있습니다. 다음 그림은 Run Test 버튼을 클릭했을 때 mxml파일이 swf파일로 컴파일된 것을 웹 브라우저가 열려서 결과물을 보여주는 화면입니다.