태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

'검보'에 해당되는 글 3건

  1. 2009.02.03 Flex Builder Gumbo 살펴보기 3부 (4)
  2. 2009.02.03 Flex Builder Gumbo 살펴보기 2부 (7)
  3. 2008.12.10 Flash Builder4 살펴보기 1부 (17)

Flex Builder Gumbo 살펴보기 3부

* 글의 길이가 길어짐에 따라, 2부에 이어, 별도로 3부를 이어서 진행합니다. 2부는 여기에서 보실 수 있습니다.

Data/Service

Adobe Flahs Platform이 RIA라는 명칭을 얻게 된 계기는 웹에 있는 자원과 통신을 하게 된 것이 시초라고 해도 과언이 아닐것입니다. Flash가 웹에 있는 정보를 불러와, 사용자에게 제공함으로써, 단순한 동적인 애니메이션 플레이어가 아닌, 정보를 제공할 수 있는 UI/UX의 새로운 돌파구로 까지 변모하게 되었습니다.

Flex에는 웹의 자원과 통신을 하기 위해, HTTPSerivce, WebService, RemoteObject와 같은 RPC 서비스와, LCDS와 통신할 수 있는 데이터서비스를 지원하고 있습니다.

하지만, 애플리케이션을 개발할때 마다 매번 웹과 통신하는 부분을 백앤드, 프론트앤드에 나눠 코딩해야 햐기 때문에, 실제 코딩에서는 만만치 않은 분량을 차지하게 됩니다.
(실제로, 이러한 작업을 줄이기 위해 mysql과 바로 데이터 통신을 할 수 있는 asql 프레임워크도 있지만, 백앤드와는 달리, swf파일은 리버스엔지니어링을 통한 디컴파일이 가능하기 때문에 권장하지 않습니다.)

어도비에서는 이처럼 웹의 자원과 통신하는 부분의 코딩을 자동화 해주는 기능인 스캐폴딩을 Flex3에서도 도입했으나, 로컬의 데이터베이스를 직접 불러와서 백앤드의 코딩으로 생성해 주기 때문에, 반응은 다소 좋지 않았습니다.


사용자 삽입 이미지

Flex Builder Gumbo에서는 Flex3의 스캐폴딩 기능의 단점을 보안한 Data/Services가 새롭게 추가되었습니다.

사용자 삽입 이미지

Data/Services가 플렉스3의 "Create Application from data Services"와 다른점은, 백앤드에서 작성된 규칙에 맞게 클래스를 자동적으로 생성 해 주기 때문에, 로컬의 데이터베이스가 필요가 없으며, 백앤드 개발자와도 조금 더 효율적으로 협업할 수 있습니다.

또한, ODBC/백앤드 언어로 스캐폴딩 되었던 기존의 플렉스 3와는 달리, Flex의 데이터 통신 방법을 기준으로 스캐폴딩 되기 때문에, 백앤드 언어의 제약 없이, 스캐폴딩을 할 수 있습니다.

Flex Builder Gumbo에서 현재 지원되는 Data/Services는 HTTPService와 WebSerivce 두종류이지만, 정식버전에서는 콜드퓨전의 차기버전인 "Spark"를 이용한 스캐폴딩도 지원될 예정입니다.

사용자 삽입 이미지

위의 그림처럼, 생성될 서비스명이나, URL등을 지정해 주면

사용자 삽입 이미지

자동적으로 웹과 통신하는 클래스들이 생성됩니다.
이 클래스들을 활용하여, 개발을 진행 할 수 있습니다.

사용자 삽입 이미지

아울러, 위의 클래스를 활용하여, 자동적으로 데이터 그리드를 생성해주는 기능도 추가되었습니다.


디버깅환경의 변화

애플리케이션 개발 과정 중 코딩 보다 어쩌면 디버깅이 더 많은 작업분량을 차지한다고 해도 과언이 아닙니다. 그 만큼 버그없는 완벽한 애플리케이션을 개발하려면 코딩은 필요조건 디버깅은 충분조건이라고 볼 수 있겠네요.. ^^

Flex Builder Gumbo에서는 조금 더 편리하게 디버깅 할 수 있도록, 새로운 기능들이 추가되었습니다.

건너 뛰기
디버깅을 하면서, 개발자가 가장 두려워 하는 부분이 for문과 같이 계속 반복되는 구문에 브레이크포인트가 걸려있을 경우가 아닐까 생각됩니다. ^^;; 이 경우 브레이크 포인트를 해제해야 무사히 넘어갈 수 있겠죠?


이외에, 디버깅 상황에 따라 필요없는 브레이크 포인트를 만난다거나, 브레이크포인트가 걸려있지 않은 곳으로 이동하고 싶은 경우가 생길 수 있습니다.

Flex Builder Gumbo에서는 이러한 상황을 위해(?), 라인건너뛰기 기능을 지원합니다. 브레이크포인트가 걸려있는 상황에서 건너뛰고 싶은, 라인에서 오른쪽 버튼을 눌러 Run to Line를 클릭하거나, Ctrl+R을 눌러, 해당 라인으로 건너뛸 수 있습니다.
(사실 이런기능이 이전버전 부터 지원했어야하는데.. 라는 아쉬움도 남습니다.. ㅎㅎ)


컨디션 브레이크포인트
위의 상황처럼 디버깅을 진행하면서 반복된 구문을 계속해서 돌고 있는데, 브레이크 포인트가 걸려있다면, 반복 과정중 무시할 수 있는 경우의 수에서도, 브레이크가 걸리게 됩니다.

따라서, 이런 경우에는 if와 같은 조건문으로, 브레이크를 조절 할 수 있지만, 조건문의 설정으로 애플리케이션에 예상하지 않은 문제가 발생할 수도 있습니다.

Flex Builder Gumbo에서는 브레이크 포인트가 브레이크 걸리는 조건을 제한을 둘 수 있는 컨디션 브레이크가 새롭게 추가되었습니다.


예를들어 위의 애플리케이션은 350ms마다 ontimer가 디스패치 되고, 디스패치 될때마다 '잇힝~'이라는 문자열을 콘솔에 출력하게 됩니다.

만약, '잇힝~'이 세번 출력될 경우 브레이크가 걸리도록 지정하고 싶다면, 브레이크 포인트를 걸어두고, Breakepoint Properties에 들어가면,


위의 그림처럼, 브레이크 포인트를 설정 할 수 있는 창이 나타나게됩니다. 이 창에서 브레이크포인트가 걸리는 조건을 설정 할 수 있는데, 컨디션 조건문은 if의 조건문과 같이 설정 할 수 있습니다.

그리고, 컨디션 조건문의 브레이크가 걸리는 경우를 설정 할 수 있는데, 컨디션 조건문이 true이거나, 컨디션 조건문의 상태 변화가 있을경우로 지정할 수 있습니다.


컨디션 브레이크포인트를 지정하게 되면, 일반 브레이크 포인트와는 달리, 브레이크 포인트 위에 물음표가 나타나게 됩니다.


컨디션 브레이크포인트를 지정하고 테스트한 모습입니다. 콘솔창에 '잇힝~'이라는 문자열을 3회 출력한 후에 브레이크 포인트가 걸리게 됩니다.

컨디션 브레이크포인트를 적절히 잘 활용하면, 디버깅 과정중 반복문도 경우의 수에 따라, 조건에 마침맞게 디버깅 할 수 있습니다.


Unit Test 지원

개발자는 애플리케이션을 개발 하는 과정 중, 디버깅을 통해 애플리케이션의 버그를 해결할 수 있습니다. 이후, QA팀이 있는 조직일 경우, QA팀에서 애플리케이션의 문제점을 날카롭게 살펴보게 됩니다.

이러한 QA테스트 이전에, 개발자가 기계적으로 여러 조건을 걸어두어 해당 애플리케이션을 테스트 할 수 있습니다. 이러한 테스트를 유닛테스트(Unit test)라고 하며, Java에서는 JUnit라는 프레임워크를 통해 Unit Test를 할 수 있습니다.

어도비에서는 플래시/플렉스 애플리케이션에서 이런 유닛테스트를 할 수 있도록, FlexUnit 프레임워크를 개발하여 배포하고 있습니다. FlexUnit는 오픈소스(New BSD)이며, JUnit와 기능적으로 거의 흡사합니다. 다운로드는 여기에서 할 수 있습니다.

사용자 삽입 이미지

Flex Builder Gumbo에서는 위에서 설명한 Flex Unit 프레임워크를 기본적으로 포함하고 있고, 손쉽게 유닛테스트를 할 수 있도록 지원하는 기능이 추가되었습니다.

Unit Test를 하기 위한, Test Case Class와 Test Suite Class가 File의 New 탭에 추가 되었습니다. Test Class를 생성하게 되면, FlexUnit 프레임워크가 자동적으로 임포트됩니다.

사용자 삽입 이미지

위의 그림처럼, TestCase를 추가 할 수 있습니다. 패키지명은 Test Class가 생성될 패키지 위치로, 변경 할 수 있습니다. 그리고, Select Class to test를 선택해, 테스트할 클래스의 탬플릿을 자동적으로 생성 할 수 있습니다.

사용자 삽입 이미지

Test Class를 생성하게 되면, 디버깅 버튼 하단에 Execute Flexunit Tests 탭이 나타나게 됩니다. 이 탭을 누르면,

사용자 삽입 이미지

Test Class에서 지정한 조건에 맞게 유닛 테스트를 시작하게 됩니다.

Flex Unit 프레임워크는 Unit 테스트 결과를 플래시 형태의 Test Runner로 결과를 보여주기 때문에, Flex Builder Gumbo의 Flex Unit Result View 탭 이외에도 인터넷 창에서 Unit Test의 실행결과를 알려주게 됩니다.

Unit Test를 적절히 활용하면, 개발 과정중 예기치 않은 문제들을 조기에 발견 할 수 있고, 또 기계적으로 테스트를 진행할 수 있어서 큰 노력없이 애플리케이션의 테스트를 할 수 있습니다.


지금까지 1년여에 이은, Flex Builder Gumbo 살펴보기 시리즈를 모두 마칩니다. Flex Builder "Gumbo"는 올 H1중에 퍼블릭 베타가 예정중입니다. 퍼블릭 베타는 아래의 경로에서 신청할 수 있습니다.

Flex Builder Gumbo 퍼블릭 베타 신청하기

그럼 이어서 더 좋은글....로 찾...아뵐려고 하는데
어랏?
뭔...가 거시기한걸 깜빡한것 같은데(?)


Flash Catalyst 지원

사용자 삽입 이미지

Flex Builder Gumbo에서는 그간 코드네임 Thermo로 알려진 Flash Catalyst를 공식적으로 지원합니다.

Flash Catalyst는 개발자-디자이너간 중계자 형성 툴로, MS의 익스프레션 블렌드와 다소 흡사한 성향을 가지고 있습니다.

사용자 삽입 이미지

디자이너는, 자신이 디자인한 결과물(일러스트레이터, 포토샵) 파일을 Flash Catalyst로 불러와, 컴포넌트의 역할, 사용자의 인터렉션이나  화면 전환등을 지정 할 수 있고, 완성된 결과물을 개발자에게 전달하여 프로젝트에 바로 활용 할 수 있습니다.

사용자 삽입 이미지
Flex Builder Gumbo에서는 Flash Catalyst로 작업된 결과물(FXP포맷)을 불러와 바로 개발 할 수 있도록 지원하며, 개발 과정중 디자이너가 UI나 UX를 바꿀경우에도, FXP포맷을 불러와 리팩토링 하는 기능을 지원하고 있습니다.

그럼 이 글에 이어서, 3부에 걸쳐 Flash Catalyst에 대해서 자세히 살펴보겠습니다.
신고
트랙백 0 Comment 4

Flex Builder Gumbo 살펴보기 2부

지난 1부에 이어, Flex Builder Gumbo 살펴보기 2부를 연재합니다. Gumbo는 Flex4의 코드네임인데요. 잠시 본론으로 들어가기전에, Flex의 코드네임이 어떻게 변화해왔는지 살펴볼까요?

 버전  코드네임
 Flex1  Royale
 Flex1.5  Wondertwin
 Flex2  Mistral
 Flex3  Moxie
 Flex4  Gumbo
출처(http://luar.com.hk/blog/?p=472)

플렉스의 역사를 살펴보자면, 통합어도비의 전신인 매크로미디어가 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 속성이 새롭게 생겼습니다.
사용자 삽입 이미지
아울러, Flex Gumbo에서는 각 컴포넌트의 상속 스테이트 정보를 지정할 수 있는 AddChild와 RemoveChild 대신, 컴포넌트에 IncludeIn 프로퍼티가 새롭게 생겼습니다.

하나 이상의 뷰 스테이트에 컴포넌트를 상속하고 싶다면, 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부 더 길게 연재하게 되었습니다 양해부탁드립니다 (__))

신고
트랙백 0 Comment 7

Flash Builder4 살펴보기 1부

2004년부터 시작해온 플렉스가 내년엔 큰 변화를 맞이하게 되었습니다. 브랜딩네임이 플래시플렛폼으로 묶인다는점, 그리고 Flex Gumbo와 Flash Catalyst가 내년 하반기에 출시됩니다.

사용자 삽입 이미지

Gumbo는 Flex4의 코드네임입니다. Flex가 참 많은 코드네임을 거쳐왔는데, 저는 그중 3버전의 Moxie가 제일 인상에 남는군요.

Flex Gumbo SDK는, Flex SDK의 오픈소스 정책에 따라 현재 공개되어서 직접 사용해 보실수 있습니다. Gumbo의 SDK는 아래의 경로에서 내려받으실수 있습니다.

어도비 오픈소스 - Gumbo

사용자 삽입 이미지

Flex Builder Gumbo는 소소하면서도 많은 변화를 담고 있습니다. 지금부터 그 변화를 2부에 거쳐 살펴보겠습니다. 참 그리고, Flex Builder Gumbo의 퍼블릭 베타는 내년 1분기, 정식 런칭은 내년 후반기로 예정되어 있습니다.



네임스페이스가 없어진다

Flex Gumbo의 가장 큰 변화중 하나인데요. 바로 기존 mx framework가 완전히 새롭게 개발되었고, 또 mx framework의 네임스페이스가 사라지게 되었습니다.

사용자 삽입 이미지

예를들어 <mx:Application>의 경우 네임스페이스가 없어지고 <FxApplication>으로 바뀌었습니다.  물론, 네임스페이스는 FxApplication에서 정의해서 지난버전처럼 사용할 수도 있습니다.


위의 예제는 Flex Gumbo에서 cocomo의 네임스페이스를 정의해 개발한 예 입니다.

그런데 다소 특이한것은, Textinput 컴포넌트의 경우엔 FxTextinput, Textinput와 같이 총 두개의 컴포넌트로 나뉘어져있습니다. 반면에 Label은 Label 밖에 없구요. 혹시 이유를 아시는분? ㅜㅜ 아직 테스트과정이라 그런가요? 그런데 만약 정식런칭시에도 지금 현재 처럼 분류가 된다면 상당히 혼란스러울것 같습니다.


네비게이터뷰에서 익스플로러뷰로의 변화

사용자 삽입 이미지

Flex Gumbo에서 가장 눈에 띄는 변화중 하나가 바로 네비게이터 뷰가 패키지 익스플로러 뷰로 바뀌고, 익스플로러에서 보여지는 프로젝트의 요소들이 변화한 점입니다.

첫번째로는 프로젝트의 소스코드들이 패키지로 묶인다는 점입니다.

사용자 삽입 이미지

이전의 Flex Builder에서는 하나의 액션스크립트나 MXML컴포넌트 패키지를 만드려면, src폴더 하위에 폴더를 만들어서 진행을 했는데, 이젠 그 폴더들이 패키지 형태로 출력이 되게 됩니다.

즉 src 최상위 폴더에 있는 파일들은 default package로 묶이게 되고, 그 아래의 폴더에 있는 파일들은 각 폴더의 이름이 패키지명이 되어 묶이게 됩니다.

이렇게 되면, 헉 'asset' 폴더는 어쩌라고! 라고 생각하실 분들 많으시죠? (저도 젤 첨에 그랬습니다.. ㅎㅎ)
이런변화에 대비하고자, 폰트나 swf, 이미지파일등과 같은 리소스파일들을 위한 assets 폴더도 추가되었습니다.

둘째는, 해당 프로젝트에서 사용중인 Flex SDK를 볼 수 있습니다.

사용자 삽입 이미지

Flex Builder Gumbo의 패키지 익스플로러에서는 해당 프로젝트에서 사용중인 Flex SDK를 볼 수 있고, SDK에 속해있는 패키지들도 볼 수 있습니다.

따라서, 소스코드가 공개되어있는 Flex SDK는 익스플로러 뷰에서 해당 패키지를 바로 열어서 살펴볼 수 있습니다.

셋째는, 해당 프로젝트에서 사용중인 라이브러리를 볼 수 있습니다.

사용자 삽입 이미지

지난 Flex Builder에서는 해당 프로젝트에서 참조중인 라이브러리를 살펴보려면 프로젝트의 Properties에서 살펴봤어야만 했습니다. 하지만 Gumbo에서는 참조중인 라이브러리는 'Referenced Libraries'에서 살펴 볼 수 있으며, 해당 소스코드가 공개되어있다면 바로 살펴볼 수도 있습니다.

그리고 재미있는점을 한가지 소개해드리면,

사용자 삽입 이미지

하나의 파일에서 에러가 나게되면, 그 에러가 영향을 미치는 패키지나 파일들도 줄줄이 사탕으로 에러가 뜨기때문에 한눈에 쉽게 알아볼수 있습니다.



프로젝트 생성시 SDK버전을 지정할 수 있다

위의 익스플로러뷰에서 이미 눈치 채셨나요? ㅎㅎ

사용자 삽입 이미지

이전의 Flex에서는 프로젝트의 SDK 버전을 바꾸기 위해서는, 해당 프로젝트의 Properties에서 변경할 수 있었습니다. 반면, Gumbo에서는 프로젝트 생성시 SDK버전을 지정할 수 있습니다.

이 기능을 활용하면 저처럼 여러 버전의 SDK를 어도비오픈소스에서 내려받아 동시에 사용하시는 분들께서 특히 유용하게 활용하실수 있을것 같습니다.


네트워크 모니터링

Flex로 RPC통신을 하시는 분들의 가장 큰(?) 노가다작업중 하나가 바로 서버와의 통신이 어떻게 이루어지고 있는지 살펴보는 것이라고 해도 과언이 아닐겁니다.

그래서 필자도 RPC통신을 활용할때 Fiddler이라는 HTTP Watcher툴을 유용하게 활용하고 있는데요.

사용자 삽입 이미지

Flex Builder Gumbo의 디버거에서는, 이러한 RPC 통신을 바로 살펴볼 수 있는 Network Monitor이라는 탭이 새로 생겼습니다.

디버그가 진행중일때 Network Monitor에서 모니터링을 시작하게 되면, 그 시점부터 모든 RPC 통신의 통신결과등을 상세하게 알아 볼 수 있습니다.

다만, 아직까지는 디버그를 종료할때, Network Monitor는 수동적으로 종료하여야 합니다.
신고
트랙백 1 Comment 17
prev 1 next