Adobe FLEX 4 실전 트레이닝 북

Adobe FLEX 4실전 트레이닝 북

iv

•목 차•

들어가며 ...................................................................................................xx

01장 리치 인터넷 애플리케이션의 이해 1컴퓨터 애플리케이션의 진화 ............................................................................2

페이지 기반 아키텍처에서 벗어나기 ...............................................................4

리치 인터넷 애플리케이션의 장점 ...................................................................6

비즈니스 관리자 ..........................................................................................6

IT 조직 ..........................................................................................................6

최종 사용자 ..................................................................................................6

RIA 기술 .............................................................................................................7

AJAX .............................................................................................................7

자바 가상 머신 .............................................................................................8

마이크로소프트 실버라이트 .......................................................................9

어도비 플래시 플랫폼 ...............................................................................10

이 장에서 배운 내용 ........................................................................................ 13

02장 시작하기 15플렉스 애플리케이션 개발 시작하기 ............................................................ 16

프로젝트와 MXML 애플리케이션 만들기 ................................................... 16

플래시 빌더 워크벤치 이해하기 .................................................................... 22

애플리케이션 실행하기 .................................................................................. 25

플래시 빌더 디버거 살펴보기 ........................................................................ 31

v

다음 실습을 위한 준비 .................................................................................... 38

이 장에서 배운 내용 ........................................................................................ 40

03장 인터페이스 레이아웃 구성 43레이아웃 학습하기 .......................................................................................... 44

컨테이너 이해하기 ....................................................................................44

레이아웃 객체 이해하기 ...........................................................................45

컨테이너와 레이아웃 객체 결합하기 .......................................................46

콘텐츠 스크롤하기 ....................................................................................46

MXML 태그 디코딩하기 ..........................................................................47

전자상거래 애플리케이션의 레이아웃 구성하기......................................... 48

소스 뷰에서 레이아웃 구성 시작하기 ......................................................49

디자인 뷰에서 계속 레이아웃 구성하기 ..................................................51

상품 영역 정의하기 ...................................................................................55

제약 기반 레이아웃에서 작업하기 ................................................................ 56

뷰 스테이트 다루기 ......................................................................................... 62

뷰 스테이트 만들기 ...................................................................................62

뷰 스테이트 제어하기 ...............................................................................66

리팩터링 ........................................................................................................... 69

구성된 컨테이너 사용하기........................................................................70

애플리케이션 리팩터링 ............................................................................71

이 장에서 배운 내용 ........................................................................................ 73

vi

04장 간단한 컨트롤 사용하기 75간단한 컨트롤 소개 ......................................................................................... 76

이미지 표시 ...................................................................................................... 78

상세 정보 뷰 만들기 ........................................................................................ 81

데이터 바인딩을 이용한 간단한 컨트롤과 데이터 구조의 연결 ................. 84

Form 레이아웃 컨테이너를 이용한 간단한 컨트롤의 레이아웃 구성 ....... 85

이 장에서 배운 내용 ........................................................................................ 88

05장 이벤트 처리 91이벤트 처리 이해하기 ..................................................................................... 92

간단한 예제 분석 .......................................................................................93

액션스크립트 함수를 이용한 이벤트 처리 ..............................................95

이벤트 핸들러 함수를 호출할 때 데이터 전달하기 ................................96

이벤트 객체 데이터 사용하기 ...................................................................97

이벤트 객체 인스펙션하기......................................................................100

시스템 이벤트 처리 ....................................................................................... 103

creationComplete 이벤트 이해하기 ......................................................103

생성 완료 시점에서 데이터 수정하기 ....................................................104

이 장에서 배운 내용 ...................................................................................... 107

06장 원격 XML 데이터 사용하기 109Embedded XML 사용하기........................................................................... 110

Model을 외부화하기 ...............................................................................110

객체와 XML 중에서 선택하기 ...............................................................112

런타임에 로드된 XML 사용하기 ...........................................................115

HTTPService 객체 만들기 .....................................................................116

vii

send() 메서드 호출하기 ..........................................................................116

반환된 데이터 접근하기 .........................................................................116

보안 문제 ..................................................................................................118

HTTPService로 XML 데이터 조회하기 ..................................................... 120

E4X로 XML 검색하기 .................................................................................. 123

E4X 연산자 활용 ......................................................................................124

동적 XML 데이터 사용하기 ......................................................................... 130

플렉스 컨트롤에서 XMLListCollection 사용하기 .................................... 134

이 장에서 배운 내용 ...................................................................................... 137

07장 클래스 만들기 139사용자 정의 액션스크립트 클래스 만들기 ................................................. 140

값 객체 만들기 ............................................................................................... 141

객체를 생성하는 메서드 만들기 .................................................................. 148

장바구니 클래스 만들기 ............................................................................... 151

장바구니 데이터 조작하기 ........................................................................... 157

장바구니에 품목 추가하기......................................................................157

품목 추가하고 수량 수정하기 ...................................................................... 159

조건에 따라 ShoppingCartItem 추가하기 ............................................159

이 장에서 배운 내용 ...................................................................................... 166

08장 데이터 바인딩과 컬렉션 169데이터 바인딩 검사하기 ............................................................................... 170

간단한 예제 살펴보기 .............................................................................170

더 복잡한 코드 분석 ................................................................................173

컴파일러 되기 ................................................................................................ 176

암시적인 접근자와 설정자......................................................................177

viii

이벤트 디스패칭과 리스닝......................................................................179

이벤트로서의 데이터 바인딩 ..................................................................180

Bindable의 의미 이해하기 ........................................................................... 181

ArrayCollection 사용하기 ........................................................................... 182

ArrayCollection 채우기 ..........................................................................183

ArrayCollection에서 항목 정렬하기 .....................................................192

커서로 검색 기능 리팩터링하기 .............................................................197

커서로 품목 삭제하기 .............................................................................200

ArrayCollection에서의 항목 필터링 .....................................................202

ShoppingCartItem 리팩터링 ....................................................................... 203

이 장에서 배운 내용 ...................................................................................... 205

09장 애플리케이션을 컴포넌트로 나누기 207MXML 컴포넌트 소개 .................................................................................. 208

기본적인 사용자 정의 컴포넌트 제작 방법 이해 ..................................209

단계별 사용자 정의 컴포넌트 제작 ........................................................210

애플리케이션 아키텍처에서 사용자 정의 컴포넌트 사용하기 ...........212

ShoppingView 컴포넌트 분리하기 ............................................................. 214

ProductItem 컴포넌트 분리하기 ................................................................. 221

데이터 로딩을 관리하는 컴포넌트 만들기 ................................................. 231

이 장에서 배운 내용 ...................................................................................... 240

10장 DataGroup과 List 사용하기 243List 사용하기 ................................................................................................. 244

List에서 labelFunction 사용하기 ...........................................................245

DataGroup 사용하기 .................................................................................... 248

itemRenderer 구현하기 ..........................................................................249

ix

ShoppingView에서 DataGroup 사용하기 ............................................254

가상화 이해하기 ......................................................................................256

가상화 구현하기 ......................................................................................257

List 클래스의 가상화 .................................................................................... 258

카테고리 선택에 따라 식료품 보여주기 ..................................................... 260

카테고리를 기준으로 식료품 보여주기 .................................................260

카테고리 리스트의 변경 핸들러 추가하기 ............................................261

이 장에서 배운 내용 ...................................................................................... 262

11장 이벤트 생성과 디스패치 265느슨한 결합 형태의 장점 .............................................................................. 266

이벤트 디스패치 ............................................................................................ 267

컴포넌트에 대한 이벤트 선언 ...................................................................... 271

사용자 정의 이벤트에 대한 필요성 확인 .................................................... 273

UserAcknowledgeEvent 생성과 활용 ......................................................... 274

이벤트 흐름과 이벤트 버블링 이해하기 ..................................................... 278

ProductEvent 클래스 생성과 사용 .............................................................. 284

ProductList 컴포넌트 만들기 .................................................................287

ProductList 컴포넌트 사용하기 .............................................................289

상품을 추가하고 삭제하기 위한 ProductEvent 사용 ...........................289

컬렉션 변경 이벤트 처리 ........................................................................291

이 장에서 배운 내용 ...................................................................................... 294

12장 DataGrid와 Item Renderer 사용하기 297Spark와 MX ................................................................................................... 298

DataGrid와 Item Renderer 소개 ...........................................................298

DataGrid에 ShoppingCart 표시하기 .......................................................... 299

CartGrid 컴포넌트 사용하기 .................................................................301

x

DataGridColumn에 인라인 편집 컨트롤 추가하기 ............................302

상품을 보여주기 위한 Item Renderer 생성 ..........................................303

Remove 버튼을 보여주기 위한 인라인 MXML Item Renderer 생성 306

ProductEvent 클래스 재사용하기 .........................................................308

소계를 보여주기 위한 labelFunction 생성 ...........................................309

AdvancedDataGrid 사용하기 ..................................................................... 312

AdvancedDataGrid 정렬 ........................................................................313

Expert Mode 정렬하기 ...........................................................................314

AdvancedDataGrid의 스타일 지정 .......................................................315

데이터 그룹화 ..........................................................................................319

요약 데이터 보여주기 .............................................................................325

이 장에서 배운 내용 ...................................................................................... 334

13장 드래그앤드롭 활용 337드래그앤드롭 매니저 소개 ........................................................................... 338

두 개의 DataGrid 간에 드래그앤드롭하기................................................. 339

DataGrid와 List 간의 드래그앤드롭 ........................................................... 343

드래그를 허용하지 않는 컴포넌트에서 드래그앤드롭 사용하기 ............. 347

장바구니에 식료품 드래그하기 ................................................................... 353

이 장에서 배운 내용 ...................................................................................... 359

14장 내비게이션 구현 361내비게이션 소개 ............................................................................................ 362

ViewStack으로 결제 프로세스 만들기 ........................................................ 364

애플리케이션에 CheckoutView 통합하기 ................................................. 370

이 장에서 배운 내용 ...................................................................................... 373

xi

15장 포매터와 밸리데이터 사용하기 375포매터와 밸리데이터 소개 ........................................................................... 376

포매터 .......................................................................................................376

밸리데이터 ...............................................................................................377

Formatter 클래스 사용하기 ......................................................................... 378

양방향 바인딩 ..........................................................................................381

Validator 클래스 사용하기 ........................................................................... 383

이 장에서 배운 내용 ...................................................................................... 387

16장 플렉스 애플리케이션 커스터마이즈하기 389스타일과 스킨이 포함된 디자인 적용하기 ................................................. 390

애플리케이션 외관 정리하기 ....................................................................... 390

스타일 적용하기 ............................................................................................ 391

태그 속성으로 스타일 설정하기 .............................................................393

스타일 상속 이해하기 .............................................................................395

<fx:Style> 태그로 스타일 설정하기 .......................................................396

CSS 파일을 이용한 스타일 설정 ............................................................400

애플리케이션에 스타일 추가하기 ..........................................................403

런타임에 CSS 변경하기 ................................................................................ 411

런타임 CSS의 장점 ..................................................................................411

CSS 파일을 SWF로 생성하기 .................................................................412

StyleManager로 CSS SWF 로드하기 .....................................................412

로딩된 CSS로 스타일 재정의하기..........................................................413

이 장에서 배운 내용 ...................................................................................... 413

xii

17장 스킨을 이용한 플렉스 애플리케이션 커스터마이즈 415

Spark 컴포넌트에서의 스킨 역할 이해하기 ............................................... 416

스킨과 스테이트의 관계 ............................................................................... 420

플렉스에서 프로그램 방식으로 그리기 .................................................420

스킨을 이용한 Button 스테이트 커스터마이즈 ....................................423

애플리케이션 스킨 만들기 ........................................................................... 429

이 장에서 배운 내용 ...................................................................................... 433

18장 사용자 정의 액션스크립트 컴포넌트 만들기 435액션스크립트 3.0 컴포넌트 소개 ................................................................. 436

복잡한 컴포넌트 만들기 ............................................................................... 436

플렉스 컴포넌트 이해하기 ........................................................................... 437

컴포넌트를 왜 만드는가? ............................................................................. 438

컴포넌트 정의하기 ........................................................................................ 440

인터페이스 정의하기 ..............................................................................441

기반 클래스 선택 .....................................................................................442

클래스 만들기 ..........................................................................................443

사용자 정의 클래스 사용하기 .................................................................446

시각적인 형태로 만들기 ............................................................................... 448

스킨 요구사항 구체화하기......................................................................448

스킨 생성하기 ..........................................................................................451

컴포넌트에 기능 추가하기 ........................................................................... 456

비동기적인 처리 ......................................................................................457

이벤트를 이용한 상호작용......................................................................462

나머지 부분 처리 .....................................................................................466

스킨 렌더러 생성하기 ................................................................................... 468

이 장에서 배운 내용 ...................................................................................... 471

xiii

부록A 설치 안내 473소프트웨어 설치 ............................................................................................ 473

플래시 빌더 설치하기 .............................................................................473

실습 파일 설치하기 .................................................................................474

플래시 디버그 플레이어 설치하기 .........................................................474

프로젝트 가져오기 ........................................................................................ 475

실습 파일 가져오기 .................................................................................476

xiv

나의 아내 로라와 딸 릴리아에게, 당신들은 나를 항상 미소 짓게 합니다.

- 마이클 래브리올라

이 책을 나의 아내 리사와 아이들 카리오프와 카간에게 바칩니다.

당신들이 도와주지 않았다면 아마 불가능했을지도 모릅니다.

- 제프 태퍼

24년 동안 기쁨을 함께 한 나의 아내 샌드라에게,

그리고 내 털북숭이 낚시 친구 스크래피에게.

- 매튜 볼스

xv

플렉스는 다양한 분야에서 사용되고 있고, 플렉스를 사용한 프로젝트의 고객만족도는 어떤 프로

젝트보다 높다. 이젠 어렵지 않게 사내 시스템이나 대외 시스템에서 많은 플렉스 프로젝트를 찾아

볼 수 있고, 플렉스 개발을 지원하기 위한 많은 프레임워크가 제공되고 있으며, 오픈소스 프레임워

크와 궁합도 잘 맞는다. 앞으로 지금보다 더 많은 프로젝트가 플렉스 기반으로 발주될 것이며, 플

렉스 학습을 시작한다면 여러분에게 많은 도움이 될 것이다.

『Adobe FLEX 4 실전 트레이닝 북』은 미국 어도비의 공식 교육 교재로서 플렉스를 이용한 애플

리케이션을 실제로 만들어 보는 순서로 구성돼 있다. 플렉스 입문서를 한 번 보고 난 후 학습하기

에 좋은 구성이며, 플렉스 프로젝트를 경험하지 못한 엔지니어에게 많은 도움이 될 것이다.

이 책을 통해 플렉스의 다양하고 다이내믹한 환경을 경험하기 바란다.

항상 내 선택을 믿고 응원해 주시는 수지 어머님과 하늘에 계신 아버님, 그리고 예쁜 사랑을 할

수 있게 응원해 주시는 미국에 계신 아버님, 어머님에게 감사드린다.

올해 초등학교에 입학하는 조카 김태원군도 즐거운 학교생활을 하길 바라고, 옆에서 힘이 돼 주

는 우리 가족들 모두에게 감사드린다.

마지막으로 언제나 함께할 나의 사랑스런 아내, 원영에게도 감사한다.

- 정선우, 이원영

•옮긴이 글•

xvi

•지은이 소개•

마이클 래브리올라(Michael Labriola)

마이클 래브리올라는 Digital Primates의 공동 설립자이자 선임 컨설턴트다. 1995년부터 인터넷

애플리케이션을 개발해 왔으며, Flex 1.0 베타 프로그램부터 플렉스와 함께해왔다. 마이클은 어도

비의 공식 강사이자, 커뮤니티 전문가이고, 플렉스 개발자 챔피언으로서 세계 10대 브랜드 가운데

3개사를 자문했으며, 플렉스와 AIR에 관한 국제적인 강연자이기도 하다.

마이클은 Digital Primates에서 컨설턴트로 재직 중이며 클라이언트 개발 팀에 새로운 기술을 자

문하는 일을 담당하며, 여가 시간에는 기술에서 벗어나 와인과 음식을 즐긴다.

제프 태퍼(Jeff Tapper)

제프 태퍼는 Digital Primates의 공동 설립자이자 선임 컨설턴트다. 1995년부터 Major League

Baseball, ESPN, Morgan Stanley, Conde Nast, IBM, Dow Jones, American Express, Verizon

등과 같은 무수히 많은 고객의 인터넷 기반 애플리케이션을 개발했고, Flex 1.0의 초창기부터 플렉

스 애플리케이션을 개발해왔다. 제프는 플랙스, AIR, 플래시, 콜드퓨전 개발에 관한 Adobe의 모

든 과정을 가르칠 수 있는 자격을 인증받았으며, Adobe Development Conferences와 사용자 그

룹의 단골 강연자이기도 하다. Digital Primates는 RIA 개발에 관한 전문적인 가이드와 자문을

제공한다.

매튜 볼스(Matthew Boles)

매튜 볼스는 Adobe Technical Marketing 그룹의 기술 교육 전문가이며, Flex 1.0이 출시될 때부

터 플렉스 교육 과정을 개발하고 가르쳐왔다. 매튜는 웹 개발, 컴퓨터 네트워킹, 강의와 같은 다양

한 이력을 지녔다. 아울러 본 책의 이전 버전인 Flex 3의 공동 저자이기도 하며 어도비의 공식 교육

과정을 개발하는 데도 기여했다.

xvii

•감사의 글•

이 프로젝트에 노력과 열정으로 헌신해준 제프, 매튜, 시므온에게 고마움을 전한다. FlexGrocer

애플리케이션을 공짜로 디자인해준 기거에게도 감사드린다. 또 로빈의 인내와 성실함, 그리고

Peachpit에서 우리의 작업을 도와준 낸시와 빅터에게 매우 감사하다. 이 책의 집필이 조금 길어졌

을 때 많이 도와준 Digital Primates 팀의 모든 팀원에게도 감사하다. 이 기술을 계속 배울 수 있게

재미있는 작업과 영감을 준 나의 고객들에게도 감사하다. 또한 나를 이 세계로 이끌어준 매튜에게

늘 감사하고, 마지막으로 내가 이 모든 것을 이뤄내야 할 이유인 나의 부인 로라에게 감사하다.

- 마이클 래브리올라

마이클, 매튜, 시므온, 로빈 그리고 편집자들에게 이 책을 만들어준 그간의 노고에 감사드린다. 우

리 애플리케이션을 디자인해준 크리스 기거에게 감사한다(미안해요 크리스! 당신이 훌륭하게 디

자인해준 걸 다 구현하지는 못했어요). 특히 이 모든 것을 가능하게 해준, 어도비 팀의 매트 코틴,

디파 수브라마니엄에게 감사하다. 그리고 원고를 읽기 쉽게 다듬느라 애써 준 Adobe Press의 편집

자에게도 감사드린다.

- 제프 태퍼

훌륭한 책을 만들어준 제프, 마이클, 로빈, 시므온에게 감사한다.

- 매튜 볼스

xviii

•추천사•

10년전 매크로미디어에서는 미래의 애플리케이션을 설명하기 위해 “RIA(Rich Internet

Application)"라는 신조어를 만들어냈다. RIA는 상당한 양의 데이터와 비즈니스 로직이 서버에

있거나 클라우드화되고 데스크톱의 컴퓨팅 능력을 활용해 훌륭한 사용자 경험을 제공한다. 플렉

스는 매크로미디어가 2004에 출시함과 동시에 RIA 환경의 중심이 됐고, 2006에 어도비가 매크로

미디어를 인수하면서 어도비의 이름으로 후속 버전이 출시됐다. 플렉스 4가 출시되면서 어도비는

RIA의 강력함을 더 많은 개발자들에게 가져다 주었다. 이 책은 이 같은 강력함을 활용하는 법을

익히기에 대단히 좋은 책이다.

어도비 플렉스는 몇 가지 요소로 구성된다. 플렉스는 애플리케이션을 구성하기 위해 마크업 언

어인 MXML을 사용하고, 강력한 프로그래밍을 제공하기 위해 액션스크립트 3.0(ECMAScript 4

로 구현)을 사용한다. UI까지도 CSS를 이용해 커스터마이즈할 수 있다. 또 플렉스가 사용하는 언

어를 배우는 것 말고도 강력한 컴포넌트 라이브러리와 플렉스를 애플리케이션에 적용하는 방법

을 배울 것이다. 플렉스는 레이아웃 컨테이너, 폼 컨트롤, 포매터와 밸리데이터, 리치 텍스트 라이

브러리, 효과와 애니메이션 라이브러리 외에도 많은 기능을 제공해서 강력한 UI를 빠른 시간에

만들 수 있게 해준다. 플렉스에서 라이브러리로 제공하지 않는 기능을 구현하려면 제공하는 라이

브러리를 확장해 여러분이 직접 만들 수도 있다.

플렉스 4에서는 Spark라는 차세대 플렉스 컴포넌트 프레임워크를 도입하기 위해 많은 시간을

들였다. 기존 플렉스 아키텍처를 기반으로 만들어진 Spark 컴포넌트는 플렉스 애플리케이션을 개

발할 때 개발자와 디자이너의 협업을 위한 매우 인상적인 메커니즘을 제공한다. Spark 컴포넌트는

모델-뷰-컨트롤러(MVC, Model-View-Controller) 구성을 촉진하고, 시각적인 측면과 동작을 깔

끔하게 분리하기 위한 기능을 제공해 플렉스 애플리케이션의 개발과 유지보수를 훨씬 쉽게 만들

어준다. 또한 서로 다른 도구를 사용하는 디자이너와 개발자의 더 나은 협업을 가능하게 해준다.

인터페이스를 멋지게 만드는 것만으로는 충분하지 않다. 애플리케이션은 기능해야 하고, 데이터

를 처리해야 할지도 모른다. 플렉스가 백엔드 데이터 소스를 어떤 다양한 방법으로 XML에서부터

HTTP를 거쳐 SOAP 웹 서비스, 그리고 AMF(Action Message Format)라는 효율적인 원격 프로

xix

토콜까지 연결하는지 알게 될 것이다. 또 플렉스는 대용량 데이터, 특히 많은 사용자가 공유하는

데이터를 쉽게 관리하게 해주는 라이브사이클 데이터 서비스(LiveCycle Data Services)와의 긴밀

한 통합을 제공한다.

플렉스의 컨트롤은 모두 일반 텍스트 편집기로 작성해서 오픈소스 Flex SDK상에서 돌려볼 수

도 있지만 환상적인 통합 개발 툴인 이클립스를 기반으로 만들어진 어도비 플래시 빌더 4를 이용

하면 다양한 기능을 더 쉽고 빠르게 만들어 테스트할 수 있다. 그리고 어도비에서는 플렉스 4의

일부로 새로운 툴인 어도비 플래시 카탈리스트(Adobe Flash Catalyst)를 출시했는데, 이것은 디

자이너들이 훌륭한 사용자 경험을 만들 때 개발자와 쉽게 협업할 수 있게 돕는다. 또한 개발 단계

의 생산성을 높이기 위한 많은 서드파티 도구나 라이브러리, 확장 컴포넌트(이 책의 저자들도 몇

개 만들었다)도 있다.

마지막으로 단지 플렉스의 구성요소를 아는 것만으로는 충분하지 않다. 그것들을 어떻게 잘 활

용하는지 알아야 한다. 이 책은 저자의 노하우를 토대로 플렉스의 기초와 개념, 그리고 베스트 프

랙티스까지 소개한다. 이 책을 읽고 나면 여러분의 애플리케이션을 더 나은 모습으로, 많은 것을

빠르게 만들 수 있을 것이다.

영화에 나오는 애플리케이션이 비현실적으로 보이는가? 플렉스 4와 관련 도구의 강력한 기능을

활용하면 그러한 애플리케이션도 그리 현실과 동떨어진 것이 아니다. 우리 어도비 사람들은 여러

분이 그러한 애플리케이션을 선보일 날을 고대한다.

- 매트 코틴, 어도비 시스템즈 선임 제품 관리자

xx

들어가며

2002년 3월, 매크로미디어는 RIA(Rich Internet Application)라는 새로운 단어를 만들었다. 그 당시

에는 다소 실현 불가능하다고 생각했지만, 오늘날 RIA는 현실이 되었다.

2004년에 매크로미디어는 플렉스를 소개하고 개발자들이 언제 어디서나 플래시 플랫폼에서 동

작하는 애플리케이션을 구현할 수 있게 했다. 이러한 애플리케이션들은 플렉스를 통해 개선된 디

자인과 뛰어난 사용성, 이식성을 확보하고 급격하게 변화하는 사용자 경험을 사용자에게 전해줬

다. 이것은 창의성과 협업에 초점을 둔 차세대 인터넷 애플리케이션인 Web 2.0 개념의 발판으로

작용했다.

그 후로 매크로미디어(현재 어도비)는 플렉스의 1.5, 2, 3, 4 버전을 출시했다. 지속적으로 버전이

올라가면서 풍부하고 사용자의 주목을 끄는 직관적인 애플리케이션을 만드는 것이 쉬워졌으며,

사용자들의 웹 애플리케이션에 대한 기대치 또한 상승시켰다. 수많은 기관들이 플렉스가 주는 이

점을 깨닫고, 플래시 플랫폼으로 구현되는 애플리케이션을 성공적으로 만들어냈다.

하지만 플렉스가 초창기부터 성공을 이뤘음에도 플렉스 1과 1.5는 시장을 장악하지 못했다. 비

싼 가격과 통합 개발 환경의 부재, 배포 가능성의 제약 등으로 결국 초창기 버전의 플렉스는 세련

된 기술을 구사하는 개발자들과 그들의 개발 프로세스, 또는 복잡한 애플리케이션을 대상으로 하

는 제품으로 치부됐다. 그러나 새로운 버전의 플렉스 계열 제품이 출시되면서 상황은 급변했다.

2006년에 플렉스 2가 출시되면서 무료 SDK(So¥ware Development Kit)를 제공해 더 많은 사

람들이 플렉스 개발을 할 수 있게 됐다. 플렉스 3가 오픈소스로 바뀌고 플렉스 빌더(Flex Builder)

의 무료 버전이 학생들에게 제공되면서 개발자들 사이에서 플렉스 개발이 더 많이 이뤄졌다. 플렉

스 4가 출시되고 나서는 풍부하고 효율적인 최첨단 애플리케이션을 만들기가 훨씬 쉬워졌다. 플렉

스 4의 여러 개선 사항 중 상당 부분은 디자이너와 개발자의 작업흐름을 효율화하여 많은 플렉스

애플리케이션에 직관적이고 매력적인 디자인을 적용하기가 대단히 쉬워졌다.

플렉스를 시작하는 것은 매우 쉽다. 플렉스 자체는 두 가지 언어로 구성돼 있는데, 바로 XML

기반의 마크업 언어인 MXML과 플래시 플레이어 언어인 액션스크립트로 구성돼 있다. MXML

xxi

태그는 배우기 쉽고(플래시 빌더가 많은 부분을 자동으로 만들어준다) 액션스크립트는 익히는

데 조금 시간이 걸리지만 프로그래밍 경험이 있는 개발자라면 쉽게 배울 수 있다. 플렉스 개발은

MXML과 액션스크립트 외에도 더 많은 것을 포함하고 있다.

성공적인 개발자가 되려면 다음과 같은 여러 개념들을 이해할 수 있어야 한다.

▶ 플렉스 애플리케이션은 어떻게 만들어야 하는가? (혹은 어떻게 만들면 안 되는가?)

▶ MXML과 액션스크립트 간의 관계와 이것들을 언제 사용해야 하는가?

▶ 플렉스 애플리케이션에서는 데이터를 어떻게 불러오는가?

▶ 플렉스 컴포넌트를 사용하는 방법과 직접 만드는 방법은 무엇인가?

▶ 작성한 코드가 성능 측면에서는 어떤 특징을 갖고 있는가?

▶ 확장성 있고 유지보수가 쉬우며, 재사용이 가능하게끔 코드를 작성하는 가장 좋은 방법은?

이 책을 읽고 나면 이러한 기술을 익힐 수 있다. 이 책의 저자들은 그동안 힘겹게 얻은 전문 지식

과 요령을 토대로 플렉스 개발을 시작하는 데 도움될 몇 개의 실습 과제를 만들었다. 기초부터 시

작해서 점진적으로 추가 기능과 노하우를 살펴보면서 재미있는 RIA의 세계로 여러분을 안내할

것이다.

플렉스는 강력하면서도 기능이 풍부하고, 재미있고, 믿을 수 없을 정도로 중독성이 있다. 이 책

은 차세대 애플리케이션 개발로 나아가는 데 가장 이상적인 지침서다.

이 책은 유명한 『Adobe Flex 3: 실전 트레이닝 북』의 업데이트 버전이다. 플렉스를 처음 접하는

독자뿐 아니라 기존 책을 접한 독자도 이 책을 읽을 만한 가치가 있도록 내용을 구성했다. 지난 책

이 나온 후로 플렉스 SDK는 완전히 새로 구현됐다. 주요 개선 사항은 다음과 같다.

▶ 대폭 향상된 플렉스 애플리케이션의 런타임 효율성

▶ 불필요한 코드를 제거해서 더 작아진 새로운 컴포넌트 모델

▶ 매우 향상된 디자이너와 개발자의 협업 기능

▶ 기타 등등

지금은 RIA 개발자가 되기에 아주 좋은 시기다. 플렉스 개발을 시작하는 데 이 책이 많은 도움

이 되길 바란다.

xxii

미리 알아둬야 할 사항

이 책에서 최대한 많은 것을 얻으려면 적어도 웹 관련 용어를 이해해야 한다. 이 책은 플렉스 이외

의 것을 설명하는 데는 지면을 할애하지 않았으므로 웹에 관한 지식이 많을수록 좋다. 이 책에서

는 여러분이 프로그래밍 언어에 익숙하며 자바, .NET, PHP, 콜드퓨전(ColdFusion)과 같은 서버 측

언어를 써봤다고 가정한다. 서버 측 언어에 대한 지식이 꼭 필요한 것은 아니지만 이 책에서는 서

버 측 웹 프로그램이 자주 등장한다. 이 책은 프로그래밍 기초나 OOP를 소개하는 책이 아니다.

OOP에 대한 경험이 꼭 필요하진 않지만 프로그래밍을 해본 경험이 전혀 없다면 이 책에서 다루

는 내용이 다소 난해하게 느껴질 수 있다.

개요

곧 알게 되겠지만 이 책에는 실무에서 사용하는 예제가 많이 담겨 있다. 일부 절에는 실무 예제가

나와 있지 않지만 가능한 한 많은 내용을 전해주려고 했다. 각 장에 포함된 실습은 여러분이 툴과

인터페이스에 빨리 익숙해져서 프로젝트를 능숙하게 진행하게 하는 데 주안점을 뒀다.

이 책의 전체 과정을 학습하는 데는 28~35시간 정도 걸릴 것이고, 각 장에서 다루는 내용은 다

음과 같다.

1장: 리치 인터넷 애플리케이션의 이해

2장: 시작하기

3장: 인터페이스 레이아웃 구성

4장: 간단한 컨트롤 사용하기

5장: 이벤트 처리

6장: 원격 XML 데이터 사용하기

7장: 클래스 만들기

8장: 데이터 바인딩과 컬렉션

9장: 애플리케이션을 컴포넌트로 나누기

10장: DataGroup과 List 사용하기

11장: 이벤트 생성과 디스패치

xxiii

12장: DataGrid와 Item Renderer 사용하기

13장: 드래그앤드롭 활용

14장: 내비게이션 구현

15장: 포매터와 밸리데이터 사용하기

16장: 플렉스 애플리케이션 커스터마이즈하기

17장: 스킨을 이용한 플렉스 애플리케이션 커스터마이즈

18장: 사용자 정의 액션스크립트 컴포넌트 만들기

대상 독자

이 책의 내용은 모두 플랫폼을 지원하는 모든 플래시 빌더 사용자를 대상으로 한다.

예제 프로그램

이 책은 플렉스 4로 애플리케이션을 완성하기까지의 전 단계를 보여주는 종합적인 단계별 내용으

로 구성돼 있다. 예제 애플리케이션은 온라인 식료품점으로, 데이터와 이미지를 화면에 보여주며,

주문을 완성해 서버에 보낸다.

책의 마지막 부분에 이를 때쯤에는 플렉스 애플리케이션이 완성돼 있을 것이다. 여러분은 플렉

스의 기초적인 사항과 플래시 빌더가 애플리케이션 개발에 어떤 식으로 도움을 주는가를 먼저 배

운다. 초반에는 애플리케이션 레이아웃을 구성하기 위해 주로 디자인 모드를 사용하지만 학습을

진행해 나가면서 플렉스에서 사용하는 언어에 익숙해지면 자유롭고 유연하게 직접 코드를 작성

할 수 있는 소스 모드에서 더 자주 머물 것이다. 책을 마칠 때쯤이면 플렉스 언어를 능숙하게 구사

할 수 있을 것이며 플래시 빌더 없이도 오픈소스인 SDK와 커맨드 라인 컴파일러를 사용해 문제

없이 애플리케이션을 구축할 수 있을 것이다.

오탈자

이 책에서도 무결점 애플리케이션을 만들기 위해 최대한 노력했건만 종종 독자들이 문제를 발견

하는 경우가 있다. 이 책의 오탈자는 www.§exgrocer.com에 올리겠다.

xxiv

이 책의 구성요소

실습 형식으로 구성된 이 책에서는 핵심 사항을 간략히 소개하는 것을 시작으로 새로운 기능을

자세히 소개해 나간다. 학습 목적과 예상 학습 시간은 각 실습을 시작하는 맨 앞부분에 기술돼 있

고 각 장의 프로젝트에서는 해당 기술의 주요 내용을 실습하는 형식으로 돼 있다. 모든 실습은 이

전 실습의 개념과 소스를 기반으로 진행한다.

팁 작업을 수행하는 방법과 현재 학습 중인 기술을 적용할 때 고려할 점

알아두세요 지식을 넓히기 위한 추가적인 배경 정보와 솜씨를 늘리기 위한 기법?

조심하세요 에러나 문제 또는 예상치 못한 결과에 직면할 수 있는 상황을 경고하는 정보!

볼드체 : 볼드체로 나타낸 단어는 실습을 진행하는 동안 직접 입력해야 하는 내용이다.

볼드체 코드 : 코드 블록에 나타나는 볼드체 코드는 예제의 특정 단계에서 변경돼야 할 부분이다.

<mx:HorizontalList dataProvider="{dp}"

labelFunction="multiDisplay"

columnWidth="130"

width="850"/>

본문상의 코드 : 코드와 키워드는 쉽게 구분할 수 있게 다른 본문과 약간 다르게 표시했다.

�코드 블록 : 책 안에서 액션스크립트, XML, HTML 코드를 쉽게 구분할 수 있게 다른 코드 부분

과는 다르게 특별한 폰트로 표시했다. 한 줄의 코드가 페이지 여백보다 길어서 다음 줄로 넘어갈

경우 잘려진 줄 앞쪽에 화살표()를 표시했고 계속 이어지는 줄에는 들여쓰기를 적용했다. 예를

들면 다음과 같다.

public function Product (_catID:Number, _prodName:String,

_unitID:Number,_cost:Number, _listPrice:Number,

_description:String,_isOrganic:Boolean,_isLowFat:Boolean,

_imageName:String)

xxv

이탤릭체 : 이탤릭체로 나타나는 단어는 강조나 새로운 단어다.

아울러 이탤릭체는 상황에 따라 내용이 바뀌는 저장소(드라이브)를 나타낼 때도 사용된다. 예를

들면 driveroot:/§ex4tfs/§exgrocer에서 drive는 운영체제에 따라 달라진다.

�메뉴 명령어와 키보드 단축키� : 플래시 빌더에서 한 작업을 수행하는 방법은 여러 가지가 있다. 각

실습마다 다양한 옵션이 나온다. Menu 명령어는 [메뉴 > 명령어 > 하위명령어]와 같이 메뉴 이름과

명령어 사이에 >를 쓴다. 키보드 단축키는 키 이름 사이에 더하기 기호로 넣었으며, 해당 키를 동시

에 누르면 된다. 예를 들어 Shift+Tab 메뉴는 Shi¥ 키와 Tab 키를 동시에 누르는 것을 의미한다.

�소스코드�: 이 책에서 제공하는 소스코드는 각 실습에 필요한 모든 미디어 파일, 시작 파일, 완성된

프로젝트가 담겨 있다. 이 파일들은 각각 start, complete라는 디렉터리에 위치한다. 1장, ‘리치 인

터넷 애플리케이션의 이해’에는 실습이 없다. 어떤 시점에서 원래 소스로 되돌아가야 할 필요가 있

으면 언제든지 FlexGrocer 프로젝트를 처음 상태로 돌릴 수 있다. 일부 실습에는 intermediate 디

렉터리가 있는데, 이 디렉터리에는 예제의 다양한 단계들을 수행한 파일이 들어 있다. 또 일부 실

습은 FlexGrocer 프로젝트에 직접적인 영향을 주지 않고 특정 예제를 설명하는 것을 목적으로 하

는 소규모 프로젝트가 포함돼 있다.

예제의 각 단계를 올바로 수행하고 있는지 검증하고 싶을 때는 언제든지 소스코드에 들어 있

는 해당 실습 파일을 확인하면 된다. 예를 들어, 4장의 내용과 관련된 파일은 Lesson04 폴더의

FlexGrocer.fxp 프로젝트에 들어 있다.

앞으로 다룰 각 장의 디렉터리 구조는 다음과 같다.

디렉터리 구조

xxvi

어도비 실전 트레이닝 북

Adobe Training from the Source와 Adobe Advanced Training from the Source 시리즈는 어도비

사와 함께 개발했으며, 제품 지원 팀의 감수를 거쳤다. Training from the Source 시리즈는 여러

분에게 탄탄한 프로그램의 기초를 가르치기 위해 실무 위주로 설명하고 있으므로 적극적으로 학

습에 임하는 분들에게 매우 이상적이다. 또한 실습을 통해 배우고자 하는 분들에게 이 책은 매우

적합하다. 각 Training from the Source 타이틀에는 Adobe 제품에 관한 몇 시간 분량의 교육 과

정이 담겨 있으며, 독자에게 세련되고 전문적인 프로젝트를 구축하는 데 필요한 기술을 가르친다.

각 교재에서 제공하는 소스코드에는 실습에 사용되는 파일과 완성된 프로젝트 파일이 들어 있다.

이 책의 내용

이 책에서는 다음과 같은 실습을 통해 플렉스 애플리케이션을 만들고 유지보수하는 기술들을 향

상시킬 수 있다.

이 책을 마칠 때쯤이면 여러분은 다음과 같은 일을 할 수 있다.

▶ 플래시 빌더를 이용한 플렉스 애플리케이션 제작

▶ MXML과 액션스크립트 3.0 간의 상호작용 이해

▶ 복잡한 데이터셋 처리

▶ XML을 이용한 데이터 로드

▶ 이벤트 처리를 통한 애플리케이션의 상호작용

▶ 필요한 이벤트 클래스 작성

▶ MXML이나 액션스크립트 3.0을 이용한 컴포넌트 제작

▶ 애플리케이션의 외관과 느낌을 커스터마이즈하기 위한 스타일과 스킨 적용

▶ 기타 등등

xxvii

시스템 최소 사양

윈도우

▶ 2GHz 이상의 프로세서

▶ 1GB 이상의 메모리(2GB 권장)

▶ 서비스팩 3를 포함한 마이크로소프트 윈도우 XP, 윈도우 비스타 얼티밋이나 엔터프라이

즈(32나 64비트), 윈도우 서버 2008(32비트)이나 윈도우 7(32비트나 64비트)

▶ 1GB 이상의 하드디스크 공간

▶ 자바 가상 머신(32비트): IBM JRE 1.5, Sun JRE 1.5, IBM JRE 1.6, Sun JRE 1.6

▶ 1024×768 해상도(1280×800 권장)

▶ 플래시 플레이어 10이나 이후 버전

매킨토시

▶ 맥 기반의 인텔 프로세서

▶ OS X 10.5.6(레오파드) 또는 10.6(스노우 레오파드)

▶ 1GB 이상의 메모리(2GB 권장)

▶ 1GB 이상의 하드디스크 공간

▶ 자바 가상 머신(32비트): JRE 1.5 또는 1.6

▶ 1024×768 해상도(1280×800 권장)

▶ 플래시 플레이어 10 또는 이후 버전

플렉스 제품들은 매우 재미있고, 우리는 이 제품들이 만들어낼 애플리케이션들을 보고 깜짝 놀

라길 기대하고 있다. 플렉스 기초를 탄탄하게 다졌다면 빠르게 기술을 확장할 수 있다. 플렉스는

프로그래밍 경험이 있는 이에게는 그다지 어렵지 않으며, 시작 단계에서 약간의 노력만 기울이면

실습 내용을 완벽하게 숙지하고, 곧 여러분의 애플리케이션과 사이트를 만들 수 있을 것이다.

xxviii

추가 정보

플렉스 도움말 커뮤니티

플렉스 도움말 커뮤니티에는 여러분에게 가장 유용하고 관련성 있는 최신 플렉스 정보를 제공하

기 위해 활동적인 플렉스 사용자와 어도비 제품 팀의 구성원, 저자, 전문가들이 활동하고 있다. 여

러분이 코드 예제나 궁금한 사항에 대한 해결책을 찾거나 소프트웨어와 관련된 질문이나 유용한

팁, 개발 비법을 공유하고 싶다면 도움말 커뮤니티를 방문해보기 바란다. 검색 결과는 어도비에서

제공되는 콘텐츠뿐 아니라 커뮤니티 콘텐츠도 보여준다.

어도비 커뮤니티의 도움으로 여러분은 다음과 같은 일을 할 수 있다.

▶ 검색 시 필터로 어도비 콘텐츠, 커뮤니티 콘텐츠, 액션스크립트 언어 레퍼런스, 코드 예제

로 결과를 제한할 수 있다.

▶ 어도비 도움말과 액션스크립트 언어 레퍼런스를 내려 받아 오프라인에서 볼 수 있다.

▶ 평점과 의견을 통해 가장 가치 있는 최상의 콘텐츠를 볼 수 있다.

▶ 전문 지식을 다른 사람들과 공유하고 어도비 제품 사용에 관한 전문가의 의견을 들을 수

있다.

AIR 애플리케이션 도움말 커뮤니티

플렉스 4나 다른 어도비 CS5 제품을 설치했다면 도움말 커뮤니티가 이미 설치돼 있을 것이다. 이

애플리케이션은 브라우저를 쓸 때와 마찬가지로 어도비와 커뮤니티 콘텐츠를 검색하고, 문서에 점

수를 매기고, 의견을 달 수 있다. 그리고 어도비 도움말과 레퍼런스 콘텐츠를 내려 받아 오프라인

에서도 활용할 수 있다. 또 신규 업데이트 내역을 구독할 수 있어 항상 어도비 제품에 대한 최신 콘

텐츠를 확인할 수 있다. 애플리케이션은 http://www.adobe.com/support/chc/index.html에서 내

려 받을 수 있다.

xxix

커뮤니티 참여

어도비 콘텐츠는 커뮤니티 피드백과 기고를 기반으로 업데이트된다. 도움말 커뮤니티에 여러모로

기여하기 위해 콘텐츠를 기고할 수도 있다. 콘텐츠나 포럼에 의견을 개진하거나 커뮤니티 출판 시

스템으로 자신만의 콘텐츠를 출판할 수도 있다. Cookbook 레시피에도 기여할 수 있으며, 기여 방

법은 http://www.adobe.com/community/publishing/download.html에서 확인할 수 있다.

커뮤니티 검토 및 보상

150명 이상의 커뮤니티 전문가들이 의견을 올리고 도움말과 기고에 대해 참여자에게 보상을 한

다. 참여자는 점수를 획득하는데, 오타나 어색한 문구에는 5점을 주고, 튜토리얼, 예제, 해설서

의 실습 방법, 또는 개발자 센터 관련 기사처럼 더 중요한 기술문서를 기고할 때는 최대 200점까

지 점수를 부여한다. 사용자의 누적 점수는 Adobe의 프로필 페이지에 게시되고 가장 훌륭한 참

여자는 도움말과 지원 페이지의 리더보드에 참가하게 된다. 더 자세한 사항은 www.adobe.com/

community/publishing/community_help.html를 참고한다.

자주 묻는 질문

도움말 커뮤니티에 관한 FAQ는 http://community.adobe.com/help/pro®le/faq.html을 확인한다.

�어도비 플렉스와 플래시 빌더 도움말과 지원 www.adobe.com/support/§ex/에서 adobe.com의 도

움말과 지원 콘텐츠를 확인할 수 있다.

어도비 TV http://tv.adobe.com에서는 어도비 제품에 대해 제품 설명을 비롯한 전문적인 내용과

영감을 불러일으키는 동영상 콘텐츠를 제공한다.

어도비 개발자 센터 www.adobe.com/devnet에서는 어도비 개발자 제품과 기술에 관한 기술 문

서, 코드 예제, 노하우 동영상 콘텐츠를 제공한다.

Cookbooks http://cookbooks.adobe.com/home에서는 플렉스, 액션스크립트, AIR, 다른 개발

제품 등의 코드 예제를 찾아볼 수 있다.

xxx

교육자들을 위한 자원 www.adobe.com/education에서는 어도비 소프트웨어 교육을 위한 통합적

인 접근법을 사용하는 세 가지 무료 교육과정을 제공하고, 이러한 과정들은 어도비 자격 인증 시

험을 준비하는 데 활용할 수 있다.

또한 실용적인 링크들도 확인해보자.

어도비 포럼 http://forums.adobe.com에서는 어도비 제품에 대한 사용자 간의 논의나 질의응답

을 할 수 있다.

어도비 마켓플레이스 & 거래소 www.adobe.com/cfusion/exchange에서는 Adobe 제품들을 보완

하거나 확장하기 위해 도구, 서비스, 확장 기능, 코드 예제를 찾을 수 있다.

어도비 플렉스 제품 홈페이지 www.adobe.com/products/§ex

어도비 연구소 http://labs.adobe.com에서는 최첨단 기술을 미리 체험해보고 이러한 기술을 만

든 어도비 개발 팀과 여러분과 같은 다른 커뮤니티 구성원들이 사용할 수 있는 포럼을 열람할 수

있다.

어도비 자격증

어도비 자격 인증 프로그램은 어도비 고객과 강사들이 제품 숙련도를 향상시키기 위해 만들어졌

다. 자격에는 네 단계가 있다.

▶ Adobe Certi®ed Associate (ACA)

▶ Adobe Certi®ed Expert (ACE)

▶ Adobe Certi®ed Instructor (ACI)

▶ Adobe Authorized Trainer (AATC)

ACA(Adobe Certi®ed Associate)는 초보적인 수준의 기술을 지닌 사용자가 다양한 형태의 디지

털 미디어를 이용해 효율적인 커뮤니케이션을 계획, 설계, 유지하는 것을 인증하는 자격증이다.

Adobe Certi®ed Expert 프로그램은 전문적인 사용자가 그들의 자격을 업그레이드하는 수단이

다. 연봉 인상, 구직, 전문지식 향상의 매개체로 Adobe certi®cation을 활용할 수 있다

여러분이 ACE 수준의 강사라면 Adobe Certi®ed Instructor 프로그램은 여러분의 기술을 다

음 단계로 발전시키고 어도비에서 제공되는 폭넓은 자원을 활용할 수 있다.

xxxi

어도비 인증 시험 센터는 Adobe Certi®ed Instructors가 주도하는 코스와 제품 교육을 제공한

다. AATC 관련 내용은 http://partners.adobe.com에서 확인할 수 있다.

어도비 인증 프로그램에 관한 정보는 www.adobe.com/support/certi®cation/main.html를 참

고한다.

이 책의 소스코드

위키북스 홈페이지(www.wikibook.co.kr)에 있는 『Adobe Flex 4 실전 트레이닝 북』 표지를 클릭

하고, ‘소스코드’ 메뉴에서 파일을 내려 받으면 된다.

실습 파일 설치에 대한 자세한 내용은 474쪽 부록 A를 참고하기 바란다.

LESS

ON

1 이 장에서 배울 내용

▶ 페이지 기반 설계의 대안 탐구

▶ RIA(Rich Internet Application)의 장점

▶ RIA 관련 기술 비교

실습 예상 시간

▶ 약 30분

01리치 인터넷 애플리케이션의 이해

최근 50년간 컴퓨터는 비즈니스 환경에서 중요한 역할을 담당했다. 이 기간 동안 클라이언트와 서

버의 역할은 지속적으로 발전했다. 기업과 직원들이 자신의 업무를 컴퓨터에 위임하는 게 보편화

되면서 전산화된 업무용 애플리케이션의 외관, 느낌, 설계 역시 기업과 직원들의 요구에 맞게 바뀌

었다. 업무에 빠르고 가벼운 리치 인터넷 애플리케이션이 필요해지면서 오늘날에도 애플리케이션

의 발전은 계속되고 있다. 이번 실습에서는 애플리케이션 발전에 대해 배우고 RIA 구축이 필요한

비즈니스 요구사항을 살펴보겠다.

이 책에서는 플렉스를 사용해서 위와 같은 FlexGrocer 애플리케이션을 구현할 것이다.

2 l Adobe FLEX 4 실전 트레이닝 북

컴퓨터 애플리케이션의 진화

초창기 전산화된 비즈니스 애플리케이션에서 클라이언트의 역할은 데이터를 입력하거나 서버에

서 받은 정보를 보여주는 정도였으며 모든 데이터 처리는 메인 프레임에서 이뤄졌다. 이런 방식은

높은 처리 비용으로 직결됐고 엔터프라이즈 전체에 클라이언트를 공급하는 비용 역시 감당할 수

없어 모든 작업을 한 곳에서 통합 처리하고 더미 터미널을 통해 사용자와 상호작용했다.

메모리와 처리 능력에 드는 비용이 낮아지면서 더미 터미널은 마이크로 컴퓨터(또는 개인용 컴

퓨터)로 대체됐다. 처리 능력이 향상되고 워드프로세서와 스프레드시트와 같은 많은 데스크톱 애

플리케이션이 독립적인 애플리케이션으로 실행되면서 서버 또한 불필요해졌다. 마이크로 컴퓨터

를 사용하는 기관에서 겪은 문제점 중 하나는 데이터가 중앙 집중화되지 않는다는 것이었다. 메인

프레임을 사용하던 시대에는 모든 데이터를 중앙 집중화해서 처리했지만 마이크로 컴퓨터 시대에

는 데이터가 분산되면서 기업 내부의 업무 규칙을 중앙 집중화해서 데이터를 동기화해야 하는 문

제가 생겨났다.

이러한 문제를 해결하기 위해 일부 벤더는 마이크로 컴퓨터의 장점과 메인 프레임의 장점을 결

합한 플랫폼을 출시했고, 이것은 클라이언트/서버 시스템의 출현으로 이어졌다. 이 플랫폼은 비즈

니스 로직과 데이터를 중앙 집중화된 장소에 저장하고 접근 가능하게 함으로써 최종 사용자에게

마이크로 컴퓨터의 용이성과 강력함을 충족시켜 문제를 해결했다. 하지만 클라이언트/서버 시스

템이 도입되면서 배포가 새로운 문제로 부상했다. 클라이언트 애플리케이션을 변경해야 할 때마

다 IT 부서는 각 데스크톱 소프트웨어를 수동으로 다시 설치하고 업그레이드해야 했다. 대기업에

는 최종 사용자 데스크톱의 소프트웨어 버전을 최신으로 유지보수하는 일을 주로 담당하는 IT 직

원이 필요해졌다.

1990년대에 폭발적인 인터넷 성장과 함께 새로운 모델의 비즈니스 애플리케이션이 등장했다. 이

모델에서는 웹 브라우저가 HTML을 보여주고 동적으로 페이지를 구성하거나 애플리케이션 서버

에 요청을 전송해주는 가벼운 클라이언트 역할을 했다. 이러한 구조를 일컬어 페이지 기반 아키텍

처라고 한다. 이 모델은 클라이언트/서버 시스템에서 문제였던 배포 문제를 성공적으로 해결했다.

즉, 클라이언트는 필요할 때마다 서버에서 애플리케이션을 다운로드하기 때문에 하나의 중앙 집

중화된 장소에서만 데이터를 업데이트하면 전체 사용자에게 자동으로 배포할 수 있게 됐다. 이 모

델은 많은 애플리케이션에 성공적으로 적용됐지만 이것 역시 심각한 약점과 한계가 있었다. 실제

로 인터넷 애플리케이션은 모든 프로세스가 서버에 중앙 집중화되어 있고 클라이언트는 데이터

01 리치 인터넷 애플리케이션의 이해 l 3

를 보여주고 사용자는 피드백만 받는 메인 프레임 애플리케이션과 매우 흡사했다. 이런 환경에서

가장 큰 문제는 사용자 인터페이스(UI, User Interface)였다. 최종 사용자가 이전에 십 년간 써온

많은 편의 기능들이 사라지고 UI는 HTML에서 제공하는 기능으로만 국한됐다. 예를 들면 데스

크톱 소프트웨어뿐 아니라 클라이언트/서버 애플리케이션에서도 드래그앤드롭 기능이 자주 사

용되지만 순수 HTML/DTHML만으로 드래그앤드롭을 구현하려면 너무 복잡하고 브라우저의

DHTML 기능도 부족해서 HTML 애플리케이션에서는 드래그앤드롭 기능이 거의 사용되지 않

았다.

대부분의 경우 구현된 클라이언트 측 솔루션은 전체적인 세련미가 상당히 떨어졌다. 비록 웹은

애플리케이션 배포에 대한 용이성과 속도를 크게 개선했지만 브라우저 기반의 애플리케이션은

HTML과 HTTP의 한계를 수용해야 했고 이로써 웹 기반 비즈니스 애플리케이션 능력은 현저히

퇴보했다.

오늘날 인터넷 기반 애플리케이션에 대한 수요는 지속적으로 증가하고 있으며 애플리케이션에

대한 요구사항은 1990년대 중반과는 상당히 다르다. 최종 사용자와 회사는 인터넷 기술에 더욱

많은 투자를 요구한다. 사용자에게 진정한 가치를 전달하기 위해 많은 회사들은 인터넷 애플리케

이션에 더욱 풍부한 모델, 다시 말해 전통적인 데스크톱의 풍부한 미디어 활용 능력과 웹 애플리

케이션의 풍부한 콘텐츠와 배포 특성을 결합한 새로운 모델을 만들어야 한다.

인터넷 애플리케이션이 비즈니스의 핵심 기능에 사용되기 시작하면서 애플리케이션을 유지보

수할 수 있는 능력 역시 중요한 일이 됐다. 애플리케이션 유지보수성은 애플리케이션의 설계와 직

접적으로 연관돼 있지만 불행하게도 많은 웹 애플리케이션은 애플리케이션 설계 원칙을 고려하지

않고 만들어서 유지보수하거나 확장하기가 어렵다. 오늘날에는 비즈니스, 데이터 액세스, 프레젠

테이션 영역의 완벽한 분리를 통해 애플리케이션을 더욱 견고하게 설계하고 구축하기가 쉬워졌다.

서비스 지향 아키텍처(SOA, Service-Oriented Architecture) 개념에 기반을 둔 웹 서비스와 같은

기술이 등장하면서 더욱 실질적인 웹 기반 애플리케이션 구축이 가능해졌다.

비즈니스 요구를 충족시키기 위해 리치 인터넷 애플리케이션(RIA, Rich Internet Application)

은 다음과 같은 일을 할 수 있어야 한다.

▶ 코드와 콘텐츠, 통신을 수행하기 위한 효율적이고 성능이 높은 방법을 제공한다. 다음 절

에서는 표준 HTML 기반 애플리케이션의 한계를 확인하고 전통적인 페이지 기반 설계에

서 나타나는 몇 가지 성능 관련 문제를 살펴보겠다.


▶ 상호작용을 돕는 강력하고 확장 가능한 객체 모델을 제공한다. 웹 브라우저는 최근 몇 년

간 DOM을 거쳐 자바스크립트와 DHTML로 상호작용을 지원해왔지만 이러한 기술은 아

직까지 표준화된 크로스 플랫폼과 크로스 브라우저 지원이 미흡한 상태다. 이러한 상황에

서 다양한 브라우저와 운영체제에서 동작하는 RIA를 구축하려면 동일한 애플리케이션을

다양한 버전으로 만들어야 한다.

▶ 웹 서비스나 다른 비슷한 기술을 통해 서버 측 객체를 사용할 수 있게 한다. RIA는 서버에

서 구현한 애플리케이션 로직과 완전히 분리된 프레젠테이션 로직과 사용자 인터페이스를

약속한다.

▶ 오프라인에서 인터넷 애플리케이션을 사용할 수 있게 한다. 노트북과 휴대용 기기의 인기

가 점차 높아짐에 따라 인터넷 애플리케이션의 심각한 제약 중 하나는 애플리케이션을 구

동하는 장비가 인터넷에 연결돼 있어야 한다는 점이다. 비록 사용자가 대부분 시간을 인터

넷에 연결된 상태에서 작업을 하더라도 비즈니스 서비스를 이용하는 사람들이 인터넷에

접속할 수 없을 때가 있다. 성공적인 RIA가 되려면 사용자가 인터넷에 연결 가능한지 여부

와 상관없이 생산적인 활동을 할 수 있게 지원해야 한다.

페이지 기반 아키텍처에서 벗어나기

웹 개발 경험이 많은 개발자가 RIA를 구축하기 위해 극복해야 할 커다란 도전 과제는 페이지 기반

설계에서 벗어나는 것이다. 전통적인 웹 애플리케이션은 어떤 서버 측 기술을 사용하는가와 상관

없이 웹 페이지 개념에 중점에 두고 다음과 같은 흐름을 가진다.

1. 사용자가 브라우저를 열고 웹 서버에 페이지를 요청한다.

2. 웹 서버가 요청을 받는다.

3. 웹 서버는 동적인 웹 페이지를 만들기 위해 애플리케이션 서버에 요청을 전달하거나 파일

시스템에서 정적인 페이지를 검색해 온다.

4. 웹 서버는 페이지(동적 또는 정적)를 브라우저로 다시 보낸다.

5. 브라우저는 이전에 페이지를 보여준 위치에 페이지를 다시 보여준다.


요청하기 전 페이지 콘텐츠가 새로 받은 페이지 콘텐츠와 대부분 같더라도 새로운 페이지 전

체가 브라우저로 전달되고 렌더링돼야 한다. 이것이 전통적인 웹 애플리케이션의 비능률적인 작

업 중 하나다. 즉, 사용자가 페이지를 요청할 때마다 브라우저에 새로운 페이지를 불러와야 한다.

RIA의 주요 목표 중 하나는 요청마다 발생하는 불필요한 데이터 전송을 줄이는 것이다. 전체 페이

지를 내려 받는 대신 변경된 데이터만 내려 받아 사용자가 보는 페이지를 갱신하면 어떨까? 이것이

바로 표준 데스크톱 애플리케이션이나 클라이언트/서버 애플리케이션이 작동하는 방식이다.

개발자들이 이러한 목표를 쉽게 이해하고 받아들여 RIA 개발에 뛰어든 것처럼 보일 수 있지만

여러 웹 개발자들은 페이지 기반 마인드를 가지고 RIA 개발에 임해 ‘상태를 유지’하는 방법 같은

많은 도전 과제를 극복하기 위해 고군분투한다. 예를 들어 사용자가 로그인한 후 그들이 누구이며

애플리케이션을 이동하면서 무엇을 하도록 허가됐는지 어떻게 알 수 있을까?

웹 기반 애플리케이션에서 상태를 유지하는 것은 새로운 도전 과제였다. HTTP는 기본적으로

각 서버의 요청이 이전 요청에 대해 아무것도 알지 못하는 무상태(stateless) 프로토콜로 설계됐다.

브라우저와 서버 사이의 연결이 열린 상태로 유지되지 않아도 되므로 이 같은 웹의 무상태 특성은

더 뛰어난 효율성과 반복성을 가질 수 있다. 새로운 페이지에 대한 요청은 각자 서버가 검색하고

페이지를 보내는 동안만 지속되므로 한 대의 서버가 더 많은 요청을 동시에 처리할 수 있다.

무상태 웹의 특징은 개발자에게 새로운 도전거리였다. 보통 애플리케이션은 로그인 권한과 장

바구니에 추가된 품목 등과 같이 사용자에 대한 정보를 기억해야 한다. 이러한 데이터를 하나의

요청에서 다음 요청으로 기억하는 기능이 없으면 우리가 개발하고자 하는 진정한 애플리케이션

개발은 불가능하다. 이 문제를 해결하기 위해 고유한 토큰(대개 쿠키를 이용하는데, 쿠키란 개별

사용자를 구분하기 위해 애플리케이션에서 사용하는 특정 식별자가 담긴 작은 텍스트 파일을 말

한다)을 매번 요청과 함께 서버로 보내는 갖가지 기법이 만들어졌다.

전통적인 웹 애플리케이션과 달리 RIA는 이러한 문제를 우회할 수 있다. 애플리케이션이 사용

되는 전체 시간 동안 애플리케이션이 클라이언트 메모리에 남아 있으므로(페이지 기반 모델처럼

매번 로드되지 않고) 한번 변수가 설정되면 애플리케이션의 생명주기 동안 해당 변수에 접근할 수

있다.

상태를 다루는 다른 방식의 접근법은 RIA 애플리케이션 구축이 웹 애플리케이션 구축과 약간

다른 사고 방식이 필요한 여러 가지 이유 중 하나에 불과하다. 실제로 웹 기반 RIA는 웹 애플리케

이션보다 클라이언트/서버 애플리케이션과 더 비슷하다.


리치 인터넷 애플리케이션의 장점

1990년대 중반부터 후반 사이의 닷컴 열풍 때와 달리 기업에서는 더는 인터넷 기술에 투자하지 않

는다. 바로 투자에 냉정해졌기 때문이다. 계속적인 투자를 위해서는 새로운 기술에 대한 투자가 이

익이 되리라는 점을 증명해야 하며 실질적인 가치를 제공할 수 있어야 한다.

비즈니스 관리자

RIA 소프트웨어를 쓰기 쉽게 만들면 성공적인 거래 건수가 증가한다. 여러 산업 분야에서 이러한

증가를 정량적으로 확인할 수 있다. 기업은 인트라넷 애플리케이션이나 구매를 완료한 온라인 구

매자의 비율로 직원의 생산성 같은 것들을 측정할 수 있다. 경쟁자에게 기회를 빼앗기지 않으면서

온라인 판매를 지속적으로 증대시켜 매출을 늘릴 수 있으며 동시에 직원의 노동에 드는 비용을

대폭 줄일 수 있다.

IT 조직

페이지 기반 설계에서 벗어나면 웹 서버의 부하와 전체 네트워크 트래픽을 줄일 수 있다. 일단 클

라이언트가 애플리케이션을 다운로드하고 나면 매번 페이지 전체를 전송하지 않고 서버와 데이터

만 주고받게 된다. 서버 부하와 네트워크 트래픽이 감소하여 인프라 비용이 눈에 띌 만큼 줄어들

것이다. 설계 원칙과 검증된 실행 방법을 바탕으로 RIA를 구축하면 애플리케이션 유지보수성을

증가시킬 수 있을 뿐 아니라 애플리케이션을 구축하는 데 드는 시간도 획기적으로 줄일 수 있다.

최종 사용자

애플 아이폰과 구글 안드로이드 기반 휴대폰의 성공은 풍부한 사용자 경험이 중요하고 사람들이

다양하고 풍부한 애플리케이션에 대한 소비에 인색하지 않다는 명백한 증거다. 최종 사용자의 다

양하고 풍부한 경험은 RIA의 가장 중요한 장점 중 하나다.

최종 사용자는 RIA의 뛰어난 장점을 경험할 수 있다. 필요한 정보를 찾기 위해 여러 페이지를

돌아다닐 필요가 없고 새로운 페이지가 로드될 때까지 기다릴 필요가 없으므로 잘 디자인된 RIA

는 사용상의 혼동을 줄여준다. 또한 사용자가 애플리케이션 사용법을 이해하는 데 필요한 시간도

상당히 줄일 수 있다. 실시간으로 사용자가 요청할 때마다 게임과 통계를 바탕으로 한 해설을 제


공하는 MLB.com의 MLB.TV 미디어 플레이어나 고가 물품의 배송 상태를 추적하기 위한 대시보

드를 제공하는 FedEx처럼 오늘날에는 RIA 개념 없이는 만들 수 없는 훌륭한 애플리케이션이 많

이 있다. 이처럼 사용하기 쉬운 애플리케이션은 RIA가 사용자에게 높은 사용성을 제공할 수 있

다는 사실을 보여주는 좋은 사례다.

RIA 기술

오늘날 개발자는 RIA 구축을 시작할 때 몇 가지 기술을 선택할 수 있다. 그 중 인기 있는 기술은

HTML 기반의 AJAX(Asynchronous JavaScript and XML)와 플러그인 기반의 기술 등이 있다. 플러

그인 기반 기술은 웹 브라우저에 설치된 가상 머신(플래시 플레이어와 실버라이트)에서 MXML/

액션스크립트나 XAML/.NET과 같은 언어로 작성된 코드를 실행한다.

현재 HTML/AJAX, 자바, 마이크로소프트 실버라이트, 어도비 플래시 플랫폼에서 RIA 기술을

제공한다. RIA에 적용할 때 각 기술은 고유한 장점과 단점이 있다. 상황에 맞게 적합한 도구를 선

택하고 사용하는 것이 관건이다.

AJAX

가장 손쉬운 선택은 바로 AJAX다. AJAX는 HTML, DHTML, 자바스크립트와 같은 웹 개발자에

게 이미 친숙한 도구를 기반으로 한다. AJAX의 기본적인 아이디어는 자바스크립트를 사용해서

페이지를 내려 받지 않고 업데이트하는 것이다.

브라우저에서 구동되는 자바스크립트 프로그램은 페이지에 새로운 데이터를 입력할 수 있게 하

거나 HTML DOM을 조작해서 새로운 페이지를 다시 불러오지 않고도 데이터 구조를 변경할 수

있게 해준다. XML이나 다른 포맷을 사용해서 백그라운드 서버나 마우스 클릭과 움직임 같은 사

용자 상호작용에 대한 응답으로 새로운 데이터를 불러오거나 갱신할 수 있다.

초창기 웹 애플리케이션은 원격 통신에 자바 애플릿을 사용했다. 브라우저 기술이 개발되면서

아이프레임과 같은 방법들이 애플릿을 대신했고, 최근에는 자바스크립트에 XMLHttpRequest가

포함돼 애플릿이나 아이프레임 없이도 새로운 요청을 만들어 쉽게 데이터를 송수신할 수 있다.

이미 많은 웹 개발자에게 친숙한 요소를 사용하는 AJAX의 장점은 별도의 외부 플러그인이 필

요 없다는 것이다. AJAX는 순수하게 자바스크립트와 DHTML을 사용해서 브라우저 기능만으로


작동한다. AJAX가 자바스크립트 기반으로 작동하고 있으므로 사용자가 브라우저의 자바스크립

트를 비활성화하면 AJAX 애플리케이션이 동작하지 않는 문제를 해결해야 할 필요가 있다.

AJAX에 관한 또 다른 이슈는 여러 플랫폼의 다양한 브라우저들이 DHTML과 자바스크립트를

지원하는 정도가 다르다는 점이다. 인트라넷 애플리케이션과 같이 사용자가 정해진 애플리케이션

에는 AJAX가 특화된 플랫폼 브라우저에서만 지원되도록 작성할 수 있다. 오늘날 많은 기업에서는

자사의 브라우저와 운영체제를 표준화해서 사용한다. 그러나 애플리케이션이 더 많은 사용자에게

공개되면 AJAX 애플리케이션이 모든 운영체제와 브라우저에서 동일하게 작동하는지 확인하는

테스트가 필요하다.

마지막으로 HTML과 자바스크립트는 애플리케이션을 염두에 두고 만들어진 것이 아니다. 이

는 프로젝트 규모가 커지면서 코드 정리와 유지보수 작업이 매우 어려울 수 있다는 뜻이다.

AJAX는 금방 사라지지 않을 것이고, 구글 맵과 같은 높은 편의성을 갖춘 AJAX 애플리케이션

이 많은 찬사 속에 매일 출시되고 있다. 사실 애플리케이션의 특정 클래스인 위젯과 컴포넌트는 크

기가 작고 상대적으로 독립적인 배포 모델이므로 다른 기술보다는 AJAX를 이용하는 편이 확실히

더 낫다.

AJAX 자체는 프로그램 모델이 아니라는 점을 기억하자. 실제로 AJAX는 다양한 자바스크립트

라이브러리를 조합한 것이다. 이 라이브러리 중 일부는 일반적인 작업을 쉽게 만들어주는 재사용

가능한 컴포넌트를 포함한다. AJAX는 특정 벤더에서 주도하는 것이 아니므로 타사 라이브러리를

통합해야 하는 필요성이 생기며 이 작업에 대한 위험을 감수해야 한다.

HTML 5는 드래프트 제안서에 기존 환경의 복잡성과 작업할 때의 단점을 줄이는 것이 목적이

라고 쓰여 있다. 하지만 현재로서는 브라우저를 제작하는 조직이 기술을 얼마나 잘 수용하고 구현

할지는 기다려봐야 할 것이다.

자바 가상 머신

대부분의 자바 언어와 자바 기반 프레임워크는 엔터프라이즈 서버 애플리케이션의 사실상의 표준

이라 할 수 있다. 하지만 클라이언트에서 자바는 다운로드 크기, 힘든 유지보수, 자바 런타임 업데

이트 등의 이유로 힘든 시간을 보내고 있다.

이클립스 프로젝트(플래시 빌더에서 사용하는 개발 환경)처럼 자바 클라이언트 단의 많은 성공

사례가 있긴 하지만 자바는 RIA계에서 시장 점유를 높이기 위해 여전히 고군분투하는 중이다.

자바 커뮤니티가 제공하는 RIA 영역은 현재 JavaFX로 불린다. JavaFX는 JavaFX를 쓸 수 있는


여러 기기 간에 실행되게끔 설계된 소프트웨어 플랫폼이다. JavaFX가 자바 커뮤니티에 강력하게

포용된 반면 자바 매니아가 아닌 사람들은 아직까지 미적지근한 반응을 보인다.

마이크로소프트 실버라이트

이 책을 쓰는 도중 마이크로소프트는 RIA 구축을 위한 솔루션인 실버라이트 4.0의 베타 버전을

출시했다. 실버라이트는 다양한 기술을 포괄적으로 제공한다:

▶ Silverlight : .NET으로 작성된 애플리케이션 기능을 제공하는 웹 기반 애플리케이션 프레

임워크

▶ XAML(Extensible Application Markup Language) : 사용자 인터페이스를 선언하는 XML 기

반 언어로 플렉스의 MXML 언어와 비슷하다.

▶ Microsoft Expression Studio : 윈도우의 클라이언트 애플리케이션과 실버라이트 플레이

어를 대상으로 애플리케이션을 구축하기 위해 설계된 프로페셔널 도구다. 다음과 같은 도

구로 구성돼 있다'

² Expression Web : 시각적인 HTML 에디터

² Expression Blend: WPF(Windows Presentation Foundation)와 실버라이트 애플리케이션

을 만들고 수정하는 시각적인 애플리케이션

² Expression Designer: 그래픽 에디터

² Expression Encoder: 비디오 인코더

마이크로소프트는 이러한 도구로 디자이너가 매력적인 사용자 인터페이스를 만든 후 개발자가

비즈니스와 데이터 접근 로직을 구현하는 업무 흐름을 전면에 부각시키고 있다.

이 책을 쓰는 현재 윈도우와 맥 운영체제는 실버라이트를 지원한다. 노벨(Novell)에서 개발한 문

라이트(Moonlight)라고 하는 리눅스와 FreeBSD 구현체는 실버라이트로 만든 콘텐츠를 운영체제

로 가져온다.

특히 실버라이트는 마이크로소프트 비주얼 스튜디오 같은 도구를 사용하고 기존 지식을 활용

해서 신규 애플리케이션을 빠르게 만들어 낼 수 있는 .NET 개발자에게 매력적인 플랫폼을 제공

하기 시작했다. 단 한 가지 한계가 있다면 실버라이트의 런타임 배포는 아직까지 윈도우에서만 가

능하다는 것이다.

분명 실버라이트도 앞으로 지켜볼 가치가 있다.


어도비 플래시 플랫폼

RIA 분야에서 가장 경쟁력을 가진 제품은 어도비 플래시 플랫폼이다. 이 플랫폼은 개발자의 생산

성과 디자이너의 참여를 극대화하면서 풍부하고 매력적인 사용자 경험을 제공하기 위해 설계된

도구와 기술로 구성돼 있다.

플래시 플랫폼을 구성하는 여러 구성요소들은 다양한 유형의 애플리케이션에 포함될 수 있지

만 다음 절에서 이 책과 관련된 플래시 플랫폼의 구성요소를 나열했다.

어도비 플래시 플레이어와 AIR

초기에 애니메이션을 실행하기 위한 플러그인으로 만들어진 플래시 플레이어는 경량을 유지하면

서도 새로운 기능을 추가한 새로운 버전으로 지난 몇 년간 발전해 왔다. 플래시 플레이어의 모든

버전을 합치면 전체 데스크톱의 99% 이상에 설치돼 있어 사실상 어느 곳에서나 사용할 수 있다고

볼 수 있다. 2002년부터 매크로미디어(지금은 어도비)는 플래시를 애니메이션 도구 이상으로 발전

시키기 위해 투자해왔고 플래시 6 출시와 함께 애플리케이션을 구축하는 기능이 대폭 보강됐다.

거의 대부분의 브라우저에 설치돼 있는 플레이어와 스크립팅 언어(액션스크립트)를 기반으로 매

크로미디어는 HTML의 한계를 극복한 브라우저 기반의 애플리케이션 개발을 가능하게 한다.

개발자는 플래시 플레이어를 사용해서 브라우저와 플랫폼 사이의 비호환성에서 벗어날 수 있

다. 플래시 플레이어의 좋은 기능 중 하나는 특정 플래시 플레이어 버전으로 개발된 콘텐츠와 애

플리케이션이 몇 가지 예외사항을 제외하고 해당 버전의 플래시 플레이어를 지원하는 거의 모든

플랫폼/브라우저에서 작동한다는 것이다.

AIR(Adobe Integrated Runtime)는 플래시 플레이어의 전통을 계승했고 브라우저 의존성을 제거

했다. AIR는 플래시 플레이어 콘텐츠와 더불어 HTML과 자바스크립트가 데스크톱 애플리케이

션으로 실행되게 하고 액션스크립트 개발자가 또 다른 언어를 습득해야 할 필요를 사실상 없앴다.

플래시 프로페셔널

매력적인 경험을 만드는 업계 선두 도구인 플래시는 전 세계 대부분의 디자이너와 개발자에게 친

숙하다. 플래시는 그래픽과 애니메이션 모션을 생성하기 위한 풍부한 환경을 제공한다.

RIA를 구축하는 데 플래시 프로페셔널만 사용할 수도 있지만 플래시 프로페셔널은 디자이너

가 인터랙티브한 콘텐츠를 만드는 데 맞춰져 있어 전통적인 방식으로 RIA를 구축하고자 하는 개

발자에게는 친숙하지 않을 수 있다. 원래 플렉스 프레임워크가 나온 것도 개발자가 플래시 플랫폼

에서 성공적으로 애플리케이션을 구현하는 것이 힘들었기 때문이다.


플렉스

매크로미디어는 RIA 구축을 위해 개발자에게 친숙한 도구가 필요하다는 점을 간파하고 개발자에

게 친숙한 언어로 작업해서 플래시 플레이어에서 동작하는 애플리케이션을 개발할 수 있게 새로

운 언어와 컴파일러를 만들었다. 2004년 매크로미디어는 플렉스 1.0을 출시했고 2005년에는 플렉

스 1.5를 출시했다. 계속해서 어도비는 2006년에 플렉스 2.0, 2008년에 플렉스 3.0, 2010년에 플렉

스 4.0을 지속적으로 출시하면서 플렉스를 발전시켰다. 아키텍처 관점에서 봤을 때 플렉스 애플리

케이션은 사용자 인터페이스로 동적으로 업데이트가 가능하고 백그라운드로 데이터를 전송하고

불러올 수 있다는 점에서 AJAX 애플리케이션과 유사하다.

플렉스는 현재 개발자가 플래시 플랫폼 어디에서나 RIA를 구축하고 배포할 수 있게 차세대 개

발 도구와 서비스를 제공한다.

플렉스는 다음과 같은 핵심 기술로 구성돼 있다:

▶ 액션스크립트 3.0 : 플래시 플랫폼 기능을 향상시키는 강력한 객체지향 프로그래밍 언어다.

액션스크립트 3.0은 빠르게 RIA를 구축하는 데 최적화된 언어로 설계됐다. 액션스크립트

의 초창기 버전에서는 훌륭한 사용자 인터페이스를 갖춘 온라인 경험을 만드는 데 필요한

기능과 다양성을 제공하지 못했지만 액션스크립트 3.0은 성능을 향상시키고 많은 데이터

셋과 객체지향적이고 재사용 가능한 코드로 이뤄진 매우 복잡한 애플리케이션 개발도 좀

더 쉽게 할 수 있게 언어를 한층 발전시켰다.

▶ MXML : 간단하고 유지보수 가능한 사용자 인터페이스 XML 문법. MXML은 액션스크립

트를 직접 작성하고 수정할 필요 없이 손쉽게 복잡한 UI의 계층 구조를 가시화하고 구현

하는 방법을 제공한다. MXML은 플렉스 애플리케이션에 빌드하면 자동으로 액션스크립

트로 컴파일된다.

▶ 플래시 플레이어 10(FP10) : 플래시 플레이어 9를 기초로 만들어진 이 차세대 플래시 플

레이어는 스크립트 실행 개선과 플래시 플레이어를 소형 기기에서 구동할 수 있는 기

능에 집중했다. 이러한 개선을 위해 FP10에는 AVM2로 알려진 ActionScript Virtual

Machine(AVM)이 포함돼 있다. AVM2는 철저하게 플래시 플레이어를 가동하는 차세대

언어인 액션스크립트 3.0을 대상으로 만들어졌고 다양한 기기에서 콘텐츠를 보여줄 수 있

다(이를테면 모바일 폰, TV, 데스크톱 컴퓨터). AVM2 가상 머신은 상당히 빠르고 런타임

오류 보고를 지원하며, 디버깅 기능을 크게 향상시켰다. 런타임 오류 보고, 속도, 메모리 공

간, 하드웨어 부문이 개선되어 개발자는 데스크톱/웹 브라우저를 넘어 다양한 기기에 플래

시 플레이어를 적용할 수 있다. 자바스크립트로 만들어진 애플리케이션과 달리 플래시 플


레이어는 구동을 빠르게 하고 메모리를 적게 소모하는 JIT(just-in-time) 컴파일 기능을 지

원한다.

▶ 플렉스 SDK : 플렉스 프레임워크에서는 FP10과 액션스크립트 3.0에서 제공되는 기능을 이

용해서 개발자가 성공적인 RIA를 구축할 때 우수 실천법(best practice)을 손쉽게 활용할

수 있게 광범위한 클래스 라이브러리를 추가했다. 개발자는 커맨드 라인 컴파일러와 디버

거가 포함된 플래시 빌더나 무료 플렉스 SDK를 통해 플렉스 프레임워크에 접근할 수 있고

자신이 선호하는 에디터를 사용해서 컴파일러나 디버거에 바로 접근할 수 있다.

▶ 플래시 빌더 4 : 개발자에게 RIA 구축을 위해 특별히 설계된 환경을 제공하며 플래시 빌더

4는 IDE를 한 단계 발전시켰다. 플래시 빌더 4는 업계 표준 오픈소스인 이클립스를 토대로

만들어진 것으로 훌륭한 코딩과 디버깅 환경을 제공하고 코딩과 애플리케이션 개발에서

우수 실천법을 촉진한다. 이클립스 플랫폼의 특성을 활용해서 풍부한 확장성을 제공하며,

특정 개발자의 필요나 선호에 맞게 IDE를 확장할 수 있게 커스터마이즈하기가 쉽다.

플래시 카탈리스트

플래시 카탈리스트(Flash Catalyst)는 디자이너의 RIA 작업에 초점을 둔 새로운 도구다. 디자이너

는 플래시 카탈리스트로 기존의 어도비 포토샵, 일러스트레이터, 파이어웍스에서 작업한 파일을

선택해서 애플리케이션과 관련된 요소(scroll bar, button 등) 등을 가지고 애플리케이션을 구축

할 수 있다.

디자이너는 플래시 카탈리스트를 사용해서 동작, 트랜지션, 심지어 개발자가 플래시 빌더 4로

통합하고 구현할 데이터 표시 영역까지 만들어 애플리케이션 외양을 완벽하게 만들어 낼 수 있다.

이러한 도구의 결합은 어도비 크리에이티브 스위트(Adobe Creative Suite)에서 제공하는 업계 표준

편집 기능을 기반으로 디자이너와 개발자 사이의 협업 업무 흐름을 나타낸다.

플래시 플랫폼 서버 기술

이 책의 범위는 벗어나지만 플래시 플랫폼의 기술은 서버까지 확장되며 RIA가 사용할 수 있는 서

비스와 기능을 제공한다. 서버와 서비스에서 지원 가능한 범위는 워크플로우 엔진부터 데이터 퍼

시스턴스까지, 그리고 메시징부터 비디오 출판 배포까지 아우른다.

비록 애플리케이션을 만들 때 이러한 컴포넌트가 필요하지는 않더라도 플래시 플랫폼 서버 기

술은 애플리케이션의 영역과 쓰임새를 확장하는 놀라운 기능을 제공한다.


이 장에서 배운 내용

▶ 컴퓨터 애플리케이션의 발전

▶ 페이지 기반 설계의 대안

▶ RIA의 장점

▶ RIA 기술 비교

LESS

ON


▶ 플래시 빌더 프로젝트 만들기

▶ 플래시 빌더 워크벤치(에디터, 뷰, 퍼스펙티브) 이해

▶ 애플리케이션 파일 생성, 저장, 실행

▶ 코드 힌트와 로컬 히스토리와 같은 플래시 빌더에 포함된 기능을 이용한

애플리케이션 개발

▶ 소스 뷰와 디자인 뷰에서 작업하기

▶ 패키지 탐색기 같은 다양한 뷰 사용


▶ 약 1시간 30분

02시작하기

이제 어도비 플렉스를 배울 준비가 됐다. 먼저 해야 할 일은 구현할 애플리케이션 개발 환경과 친

숙해지는 것이다. 개발 환경은 이클립스 플랫폼 기반의 어도비 플래시 빌더다. 이클립스 플랫폼은

확장 가능한 오픈소스 통합 개발 환경(IDE, Integrated Development Environment)이다. 플래시 빌

더는 플렉스 애플리케이션을 만들 수 있게 이클립스를 확장하고 최적화한 것이다.

이번 실습에서는 이 책을 진행하면서 개발하게 될 FlexGrocer 애플리케이션의 메인 애플리케이

션 파일을 만들면서 플래시 빌더에 익숙해질 것이다. FlexGrocer 애플리케이션을 만드는 동안 플

래시 빌더 인터페이스를 학습하고 애플리케이션 파일을 생성 ·실행 ·저장하는 방법을 학습할 것이

다. 또 애플리케이션 개발을 용이하게 하는 플래시 빌더의 여러 기능도 배울 수 있을 것이다.

플래시 빌더에서 신규 프로젝트 만들기


플렉스 애플리케이션 개발 시작하기

건물을 짓기 전에 건물의 기반을 먼저 만들어야 한다. 이번 실습에서는 플렉스 개발의 기초적인

사항들을 학습한다. 이 실습을 마칠 때쯤이면 플래시 빌더를 빠르고 쉽게 다루는 방법을 습득하

게 될 것이며, 이 과정에서 FlexGrocer 애플리케이션의 메인 애플리케이션 파일을 생성할 것이다.

새로운 것을 학습하기 전에 먼저 기본적인 용어를 배우듯이 본 장에서는 플렉스 개발과 플래

시 빌더에 사용되는 기본적인 용어를 배운다. 여기서는 플래시 빌더 워크벤치에서 사용되는 뷰

(view), 퍼스펙티브(perspective), 에디터(editor)와 같은 용어를 비롯해 플래시 빌더에 입력한 텍스

트를 플래시 플레이어를 통해 브라우저에서 볼 수 있게 SWF 파일로 변환해주는 절차와 해당 절

차를 표현하는 용어에 대해서도 학습할 것이다.

프로젝트와 MXML 애플리케이션 만들기

첫 번째 플렉스 애플리케이션 예제를 만들어 보자. 먼저 플래시 빌더에서 프로젝트를 만들어야 한

다. 여기서 프로젝트(project)는 단지 작업물을 정돈하기 위한 파일과 폴더의 집합에 지나지 않는

다. FlexGrocer 애플리케이션에서 만드는 모든 파일은 이 프로젝트에 보관된다. 애플리케이션 파

일을 다루는 작업은 소스 뷰나 디자인 뷰에서 할 수 있다. 대부분의 경우 자신이 선호하는 모드에

서 작업하면 되지만 특정 모드에서만 사용할 수 있는 기능도 있다.

아울러 이번 예제에서는 플렉스 애플리케이션을 실행하는 방법도 배운다. 직접 작성한 MXML

코드가 어떻게 SWF 파일로 변환되고 브라우저에서 보여지는지 알게 될 것이다.

1. 플래시 빌더 시작하기: 윈도우 시작 버튼에서 [시작] > [프로그램] > Adobe > Adobe Flash

Builder를 선택한다. 맥 운영체제에서는 [응용 프로그램] 디렉터리의 Adobe Flash Builder

4 폴더에서 플래시 빌더를 실행할 수 있다.

대부분 이 방법으로 플래시 빌더를 시작할 것이다. 여러분 가운데 이클립스를 먼저 설치하

고 플러그인 형태로 플래시 빌더를 설치한 독자들도 있을 것이다. 그렇다면 이클립스를 먼

저 실행하고 나서 플래시 퍼스펙티브로 바꾼다.

2. File > New > Flex Project를 선택한다. Project name에는 FlexGrocer를 입력한다. “Use

default location” 체크박스 선택을 해제하고 Folder 위치에 driveroot:/�ex4tfs/�exgrocer를

입력한다. Application type은 Web Application을 선택하고 Server type은 None/Other를

설정한다.

02 시작하기 l 17

알아두세요 driveroot는 사용하는 운영체제(윈도우나 맥) 시스템의 저장소다. 운영

체제에 맞게 driveroot를 바꾸자. 디렉터리 이름은 대소문자를 구분해야 한다는 점에

주의하자.

?

Project name은 프로젝트에 포함된 파일을 대표하는 이름으로 지정하는 편이 좋다. 플래

시 빌더를 계속 사용하다 보면 여러분이 작업하는 프로젝트가 늘어날 텐데 이때 프로젝트

이름을 잘 지어 놓으면 어떤 프로젝트에 어떤 파일이 있는지 찾기가 쉽다.

default location은 체크하지 않는다. 기본 설정을 사용하면 Documents 디렉터리를 사용

하게 되며 프로젝트 파일이 너무 복잡한 디렉터리 위치에 저장된다. 파일을 편하게 관리하

기 위해 루트 드라이브에 파일이 저장되게 한다.

플래시 빌더에서는 최신 컴파일러를 사용하거나 “Flex SDK version”를 선택해서 이전 버

전의 컴파일러를 선택해 사용할 수 있다. 이번 애플리케이션에서는 플렉스 4.0 컴파일러를

사용한다.

3. Next를 클릭한다.

4. 컴파일된 플렉스 애플리케이션의 output folder는 기본 설정인 bin-debug로 두고 Next를

클릭한다.


5. Main application ®le에 FlexGrocer.mxml을 입력한다.

기본적으로 플래시 빌더는 Main application ®le을 프로젝트 이름과 동일하게 만든다. 아

울러 플렉스 애플리케이션의 기본 구조가 포함된 메인 애플리케이션 파일을 자동으로 만

든다.

알아두세요 MXML은 대소문자를 구별한다. 이 책에 표시된 태그명의 대소문자를 반

드시 따라야 한다.

?


6. Finish를 클릭하면 프로젝트와 애플리케이션 파일이 만들어진다.

아래는 처음으로 만든 플렉스 애플리케이션이다. 지금은 애플리케이션을 소스 뷰로 보고

있지만 다른 실습에서 디자인 뷰도 보게 될 것이다.

패키지 탐색기 Run 버튼

소스 뷰와 디자인 뷰 버튼

줄 번호 Problems 뷰 에디터

Open Perspective 버튼

애플리케이션 파일에는 기본적으로 포함돼야 하는 요소가 들어 있다. 코드의 첫 줄은 아래와

같은 XML 문서 유형 선언(document-type declaration)이다.

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

MXML은 표준 XML이므로 문서 유형 선언은 필수다.

코드의 두 번째 줄에는 아래와 같이

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"


xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

플렉스 메인 애플리케이션과 관련된 네임스페이스를 정의하고 애플리케이션의 최소 높이와 너비

도 정의한다. <s:Application> 태그는 외부 컨테이너를 나타내며 플렉스 애플리케이션의 모든 콘텐

츠를 포함한다. 각 플렉스 애플리케이션에서는 <s:Application> 태그를 단 하나만 사용할 수 있다.

<s:Application> 태그에는 xmlns:fx=http://ns.adobe.com/mxml/2009과 같이 URL을 가리키

는 세 개의 속성/값 쌍이 정의돼 있다. 이 세 개의 속성/값 쌍은 XML 네임스페이스 선언으로서 애

플리케이션에서 사용할 클래스 정의의 위치와 이러한 클래스를 참조하는 방법을 나타낸다. 플렉

스 4 애플리케이션에서는 가장 많이 사용되는 세 가지 클래스 라이브러리를 참조하므로 보통 세

개의 네임스페이스를 제공한다. fx 네임스페이스는 플렉스 언어 태그를, s 네임스페이스는 플렉스

Spark 컴포넌트를, mx 네임스페이스는 플렉스 MX 컴포넌트를 의미한다. 플렉스 언어 태그는 플

렉스 4에 필요한 요소를 나타내지만 이러한 요소가 실제 플렉스 4 SDK 클래스는 아니다. 앞으로

<fx:Declarations> 태그가 많이 사용되는 것을 보게 될 텐데 Declarations는 이벤트를 다룰 때 상

세히 설명하겠다. Spark 클래스는 플렉스 4의 신규 컴포넌트를 나타내고 MX 클래스는 플렉스 3

클래스를 나타낸다. 다음 여러 실습에서 확인할 수 있겠지만 플렉스 3의 일부 클래스는 아직 플렉

스 4에 만들어지지 않았다. 플렉스 Spark와 MX 컴포넌트의 네임스페이스를 모두 사용하면 이러

한 컴포넌트들을 사용할 수 있다.

알아두세요 XML 명명법에서 콜론(":")과 등호("=") 사이에 있는 속성 부분을 접두어라

고 하고 등호 뒤의 따옴표 안의 문자열은 URI(Universal Resource Identifier)라고

한다. 따라서 xmlns:s="library://ns.adobe.com/flex/spark"에서는 s가 접두어이고

library://ns.adobe.com/flex/spark는 URI다.

?

이러한 URI와 매니페스트 파일(manifest ®le)과의 관계는 §ex-con®g.xml이라는 설정 파일에 지

정돼 있다. 각 매니페스트 파일은 특정 접두어와 각 태그가 참조할 클래스의 위치를 연관지어 태

그를 기술한다. 플래시 빌더를 PC에 설치하면 매니페스트 파일은 [설치 디렉터리]/Adobe/Adobe

Flash Builder 4/sdks/4.0.0/frameworks에 위치한다. 맥에서는 매니페스트 파일이 [설치 디렉터

리]/Adobe Flash Builder 4/sdks/4.0.0/frameworks에 위치한다. fx 네임스페이스는 mxml-2009-

manifest.xml을, s 네임스페이스는 spark-manifest.xml을, mx 네임스페이스는 mx-manifest.

xml을 가리킨다.


알아두세요 fx 네임스페이스의 매니페스트 파일(mxml-2009-manifest.xml)을 살

펴보면 Declarations가 공백인 것을 확인할 수 있다. 사실 fx:Declarations는 클래

스를 참조하는 것이 아니라 컴파일러 지시어로 컴파일러에게 메타데이터와 MXML에

서 생성된 액션스크립트 클래스를 연관짓는 방법을 나타낸다. 다른 두 매니페스트 파

일은 모두 네임스페이스를 사용할 때 이용하게 될 클래스에 대한 참조를 포함한다.

?

spark-manifest.xml 파일의 내용은 아래와 같다.

마지막으로 애플리케이션의 최소 높이와 너비를 정의했다. 이 설정으로 플래시 플레이어는 애

플리케이션이 실행되는 브라우저의 크기가 애플리케이션을 보여주기에 충분한지 파악할 수 있다.

브라우저의 크기가 충분하지 않으면 보이지 않는 부분을 스크롤할 수 있게 스크롤 바가 추가돼야

한다.


플래시 빌더 워크벤치 이해

애플리케이션 파일 작업을 진행하기 전에 플래시 빌더 워크벤치에 친숙해질 필요가 있다. 우선 인

터페이스와 관련된 몇 가지 용어를 익혀야 한다. 이를테면 워크벤치에서 뷰, 에디터, 퍼스펙티브의

의미가 무엇인지 이번 예제에서 배울 것이다.

1. FlexGrocer.mxml 에디터 탭에서 우측 상단의 X를 클릭해 현재 에디터를 닫는다. 모든 에

디터는 에디터 영역 좌측 상단에 탭이 있다.

파일을 열면 항상 워크벤치 에디터에 열린다. 방금 한 작업은 FlexGrocer.mxml 파일을 열

고 있는 에디터를 닫은 것이다. 여러 에디터를 한꺼번에 열 수도 있고 각 에디터는 해당하는

파일의 소스 코드를 보여준다.

2. 패키지 탐색기에서 FlexGrocer.mxml을 더블 클릭해서 에디터로 연다.

파일명을 선택하고 마우스 오른쪽 버튼을 클릭해 Open을 선택해서 열어도 된다.

3. 에디터 탭을 더블 클릭하면 에디터 창이 최소화/최대화된다.

최대한 많은 양의 코드를 보기 위해 에디터 탭을 더블 클릭하면 에디터의 가로와 세로가

확장되면서 더 많은 코드를 볼 수 있다.

4. 다시 탭을 더블 클릭하면 에디터가 이전 크기로 돌아간다.

보다시피 에디터를 손쉽게 최대화/최소화할 수 있다.

5. 에디터의 Design view 버튼을 클릭해 디자인 뷰로 애플리케이션을 볼 수 있다.

워크벤치의 디자인 뷰는 소스 뷰와 다른 작업 환경을 제공한다. 디자인 뷰에서는 사용자

인터페이스 컨트롤을 직접 애플리케이션에 드래그앤드롭하는 것이 가능하고 프로퍼티 값

도 디자인 뷰에서 설정할 수 있다.

6. 에디터의 Source view 버튼을 클릭하면 소스 뷰 화면으로 돌아간다.

이 책에서는 주로 소스 뷰에서 작업하지만 디자인 뷰에서 작업하는 것이 편리할 때도 있다.

7. 패키지 탐색기 탭의 X를 클릭해 패키지 탐색기를 닫는다. 에디터처럼 모든 뷰에는 좌측 상

단에 탭이 있다.

플래시 빌더에서는 콘텐츠를 보여주는 각 영역을 뷰(view)라고 한다

8. Window > Package Explorer를 선택해서 패키지 탐색기를 다시 연다.

닫힌 뷰는 이 메뉴를 통해 다시 열 수 있다. 여기서 Window > Other Views를 선택하면 많

은 뷰가 나타나는 것을 확인할 수 있다.


9. 에디터 우측 상단에 있는 Open Perspective 버튼을 클릭해서 플래시 디버그 퍼스펙티브

(Flash Debug Perspective)를 선택한다.

퍼스펙티브(perspective)는 단지 자주 사용하고자 하는 뷰의 레이아웃에 불과하다. 플래시

빌더는 플래시 퍼스펙티브와 플래시 디버그 퍼스펙티브를 제공한다. 원하는 뷰를 모아 레

이아웃을 만들 수도 있고 이렇게 만든 뷰를 Window > Perspective > Save Perspective로

저장해서 언제든지 불러낼 수 있다.

10. Development 퍼스펙티브로 돌아간다.

보다시피 퍼스펙티브를 전환하는 것은 굉장히 쉽다. 본 장의 후반부에서는 디버그 퍼스펙

티브를 주로 사용하고 유용한 각종 옵션들을 살펴볼 것이다.

11. 만약 소스 코드의 줄 번호가 보이지 않는다면 Window > Preferences에서 코드 줄 번호가

보이도록 설정한다. 대화상자에서 General과 Editors 앞의 (+) 표시를 클릭하면 트리 형태

로 확장되는데, 여기서 Text Editors를 클릭한 다음 “Show line numbers” 체크 박스를 선

택하면 줄 번호가 보인다.


플래시 빌더에서는 에러를 보고할 때 소스 코드의 줄 번호를 표시하므로 이렇게 설정해두

면 매우 유용하다.

팁 에디터의 마커 바를 선택하고 오른쪽 버튼을 클릭한 다음 Show Line Numbers

를 선택해서도 줄 번호를 보이거나 감출 수 있다. 마커 바는 에디터에서 코드가 표시

되는 바로 왼쪽 영역을 말한다.


애플리케이션 실행하기

첫 번째 실습에서는 프로젝트와 애플리케이션 페이지를 만들었고 두 번째 실습에서 플래시 빌더

워크벤치를 살펴봤다. 이제 애플리케이션으로 되돌아가 애플리케이션을 실행하고 코드를 추가해

보자.

1. Project 메뉴를 열고 Build Automatically 옵션을 체크한다.

Build Automatically가 선택되면 플렉스는 지속적으로 저장한 파일을 체크하고 컴파일해

서 파일이 실행될 수 있게 준비한다. 문법 에러는 애플리케이션을 실행하기 전부터 표시되

는데, Build Automatically를 선택하지 않으면 자동으로 표시되지 않는다.

팁 애플리케이션이 더 복잡해지고 커질수록 Build Automatically 설정을 선택하면

더 많은 시간을 소요할 수가 있다. 이럴 땐 Build Automatically 설정을 해제해서 애

플리케이션을 실행할 때만 빌드하도록 바꾼다.

2. Run 버튼을 클릭해 애플리케이션을 실행한다. 브라우저 창이 열려도 아무것도 보이지 않

을 것이다

Run FlexGrocer 팁


방금 첫 번째 애플리케이션을 실행해봤지만 사실 그다지 흥미롭진 않다. 애플리케이션이 아무

런 태그를 포함하고 있지 않아 브라우저에 아무것도 표시되지 않았다. 그러나 애플리케이션이

실행되는 것을 확인했고 기본 브라우저가 열리는 것을 확인했으며 흥미롭진 않지만 결과를 표

시하는 것도 봤다.

알아두세요 Run 버튼을 클릭했을 때 정확히 어떤 일이 있어났을까? 실제로 몇 가지

처리 과정이 있었다. 먼저 애플리케이션 파일의 MXML 태그가 액션스크립트로 변환

됐고 이 액션스크립트는 플래시 플레이어가 사용하는 포맷인 SWF 파일로 변환됐다.

그리고 생성된 SWF 파일은 브라우저의 플래시 플레이어로 보내졌다.

?

플래시 플레이어 클라이언트

www.Flexgrocer.com/FlexGrocer.html

Flexgrocer.swf SWF

MXML

액션스크립트

▼

▼

3. 브라우저를 닫고 플래시 빌더로 돌아온다.

4. </fx:Declarations> 종료 태그 다음에 <s:Label> 태그를 추가한다. ~보다 작은 기호(<)를

입력한 다음 s를 입력하고 콜론(:)을 입력하면 태그 목록이 나타난다. L(대문자나 소문자)

을 누르고 Label로 이동해서 엔터를 누르거나 마우스를 클릭해 선택한다.

이러한 기능이 바로 플래시 빌더에서 제공하는 유용한 코드 힌트 기능이다.


5. 스페이스 바를 누르면 <s:Label> 태그에서 사용하는 프로퍼티와 메서드 목록이 나타난다.

t와 e를 연달아 누른 후 text 프로퍼티를 선택한다.

코드 힌트는 선택된 태그와 관련된 엘리먼트를 보여준다. 코드 힌트로 태그를 선택할 수 있

을 뿐 아니라 태그에 속하는 속성까지 선택할 수 있다.

알아두세요 코드 힌트 기능을 살펴본 두 가지 예제에서는 코드 힌트에서 원하는 옵션

이 모두 목록의 첫 번째 줄에 나타났다. 원하는 옵션이 목록의 앞부분에 나타나지 않

으면 방향키로 이동한 후 엔터를 치거나 더블 클릭하면 된다.

?

6. text 프로퍼티에 My First Flex Application을 입력한다. 코드 힌트가 자동으로 입력한 따

옴표 안에 값이 들어가도록 주의해야 한다.

MXML은 XML 언어이고 XML의 규칙과 표준을 따른다. 따라서 속성값이 따옴표 안에

위치하는 것이 적합한 XML 형식이다.

7. 슬래시(/)와 ~보다 큰 기호(>)를 추가해서 태그를 완성한다.

다음과 같은 코드가 완성됐는지 확인한다.






<fx:Declarations>



</fx:Declarations>

<s:Label text="My First Flex Application"/>

</s:Application>알아두세요 이 예제 코드에서 Application 태그의 minWidth와 minHeight 속성/값이

다른 줄보다 한 칸 들여쓰기되어 있다. 전체 Application 태그를 한 줄로 쓸 수도 있

지만 코드를 작성할 때는 개인 취향에 따라 작성하면 된다.

?

태그를 종료하는 올바른 방법은 두 가지가 있다. 하나는 self-closing이라고 하며, 방금 사

용한 슬래시를 태그의 끝부분에 추가하는 방법이다. 다른 하나는 아래처럼 태그 이름을

다시 쓰고 앞에 슬래시를 넣는 방법이다.

<s:Label text="My First Flex Application">

</s:Label>

대부분 태그 사이에 추가할 부분이 없으면 태그의 뒷부분에 슬래시를 넣는 방법을 사용할

것이다. 예를 들어 <mx:Application> 태그 블록 안에 </mx:Label> 태그를 넣고 싶다면

다른 줄에서 </mx:Application> 태그를 이용해 닫아야 한다.

8. 파일을 저장하고 실행한다. “My First Flex Application”이라는 텍스트가 브라우저에 나타

난다.

드디어 플렉스 애플리케이션에 뭔가가 나타난다.

<s:Application> 태그에는 흰색(#FFFFFF) 기본 배경색이 지정돼 있다. 스타일 적용에 대

해서는 16장, ‘플렉스 애플리케이션 커스터마이즈하기’에서 살펴보겠다.


9. text 프로퍼티 값을 “My First Flex Application”에서 New Text로 변경한 후 파일을 저장

하고 실행한다.

다음 단계에서 플래시 빌더가 제공하는 또 다른 유용한 기능을 살펴볼 텐데, 이 기능을 확

인하려면 적어도 저장된 버전이 두 개인 파일이 있어야 한다. 그래서 여기서 텍스트를 바꾸

고 파일을 저장해서 또 다른 버전을 만든 것이다.

10. 에디터에서 마우스 오른쪽 버튼을 클릭한 후 메뉴에서 Replace With > Local History를

선택한다.

큰 대화상자가 하나 나타날 것이다.

11. 대화상자의 왼쪽에 위치한 현재 버전의 파일과 오른쪽에 위치한 이전 버전의 파일을 비교

한다. 대화상자 위쪽에는 해당 파일의 최근 50개 버전을 보여준다. Replace를 클릭해서 원

래 텍스트인 “My First Flex Application”를 불러온다.

이전 버전으로 되돌리고 싶을 때 이 기능이 매우 유용하다는 것을 알 수 있다.

팁 Window > Preferences에서 Local History 설정을 변경할 수 있다. 설정을 변

경한 후 대화상자에서 General > Workspace를 선택하고 Local History를 클릭

한다.

12. 에러 상황을 살펴보기 위해 <s:Label> 태그에서 마지막 l을 삭제해 <s:Labe>로 변경하고

저장한다. 이렇게 하면 컴파일러가 s 네임스페이스에서 Label 클래스를 찾을 순 있지만

Labe 클래스는 찾지 못해 에러가 발생한다.


파일을 저장하면 컴파일러가 코드를 체크한다. 에러는 두 가지 방법으로 표시된다. X 표시

가 된 빨간 동그라미가 실수한 코드 줄 옆에 표시되며 Problems 뷰에도 에러가 표시된다.

팁 마우스 커서를 에러가 발생한 줄에 표시된 빨간색 원 위에 올려 놓으면 발생한 에

러에 관한 상세 설명을 확인할 수 있다. 또 Problems 뷰에 나열된 에러를 더블 클릭

하면 에디터의 해당 코드 줄로 이동한다.

13. 애플리케이션을 실행한다. 다음과 같은 경고가 나타나 에러가 발생했다는 메시지와 함께

계속 진행할 것인지 확인한다. 이번에는 Cancel을 클릭해서 진행되지 않게 한다.

컴파일 타임 에러 때문에 플래시 빌더는 최신 변경사항을 포함한 상태로 애플리케이션을

컴파일하지 못한다. 이 대화상자에서 Proceed를 클릭하면 플래시 빌더가 가장 최근의 성

공적인 컴파일 버전을 실행한다.

14. 에러를 수정하고 파일을 저장한 다음 애플리케이션을 실행해서 모든 것이 다시 잘 실행되는

지 확인한다. 성공적으로 실행해 본 후 파일을 닫는다.


플래시 빌더 디버거 살펴보기

애플리케이션을 만들다 보면 가끔 정상적으로 작동하지 않거나 에러가 발생할 수 있다. 이러한 문

제를 야기하는 원인을 찾는 데 도움되게끔 플래시 빌더에는 인터랙티브한 디버깅 기능을 제공한

다. 디버거로 코드에 브레이크포인트를 설정하고 실행이 중지되면 이 지점에서 다양한 프로퍼티와

변수의 값을 확인할 수 있다. 값의 변화를 단계별로 살펴볼 때도 디버거를 활용할 수 있다.

1. 플래시 빌더의 메인 메뉴에서 File > Import > Flash Builder Project를 선택한다. 이 프로

젝트 파일은 두 개의 숫자를 더해 결과를 보여주는 버튼, 레이블, 액션스크립트로 구성된

작은 애플리케이션을 담고 있다. 플래시 빌더는 FXP 형식의 기존 프로젝트 패키지를 독립

실행형(stand-alone) 파일로 임포트할 수 있다.

2. Import Flash Builder Project 대화상자에서 Import project 영역의 첫 번째 Browse 버튼

을 클릭한다. §ex4tfs/Lesson02/independent 디렉터리를 찾아 DebugTest.fxp를 선택한

다. “Extract new project(s) to”의 위치를 driveroot:/§ex4tfs/debugTest로 설정한다.

debugTest 디렉터리가 존재하지 않으면 (이 단계를 이미 수행하지 않았다면 그럴 리는 없

겠지만) 디렉터리가 생성된다. 이미 디렉터리가 존재하는 경우 이전 버전을 변경하고 싶다

면 “Import method” 영역에서 “Overwrite existing project” 라디오 버튼을 선택한다. 기

존 버전을 오버라이드할 때 기존 버전이 변경된다는 확인 메시지가 나타날 것이다. OK를

클릭해 계속 진행한다.


3. Finish를 클릭한다.

4. 플래시 빌더에 신규 debugTest 프로젝트가 생성된 것을 볼 수 있다. src와 default package

노드를 펼쳐서 DebugTest.mxml 파일을 찾는다. 이 파일을 더블 클릭해서 DebugTest.

mxml을 연다.

5. 애플리케이션을 실행하고 Click Me를 클릭한다. 버튼 옆에 “2 + 4 = 6”이라는 텍스트가 나

타날 것이다.

버튼을 클릭할 때 26번째 줄에 정의한 이벤트 핸들러가 실행되어 button_clickHandler()

메서드를 호출했다. 이 메서드에서는 두 개의 정수 변수(numTwo와 numFour)를 선언하

고 두 개의 정수를 더해 레이블에 결과를 표시한다. 액션스크립트 구문, 이벤트 핸들러, 데

이터 타입 변수는 다음 몇 개의 장에서 자세히 다루겠다.

6. 소스 뷰에서 24번째 줄에 브레이크포인트를 설정한다. 해당 줄의 코드가 아닌 줄 번호를

더블 클릭해야 한다. 브레이크포인트가 설정되면 줄 번호 왼쪽에 파란색 원이 생길 것이다.

디버그 뷰에서 애플리케이션이 실행될 때 사용자가 버튼을 클릭하면 애플리케이션은 브레

이크포인트에서 실행이 중단된다. 그 시점부터 애플리케이션을 디버깅할 수 있다. 브레이

크포인트는 애플리케이션에서 MXML의 이벤트 핸들러와 스크립트 블록의 액션스크립트

를 비롯한 모든 실행 가능한 줄에 설정할 수 있다.


7. 벌레처럼 보이는 버튼을 클릭해 (Run 애플리케이션 버튼의 오른쪽에 위치) 디버그 뷰에서

애플리케이션을 시작한다.

8. 애플리케이션이 브라우저에서 시작하면 Click Me라는 레이블의 버튼을 클릭한다. 애플리

케이션은 브레이크포인트까지 실행되고 컨트롤이 브라우저에서 플래시 빌더로 전달된다.

플래시 빌더가 플래시 퍼스펙티브에 있다면 디버그 퍼스펙티브로 전환하고 싶은지 물어볼

것이다. Remember My Decision 체크박스를 선택하고 Yes를 클릭한다.

본 장의 앞부분에서 배운 것처럼 플래시 빌더는 퍼스펙티브를 사용해서 뷰 집합을 그룹화

한다. 디버그 퍼스펙티브는 기본적으로 코드 위에 네 개의 뷰를 추가한다. 왼쪽은 디버그

뷰이고 애플리케이션이 브레이크포인트를 만난 지점을 보여준다. 또한 이 디버그 뷰는 애

플리케이션을 계속 실행하는 버튼과 디버깅을 중지하는 버튼, 코드를 단계별로 보는 버튼,

코드 라인을 보거나 현재 함수를 호출한 지점으로 돌아가는 버튼이 있다.

디버그 퍼스펙티브의 오른쪽에는 탭 형태로 세 개의 뷰가 있다. Variables 뷰는 변수의 현

재 상태를 보여주고, Breakpoints 뷰는 모든 브레이크포인트를 보여준다. Expressions 뷰

는 추가한 watch expression을 보여준다. 다음 몇 단계에서 이 버튼을 살펴보겠다.


디버깅 다시 진행(Resume)

디버깅 종료(Terminate)

한 줄 단위로 실행(Step Into)메서드 단위로 실행(Step Over)

현재 메서드를 호출한 곳으로 이동(Step Return)

변수(Variables) 브레이크포인트(Breakpoints)

표현식(Expressions)

9. 디버그 뷰에서 Step Into 버튼을 클릭해 컨트롤을 button_clickHandler() 메서드로 이동

한다.

디버그 뷰는 button_clickHandler() 메서드를 보고 있음을 보여준다. Variables 뷰는 처음

처럼 계속 이벤트를 보여주지만 함수에 로컬로 정의한 변수 세 개를 나타내는 새 항목들을

볼 수 있다. 이 변수를 인스턴스화하고 값을 할당하는 코드는 아직 실행되지 않았으므로

이 변수의 현재 값은 unde®ned다.


10. Step Over 버튼을 클릭하면 이 컨트롤이 실행 가능한 액션스크립트의 다음 줄로 이동하는

것을 볼 수 있다. 컨트롤은 이 줄이 실행되기 바로 전에 중단된다. Step Over를 다시 클릭하

면 numTwo라는 변수를 인스턴스화하고 값을 2로 할당하는 코드가 실행된다.

이제 numTwo 변수는 값을 가지고 있으므로 Variables 뷰에서 값을 확인할 수 있다.

11. Variables 뷰에서 numTwo 값을 선택하고 값을 2에서 3으로 변경한다.

Variables 뷰에서 값을 변경할 수 있는데, 이렇게 해서 애플리케이션에 어떤 영향을 미치는

지 확인할 수 있다. 이 값을 변경하는 것은 원본 값을 설정하는 코드를 변경하는 것이 아니

며 단지 다른 값일 때 어떤 일이 일어나는지 볼 수 있게 해준다.

12. 디버그 뷰에서 Resume 버튼을 클릭해 애플리케이션이 계속 실행되게 한다.

이번에는 numTwo를 2에서 3으로 변경했으므로 레이블이 “3 + 4 = 7”로 나타난다.


13. 디버그 뷰에서 종료 버튼(적색 사각형)을 클릭해 디버깅 세션을 종료한다. 14번째 줄을 더

블 클릭해 브레이크포인트를 설정한다.

이제 브레이크포인트가 14째 줄과 24번째 줄에 설정됐다.

14. Breakpoints 탭을 클릭해 브레이크포인트가 14번째 줄과 24번째 줄에 설정된 것을 확인한

다. 각 브레이크포인트 옆의 체크박스를 클릭해 브레이크포인트를 활성화하거나 비활성화

할 수 있다. 현 시점에서 24번째 줄의 브레이크포인트는 더는 사용하지 않을 것이므로 체크

박스에서 선택을 해제한다.

체크박스 선택을 해제하면 브레이크포인트를 그 자리에 그냥 둔 채로 플래시 빌더가 브

레이크포인트와 상관없이 실행된다. 브레이크포인트가 설정된 줄의 아이콘이 파란색에

서 흰색으로 바뀐 것을 보면 알 수 있다. 브레이크포인트를 완전히 제거하고 싶다면 해당

줄 번호를 다시 더블 클릭하거나 Breakpoints 뷰에서 해당 브레이크포인트를 클릭한 후

Remove를 선택한다.

15. 디버그 뷰에서 다시 애플리케이션을 실행한 후 Click Me를 클릭한다.

이렇게 하면 14번째 줄에 설정된 브레이크포인트에서 중단되고 numTwo와 numFour 변

수가 모두 만들어져 할당된 것을 확인할 수 있다.


16. addInts() 함수 안으로 들어가기 위해 Step Into 버튼을 클릭한다.

디버그 뷰에서 button_clickHandler()를 호출하는 버튼이 클릭됐고 여기서 addInts()가

호출된 것을 볼 수 있다. 또한 Variables 뷰에서는 button_clickHandler() 메서드의 지역 변

수인 numTwo와 numFour 대신 addInts() 메서드의 인자인 value1과 value2를 보여준다.

17. Step Over 버튼을 클릭한다.

이전에 Step Into를 사용했을 때처럼 Step Over를 클릭하면 디버거는 다음 줄을 실행하고

sumInts 변수는 6으로 설정된다.

18. Step Return 버튼을 클릭한다.

컨트롤이 button_clickHandler() 메서드로 반환된 것과 sumInts 변수가 addInts()에서 계

산돼 이제 6으로 설정된 것을 확인한다.

이제 디버거 사용법을 알게 됐다! 이 책을 읽는 도중이나 실무에서 플렉스 애플리케이션을 디버

깅할 때 플렉스 디버거가 매우 유용하게 쓰일 것이다. 브레이크포인트의 다른 재미있는 기능은 조

건형 브레이크포인트(conditional breakpoint)다. 조건형 브레이크포인트는 줄 번호나 Breakpoint

뷰에서 브레이크포인트를 선택하고 오른쪽 버튼을 클릭한 다음 Breakpoint Properties를 선택해

서 설정할 수 있다.

Breakpoint Properties 뷰에서 브레이크포인트를 작동하거나 중지할 수 있고 조건도 설정할 수

있다. 예를 들면 변수가 특정 값을 가지거나 브레이크포인트를 몇 번 만날 때 브레이크포인트가 작

동하도록 설정할 수 있다. 이 기능이 플렉스를 학습하는 초반에는 그리 유용하지 않더라도 복잡

한 애플리케이션을 개발할 때는 도움될 것이다.


알아두세요 객체지향 프로그래밍을 가르치려는 것은 아니지만 플렉스 개발자라면 적

어도 기본적인 객체지향 용어나 개념을 알아야 한다. 예를 들면 <s:Application>,

<s:Label>, <s:Text>와 같은 태그는 실제로 클래스를 참조한다. 이러한 클래스,

프로퍼티, 메서드 등에 관해 좀 더 자세히 살펴보려면 Adobe Flex 4 MXML과

ActionScript Language Reference(ASDoc)를 참고한다.

?

다음 실습을 위한 준비

본 교재의 나머지 부분을 진행하다 보면 이미지와 같은 파일이 필요할 수 있다. 디버깅을 배울 때

FXP 파일에서 프로젝트를 임포트해온 것처럼 이 교재에서 계속 배우게 될 FXP 파일을 임포트해

두자.

플래시 빌더에 프로젝트를 임포트할 때 고유 식별자(UUID, unique identi®er)가 동일한 프로젝

트가 이미 존재하면 IDE에서는 기존 프로젝트를 새로 임포트하는 프로젝트로 덮어쓴다. 하지만

UUID가 다르더라도 이름이 같은 프로젝트가 있으면 새로 임포트하는 프로젝트 이름을 변경하게

해준다. 혼동을 피하기 위해 이전 실습에서 만든 프로젝트를 완전히 지우고 다수의 이미지 파일이

담긴 거의 동일한 프로젝트를 임포트하자.

1. 패키지 탐색기에서 FlexGrocer 프로젝트를 선택하고 오른쪽 버튼을 클릭한 후 Delete를

선택한다.


2. 플래시 빌더 프로젝트만 제거하고 싶은지, 아니면 파일 시스템의 프로젝트 파일까지 삭제

하고 싶은지 물어보면 내용까지 모두 지우는 ‘라디오 버튼’을 선택한다.

프로젝트 파일과 관련된 파일이 파일 시스템에서 제거된다.

3. 플래시 빌더의 메인 메뉴에서 File > Import > Flash Builder Project를 선택한다.

4. Import Flash Builder Project 대화상자에서 Import project 영역의 첫 번째 Browse 버

튼을 클릭하고, f lex4tfs/Lesson02/start 디렉터리에서 FlexGrocer.fxp 파일을 선택한다.

“Extract new project to”에 프로젝트 디렉터리를 지정한다.

5. Finish를 클릭한다.

이제 교재의 나머지 부분을 계속 진행할 준비를 마쳤다. 임포트한 프로젝트를 주의 깊게

살펴보면 프로젝트 탐색기(Project Explorer)에서 assets 디렉터리를 볼 수 있다.



▶ 애플리케이션 파일을 관리하기 위한 프로젝트 생성

▶ 애플리케이션 파일을 사용하기 위한 플래시 빌더 워크벤치(뷰, 에디터, 퍼스펙티브) 소개

▶ 코드 힌트 기능과 로컬 히스토리를 확인해보면서 애플리케이션을 실행하고 수정하기

▶ 플래시 빌더 디버거를 활용한 애플리케이션 디버깅

▶ 다음 실습 준비

LESS

ON


▶ 컨테이너 사용하기

▶ 소스 뷰에서 애플리케이션 레이아웃 구성하기

▶ 제약기반 레이아웃 다루기

▶ 뷰 스테이트 다루기

▶ 뷰 스테이트 제어

▶ 디자인 뷰에서 애플리케이션 레이아웃 구성하기

▶ 코드 리팩터링


▶ 약 1시간 30분

03인터페이스 레이아웃 구성

모든 애플리케이션은 사용자 인터페이스가 필요하다. 어도비 플래시 빌더 4의 장점 중 하나는 개

발자가 애플리케이션 인터페이스 레이아웃을 쉽게 구성할 수 있게 도와준다는 것이다. 이번 실습

에서는 플렉스의 다양한 컨테이너와 레이아웃 객체에 대해 배우고 이들의 차이점과 애플리케이션

레이아웃에 이들을 어떻게 이용하는지 살펴본다. 마지막으로 뷰 스테이트를 이용해서 애플리케이

션이 사용자 행동에 반응해 동적으로 변화하게끔 만들겠다.

전자상거래 애플리케이션의 사용자 인터페이스


레이아웃 학습하기

플렉스에서 거의 모든 컴포넌트에 대한 위치 결정은 컨테이너와 레이아웃 객체로 한다.

주방에 빗대어 살펴보면 컨테이너는 칼 없이 요리를 만드는 것으로 생각할 수 있다. 시장에는 다

양하고 많은 종류의 요리법이 있고 애플리케이션을 주방이라 생각하면 컨테이너를 선택하는 것

은 적합한 요리법을 선택하는 것으로 볼 수 있다.

레이아웃 객체는 요리를 만들 때 필요한 칼로 생각할 수 있다. 요리법과 칼은 모두 한쪽이 없으

면 쓸모가 없지만 이들이 합쳐지면 매우 강력한 도구가 된다. 컨테이너와 레이아웃 객체도 마찬가

지다.

컨테이너 이해하기

간단하게 기술적인 관점에서 보면 컨테이너는 다른 항목을 담고 그룹화하는 특별한 유형의 컴포

넌트다. 이 항목은 전체적으로 자식(children)이나 레이아웃 엘리먼트(Button, Checkbox 등을

광범위하게 일컫는 용어)와 square, circle 등과 같은 그래픽 엘리먼트를 가리킨다. 컨테이너는 이

러한 항목을 그룹화하고 담는 방법은 알아도 이 항목들이 화면상의 어디에 어떤 순서로 자리잡

는지는 알지 못한다. 사용할 컨테이너를 선택할 때 몇 가지 기준을 가지고 선택하겠지만 가장 중

요한 것은 자식 항목의 스키닝(skinning)과 컨테이너를 통해 할 수 있는 기능이 무엇인지 살펴보

는 것이다.

스키닝은 컴포넌트의 시각적인 모양을 정의하는 과정이다. 컨테이너 관점에서 보면 background,

border, drop shadow 등을 포함하는 시각적인 모양으로 생각할 수 있다. 플렉스에서 일부 컨테이

너는 스키닝될 수 있고, 이는 화면상에 어떻게 나타낼지 정의할 수 있음을 의미한다. 다른 컨테이

너는 자식 컴포넌트가 그룹화되는 것만을 보장하며 화면에 보여지는 외관은 갖추고 있지 않다.

03 인터페이스 레이아웃 구성 l 45

컨테이너�유형

컨테이너 설명

Group 플렉스 4 컨테이너 중 가장 간단한 유형이며, 자식 컴포넌트를 포함하는 용도로 사용

되고 자체적으로 시각적인 모양이 없다

SkinnableContainer SkinnableContainer는 Group과 같은 기능을 수행하지만 시각적인 모양을 정의할

수 있다.

BorderContainer SkinnableContainer의 일종으로서 보더로 컨테이너의 자식을 빠르게 둘러싸는 용

도로 사용된다.

Panel SkinnableContainer의 일종으로서 보더로 둘러싸여 헤더와 ‘컨트롤 바’라고 하는 컨

트롤 영역을 가질 수 있다.

Application SkinnableContainer의 일종으로 플렉스 애플리케이션의 루트로 사용될 수 있다.

Panel처럼 컨트롤 바를 가질 수 있다

NavigationContent SkinnableContainer의 특별한 유형으로 ViewStack이라는 컨트롤과 함께 사용된다.

ViewStack에 대해서는 이 책의 후반부에서 다룬다.

이번 실습 이후에 사용될 Form과 같은 특화된 컨테이너를 비롯해 DataGroup과 Skinnable

DataContainer를 포함한 플렉스 컨테이너도 몇 개 더 있다. 이러한 컨테이너는 약간 다른 레이아

웃 규칙을 따르므로 후반부에 좀 더 명확하게 구체적인 사용법을 다시 소개하겠다.

레이아웃 객체 이해하기

레이아웃 객체(Layout Object)는 컨테이너의 그룹화된 황목을 화면에 보여주기 위해 컨테이너와 함

께 동작한다. 플렉스 4에서는 기본적으로 다수의 레이아웃 객체를 제공하고 사용자 정의 객체를

생성하기 위해 레이아웃 객체를 생성할 수 있게 해준다.

레이아웃�객체�유형

레이아웃 객체 설명

BasicLayout BasicLayout은 절대 위치를 지정할 수 있게 해준다. BasicLayout을 사용할 때는 각 요

소의 특정 x, y 좌표를 표기해야 한다.

HorizontalLayout HorizontalLayout은 자식 컴포넌트를 가로로 정렬하고 각 자식 컴포넌트는 이전 자식

컴포넌트의 오른쪽에 위치한다.

VerticalLayout VerticalLayout은 자식 컴포넌트를 세로로 정렬하고 각 자식 컴포넌트는 이전 자식 컴포

넌트의 아래에 위치한다.

TileLayout TileLayout은 자식 컴포넌트를 행과 열로 정렬한다. 행과 열을 정렬하기에 앞서 항목을

수평으로 정렬할지 수직으로 정렬할지 설정할 수 있다.


컨테이너와 레이아웃 객체 결합하기

일단 컨테이너와 레이아웃 객체를 선택했다면 MXML에서 컨테이너와 레이아웃 객체를 이용해

원하는 효과를 낼 수 있다. 이제 버튼의 위치를 조정하기 위해 layout 프로퍼티를 사용해 레이아웃

객체를 설정하는 예제를 살펴보자.

<s:Group>

<s:layout>

<s:HorizontalLayout/>

</s:layout>

<s:Button label="1"/>



</s:Group>

<s:Group>

<s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>

레이아웃 객체를 설정하지 않으면 BasicLayout이 사용되고 각 버튼의 x, y 위치를 반드시 설정

해야 한다. 그렇지 않으면 자식 컨트롤은 기본적으로 모두 원점(0, 0)에 위치한다.

콘텐츠 스크롤하기

종종 그룹에 포함된 콘텐츠를 스크롤해야 하는 상황이 올 수 있다. 이전 버전의 플렉스는 모든 컨

테이너가 기본적으로 스크롤 기능을 가지고 있었다. 개발자에게는 편했지만 이러한 스크롤 코드

는 애플리케이션을 실행하는 대부분의 기간 동안 사용되지 않았으며 이로 인해 모든 컨테이너는

번외 코드로 인한 부담에 시달렸다. 플렉스 4에서는 영역이 스크롤 가능한지 설정해야 할 필요가


있으면 Group 태그를 감싸는 Scroller라는 특별한 태그로 스크롤을 가능하게 할 수 있다.

<s:Scroller height="65">

<s:Group>

<s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>

</s:Scroller>

Scroller로 Group을 감싸면 불필요한 스크롤 바가 나타나지 않게 할 수 있다. Scroller는 Group

전체를 표시할 공간이 없을 때 스크롤 바를 추가한다. 이전 예제에서는 수직 스크롤 바가 나타나

도록 Scroller의 height를 65 픽셀로 설정했다. 구체적인 width와 height를 설정하지 않으면 플렉

스는 전체 Group을 화면에 맞추려 할 것이고 모든 내용을 화면에 보여주는 것이 불가능하면 스크

롤이 나타나게 한다.

MXML 태그 디코딩하기

다음 절의 내용을 학습하기에 앞서 배워야 할 중요한 개념이 하나 있다. 바로 클래스 인스턴스와

MXML 프로퍼티 간의 차이점이다. 이전 절에서 보여준 코드 일부를 살펴보면 MXML로 정의한

플렉스 버튼을 볼 수 있다. 지금은 버튼의 label 프로퍼티를 Button XML 태그의 속성으로 정의하

고 있다.


하지만 MXML에서 자식 태그를 사용해 위와 동일한 프로퍼티를 정의할 수 있다. 코드는 다음

과 같다.

<s:Button>

<s:label>3</s:label>

</s:Button>


위와 같이 클래스를 정의하는 두 방법의 결과는 같다. 이렇게 하면 개발할 때 자연스럽게 둘 중

하나를 선택해서 사용하게 될 것이다. 상황에 알맞은 구문을 선택하면 되지만 초보자라면 좀 혼

동될 수도 있다.

이제 정의하는 스타일과는 상관없이 어떤 것이 프로퍼티이고 클래스인지 어떻게 알 수 있을까?

클래스인지 프로퍼티인지 알아내려면 네임스페이스 다음의 첫 글자(이 예제에서 “s” 다음)를 보면

된다. Button의 B처럼 첫 글자가 대문자이면 코드는 클래스 인스턴스를 가리키고 label의 l처럼 첫

글자가 소문자이면 클래스 프로퍼티를 설정하는 것이다.

이전 코드에서 약간 더 추가된 예제를 살펴보자.

<s:Group>

<s:layout>

<s:VerticalLayout/>

</s:layout>



<s:Button>

<s:label>3</s:label>

</s:Button>

</s:Group>

<s:Group> 태그의 G는 대문자이므로 이렇게 하면 Group이라는 클래스 인스턴스를 가리키고

<s:layout> 태그의 l은 소문자이므로 이렇게 하면 Group의 프로퍼티다. <s:VerticalLayout> 태그

의 V는 대문자이므로 VerticalLayout의 새로운 인스턴스를 참조한다.

코드를 말로 풀어보면 다음과 같다. Gorup 클래스의 인스턴스를 만든다. 이 Group 인스턴스의

layout 프로퍼티를 VerticalLayout 클래스의 인스턴스로 설정한다. 이 Group에 세 개의 버튼을

추가하고 레이블로 각각 1, 2, 3을 지정한다.

계속 진행하기 전에 이 절의 내용을 완벽히 숙지하자. 지금까지 학습한 내용의 요점을 이해했다

면 나머지 실습도 매우 쉽게 진행될 것이다.

전자상거래 애플리케이션의 레이아웃 구성하기

FlexGrocer의 전자상거래 애플리케이션은 고객이 식료품을 구입할 수 있다. 애플리케이션의 사

용자 인터페이스를 살펴보면 상단에는 상점 로고와 애플리케이션 전반에 나타나는 내비게이션 링


크가 있고 상단 아래에는 사용자가 다양한 식료품 분류를 검색할 수 있게 클릭할 수 있는 아이콘

이 줄지어 있다. 아이콘 아래는 상품이 진열되는 영역이다.

이번 장에서는 애플리케이션 레이아웃을 구성할 때 디자인 뷰와 소스 뷰를 모두 사용할 것이다.

디자인 뷰는 플래시 빌더의 강력한 기능이지만 처음 접한다면 매우 당황스러운 경험을 할 수도 있

다. 종종 객체를 정확하게 정렬하거나 의도한 컨테이너 안에 컴포넌트를 위치시키기가 어려울 때

가 있다. 따라서 디자인 뷰에서 하는 모든 작업을 코드 예제로도 확인해 볼 것이다. 인터페이스가

교재에 있는 것과 동일하게 보이지 않으면 소스 뷰로 변경해서 수정하고 디자인 뷰로 돌아가길 바

란다.

소스 뷰에서 레이아웃 구성 시작하기

애플리케이션의 레이아웃을 구성하는 첫 번째 단계는 소스 뷰에서 로고와 내비게이션 엘리먼트

를 담는 애플리케이션 영역을 정의하는 것이다.

1. 이전 실습에서 만든 FlexGrocer.mxml 파일을 연다.

이전 실습을 완료하지 않았거나 기능이 제대로 동작하지 않으면 Lesson03/start 폴더의

FlexGrocer.fxp 프로젝트를 가져와도 된다. 부록 A에서 예제 소스의 디렉터리 구조와 프로

젝트를 가져오는 방법을 설명하고 있으니 여기서는 그와 같은 내용은 생략한다. 코드와 관

련된 문제가 있으면 부록 A를 참고하자.

2. 플래시 빌더가 소스 뷰로 돼 있는지 확인한다.

플래시 빌더에서 디자인 뷰와 소스 뷰를 전환하려면 윈도우 상단 근처의 제목 표시줄에 있

는 버튼을 클릭한다.

3. 이전 실습에서 작업한 “My First Flex Application”라는 텍스트의 Label 태그를 찾아서 제

거한다.

4. 제거한 Label 태그가 있던 곳에 controlBarLayout 태그를 추가한다.

<s:controlBarLayout>

</s:controlBarLayout>

이 태그는 소문자로 시작하므로 Application 객체의 프로퍼티를 나타낸다.

컨테이너의 컨트롤 바 영역이 뚜렷하게 나타난다. 애플리케이션에서 로고와 내비게이션 버

튼을 담기 위해 컨트롤 바를 사용한다.


5. controlBarLayout 태그 안에 종료 태그까지 포함된 태그를 이용해서 <s:BasicLayout>을

추가한다.


<s:BasicLayout/>


자체 종료 태그는 controlBarLayout처럼 시작 태그와 종료 태그가 따로 있는 것이 아니라

한 태그 안에 슬래시와 ‘~보다 크다’를 의미하는 기호(/>)로 태그를 닫는 것을 말한다.

<s:BasicLayout/> 태그를 추가하면 컨트롤 바 안에서 절대 위치를 지정할 수 있다. 다시 말

해 항목의 x 좌표와 y 좌표의 위치를 직접 정하는 것이다.

6. controlBarLayout 태그 바로 아래에 <s:controlBarContent> 태그를 새로 추가한다.

이 태그 안에 컨트롤 바에 보여줄 항목을 정의한다.

7. controlBarContent 태그 안에 label 프로퍼티 값을 Flex Grocer로 설정한 Button 태그를

추가한다.

<s:Button label="Flex Grocer"/>

버튼의 label 프로퍼티를 설정하면 화면에 “Flex Grocer”가 나타날 것이다. 이 버튼을

controlBarContent 태그 안에 추가했으므로 버튼은 컨트롤 바 영역에 나타난다.

계속 진행하기 전에 코드가 다음과 같은지 확인한다.






<fx:Declarations>


</fx:Declarations>


<s:BasicLayout/>


<s:controlBarContent>

<s:Button label="Flex Grocer"/>

</s:controlBarContent>

</s:Application>


8. 코드가 예제와 같은지 확인한 후 FlexGrocer.mxml 파일을 저장하고 Problems 뷰에 에러

가 없는지 확인한다.

9. Run 메뉴에서 FlexGrocer를 선택해서 애플리케이션을 웹 브라우저에서 실행한다.

애플리케이션이 시작할 때 화면 상단에 회색 블록을 볼 수 있는데 이 부분이 바로 컨트롤 바 영

역이다. 컨트롤 바 영역에는 “Flex Grocer”라는 글이 적힌 버튼이 보일 것이다. 아직까진 애플리케

이션에서 할 수 있는 일이 많지 않지만 다수의 프로퍼티를 정의했고 레이아웃 객체를 사용하며,

컨테이너에 자식 객체를 추가했다. 지금부터는 학습이 더 쉽고 빨라질 것이다. 웹 브라우저를 닫고

디자인 뷰를 배울 준비를 하자.

디자인 뷰에서 레이아웃 구성하기

이미 애플리케이션 레이아웃에 대해서는 MXML을 사용해서 정의했지만 이제 디자인 뷰를 이용

해서 엘리먼트를 몇 개 더 추가하고 추가한 엘리먼트의 프로퍼티를 설정해보겠다.

1. 플래시 빌더를 디자인 뷰로 전환한다.

디자인 뷰와 소스 뷰를 전환하려면 윈도우 상단의 제목 표시줄에 있는 버튼을 클릭한다.

지금까지 작성한 MXML 코드가 시각적으로 나타날 것이다.

2. 디자인 뷰 화면의 흰색 배경에서 아무 곳이나 클릭해 시작한다.

배경을 클릭하면 화면의 오른쪽 편에는 Properties 패널 상단 타이틀이 s:Application로

변경돼야 한다. 디자인 뷰에서 작업할 때는 Properties 패널에서 컴포넌트 프로퍼티를 설정

할 것이다.


알아두세요 Properties 패널이 현재 화면상에 나타나지 않으면 Window >

Perspective > Reset Perspective를 선택한다. 이렇게 하면 디자인 뷰 옵션이 기본

설정으로 초기화되고 Properties 패널이 나타날 것이다.

?

3. 이전 실습에서 추가한 Flex Grocer 버튼 인스턴스를 클릭한다.

버튼을 클릭하면 Properties 패널이 s:Button으로 바뀌면서 방금 선택한 Flex Grocer 버

튼을 참조하고 있음을 나타낸다.

4. Properties 뷰의 아래쪽으로 Size라는 글자 옆의 삼각형을 클릭해 Size and Position 분류

를 확장하면 Width, Height, X, Y를 설정하는 텍스트 박스가 보일 것이다. X와 Y 필드를

사용해서 x 좌표와 y 좌표 값을 5로 설정한다.

y 좌표를 변경하면 버튼의 위치를 맞추기 위해 컨트롤 바가 길어진다. Flex Grocer 버튼은

이 교재의 후반부에서 회사 로고 색상과 크기를 설정하기 위해 스타일을 적용할 것이다. 지

금은 버튼을 적합한 위치에 놓기만 하자. 이것이 절대 좌표 위치에 대한 예다.

5. Components 뷰를 찾는다. Components 뷰는 기본적으로 화면의 좌측 하단에 위치해 있

다. Controls 글자 옆의 삼각형을 클릭해 Controls 폴더를 열고 Button 컨트롤을 드래그해

서 Button 컨트롤이 컨트롤 바의 우측 모서리 가까이에 위치하게 한다. Properties 뷰에서

Button 컨트롤 ID를 btnCartView로, label을 View Cart로 지정한다.


팁 파란색 바가 나타나서 컨트롤을 놓을 위치를 기준으로 다른 컴포넌트가 가로나

세로로 놓일지 알려준다. 이 줄은 여러 컴포넌트를 빠르게 줄지어 놓을 때 유용하다.

정확한 x 좌표와 y 좌표에 대해서는 걱정하지 않아도 된다. 실습 후반에 버튼을 위치시키기

위해 제약 기반 레이아웃(constraint-based layout) 사용법을 배우면서 오른쪽 모서리가 항

상 애플리케이션 객체의 오른쪽 모서리로부터 10 픽셀 떨어지도록 만들 것이다.

6. 두 번째 버튼 컨트롤을 컨트롤 바의 첫 번째 버튼 컨트롤 좌측으로 드래그한다. Properties

뷰에서 추가한 버튼 컨트롤 ID를 btnCheckout으로 하고 label을 Checkout으로 한다.

FlexGrocer 사용자는 쇼핑을 종료한 후에 선택한 상품을 구매하려고 이 버튼을 클릭할 것

이다. 역시 정확한 위치는 실습 후반에서 정하도록 한다.

7. Controls 폴더에서 Label을 드래그해서 화면의 우측 하단 모서리 가까이에 놓는다. Label

을 더블 클릭하고 text 프로퍼티를 (c) 2009, FlexGrocer로 설정한다.

지금까지 추가한 버튼 컨트롤처럼 정확한 위치는 아직 걱정하지 않아도 된다.

8. Components 패널에서 Controls 폴더를 접고 Layout 폴더를 펼친다.

9. Components 뷰의 Layout 폴더에서 Group 컨테이너를 드래그해서 컨트롤 바 아래의 흰

색 영역에 놓는다. Properties 패널에서 Group ID를 bodyGroup으로 설정한다. 그리고

height와 width 프로퍼티를 모두 100%로 설정하고 x 좌표와 y 좌표를 0으로 설정한다.

10. bodyGroup이 선택돼 있는 상태에서 Properties 패널을 아래까지 스크롤한다. Layout 드

롭다운 메뉴가 보이면 spark.layouts.HorizontalLayout을 선택해서 bodyGroup의 자식

컴포넌트가 세로로 정렬되게 설정한다.

이 그룹에는 상품의 상세정보와 장바구니를 담는다. HorizontalLayout을 가진 Group은


자식 컴포넌트를 가로로 정렬한다는 것을 기억하자. 상품이 왼쪽에 나타나고 장바구니는

오른쪽에 표시될 것이다.

11. Components 뷰의 Layout 폴더에서 또 하나의 Group 컨테이너를 끌어서 방금 추가한

bodyGroup이라는 Group 안으로 놓는다. Properties 패널에서 Group ID를 products로

설정하고 height를 150, width를 100%로 설정한다.

12. Properties 패널 하단에서 신규 Group에 spark.layouts.VerticalLayout을 할당해서 자식

컴포넌트가 세로로 정렬되게 설정한다.

이 세로 그룹에는 상품 상세정보가 담길 것이다.

13. 계속하기 전에 소스 뷰로 돌아가서 코드가 다음 코드와 동일한지 확인한다. 태그가 다르거

나 누락된 게 있으면 수정하자. Checkout Button, View Cart Button, Label의 x, y 좌표는

아직 설정하지 않았으므로 약간 달라도 괜찮다.






<fx:Declarations>


</fx:Declarations>


<s:BasicLayout/>



<s:Button id="btnCheckOut" x="463" y="10" label="Checkout"/>

<s:Button id="btnCartView" x="541" y="10" label="View Cart" />

<s:Button label="FlexGrocer" x="5" y="5"/>


<s:Label x="518" y="320" text="(c) 2009, FlexGrocer"/>

<s:Group x="0" y="0" width="100%" height="100%" id="bodyGroup">

<s:layout>


</s:layout>

<s:Group width="100%" height="150" id="products">

<s:layout>

<s:VerticalLayout/>


</s:layout>

</s:Group>

</s:Group>

</s:Application>

상품 영역 정의하기

소스 코드가 예제 코드와 일치하는지 확인하고 디자인 뷰로 돌아가 상품 영역을 정의한다. 이제

온라인 식료품점의 모든 상품을 보여주는 컨트롤을 정의해 보겠다.

팁 종종 소스 뷰에서 디자인 뷰로 전환할 때 디자인 뷰의 Properties 패널이 사라질 수도 있

다. 패널이 없어지면 Windows > Properties를 눌러 다시 보이게 한다.

1. Components 뷰 Controls 폴더에서 Label 컨트롤을 드래그해서 이전 실습에서 추가한 ID

가 products인 수직 Group에 놓는다. 디자인 뷰를 보면 수직 그룹은 희미한 보더로 컨트롤

바 바로 아래에서 시작해서 150픽셀 아래에서 화면과 교차할 것이다. 이 영역 내의 아무 데

나 Label을 내려놓으면 된다.

2. Label 컨트롤 ID를 prodName으로 설정하고 text 프로퍼티는 Milk로 지정한다.

3. 첫 번째 Label 컨트롤 아래에 두 번째 Label 컨트롤을 드래그한다. 두 번째 Label ID를

price로 설정하고 text 프로퍼티는 $1.99로 설정한다.

이 신규 Label 컨트롤은 Group 컨테이너의 자식 컴포넌트이고 Group은 VerticalLayout

객체를 가지고 있으므로 상품명은 상품 가격 위에 나타난다.

팁 Outline 탭을 클릭해 Outline 뷰를 열어 애플리케이션의 계층구조를 확인할 수

있다. 루트는 Application 태그이고 이렇게 하면 Label(copyright)과 bodyGroup

이라는 Group을 자식으로 갖고 controlBarContent와 controlBarLayout을 프로퍼

티로 갖는다. 또 controlBarContent와 bodyGroup의 다양한 자식들을 볼 수 있다.

products라는 Group을 펼치면 방금 추가한 두 개의 레이블을 볼 수 있다. Outline

뷰는 컴포넌트를 변경할 때 매우 유용한 뷰다. 디자인 뷰에서는 products Group을

선택하는 것이 어려울 수 있다. Outline 뷰를 클릭하면 products Group을 쉽게 선택

할 수 있다.


4. 두 개의 Label 컨트롤 아래에 Button 컨트롤을 추가한다. ID는 add로 하고 label은

AddToCart로 한다.

사용자는 각 상품의 상품명과 가격이 함께 표시되길 원한다. AddToCart 버튼은 사용자가

장바구니에 상품을 추가하는 기능이다. 두 개의 Label 컨트롤과 Button 컨트롤이 수직 레

이아웃을 가진 그룹에 위치하므로 두 개의 컴포넌트는 세로로 표시된다. Button 컨트롤에

기능을 추가하는 것은 다른 실습에서 하겠다.

5. 파일을 저장하고 Run을 클릭한다.

컨트롤 바 영역에 위치한 컨트롤과 그 아래의 본문 영역에 위치한 컨트롤의 차이를 확실히

알 수 있다.

제약 기반 레이아웃에서 작업하기

플렉스는 제약 기반 레이아웃을 지원하며 사용자 인터페이스 요소를 자유롭게 정렬할 수 있고,

사용자가 윈도우의 크기를 재조정할 때 컴포넌트를 늘리고 이동하기 위한 제약사항을 설정해서

절대 위치를 픽셀 수준까지 정확하게 지정할 수 있다. 컴포넌트의 크기와 위치를 제어하는 방법은

중첩된 컨테이너(이전 실습에서 살펴본 Group 컨테이너와 같은)의 레이아웃을 구성하는 것과 다

르다.

제약 기반 레이아웃에서 모든 컨트롤은 절대 위치를 허용하는 BasicLayout으로 설정된 부모 컨

테이너 모서리에 위치한다. Form과 같은 일부 특별한 컨테이너를 제외하고 Application과 Panel

을 포함한 모든 Group과 SkinnableContainer에 BasicLayout을 사용할 수 있다.


BasicLayout 객체를 사용한 컨테이너는 요소가 절대 좌표에 위치할 것을 요구한다. 하지만 레이

아웃 제약사항은 사용자가 윈도우 크기에 대해 레이아웃을 동적으로 조정할 수 있게 해준다. 예

를 들면 브라우저 크기에 상관없이 레이블이 항상 애플리케이션 우측 하단 구석에만 나타나게 하

고 싶다면 부모 컨테이너 우측 모서리에 컨트롤을 고정시킬 수 있다. 그러고 나면 컨트롤 위치는

항상 부모 컨테이너 우측 모서리의 상대 위치에 유지된다.

플렉스에서는 이처럼 상대 위치에 기반을 둔 레이아웃은 앵커(anchor)로 처리할 수 있다. 앵커는

부모 컨테이너의 모서리나 상하좌우로부터 컨트롤이 어떠한 상대적인 위치에 나타나야 하는지 설

정하는 데 사용된다. 컨트롤이 하단과 우측 모서리에서 특정 거리를 유지하기 위해서는 하단에 있

는 체크박스와 Properties 뷰에 있는 Layout 영역의 Constraints 영역에서 컨트롤 오른쪽에 있는

체크박스를 선택하고 컨트롤을 제약할 컨테이너 모서리로부터 어느 정도 떨어질지 픽셀 수를 텍

스트 박스에 설정하면 된다.

플렉스는 컨테이너의 상단, 하단, 왼쪽, 오른쪽, 수직 정렬, 수평 정렬을 기준으로 제약을 설정할

수 있다.

팁 컨테이너가 절대 위치(BasicLayout)를 사용하는 한 모든 제약사항은 컨테이너

모서리를 기준으로 설정된다. 제약사항은 다른 컨트롤이나 컨테이너에 대해 설정될

수 없다.

1. 이전 실습에서 사용한 FlexGrocer.mxml 파일을 연다.

이전 실습을 완료하지 않았거나 기능이 제대로 동작하지 않으면 Lesson03/intermediate

폴더의 FlexGrocer-PreConstraints.fxp 프로젝트를 가져와도 된다. 부록 A에서 디렉터리

구조와 프로젝트를 가져오는 방법을 설명하고 있으니 여기서는 설명을 생략한다. 코드와

관련된 문제는 부록 A를 참고하자.

2. Checkout Button을 찾아 선택한 후 Properties 뷰 아래쪽에 있는 Size and Position 절의

Constraints 영역에서 버튼 오른쪽 모서리가 컨테이너 우측 모서리로부터 10 픽셀만큼 떨

어지도록 제약사항을 추가하고 컨트롤 Y 좌표도 10 픽셀로 설정한다.


오른쪽-모서리 제약

Y 위치

오른쪽 모서리에서 제약사항을 설정하기 위해 Constraints 영역에서 오른쪽 상단에 위치

한 체크박스를 클릭한다. 나타나는 텍스트 박스에 버튼이 모서리에서 얼마만큼의 간격을

유지할지 픽셀 수를 입력한다. 레이블이 화면에서 사라지는 것처럼 보이면 디자인 뷰 하단

의 스크롤 바를 확인한다. 기본적으로 디자인 뷰는 애플리케이션의 한 부분만 보여주므로

필요한 부분을 찾으려면 스크롤해야 할지도 모른다.

3. View Cart 버튼을 찾아서 선택한다. 버튼 오른쪽 모서리가 컨테이너 오른쪽 모서리에서

90 픽셀만큼 떨어지도록 제약사항을 추가한다. 컨트롤 Y 좌표가 10 픽셀로 설정됐는지 확

인한다.

이제 브라우저 너비와 상관없이 두 개의 내비게이션 버튼은 항상 컨테이너 우측 상단 모서

리를 기준으로 고정되도록 설정했다.

4. 저작권 고지(copyright notice)가 포함된 Label 컨트롤을 찾아 선택한다. 이 Label이 컨테이

너 하단에서 위로 10 픽셀 떨어지고 오른쪽 모서리에서 10 픽셀 떨어지게끔 제약사항을 추

가한다. Constraints 영역에서 오른쪽 상단에 위치한 체크박스를 클릭하고 텍스트 박스에

10을 입력한다. 또 하단 체크박스를 클릭하고 텍스트 박스에 10을 입력한다.

copyright 레이블이 다른 컨테이너보다 아래에 위치하므로 Outline 뷰에서 선택하면 빠르

게 선택할 수 있다. 이러한 설정은 Label 컨트롤이 너비와 상관없이 우측 하단 모서리가 애

플리케이션의 우측 하단 모서리에서 10 픽셀 위, 10 픽셀 좌측으로 떨어져 있는 것을 보장

해준다.

소스 뷰로 전환하면 전체 파일은 다음과 비슷할 것이다.






<fx:Declarations>



</fx:Declarations>


<s:BasicLayout/>



<s:Button id="btnCheckout" label="Checkout" right="10" y="10"/>

<s:Button id="btnCartView" label="View Cart" right="90" Y="10"/>

<s:Button label="Flex Grocer" x="5" y="5"/>


<s:Label text="(c) 2009, FlexGrocer" right="10" bottom="10"/>


<s:layout>


</s:layout>


<s:layout>

<s:VerticalLayout/>

</s:layout>

<s:Label text="Milk" id="prodName"/>

<s:Label text="$1.99" id="price"/>

<s:Button label="AddToCart" id="add"/>

</s:Group>

</s:Group>

</s:Application>

각 항목을 추가하고 프로퍼티를 설정한 순서에 따라 코드가 약간 다를 수 있지만 염려할

필요는 없다. 순서는 별로 중요하지 않다. 디자인 뷰에서 추가한 컨테이너와 컨트롤은 모두

소스 뷰에서 태그로 표현된다. 컨테이너 안에 요소를 추가하면 컨테이너 태그의 자식 태그

로 추가된다. 아울러 레이아웃 제약사항을 추가하면 관련 컴포넌트의 속성으로 설정되는

것을 눈여겨보자.

5. 디자인 뷰로 변경해서 bodyGroup 컨테이너(bodyGroup은 여러분이 추가한 첫 번째 컨

테이너로 width와 height가 모두 100%다)에 두 번째 Group 컨테이너를 추가한다. 추가한

신규 Group ID를 cartGroup으로 설정하고 Width 프로퍼티는 공백으로 두고 Height는

100%로 설정한다. bodyGroup을 찾기 힘들면 Outline 뷰에서 더 쉽게 선택할 수 있음을

기억해두자.

실수로 신규 Group을 다른 컨테이너에 넣었으면 소스 뷰로 변경해 태그를 직접 옮겨서 쉽

게 고칠 수 있다. 지금까지 작업한 코드를 소스 뷰에서 보면 다음과 같을 것이다.



<s:layout>


</s:layout>


<s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>

<s:Group height="100%" id="cartGroup">

</s:Group>

</s:Group>

6. 디자인 뷰에서 cartGroup 컨테이너의 layout 프로퍼티를 VerticalLayout으로 설정한다.

cartGroup을 찾을 수 없으면 Outline 뷰에서 선택하고 디자인 뷰 윈도우를 스크롤해서 강

조된 컨테이너를 찾는다.

7. cartGroup 컨테이너에 text 프로퍼티가 Your Cart Total: $인 Label 컨트롤을 추가한다.

상품 오른쪽에는 장바구니에 포함된 항목의 현재 소계가 얼마인지 알려주는 장바구니 요

약 정보가 위치할 것이다.

알아두세요 이 시점에서 products 컨테이너가 공간을 100% 사용하도록 설정했지

만 그 옆에 cartGroup을 추가하고 Label을 넣었다. 그럼 100% 이상을 사용하는 데

문제가 되지 않을까? 플렉스에서는 100% 이상의 컨테이너 너비와 높이를 설정할 수

있다. 플렉스 컨테이너는 이를 고려해서 요청한 퍼센티지에 비례해서 공간을 나눈다.

사용 가능한 공간보다 더 많은 공간이 요청됐으므로 각 요청은 사용한 공간에 비례한

만큼 공간을 할당받을 수 있다. 어떤 요소가 고정된 너비를 할당받으면 다른 비례 크

기가 할당되기 전에 고정된 크기가 사용 가능한 공간에서 빠진다.

?

8. Components 뷰의 Controls 폴더에서 Button 컨트롤을 끌어서 위에서 작업한 Label 컨트

롤 아래에 놓고 label 프로퍼티를 View Cart로 설정한다.

이 Button은 장바구니의 모든 콘텐츠를 보여주는 데 사용된다.


실수로 컴포넌트를 다른 컨테이너에 넣었다면 소스 뷰로 변경한 후 태그를 직접 옮겨서 쉽

게 고칠 수 있다. 지금까지 작업한 코드를 소스 뷰에서 보면 다음과 같을 것이다.


<s:layout>


</s:layout>


<s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>

<s:Group height="100%" id="cartGroup">

<s:layout>

<s:VerticalLayout/>

</s:layout>

<s:Label text="Your Cart Total: $"/>

<s:Button label="View Cart"/>

</s:Group>

</s:Group>

9. Outline 뷰에서 Application을 선택한다. Properties 패널에서 Min width 값 955와 Min

height 값 600을 제거한다.

애플리케이션이 실행되면 브라우저 크기를 재조정할 수 있고 이에 따라 버튼과 텍스트가

적절하게 제약사항이 적용된 상태로 나타나는 것을 확인할 수 있다. 최소 너비와 높이는

애플리케이션이 더 작은 화면에서 실행되는 것을 방지한다.

10. 파일을 저장하고 Run을 클릭한다.


뷰 스테이트 다루기

플래시 빌더를 사용해서 사용자가 수행하는 작업에 따라 애플리케이션 모양도 바뀌게 만들 수 있

다. 예를 들면 전자상거래 애플리케이션은 사용자에게 구매 가능한 다양한 상품을 보여주면서 시

작한다. 그런데 사용자가 장바구니에 품목을 추가했을 때 총합계 같은 것을 뷰에 추가해 사용자가

현재 장바구니에 담긴 품목을 알 수 있게 만들어보자. 마지막으로 사용자가 장바구니에 담긴 콘텐

츠를 보고 관리할 수 있는 방법도 필요하다.

뷰 스테이트 만들기

플렉스에서는 이와 같은 상호작용을 뷰 스테이트(view state)로 추가할 수 있다. 뷰 스테이트는 애

플리케이션이나 사용자 정의 컴포넌트에 정의하는 뷰 가운데 하나다. 모든 MXML 페이지는 적어

도 하나의 스테이트를 가지고 있고, 이를 기본 상태(default state)라고 하며 파일의 기본 레이아웃으

로 표현된다.

추가된 스테이트는 기본 뷰 스테이트를 수정한 버전이나 다른 스테이트로 MXML에 표시된다.



폴더의 FlexGrocer-PreStates.fxp 프로젝트를 가져와도 된다. 부록 A에서 디렉터리 구조와

프로젝트를 가져오는 방법을 설명하고 있으니 여기서는 이와 관련된 내용은 생략하겠다.

코드와 관련된 문제가 있으면 부록 A를 참고하자.

2. 디자인 뷰인지 확인하고 States 뷰가 열려 있지 않다면 States 뷰를 연다.

디자인 뷰에서 플래시 빌더를 봤을 때 States 뷰가 보이지 않으면 Window > States를 선택

해서 뷰를 추가할 수 있다. 애플리케이션 기본 레이아웃을 표현하는 스테이트 하나가 이미

생성돼 있는 것을 볼 수 있다.


3. cartView라는 새 스테이트를 만든다. 이렇게 하면 <State1>과 중복된다.

States 뷰 상단의 New State 아이콘( )을 클릭해 스테이트를 생성하거나 뷰를 선택하고 오른쪽 버튼을 클릭한 후 New... 옵션을 선택해서 새 스테이트를 생성할 수 있다. cartView

스테이트는 사용자에게 장바구니 안에 추가된 모든 품목의 상세 정보를 보여준다.

4. cartView 스테이트를 선택한 상태에서 products 컨테이너를 클릭하고 컨테이너의 height

와 width 값을 0으로 설정한 후 cartGroup 컨테이너를 선택해 height와 width 값을 100%

로 설정한다.

화면 중앙에 위치한 모든 상품을 cartView로 변경할 것이다. 그러므로 products 컨테이너

가 공간을 차지하지 않게 크기를 재조정하고 cartGroup 컨테이너의 크기를 조정해서 가용

한 공간을 차지하게 만든다.

현 시점에서 화면 컨트롤은 꽤 지저분하다. 각 컨트롤 위에 나타난 컨트롤이 매우 복잡하

게 모여 있다. 플렉스에서 width와 height 프로퍼티는 항목의 위치를 계산하는 데 사용된

다. 지금은 products 컨테이너가 아무런 공간을 차지하지 않도록 설정돼 있어 cartGroup

컨테이너에 새로 생긴 공간을 차지하도록 좌측으로 옮겼다. 하지만 품목에 공간이 할당되

지 않았다고 해서 화면에 안 보이는 것은 아니다.

5. products 컨테이너를 선택하고 visible 프로퍼티를 false로 변경한다. 아니면 Properties 패

널의 CategoryView를 클릭하고 visible 프로퍼티를 찾아 값을 false로 변경해도 된다.

Categoryview


팁 Outline 뷰를 사용하면 화면에서 컨테이너를 찾는 것보다 쉽게 찾을 수 있다.

6. States 뷰에서 cartView 스테이트를 선택하고 Components 뷰의 Controls 폴더에서

DataGrid 컨트롤을 끌어서 View Cart 버튼 아래에 놓는다. DataGrid 컨트롤 ID를

dgCart로 설정하고 DataGrid 컨트롤의 width를 100%로 설정한다.

이후 실습에서는 장바구니의 콘텐츠를 사용자에게 보여주는 데 DataGrid 컨트롤을 사용

할 것이다.

DataGrid 컨트롤이 cartGroup 컨테이너에 추가됐는지 확인한다. 실수로 cartGroup 컨테

이너 전에 DataGrid 컨트롤을 넣으면 애플리케이션과 코드가 약간 달라질 것이다.

파일을 소스 뷰에서 보면 다음 코드와 같이 DataGrid가 추가된 것을 볼 수 있다.




xmlns:mx="library://ns.adobe.com/flex/mx">

<s:states>

<s:State name="State1"/>

<s:State name="cartView"/>

</s:states>

<fx:Declarations>


</fx:Declarations>


<s:BasicLayout/>




<s:Button id="btnCartView" label="View Cart" right="90" y="10"/>





<s:layout>



</s:layout>

<s:Group width="100%" height="150" id="products"

width.cartView="0" height.cartView="0"

visible.cartView="false">

<s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>

<s:Group height="100%" id="cartGroup" width.cartView="100%">

<s:layout>

<s:VerticalLayout/>

</s:layout>


<s:Button label="View Cart"/>

<mx:DataGrid includeIn="cartView" id="dgCart" width="100%">

<mx:columns>

<mx:DataGridColumn headerText="Column 1"

dataField="col1"/>


dataField="col2"/>


dataField="col3"/>

</mx:columns>

</mx:DataGrid>

</s:Group>

</s:Group>

</s:Application>

7. 파일을 저장한다.

여기서 새로 추가된 구문을 살펴보자. 먼저 DataGrid 클래스 안에 cartView 스테이트에

만 컨트롤이 나타나도록 설정한 includeIn 프로퍼티를 살펴보겠다. 다음으로 products

컨테이너에 아직까지 width와 height가 각각 100%와 150으로 설정돼 있는데도 width.

cartView="0"과 height.cartView="0"도 포함돼 있는 것을 확인할 수 있다. 이 구문은 플렉

스가 이 프로퍼티를 해당 스테이트에 설정하게 한다.


파일을 테스트하면 별다른 차이점을 볼 수 없다. 사용자가 스테이트를 토글할 수 있는 기능을

추가하지 않았기 때문이다. 다음 실습에서 이러한 내비게이션 기능을 추가하겠다.

뷰 스테이트 제어하기

각 MXML 컴포넌트에는 currentState라는 프로퍼티가 있다. currentState 프로퍼티는 사용자에

게 보여줄 해당 스테이트를 제어하는 데 사용할 수 있다.



폴더의 FlexGrocer-PreControl.fxp 프로젝트를 가져와도 된다. 부록 A에서 디렉터리 구조

와 프로젝트를 가져오는 방법을 설명하고 있으니 여기서는 이와 관련된 내용은 생략한다.

코드와 관련된 문제가 있으면 부록 A를 참고하자.

2. 디자인 뷰로 돌아가서 States 뷰를 열고 State1을 선택해서 현재 스테이트를 설정한다.

사용자가 애플리케이션의 다른 스테이트로 전환할 수 있게 기본 뷰에 기능을 추가할 것이다.

3. cartGroup 컨테이너에서 View Cart 버튼 컨트롤을 선택한다. Properties 뷰에서 click 프

로퍼티를 this.currentState='cartView'로 설정한다.

Button의 click과 같은 이벤트는 5장, ‘이벤트 처리’에서 자세히 다루겠다. 여기서 반드시 이

해하고 넘어가야 할 사항은 사용자가 링크를 클릭하면 뷰가 cartView 스테이트로 바뀐다

는 것이다.

조심하세요 스테이트의 이름은 대소문자를 구분하고 이전 장에서 입력한 이름과 정확

히 일치해야 한다. 디자인 뷰에서 입력할 때는 스테이트 이름에 작은따옴표를 사용해

야 한다.

!

4. 컨트롤 바에서 View Cart 버튼 컨트롤을 선택한다. properties 뷰에서 click 프로퍼티를

this.currentState='cartView'로 설정한다. 이제 cartView 스테이트에 진입하는 방법은 두

가지다.

5. cartView 스테이트로 전환한다. DataGrid 컨트롤 아래에 새 Button 컨트롤을 추가하고

label 프로퍼티를 Continue Shopping으로 설정한다. click 프로퍼티는 this.currentState=''

로 설정한다.


currentState를 빈 문자열로 설정하면 애플리케이션이 기본 스테이트로 초기화된다.

6. cartView 스테이트에서 cartGroup 안에 있는 View Cart 버튼을 제거한다.

사용자가 장바구니를 보고 있으면 View Cart 버튼이 필요하지 않다. 디자인 뷰에서 View

Cart 버튼을 선택하고 Delete을 눌러서 제거하면 된다.

완성된 애플리케이션을 소스 뷰에서 보면 다음과 같다:





<s:states>



</s:states>

<fx:Declarations>


</fx:Declarations>


<s:BasicLayout/>




<s:Button id="btnCartView" label="View Cart" right="90" y="10"

click.State1="this.currentState=’cartView’"/>





<s:layout>


</s:layout>

<s:Group width="100%" height="150" id="products" width.cartView="0"

height.cartView="0" visible.cartView="false">

<s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>


<s:Group height="100%" id="cartGroup" width.cartView="100%">

<s:layout>

<s:VerticalLayout/>

</s:layout>


<s:Button label="View Cart" click="this.currentState=’cartView’"

includeIn="State1"/>


<mx:columns>


dataField="col1"/>


dataField="col2"/>


dataField="col3"/>

</mx:columns>

</mx:DataGrid>

<s:Button includeIn="cartView" label="Continue Shopping"

click="this.currentState=’’"/>

</s:Group>

</s:Group>

</s:Application>

7. 애플리케이션을 저장하고 테스트한다. 이제 추가한 버튼을 클릭해서 스테이트를 바꿀 수

있다.


리팩터링

리팩터링은 개발자의 무기 가운데 가장 이해도가 낮지만 가장 유용한 도구다. 동적인 인터페이스

는 종종 프로토타입 단계와 개발 단계에서 코드가 다시 분리되거나 통합되고 추가되므로 리팩터

링은 플렉스 개발자와 액션스크립트 개발자에게 중요한 사항이다.

리팩터링을 간단히 설명하면 코드의 기능은 변경하지 않되 장기적인 목표에 더 부합하는 코드

로 재정비하는 프로세스다. 장기적인 목표로는 유지보수성을 높이고 추가적인 개발 단계를 용이

하게 하기 위해 아키텍처를 수정하거나 새로운 개발자의 이해를 돕게끔 프로젝트 위치나 구조를

변경하는 것 등이 있다. 하지만 한 가지는 항상 변함없다. 바로 성공적인 리팩터링 과정이 끝나면

소스 코드를 보지 않는 이상 애플리케이션의 변화를 알아차리지 못한다는 것이다.

많은 개발자는 이러한 점과 프로세스를 번거롭게 여긴다. 애플리케이션을 실행할 때 눈에 띄지

도 않는데 이미 작성한 코드를 왜 굳이 시간을 들여서 바꾸냐는 것이다. 여기엔 여러 가지 대답을

할 수 있지만 중요한 이유 몇 가지는 다음과 같이 정리할 수 있다:

▶ 학습 : 새로운 언어를 배우고 지속적으로 사용하는 것은 배움의 연속이다. 매일 새로운 것

과 새로운 기술을 배울 것이다. 이렇게 하면 수일부터 수개월 동안 작성한 코드가 효율적이

지 않거나 특정 상황에서는 효과가 없다는 사실을 깨닫게 된다. 과거에 작성한 코드에 계

속 관심을 두고 리팩터링을 하면 유지보수가 쉽고 구조가 탄탄하게 바뀐다.

▶ 코드 중복 : 개발을 하면서 애플리케이션의 여러 곳에서 같은 기능이 필요할 때가 많다. 시

간적인 문제로 이러한 코드는 중복된 채로 그대로 남아 있을 것이다. 이 경우 코드를 변경

해야 할 때 해당 코드가 사용된 곳을 모두 찾아서 고쳐야 한다. 중복을 피하고 공유 코드

를 새로운 곳으로 옮기면 앞으로 개발할 때 더 효율적이고 빨라질 것이다.

▶ 큰 그림 : 코드 작성을 시작할 때는 지금 코딩하는 코드 조각이 시스템에 어떻게 서로 맞춰

질지 알기 힘들다. 이러한 조각이 프로세스 초기에 일찍 자리를 잡으면 나중에 코드를 통

합할 때 코드를 다른 부분에 맞춰 수정하거나 쪼개야 할 것이다. 프로세스 진행 과정에서

코드를 리팩터링하는 데 익숙하다면 완성될 시스템의 비전을 좀 더 명확히 알 수 있고 코

드가 완성되고 나면 객체와 구조가 좀 더 유기적으로 작동할 것이다.

리팩터링을 해야 하는 두 가지 이유가 있다. 첫 번째로 많은 플렉스 개발 입문자들과 액션스크립

트 세상에서는 개발 프로세스에 엄격한 접근법을 적용하고자 하고 여기에는 리팩터링이 포함되지

않는다. 시간이 흐를수록 개발자들이 도구 사용법을 배우는 것보다 언어를 익히는 데 매우 어려

움을 겪는다는 사실을 알게 됐고, 그저 우리는 이러한 고통을 줄여주고 싶을 뿐이다.


두 번째로 이 책의 내용을 학습하는 데 필요하다. 사실 동일한 목표를 달성하기 위해 다양한 기

법을 배울 때가 있다. 어떤 기능을 구현하기 위한 방법으로 처음부터 완벽한 방법을 소개하기란

불가능하다. 이는 각 기능들이 상호 의존하는 경향이 있기 때문이다. 그러므로 새로운 방법으로

구현하는 방법을 충분히 배우려면 리팩터링을 해야 한다. 이렇게 하면 두 가지 혜택이 따른다. 어

떤 목표를 달성하는 다양한 방법을 이해하는 능력과 유용한 예제와 참고 자료를 가지고 코드 기

반을 정교하게 다듬어 최종 애플리케이션에 반영하는 능력이다.

이제 이 책의 학습을 손쉽게 진행할 수 있게 지금까지 개발한 애플리케이션을 리팩터링할 것

이다.

구성된 컨테이너 사용하기

본 장에서 배웠듯이 대부분의 플렉스 컨테이너는 자식 컴포넌트의 위치를 나타내는 레이아

웃 객체를 사용한다. 이 레이아웃 객체는 다음 예제처럼 일반적으로 Group layout 프로퍼티에

LayoutObject을 추가해서 설정한다.

<s:Group>

<s:layout>


</s:layout>




</s:Group>

이렇게 하면 코드 구조는 유연해지지만 새 Group을 생성할 때마다 별도의 코드를 작성해야 한

다. 애플리케이션의 규모가 작다면 이렇게 해도 별 문제가 없지만 애플리케이션의 규모가 크면 수

천 개의 Group에 레이아웃 객체를 추가하는 것은 매우 번거로운 작업일 것이다. 이러한 문제를 해

결하기 위해 플렉스에서는 기존 컴포넌트와 프로퍼티로 구성된 새로운 컴포넌트를 생성할 수 있

다. 그리고 이러한 새 구조를 원하는 기능의 단축 기능으로 사용할 수 있다.

플렉스 프레임워크에는 이러한 단축 기능 중 일부가 VGroup과 HGroup이라는 폼으로 이미 내

장돼 있다. 다음 표에서 왼쪽과 오른쪽으로 구분해 놓은 코드는 동일한 역할을 한다.


대체 단축 기능

layout�프로퍼티�사용 합성�버전

<s:Group>

<s:layout>


</s:layout>




</s:Group>

<s:HGroup>




</s:HGroup>

<s:Group>

</s:layout>

<s:VerticalLayout/>

</s:layout>




</s:Group>

<s:VGroup>




</s:VGroup>

VGroup과 HGroup의 소스 코드를 유심히 살펴보면 layout 프로퍼티를 설정하며 배웠던

Group보다 좀 더 많은 기능을 갖고 있음을 확인할 수 있다. 9장, ‘애플리케이션을 컴포넌트로 나누

기’와 18장, ‘사용자 정의 액션스크립트 컴포넌트 만들기’에서 코드를 재사용할 기회가 있을 때 컴

포넌트를 만드는 법을 배울 것이다.

애플리케이션 리팩터링

이 절에서 HorizontalLayout이 포함된 모든 Group을 HGroup으로 변환하고 VerticalLayout이

포함된 Group을 VGroup으로 변경할 것이다. 이는 애플리케이션 기능은 변경하지 않고 내부 구

조만 성공적으로 변경하기 위해서다.

1. 앞에서 사용한 FlexGrocer.mxml 파일을 연다.


폴더의 FlexGrocer-PreRefactor.fxp 프로젝트를 가져와도 된다. 부록 A에서 디렉터리 구

조와 프로젝트를 가져오는 방법을 설명하고 있으니 여기서는 이와 관련한 내용은 생략한

다. 코드와 관련된 문제가 있으면 부록 A를 참고하자.


2. 소스 뷰로 변경한다.

3. bodyGroup 그룹을 찾아 HGroup으로 변경하고 그룹의 종료 태그도 변경해야 한다.

4. bodyGroup 내부의 layout 프로퍼티에 해당하는 태그와 HorizontalLayout 객체를 제거

한다.

5. products group을 찾아서 VGroup으로 변경하고 그룹의 종료 태그도 변경해야 한다.

6. products group 내부의 layout 프로퍼티에 해당하는 태그와 bodyGroup 내부의 Vertical

Layout 객체를 제거한다.

7. cartGroup에 대해서도 위의 과정을 반복한다.

애플리케이션을 리팩터링하고 나면 코드는 다음과 같을 것이다.





<s:states>



</s:states>

<fx:Declarations>


</fx:Declarations>


<s:BasicLayout/>




<s:Button id="btnCartView" label="View Cart" right="90" y="10"

click.State1="this.currentState=’cartView’"/>




<s:HGroup x="0" y="0" width="100%" height="100%" id="bodyGroup">

<s:VGroup width="100%" height="150" id="products" width.cartView="0"

height.cartView="0" visible.cartView="false">





</s:VGroup>

<s:VGroup height="100%" id="cartGroup" width.cartView="100%">


<s:Button label="View Cart" click="this.currentState=’cartView’"

includeIn="State1"/>


<mx:columns>


dataField="col1"/>


dataField="col2"/>


dataField="col3"/>

</mx:columns>

</mx:DataGrid>

<s:Button includeIn="cartView" label="Continue Shopping"

click="this.currentState=’’"/>

</s:VGroup>

</s:HGroup>

</s:Application>

8. 파일을 저장하고 실행한다.

애플리케이션은 동일한 기능과 View Cart 버튼을 가지고 이전과 동일하게 작동할 것이다.

하지만 코드를 유지보수하기가 좀 더 수월해졌다.


▶ 컨테이너와 레이아웃 개체 사용

▶ 소스 뷰에서의 애플리케이션 레이아웃 구성

▶ 디자인 뷰에서의 애플리케이션 레이아웃 구성

▶ 제약 기반 레이아웃

▶ 뷰 스테이트 다루기

▶ 뷰 스테이트 제어

▶ 애플리케이션 리팩터링

Adobe FLEX 4 실전 트레이닝 북

Documents

Transcript of Adobe FLEX 4 실전 트레이닝 북