지난 1부에 이어, Flex Builder Gumbo 살펴보기 2부를 연재합니다. Gumbo는 Flex4의 코드네임인데요. 잠시 본론으로 들어가기전에, Flex의 코드네임이 어떻게 변화해왔는지 살펴볼까요?
| 버전 | 코드네임 |
| Flex1 | Royale |
| Flex1.5 | Wondertwin |
| Flex2 | Mistral |
| Flex3 | Moxie |
| Flex4 | Gumbo |
플렉스의 역사를 살펴보자면, 통합어도비의 전신인 매크로미디어가 Flex의 코드네임(?)인 Royale를 MAX2003에서 발표한것이 그 시초가 되겠네요.
위의 스크린샷은 매크로미디어 MAX 2003에서 발표된 Royale의 모습이라는데, 지금 플렉스빌더와 비교해서 상당히 많이 변화된 모습을 살펴볼 수 있죠?
이후 플렉스가 정식 출시되면서, 차츰 많은 변화를 거치게 됩니다. 매크로미디어가 어도비에 인수합병되고, 3 버전부터는 SDK가 무료화되고 오픈소스로 배포되기 시작하였습니다. 그리고 FDS의 브렌드네이밍이 LCDS로 변화하였고, 오픈 라이센스 데이터서버인 Blaze DS를 출시하게 됩니다.
그리고 올 4분기중엔 플렉스의 네번째 버전인 Gumbo(코드네임)와 Flash Catalyst가 출시될 예정입니다. 브렌드네이밍이 Flash Platform으로 묶이고, 새로운 디자이너와 개발자간 협업툴도 출시되고, SDK를 완전히 새로 만들정도로 정말 많은 변화를 담고 있습니다.
그럼 지금부터 1부에 이어, Flex Builder 차기버전의 여러 변화에 대해 살펴보도록 하겠습니다.
테마선택기능
플렉스 빌더의 가장 큰 장점은 여러 컴포넌트를 조화롭게 잘 활용하여 애플리케이션을 간단히 개발 할 수 있다는 점인데요.
하지만, 기존 플렉스 컴포넌트들의 안습디자인(?)때문에, 현재 많은 곳에서 플렉스 컴포넌트의 디자인을 커스트마이징 하고 있고, 또 스킨형태로 배포하는곳도 있습니다.
컴포넌트 디자인을 커스트마이징 하기 위해서는, CSS로 스타일을 지정하거나, Flash나 일러스트레이터에서 컴포넌트 디자인을 만들어서 활용하는 방법등이 있습니다.
Flex Builder Gumbo에서는 이런 컴포넌트의 디자인을 테마형식으로 만들어서, 간단히 변경하고 관리할 수 있도록, Flex Theme기능을 지원하고 있습니다.
Flex Theme는 기본 Gumbo 스킨을 사용하거나, 커스트마이징 한 스킨파일(css,swc)파일을 추가해서, 적용될 테마를 미리볼 수 있고, 애플리케이션에 별도의 코딩 없이 간단히 테마를 선택할 수 있습니다.
이러한 테마 선택 기능을 잘 활용하여, 커스트마이징한 컴포넌트의 디자인을 보다 효과적으로 관리할 수 있고, 또 이후에 꾸준히 활용할 수 있는 장점이 있습니다.
Flash CS4와 개발환경 연동
작년 12월 4일 CS4가 출시되었습니다. 그런데, Flash CS4의 새로운 기능들을 살펴보면서 가장 의문이 들었던 점은 플렉스 빌더와 개발환경이 연동된다는 점이었는데, 아무리 찾아봐도 그런 기능이 없어서 많이 아쉬웠습니다. ^^;;
그런데, Flex Gumbo에서는 CS4의 새로운 기능들에 알맞는 Flash 연동기능이 추가되었습니다. 컴포넌트 뷰의 Custom탭에 플래시 컴포넌트와 플래시 컨테일러를 추가할수 있다는 것인데..
이렇게, 스테이지 상에 추가해 놓으니, 아래에 Create in Adobe Flash CS4라는 요상한 버튼이 생기더군요.
이 버튼을 눌러보니, 어라 클래스의 이름과, 생성될 SWC 파일을 지정해달라고 하네요.
만약 위에서 id 프로퍼티에 이름을 지정했다면, 그 이름대로 클래스 이름과, SWC 파일이 생성되게 됩니다.
그리고 Create버튼을 누르게 되면, Flash CS4가 실행되면서..
그리고 Flash CS4상에서, 컴포넌트를 개발 할 수 있습니다. 개발을 마쳤다면, Done 버튼을 누르게 되면, 해당 컴포넌트가 바로 Flex Builder 상에서 활용 할 수 있게 됩니다.
개발된 Flash 컴포넌트는 swc 파일 형태로 해당 프로젝트의 lib폴더에 생성되며, 계속해서 다른 프로젝트에 해당 컴포넌트를 활용 할 수 있습니다.
State의 변화
Flex Gumbo에선 SDK에 MXML2009가 도입됨에 따라, 네임스페이스가 사라지는것과 함께 State 컴포넌트에도 상당히 큰 변화가 생겼습니다.
뷰 스테이트는 일반적으로 화면전환을 관리하는용도로 사용하는데, 여러개의 화면으로 구성된 플렉스 애플리케이션을 스테이트 단위로 나누어서, 보다 손쉽게 화면 전환을 할 수 있습니다.
Flex Gumbo의 뷰 스테이트의 가장 큰 변화는, State 자체의 개념을 하나의 단독된 UI를 가진 장면 단위로 본다는 점입니다. 따라서, 이전 버전과 달리 Based on 설정이 사라지고, 스테이트의 화면 구성을 그대로 가져오는 Duplicate of 설정과, 빈 스테이트를 생성하는 Blank State 속성이 새롭게 생겼습니다.
하나 이상의 뷰 스테이트에 컴포넌트를 상속하고 싶다면, IncludeIn 프로퍼티에 해당 스테이트들을 콤마(,)로 구분하여 나열하고, IncludeIn 프로퍼티를 지정하지 않을 경우엔 모든 뷰 스테이트에 나타나게 됩니다.
그럼 위의 변화로 이전 버전의 Flex에 비해 소스코드가 어떻게 변화하는지에 대해 살펴볼까요?
예를들어 회원 가입시 화면 전환을 해야하는 애플리케이션을 개발할 경우엔,
위의 소스코드 처럼, 컴포넌트에 IncludeIn 프로퍼티를 이용해 애플리케이션의 소스코드가 간소화된 것을 확인 할 수 있습니다. 특히 화면 전환이 많은 애플리케이션일수록, 소스코드가 대폭 간소화 되고 소스코드 리뷰 중 컴포넌트의 뷰 스테이트 상속 정보에 대해 조금 더 직관적으로 확인 할 수 있습니다.
아울러, States(Halo)를 이용해서 이전의 뷰 스테이트 방식 또한 계속해서 활용하여 개발 할 수 있습니다.
코딩에 도움이 되는 여러변화
Flex Builder는 이클립스 기반으로 개발되었기 대문에, 이클립스에서 활용할 수 있는 여러 기능들과, 플러그인을 모두 활용하여 개발 할 수 있는 장점이 있습니다.
그리고 이번 Gumbo에서는 지난버전에 비해 개발자가 코딩을 하면서 도움이 될수 있는 여러 기능들이 추가되었습니다.
인텔리센스 도움말팝업
기존 플렉스 빌더에서 코딩을 할때, 컴포넌트의 역할이나 메서드정의에 대해 살펴볼려면, Help를 검색하거나, 개발자가 직접 작성한 asdoc를 살펴보거나, 소스코드를 직접 살펴봐야 했습니다.
Flex Builder Gumbo에서는 해당 클래스의 주석이 ASDOC 구문에 맞게 작성되었다면 클레스를 생성할때나, 메서드를 선택할때에 인텔리센스 팝업창 오른쪽에 Help Popup이 보여지게 됩니다.
그리고, 인텔리센스 도움말 팝업 이외에, 윈도우의 ASDoc 탭을 추가해, 해당 컴포넌트의 레퍼런스를 간단히 살펴 볼 수 있습니다.
다만 swc 형태의 라이브러리를 임포트하여 사용할 때, actionscript byte code(.abc)파일의 소스코드가 공개되어 있지 않다면, 인텔리센스 도움말 팝업이 나타나지 않습니다.
인텔리센스 도움말 팝업기능을 잘 활용하면, 코딩을 하면서 해당 클래스나 컴포넌트의 실행구조에 대해서 쉽게 파악할 수 있습니다.
Getter-Setter 생성기
AS3 컴포넌트나 클래스를 개발할때, 코딩중 필수적(?)이면서 큰 분량을 차지하는 부분이 바로 Getter-Setter 작업입니다. 이와같은 Getter-Setter코딩을 도와주는 이클럽스 플러그인을 비롯해서, 플렉스 빌더에서 이런 코딩을 도와주는 여러 플러그인들도 많이 있습니다.
Flex Builder Gumbo에서는 이런 Getter/Setter을 만들어주는 "Generate Getter/Setter"기능이 추가되었습니다. Getter-Setter을 만들고 싶은, 변수위에서 오른쪽 마우스를 클릭한후 Source - Generate Getter/Setter을 누르면,
변수의 이름을 바꿀것인지, 또 해당 변수를 읽기, 쓰기 권한에 대해 설정할 수 있고, 삽입될 Getter-Setter 소스코드의 위치를 지정할 수 있습니다.
또 미리보기를 눌러 리팩토링 된 소스코드의 변화도 살펴볼 수 있습니다.
OK를 누르면, 지정한 설정에 맞게 Getter/Setter가 자동적으로 생성됩니다.
Getter-Setter Generate가 단축키가 지정되지 않고, 한번의 팝업창을 거쳐야 하는 점에선 다소 불편하지만, 올 연말에 정식 출시되는 플렉스 빌더에서는 다소 편리해 질 수 있길 기대해 봅니다.
이벤트핸들러 생성기
Flash/Flex 애플리케이션을 개발할 때 Getter, Setter 보다 더 큰 비중을 차지하는것이 이벤트 핸들러 생성이 아닐까 생각됩니다.
Flex Builder Gumbo에서는 개발자가 코딩 중, 소스코드를 왕래할 필요 없이 간단히 이벤트 핸들러를 생성 할 수 있는 기능을 지원합니다.
디자인 뷰에서 해당 컴포넌트의 이벤트 오른쪽에 위치하고 있는, 연필(Generate Event Handler)버튼을 누르게 되면,
자동적으로 해당 컴포넌트의 이벤트 핸들러가 생성이 되며, 컴포넌트에도 해당 이벤트 핸들러가 지정된 것을 볼 수 있습니다. 그리고, 포인터가 TO DO 주석으로 이동하여서, 바로 코딩을 진행 할 수 있습니다.
디자인 뷰에서 지원하지 않는 이벤트나, 커스텀 컴포넌트의 경우 각 이벤트의 프로퍼티를 지정할때 인텔리 센스 팝업에 Generate Event Handler가 나타나게 됩니다. 이러한 Generate Event Handler을 클릭하게 되면, 위의 그림처럼 자동적으로 Event Handler가 생성됩니다.
이벤트 핸들러 생성기는 잘 활용하면 상당히 편리한 기능이지만, 다소 아쉽게도 MXML 컴포넌트 이외에는 이벤트 핸들러 생성이 지원되지 않습니다.
소스코드 탬플릿
Flex Builder Gumbo에서는 소스코드의 탬플릿을 지정 할 수 있도록, File Templates 기능이 추가 되었습니다.
File Templates는 액션스크립트 파일이나, CSS, MXML 소스코드의 탬플릿을 지정 할 수 있는데, 회사내에서 반복되어 사용되는 코딩 규약이나, 자주 활용하는 주석 구문등을 지정해 두면, 해당 파일을 생성할때, 자동적으로 소스코드가 생성되기 때문에 반복되는 작업에서는 상당히 유용하게 활용할 수 있습니다.
(* 글의 분량이 예상보다 다소 많아져서, 당초 예상보다 1부 더 길게 연재하게 되었습니다 양해부탁드립니다 (__))
