플래시 빌더 4 & 플렉스 4 바이블

플래시 빌더 4 &플렉스 4 바이블

iv

•목 차•

제1부 플렉스 기본 지식

01장 리치 인터넷 애플리케이션의 이해 1플렉스에 대한 기본 학습 ...................................................................................2

플렉스 애플리케이션에 대한 소개 .............................................................2

플렉스 개발 vs. 플래시 개발 .......................................................................7

플렉스와 객체 지향 프로그래밍 ...............................................................10

어도비 플래시 플레이어에 대한 이해 ........................................................... 17

어도비 플래시 플레이어의 역사에 대한 간략한 소개 ............................18

플래시 플레이어 보급률에 대한 이해 ......................................................20

플래시 플레이어의 디버그 버전 사용 ......................................................21

플래시 플레이어의 설치 ...........................................................................22

플렉스 4 개발 도구 .......................................................................................... 25

플래시 빌더 4에 대한 소개 .......................................................................26

플렉스 4 SDK .............................................................................................26

도움말 얻기 ...................................................................................................... 28

정리 ................................................................................................................... 29

02장 플래시 빌더 4 사용법 31플래시 빌더 시작하기 ..................................................................................... 32

플래시 빌더 4의 설치 ...................................................................................... 32

플래시 빌더 단독 설치 ..............................................................................33

이클립스 기능에 대한 소개 ............................................................................ 36

이클립스 작업 공간 ...................................................................................37

v

이클립스의 설정 ........................................................................................43

플래시 빌더의 사용법 ..................................................................................... 45

플렉스 프로젝트의 생성 ...........................................................................45

플래시 빌더의 UI에 대한 이해 .................................................................50

도움말의 활용 .................................................................................................. 57

도움말 콘텐츠 탐색 ...................................................................................57

도움말 용어 검색 .......................................................................................58

동적 도움말의 활용 ...................................................................................59

코드 검색 .......................................................................................................... 60

이클립스 검색 도구 활용법.......................................................................60

플래시 빌더 코드 모델 검색 도구의 사용 ................................................62

코드 자동 생성 ................................................................................................. 66

게터와 세터 메서드의 자동 생성 ..............................................................67

이벤트 핸들러 자동 생성 ..........................................................................68

플래시 빌더와 플래시 프로페셔널 CS5의 연동 ........................................... 69

정리 ................................................................................................................... 74

03장 기본 플렉스 애플리케이션 개발 75"Hello World" 애플리케이션 개발 ................................................................ 76

작업 공간의 전환 .......................................................................................76

프로젝트의 생성 ........................................................................................77

Hello World ...............................................................................................80

html-template 폴더에 대한 이해 ................................................................... 83

HTML 래퍼 템플릿 ...................................................................................85

vi

히스토리 관리 파일 ...................................................................................91

애플리케이션 배포 .......................................................................................... 92

배포 빌드의 생성 .......................................................................................92

배포 버전의 테스트 ...................................................................................94

배포 빌드의 배포 .......................................................................................95

애플리케이션과 기존 웹 페이지의 연동 ..................................................96

플렉스 애플리케이션과 드림위버 연동 ...................................................96

정리 ................................................................................................................. 101

04장 플렉스 애플리케이션의 내부 구조 이해 103MXML과 액션스크립트 3 ............................................................................ 106

MXML에 대한 이해 ...................................................................................... 108

MXML도 XML이다. ...............................................................................109

MXML과 컨테이너 관리 ........................................................................117

MXML과 비시각 클래스 ........................................................................119

액션스크립트 3에 대한 이해 ........................................................................ 120

액션스크립트 구문 ..................................................................................120

변수 선언 ..................................................................................................121

조건문 .......................................................................................................124

순환문 .......................................................................................................126

MXML과 액션스크립트의 조합 .................................................................. 127

<fx:Script> 엘리먼트의 사용 ..................................................................127

외부 액션스크립트 파일의 사용 .............................................................128

플래시 빌더를 활용한 액션스크립트 코드 관리 ...................................132

애플리케이션 컴포넌트의 사용 ................................................................... 137

애플리케이션 매개변수의 전달 ..............................................................138

애플리케이션의 크기 제어......................................................................139

레이아웃 속성의 설정 .............................................................................140

정리 ................................................................................................................. 144

vii

05장 바인딩과 컴포넌트 145바인딩 표현식의 사용법 ............................................................................... 146

단축 MXML 바인딩 표현식 ...................................................................147

<fx:Binding>의 사용법 ...........................................................................147

표현식의 바인딩 적용 .............................................................................148

MXML 컴포넌트의 활용 .............................................................................. 150

MXML 컴포넌트의 생성 ........................................................................150

MXML 컴포넌트의 인스턴스화 ............................................................155

컴포넌트의 속성 및 메서드 추가 ................................................................. 162

컴포넌트 속성 ..........................................................................................162

컴포넌트 메서드 ......................................................................................165

컴포넌트 라이브러리의 활용 ....................................................................... 169

컴포넌트 라이브러리의 생성 ..................................................................169

컴포넌트 라이브러리의 사용 ..................................................................172

플래시 기반의 컴포넌트 생성 ...................................................................... 176

정리 ................................................................................................................. 179

06장 플렉스 애플리케이션 디버깅 181디버깅에 대한 기본 이해 .............................................................................. 182

애플리케이션의 디버그 버전 ..................................................................183

애플리케이션의 디버그 모드 실행 .........................................................184

trace()와 로깅 API의 사용 ........................................................................... 186

trace() 함수의 활용 ..................................................................................187

로깅 API의 활용 ......................................................................................190

브레이크포인트의 활용 ................................................................................ 196

브레이크포인트의 설정과 제거 ..............................................................196

MXML과 액션스크립트 편집기에서의 브레이크포인트 설정 및 제거 196

조건적 브레이크포인트의 설정 ..............................................................197

viii

브레이크포인트 뷰의 활용......................................................................199

디버그 세션에서의 브레이크포인트 활용 .............................................202

변수와 표현식 검사 .................................................................................203

디버깅 뷰를 사용한 애플리케이션 실행 제어 .......................................209

플렉스 애플리케이션의 프로파일링 ........................................................... 211

네트워크 모니터의 활용 ............................................................................... 213

콜드퓨전 사용에 필요한 플렉스 프로젝트의 설정 ...............................214

네트워크 트래픽의 추적 .........................................................................218

정리 ................................................................................................................. 224

07장 이벤트 활용 225플렉스 이벤트 아키텍처 ............................................................................... 226

MXML에서의 이벤트 처리 .......................................................................... 228

MXML에서의 이벤트 리스너 정의 .......................................................228

이벤트 객체의 활용 .................................................................................232

addEventListener()를 통한 이벤트 처리 .................................................... 243

이벤트 리스너의 설정 .............................................................................243

이벤트명 상수의 활용 .............................................................................246

이벤트 리스너의 제거 .............................................................................247

이벤트 버블링의 활용 ................................................................................... 248

커스텀 이벤트의 활용 ................................................................................... 250

커스텀 이벤트의 선언 .............................................................................252

커스텀 이벤트의 전달 .............................................................................254

커스텀 이벤트의 처리 .............................................................................257

커스텀 이벤트 클래스의 활용 ...................................................................... 259

액션스크립트 클래스의 작성 ..................................................................259

커스텀 이벤트의 전달 .............................................................................264

커스텀 이벤트의 처리 .............................................................................266

정리 ................................................................................................................. 269

ix

제2부 플렉스 애플리케이션 디자인

08장 플렉스 시각 컨트롤의 활용 273컨트롤의 인스턴스 생성 및 커스터마이징 ................................................. 274

MXML과 액션스크립트를 사용한 컨트롤 인스턴스의 생성 ..............275

컨트롤의 속성 및 스타일 설정 ................................................................275

UIComponent와 GraphicElement의 이해 ...........................................276

스파크 텍스트 컨트롤의 활용 ...................................................................... 278

텍스트 컨트롤 속성의 활용.....................................................................279

텍스트 입력 컨트롤 .................................................................................284

레이아웃 컨트롤의 활용 ............................................................................... 288

HRule과 VRule 컨트롤 ...........................................................................289

Spacer 컨트롤...........................................................................................290

버튼 컨트롤의 활용 ....................................................................................... 292

Button 컨트롤 ..........................................................................................292

LinkButton 컨트롤 ..................................................................................293

CheckBox 컨트롤 ....................................................................................294

RadioButton 컨트롤 ................................................................................295

기타 데이터 입력 컨트롤 .............................................................................. 297

NumericStepper 컨트롤 .........................................................................298

날짜 컨트롤 ..............................................................................................299

ColorPicker 컨트롤 .................................................................................301

인터랙티브 컨트롤의 활용 ........................................................................... 303

ScrollBar 컨트롤 ......................................................................................303

슬라이더 컨트롤 ......................................................................................305

이미지와 비트맵이미지 컨트롤의 활용 ...................................................... 307

이미지 리사이즈 ......................................................................................309

이미지 임베드 ..........................................................................................310

런타임 시 이미지 변경 ............................................................................311

정리 ................................................................................................................. 313

x

09장 텍스트 작업 315고급 텍스트 레이아웃의 활용 ...................................................................... 316

풍부한 형식의 텍스트 전달.....................................................................317

컬럼을 통한 텍스트 표현 ........................................................................320

양방향 텍스트의 활용 .............................................................................321

CSS를 통한 폰트의 제어 ............................................................................... 322

폰트 선택 ..................................................................................................323

디바이스 폰트의 사용 .............................................................................324

임베디드 폰트의 사용 .............................................................................325

텍스트의 조작 ................................................................................................ 332

텍스트 값의 포맷 적용 .................................................................................. 335

Formatter 객체의 생성 ............................................................................335

포매터의 속성 설정 .................................................................................336

바인딩 표현식에서의 포매터 활용 .........................................................337

스태틱 메서드를 통한 포매터 활용 ........................................................338

정리 ................................................................................................................. 340

10장 레이아웃 컨테이너의 활용 343MX 기본 컨테이너의 활용 ........................................................................... 344

세로 및 가로 레이아웃 컨테이너의 활용 ...............................................345

Canvas 컨테이너의 활용 .........................................................................347

MX 컨테이너 스타일의 활용 ..................................................................350

스파크 Group 컴포넌트의 활용 ................................................................... 352

Group 컴포넌트의 사용 ..........................................................................352

VGroup과 HGroup의 활용 ....................................................................354

스파크 BorderContainer의 활용 ...........................................................355

Panel 컨테이너의 활용 ................................................................................. 357

Panel 컴포넌트의 속성 ............................................................................358

MX ControlBar 컨테이너의 활용 ..........................................................360

스파크 Panel과 컨트롤 바의 활용 ..........................................................362

xi

제약 기반 레이아웃의 활용 .......................................................................... 363

디자인 모드에서의 컴포넌트 배치 .........................................................363

제약 기반 속성의 활용 ............................................................................365

컨테이너 및 컨트롤의 크기 설정 ................................................................. 366

콘텐츠 기반 크기 설정 ............................................................................366

절대 크기 설정 .........................................................................................367

퍼센트 크기 설정 .....................................................................................367

제약 기반 크기 설정 ................................................................................369

스크롤 가능 영역의 지정 .............................................................................. 370

정리 ................................................................................................................. 372

11장 CSS의 활용 375CSS란? ............................................................................................................ 375

CSS의 이해 ..................................................................................................... 377

인라인 스타일 선언의 활용 .......................................................................... 378

<fx:Style>를 통한 스타일 시트 선언 ........................................................... 379

스타일 선택자의 활용 ................................................................................... 380

타입 선택자의 활용 .................................................................................381

자손 선택자의 활용 .................................................................................385

스타일명 선택자의 활용 .........................................................................386

ID 선택자의 활용 .....................................................................................387

전역 선택자의 활용 .................................................................................388

임베디드 스타일 시트의 활용 ...................................................................... 389

외부 스타일 시트의 활용 .............................................................................. 392

빈 스타일 시트의 작성 ............................................................................392

기존 스타일 내보내기 .............................................................................395

컴파일된 스타일 시트의 활용 ...................................................................... 399

스타일 시트의 컴파일 .............................................................................399

컴파일된 스타일 시트의 로드 .................................................................401

액션스크립트를 통한 스타일 제어 .............................................................. 402

xii

스타일 정보의 설정 및 조회....................................................................403

스타일 선택자의 런타임 시 수정 ............................................................404

정리 ................................................................................................................. 407

12장 애니메이션 제어 및 드래그앤드롭 409이펙트의 활용 ................................................................................................ 410

이펙트 클래스의 선언 및 재생 ................................................................412

액션스크립트를 통한 이펙트 선언 .........................................................414

새로운 스파크 이펙트의 활용 .................................................................416

복합 이펙트의 활용 .................................................................................423

easing 클래스의 활용 ..............................................................................427

드래그앤드롭의 활용 .................................................................................... 429

List 컨트롤을 활용한 드래그앤드롭 구현 .............................................430

커스텀 드래그앤드롭의 구현 ..................................................................433

정리 ................................................................................................................. 441

13장 뷰 스테이트의 관리 443뷰 스테이트의 이해 ....................................................................................... 444

디자인 뷰에서의 뷰 스테이트 정의 ............................................................. 445

새 스테이트의 생성 .................................................................................446

뷰 스테이트의 오버라이드 정의 .............................................................448

뷰 스테이트의 런타임 시 전환 ..................................................................... 451

MXML에서의 뷰 스테이트 선언 ................................................................. 452

컴포넌트의 추가 및 제거 ........................................................................453

속성, 스타일, 이벤트 핸들러의 오버라이드 ..........................................454

컴포넌트에서의 뷰 스테이트 관리 .............................................................. 457

트랜지션의 활용 ............................................................................................ 459

트랜지션의 선언 ......................................................................................460

트랜지션에서의 Parallel과 Sequence 이펙트 활용 ..............................461

정리 ................................................................................................................. 464

xiii

14장 MXML과 FXG를 통한 그래픽 선언 465MXML에서의 벡터 그래픽 선언 ................................................................. 466

선과 도형의 드로잉 .................................................................................467

시각 효과의 추가 .....................................................................................472

FXG 파일의 활용 ........................................................................................... 479

크리에이티브 스위트 소프트웨어에서의 FXG 그래픽 생성 ...............479

플렉스 애플리케이션에서의 FXG 파일 활용 ........................................486

정리 ................................................................................................................. 489

15장 스파크 컴포넌트의 스킨 작업 491커스텀 스킨의 생성 및 활용 ......................................................................... 492

스파크 애플리케이션의 스킨 작업 .........................................................492

스파크 컴포넌트에 대한 커스텀 스킨 바인딩 .......................................499

다른 스파크 컴포넌트에 대한 스킨 작업 .................................................... 503

새로운 스킨의 생성 .................................................................................503

CSS를 활용한 커스텀 스킨의 적용.........................................................509

스킨의 커스터마이징 ..............................................................................510

정리 ................................................................................................................. 516

16장 스파크 컴포넌트의 스킨 작업 517전통적인 웹 내비게이션의 이해 .................................................................. 518

플렉스 내비게이션의 이해 ........................................................................... 519

내비게이터 컨테이너의 활용 ....................................................................... 520

MXML에서의 뷰 스택 선언 ...................................................................520

내비게이터 컨테이너에서의 커스텀 컴포넌트 활용 ............................521

디자인 모드에서의 뷰 스택 생성 ............................................................522

액션스크립트를 통한 내비게이터 컨테이너 활용 ................................526

생성 정책의 관리 .....................................................................................532

내비게이터 컨테이너 크기의 관리 .........................................................533

xiv

내비게이터 바 컨테이너의 활용 .................................................................. 534

데이터 컬렉션의 데이터 프로바이더로서의 활용 ................................534

내비게이터 바 이벤트의 처리 .................................................................536

뷰스택을 데이터 프로바이더로 활용 .....................................................537

내비게이터 바 표현 방식의 관리 ............................................................538

메뉴 컨트롤의 활용 ....................................................................................... 541

메뉴 데이터 프로바이더 .........................................................................541

메뉴 이벤트의 처리 .................................................................................543

메뉴 컨트롤의 활용 .................................................................................544

MenuBar 컨트롤의 활용 .........................................................................545

기타 내비게이터 컨테이너의 활용 .............................................................. 547

TabNavigator 컨테이너...........................................................................548

Accordion 컨테이너 ................................................................................549

TabNavigator 및 Accordion의 키보드 단축키 .....................................551

정리 ................................................................................................................. 553

17장 팝업창 처리 555Alert 클래스의 활용 ...................................................................................... 556

Alert.show() 메서드로 팝업창 표시 ......................................................557

Alert 창의 모달 속성 제어 ......................................................................557

Alert 창의 버튼 관리 ...............................................................................558

Alert 창 이벤트의 처리 ...........................................................................560

커스텀 그래픽 아이콘의 사용 .................................................................561

Alert 클래스에 대한 CSS 선택자 적용 ..................................................565

PopUpMenuButton 컨트롤의 활용 ............................................................ 567

데이터 프로바이더의 작성......................................................................568

이벤트의 처리 ..........................................................................................569

PopUpButton 컨트롤의 활용 ....................................................................... 571

팝업창의 선언 ..........................................................................................571

이벤트 처리 및 팝업 동작의 관리 ...........................................................572

xv

커스텀 팝업창의 활용 ................................................................................... 574

커스텀 팝업창의 정의 .............................................................................575

PopUpManager 클래스를 통한 커스텀 팝업창의 관리 .......................578

정리 ................................................................................................................. 584

제3부 데이터 연동

18장 데이터 모델링과 관리 589데이터 모델의 생성 ....................................................................................... 590

<fx:Model> 엘리먼트의 사용 .................................................................591

VO의 활용 ..................................................................................................... 596

새 액션스크립트 클래스 마법사의 활용 ................................................596

VO 클래스 구문 .......................................................................................597

VO 클래스의 인스턴스 생성 ..................................................................606

데이터 컬렉션의 활용 ................................................................................... 611

ArrayCollection의 선언 ..........................................................................611

데이터 컬렉션 객체의 source 속성 설정 ...............................................612

런타임 시 데이터 접근 ............................................................................613

런타임 시 데이터 관리 ............................................................................615

데이터 커서의 활용 .................................................................................621

정리 ................................................................................................................. 630

19장 리스트 컨트롤의 활용 631데이터 프로바이더의 활용 ........................................................................... 634

하드코딩 데이터 프로바이더의 활용 .....................................................635

MXML 태그를 통한 개별 데이터 객체 선언 .........................................637

동적 데이터 프로바이더의 활용 .............................................................638

리스트 아이템 라벨의 제어 .......................................................................... 640

labelField 속성의 사용 ............................................................................640

xvi

labelFunction 속성의 활용 .....................................................................643

리스트 컨트롤의 이벤트와 속성 .................................................................. 645

사용자 데이터 선택의 처리.....................................................................646

change 이벤트의 활용 .............................................................................646

selectedItem 속성의 활용 .......................................................................647

selectedIndex 속성의 활용 .....................................................................648

복잡한 데이터 객체의 선택.....................................................................650

커스텀 아이템 렌더러의 활용 ...................................................................... 652

드롭인 아이템 렌더러의 활용 .................................................................654

아이템 렌더러와 에디터의 활용 .............................................................656

컴포넌트 아이템 렌더러의 활용 .............................................................661

뷰 스테이트를 활용한 스파크 아이템 렌더러의 커스터마이징 ..........663

정리 ................................................................................................................. 666

20장 고급 리스트 컨트롤의 활용 667ComboBox와 DropDownList 컨트롤의 활용 ........................................... 668

prompt 속성의 활용 ................................................................................668

ComboBox 컨트롤의 활용 .....................................................................669

액션스크립트를 통한 복잡한 데이터 객체의 선택 ...............................672

스파크 ButtonBar 컨트롤의 활용 ..........................................................675

DataGrid 컨트롤의 활용 .............................................................................. 678

DataGrid 디스플레이의 커스터마이징 .................................................679

데이터그리드 컬럼 셀에서의 커스텀 라벨 표시 ...................................684

고급 아이템 렌더러와 에디터 ...................................................................... 688

dataChange 이벤트의 활용 ....................................................................689

스파크 아이템 렌더러의 활용 .................................................................691

아이템 에디터의 활용 .............................................................................693

리스트 컨트롤에서의 가로 및 타일 레이아웃 활용.................................... 701

AdvancedDataGrid 컨트롤의 활용 ............................................................. 708

계층적 데이터의 표현 .............................................................................708

xvii

일차원 데이터의 그룹 관리.....................................................................711

정리 ................................................................................................................. 714

21장 플렉스 차트 컨트롤의 활용 715플렉스 차트 종류에 대한 이해 ..................................................................... 717

차트 컨트롤의 선언 ....................................................................................... 718

차트 속성과 스타일 설정 .............................................................................. 720

파이 차트의 활용 .....................................................................................720

금융 차트의 활용 .....................................................................................731

바 차트, 컬럼 차트, 라인 차트, 영역 차트의 활용 .................................734

정리 ................................................................................................................. 741

22장 데이터 입력폼의 활용 743Form 컨테이너의 활용 ................................................................................. 744

FormHeading 컨트롤의 활용 .................................................................746

FormItem 컨테이너의 활용 ....................................................................749

기본 버튼의 설정 .....................................................................................750

커스텀 폼 컴포넌트의 활용 .......................................................................... 752

커스텀 Form 컴포넌트의 작성 ...............................................................752

Form 컴포넌트 내의 컨트롤 추가 ..........................................................753

데이터 입력값 검증 ....................................................................................... 756

밸리데이터 객체의 생성 .........................................................................757

trigger 이벤트를 통한 유효성 검증의 제어 ...........................................758

액션스크립트를 통한 유효성 검증 제어 ................................................761

유효성 검증 trigger 이벤트의 비활성화 ................................................761

유효성 검증 규칙과 에러 메시지의 제어 ...............................................765

애플리케이션과의 데이터 공유 ................................................................... 768

VO를 통한 폼 데이터 모델링 .................................................................768

커스텀 이벤트의 활용 .............................................................................770

정리 ................................................................................................................. 776

xviii

23장 HTTPService와 XML의 활용 779RPC와 REST 아키텍처의 활용 .................................................................... 780

REST 아키텍처의 이해 ...........................................................................780

RPC 아키텍처의 이해 .............................................................................781

플래시 빌더 4에서의 데이터 주도 애플리케이션 생성 ............................. 782

데이터 커넥션의 생성 및 관리 ................................................................783

반환 데이터 타입의 정의 ........................................................................787

반환 데이터의 시각 컨트롤 바인딩 ........................................................792

HTTPService 객체의 선언 및 설정 ............................................................. 795

HTTPService 객체의 생성 .....................................................................795

HTTPService의 기본 속성 .....................................................................796

데이터의 전송 및 조회 .................................................................................. 800

비동기 통신의 이해 .................................................................................801

HTTPService 응답의 처리 .....................................................................802

CallResponder와 AsyncToken의 활용 .................................................811

ItemResponder와 AsyncToken의 활용 ................................................814

VO의 활용 ..................................................................................................... 817

서버 페이지로 매개변수 전달 ...................................................................... 819

매개변수명의 활용 ..................................................................................820

바인딩 매개변수의 활용 .........................................................................821

크로스 도메인 정책 이슈의 처리 ................................................................. 822

정리 ................................................................................................................. 824

24장 E4X를 통한 XML의 관리 825XML 클래스의 활용 ...................................................................................... 826

XML 객체의 생성 ....................................................................................828

XMLList 클래스의 활용 ..........................................................................831

XMLListCollection 클래스의 활용 .......................................................832

E4X 표현식의 활용 ....................................................................................... 833

XML 객체로부터의 데이터 추출 ...........................................................835

xix

XML 객체의 데이터 관리 .......................................................................843

네임스페이스의 활용 .................................................................................... 849

정리 ................................................................................................................. 853

제4부 플렉스 애플리케이션과 애플리케이션 서버 연동

25장 SOAP 기반의 웹 서비스 활용 857SOAP의 이해 ................................................................................................. 858

WSDL의 이해 ................................................................................................ 861

WebService 컴포넌트의 활용 ...................................................................... 864

콜드퓨전 설치 ..........................................................................................864

WebService 객체의 생성 .........................................................................865

웹 서비스 결과의 처리 ............................................................................867

웹 서비스 오퍼레이션으로 매개변수 전달 ............................................879

웹 서비스 데이터 커넥션의 활용 ................................................................. 881

데이터 커넥션의 정의 .............................................................................882

웹 서비스 데이터 커넥션의 관리 ............................................................884

정리 ................................................................................................................. 887

26장 플렉스 애플리케이션과 BlazeDS 및 자바와의 연동 889

BlazeDS의 활용 ............................................................................................. 890

지원 플랫폼에 대한 이해 ........................................................................891

BlazeDS 시작하기 ....................................................................................892

BlazeDS를 활용하기 위한 플렉스 프로젝트의 생성 .................................. 898

프록시 서비스의 활용 ................................................................................... 900

프록시 서비스의 설정 .............................................................................901

기본 데스티네이션의 사용......................................................................902

네임드 데스티네이션의 사용 ..................................................................906

xx

리모팅 서비스의 활용 ................................................................................... 909

자바 클래스의 생성 및 노출....................................................................910

리모팅 서비스 데스티네이션의 설정 .....................................................913

RemoteObject 컴포넌트의 활용 .................................................................. 915

RemoteObject 컴포넌트의 인스턴스 생성 ...........................................915

원격 메서드의 호출 .................................................................................916

RemoteObject 결과의 처리 ....................................................................916

원격 메서드로의 인자 전달.....................................................................924

액션스크립트와 자바 사이의 데이터 전달 ............................................926

VO 클래스의 활용 ...................................................................................927

플래시 빌더 4의 BlazeDS 데이터 커넥션 활용........................................... 932

BlazeDS에 대한 RDS 활성화 ..................................................................933

BlazeDS 데이터 커넥션의 정의 ..............................................................934

정리 ................................................................................................................. 935

27장 BlazeDS 메시지 서비스의 활용 937메시지 서비스의 이해 ................................................................................... 938

서버상의 메시지 설정 ................................................................................... 939

메시징에 사용할 채널 설정.....................................................................940

메시지 어댑터와 데스티네이션의 설정 .................................................943

플렉스 메시징 애플리케이션의 작성 .......................................................... 945

플렉스 프로젝트의 생성 .........................................................................945

메시지의 전송 ..........................................................................................946

메시지의 수신과 처리 .............................................................................948

복잡한 데이터의 전송과 수신 ...................................................................... 952

서버상에서의 메시지 필터링 ....................................................................... 955

selector 속성의 활용 ................................................................................955

subtopic의 활용 .......................................................................................956

메시지 트래픽의 확인 ................................................................................... 961

정리 ................................................................................................................. 962

xxi

28장 플렉스 애플리케이션과 콜드퓨전 연동 963플래시 리모팅 및 콜드퓨전의 이해 ............................................................. 964

콜드퓨전 연동을 위한 플렉스 프로젝트의 생성 ...................................965

서버상에서의 플래시 리모팅 설정 .........................................................968

플렉스에 사용할 콜드퓨전 컴포넌트의 작성 ............................................. 969

RemoteObject 컴포넌트를 통한 CFC 활용................................................ 971

source 속성의 설정 ..................................................................................971

RemoteObject 인스턴스의 생성 ............................................................973

CFC 함수의 호출 .....................................................................................973

CFC 함수 결과의 처리 .................................................................................. 974

바인딩 표현식의 활용 .............................................................................974

result 이벤트의 활용................................................................................975

여러 CFC 함수의 결과 처리 ...................................................................979

CFC 함수로의 인자 전달 .............................................................................. 982

명시적 인자의 활용 .................................................................................982

바인딩 인자의 활용 .................................................................................983

인자명의 활용 ..........................................................................................984

VO 클래스의 활용 ......................................................................................... 985

콜드퓨전 VO의 생성 ...............................................................................986

액션스크립트 VO의 작성 .......................................................................987

콜드퓨전에서 플렉스로의 VO 반환 ......................................................988

콜드퓨전으로부터의 VO 수신 ...............................................................989

CFC 함수로의 VO 인자 전달 .................................................................991

RemoteObject의 오류 처리 ......................................................................... 993

fault 이벤트의 처리 .................................................................................993

CFC 함수에서의 커스텀 예외 생성 .......................................................994

플래시 빌더에서의 데이터 커넥션 연동 ..................................................... 995

콜드퓨전 9 서비스의 호출 ............................................................................ 997

콜드퓨전 보안 설정 .................................................................................998

콜드퓨전 9 클라이언트 사이드 서비스 컴포넌트의 활용 ....................999

정리 ............................................................................................................... 1003

xxii

29장 플렉스 애플리케이션과 PHP 연동 1005PHP 설치 ..................................................................................................... 1007

윈도우용 웸프서버의 설치....................................................................1007

웸프서버의 관리 ....................................................................................1009

맥 OS X에서의 MAMP 설치 ................................................................1010

MAMP 서버의 관리 ..............................................................................1011

PHP 연동을 위한 플렉스 프로젝트의 생성 .............................................. 1014

PHP와 HTTPService 및 XML 연동 ......................................................... 1016

PHP SimpleXML 확장 모듈의 활용 ....................................................1016

HTTPService를 통한 XML 데이터 조회 ............................................1017

젠드 AMF를 활용한 PHP 리모팅 ............................................................. 1019

젠드 AMF의 설치 ..................................................................................1020

PHP에서의 서비스 클래스 작성 ..........................................................1022

RemoteObject를 통한 PHP 클래스 호출 ............................................1023

젠드 AMF를 통한 복잡한 데이터의 반환 ...........................................1024

액션스크립트와 PHP 데이터 직렬화에 대한 이해 .............................1027

플래시 빌더에서의 PHP 데이터 커넥션 활용 .......................................... 1027

데이터 커넥션의 정의 ...........................................................................1027

데이터베이스 테이블 구조를 기반으로 한 서비스 자동 생성 ...........1030

정리 ............................................................................................................... 1033

제5부 추가 주제

30장 플렉스 4 애플리케이션의 지역화 1037애플리케이션 리소스 선택을 위한 로케일의 활용................................... 1038

컴파일 시점의 로케일 변경...................................................................1039

런타임 시의 로케일 변경 ......................................................................1041

xxiii

커스텀 리소스 번들의 활용 ........................................................................ 1044

런타임 시 리소스 번들의 생성 ..............................................................1044

외부 리소스 번들의 활용 ......................................................................1047

정리 ............................................................................................................... 1051

31장 어도비 AIR를 통한 데스크톱 애플리케이션 개발 1053

AIR 아키텍처의 이해 .................................................................................. 1054

어도비 AIR의 설치...................................................................................... 1056

AIR 설치 파일의 다운로드 ...................................................................1056

윈도우 환경에서의 AIR 설치 및 제거 .................................................1057

맥 OS X 환경에서의 AIR 설치 및 제거 ...............................................1057

플렉스 데스크톱 애플리케이션의 생성 .................................................... 1058

플렉스 데스크톱 애플리케이션 프로젝트의 생성 ..............................1058

애플리케이션 디스크립터 파일의 활용 ...............................................1061

AIR 애플리케이션의 배포 버전 패키징 ..............................................1066

AIR 애플리케이션의 설치 ....................................................................1068

AIR 애플리케이션의 제거 ....................................................................1070

플렉스 AIR 애플리케이션의 팁과 트릭 .................................................... 1071

플래시 빌더에서의 AIR 애플리케이션 디버깅 ...................................1071

HTML 기반 콘텐츠와의 연동 ..............................................................1073

WindowedApplication 컴포넌트의 활용............................................1077

런타임 시 리모팅 채널의 생성 ..............................................................1079

어도비 AIR에 대한 결론 ............................................................................. 1081

정리 ............................................................................................................... 1082

xxiv

•옮긴이 글•

플렉스는 지금껏 다양한 변화를 겪었다. 초창기 서버 제품으로 시작한 플렉스는 현재 RIA 애플

리케이션 개발에 꼭 필요한 클라이언트 SDK로 자리매김했으며, 무료, 오픈소스로 배포돼 전 세

계 수많은 개발자들에게 영향력을 미치고 있다. 아울러 곧 출시될 플렉스 4.5 SDK 정식 버전과

새로운 플래시 빌더에서는 모바일용 애플리케이션 개발 환경을 지원할 예정이므로 앞으로 플렉

스의 영향력은 더욱 커질 것으로 기대된다.

플렉스는 이제 단순히 엔터프라이즈 RIA 애플리케이션 개발을 위한 SDK가 아니다. 플렉스

SDK는 다양한 형태로 진화를 거듭하고 있으며 앞으로는 안드로이드, 아이폰, 플레이북 등의 모

바일 애플리케이션 개발 환경을 폭넓게 지원할 예정이다. 플렉스 SDK는 다양한 서버 환경과 쉽

게 연동할 수 있으며, 개발자들에게 익숙한 이클립스 IDE를 기반으로 하는 플래시 빌더는 더 생

산성 있고 더 편리한 개발 환경을 지원한다. 요컨대 플렉스와 플래시 빌더 환경은 웹(RIA 애플리

케이션)과 데스크톱(AIR 애플리케이션) 애플리케이션 개발뿐 아니라 모바일 애플리케이션 개

발에서도 핵심이 되는 개발 환경으로 발전하고 있다.

이 책은 플렉스와 관련한 다양한 주제를 폭넓게 다룬다. 이 책은 크게 5부로 구성되는데, 1부

에서는 플렉스 기초 지식, 2부에서는 플렉스 애플리케이션 디자인, 3부에서는 데이터 처리, 4부

에서는 애플리케이션 서버와의 연동, 5부에서는 애플리케이션 지역화와 AIR 개발 환경 등의 추

가 주제를 다룬다. 플렉스를 둘러싼 환경 자체가 워낙 방대하고 다뤄야 할 주제가 많아서 이 책

은 꽤 두꺼운 책이 됐지만 책의 내용은 초보자라도 쉽게 이해하고 따라 할 수 있는 내용이다.

이 책에서는 플렉스 4 SDK와 플래시 빌더 개발 환경을 설명한다. 플렉스 4 SDK에서는 새로

운 스파크 컴포넌트를 도입하고 컴포넌트 아키텍처를 크게 변경했다. 이러한 플렉스 4 SDK의 새

로운 아키텍처는 이후 SDK 버전에서도 그대로 유지될 것으로 보인다. 따라서 아직까지 플렉스 4

SDK의 새로운 컴포넌트 아키텍처를 접하지 못한 독자라면 이 책의 내용이 많이 도움될 것이다.

이 책의 또 다른 주제인 플래시 빌더 4 개발 환경은 이제 단순히 플렉스 개발자를 위한 개발 환경

이 아니다. 어도비에서는 기존 플렉스 빌더라는 이름을 플래시 빌더로 바꾸면서 플래시 개발자

xxv

들도 플래시 빌더 IDE를 사용해 코드를 개발할 것을 권장했다. 실제로 플래시 저작 도구와 플래

시 빌더의 연동 기능은 날로 강화되고 있으며 플래시 빌더는 뛰어난 플래시 개발자가 되기 위해

꼭 익혀야 하는 IDE가 되고 있다.

이 책의 대상 독자

이 책은 액션스크립트에 대한 기본 지식을 갖춘 플래시/플렉스 개발자 및 디자이너를 위한 책이

다. 이 책은 고수준 API를 주로 다루므로 플렉스를 처음 접하는 독자라도 책의 내용을 이해하는

데는 전혀 무리가 없다. 이 책은 주제별로 예제가 분리돼 있으므로 필요에 따라 얼마든지 원하는

장을 학습할 수 있다. 예컨대 플렉스 클라이언트에서 서버 데이터를 매핑하는 방식이 궁금한 서

버 개발자라면 이 책의 4부를 참고하면 되고 플렉스 CSS 사용법이 궁금한 디자이너라면 이 책

의 11장을 참고하면 된다.

감사의 글

먼저 이 책의 번역을 맡겨주신 위키북스 박찬규 사장님, 김윤래 편집장님께 감사드린다. 이분들

이 없었다면 플렉스 4와 관련해 방대한 지식을 다루는 이 책이 빛을 보지 못했을 것이다. 좋은 책

뒤에는 항상 좋은 책을 선택하고 출간하기로 결정하는 좋은 출판사가 있음을 새삼 느낀다. 또 이

책의 교정을 담당해주신 김윤래 편집장님께 다시 한 번 감사드린다. 기술이 빠르게 변해서 일정

부담이 있으셨을 텐데 꼼꼼히 역자의 원고를 살펴보신 점에 감사드린다. 이 책의 베타리딩을 담

당해 주신 성종천 님, 이 책에 대해 많은 조언을 아끼지 않으신 이준하 님께도 감사드린다. 끝으로

항상 힘이 되는 가족에게도 감사를 드리고 하나님께도 감사를 드린다.

xxvi

•저자 소개•

데이비드 가스너(David Gassner)

데이비드 가스너는 워싱턴 시애틀에 있는 어도비 교육 파트너 기관인 바도 테크니컬 서비스의 대

표이며 lynda.com에서 개발자 교육 콘텐츠의 콘텐츠 관리자로 일하고 있다. lynda.com의 저자

인 그는 플렉스, AIR, 콜드퓨전, 드림위버, ASP.NET 같은 다양한 주제에 대한 동영상 교육 타이

틀을 녹화한 바 있다. 저자는 플렉스, 콜드퓨전, 플래시, 드림위버에 대한 어도비 공인 개발자, 강

사 자격증을 가지고 있으며 어도비 마스터 강사로서 알에어(Allaire), 매크로미디어, 어도비 컨퍼

런스에서 정기적인 강연을 했다.

저자는 (고향인) 캘리포니아 클레어몬트에 있는 피처 대학에서 학사 학위를 취득했고 U.C. 산디

에고에 있는 Professional ¥eatre Training Program을 통해 순수 미술 석사 학위를 취득했다.

여가 시간에는 (미술 석사 학위를 잘 활용하기 위해) 시애틀의 라이브 극장에서 감독이자 배우

로 활동한다. 현재는 부인 재키와 함께 살고 있으며 이따금씩 이미 성인이 된 아이들인 태드, 제

이슨, 제니가 집에 찾아오곤 한다.

xxvii

•감사의 글•

책의 분량과 상관없이 모든 책은 가족, 친구, 동료들의 지원과 희생 없이는 나올 수 없다는 말은

진리인 것 같다. 이 책은 플렉스 3 바이블 초판의 개정판이지만 플렉스 4 SDK와 플래시 빌더 4에

서 어도비사가 새로 추가한 많은 개선 사항으로 인해 전혀 새로운 책이 됐다.

우선 언제든 내 전화를 받아준 Wiley 출판사의 직원들에게 감사한다. 스테파니 맥콤과 캐더린

드보락은 항상 저자의 새로운 아이디어를 들어주었고 내가 다음 생각을 떠올릴 수 있게끔 도와

주었다. 바도 테크의 동료 플렉스 강사이자 전도유망한 시나리오 작가인 드류 포크만은 필자의

민감한 성격에도 아랑곳하지 않고 기술 이슈들을 잘 지적해 주었다.

바도 테크에서 어도비 플렉스를 강의하는 어도비 공인 강사들은 플렉스에 대해서 누구보다 많

은 지식을 필자에게 가르쳐 주었다. 사이먼 베이트만, (다시 한 번) 드류 포크만, 알렉스 헌즈, 제

닛 스톨슨에게 감사한다.

스튜디오 B의 닐 솔킨, 카트리나 베번, 스테이시 바론은 비즈니스 관련 세부 설명에 대한 필자

의 걱정을 덜어주었다.

21세기 초부터 필자는 알에어에서 매크로미디어, 어도비로 오는 내내 개발 교육을 진행한 뛰어

난 동료들과 함께 기술 강사이자 기술 교육 프로그램 개발자로 일하기 시작했다. 동료 강사인 맷

볼즈, 로버트 크룩, 슈 호브, 드브라 프르윗, 제임스 탈봇, 레오 슈만에게 감사한다. 어떤 이들은

다른 분야로 떠났지만 이들이 플렉스 교육 분야에 남긴 족적은 상당하다.

어도비 플렉스 제품 관리팀의 직원들에게 감사한다. 매트 초틴과 팀 번틀은 셀 수 없을 만큼 여

러 번 필자를 올바른 방향으로 인도해 주었다. 라이브사이클 데이터 서비스와 BlazeDS 개발팀

의 제프 브룸은 관련 주제에 대해서 필자보다 더 전문가임에도 불구하고 어도비 컨퍼러스에서 여

러 차례 필자의 강연 보조역을 자처했다.

마지막으로 이 책을 다시 쓸 수 있게 도와준 가족에게 감사하다. 나의 아이들 태드, 제이슨, 제

니와 이 세상 최고의 아내이자 가장 좋은 친구인 재키에게 감사한다.

xxviii

서문

매크로미디어가 2002년에 플래시 MX를 처음 출시할 때 플래시는 리치 인터넷 애플리케이션

(약어로 보통 RIA라고 부른다)을 개발하는 새로운 기술 브랜드를 내세웠다. RIA라는 용어는

매크로미디어사가 다양한 웹 기반 서비스에 대한 접근 등을 통해 인터넷의 장점을 활용하는 동

시에 1990년대 중반 이후 브라우저 기반 애플리케이션의 고질적인 문제를 해결해 주는 새로운

애플리케이션 군을 지칭하기 위해 만들어낸 용어다. 플래시 플레이어를 통해 풍부한 그래픽을

활용한 애플리케이션은 각 웹 브라우저가 CSS와 자바스크립트 구현체를 서로 다른 기준으로

구현함에 따라 발생한 오랜 문제들을 해결해 주었다. 아울러 이들 애플리케이션은 애니메이션

과 리치 미디어(오디오와 비디오)를 전달할 수 있는 플래시 플레이어 자체의 강점을 충분히 활

용할 수 있었다. 이로 인해 플래시 애플리케이션은 시각적으로나 기능적으로 뛰어난 품질을 갖

출 수 있게 됐다.

처음 시도한 RIA는 절반의 성공을 거두었다. 플래시 MX와 콜드퓨전 MX(당시 매크로미디어

는 미들웨어 애플리케이션 서버로 콜드퓨전을 권장했다)를 사용해 개발한 많은 애플리케이션이

큰 호응을 얻었다. 이러한 애플리케이션 중 가장 유명한 애플리케이션은 아마 지금까지도 전 세

계 많은 대형 호텔에서 사용 중인 IHoterlier 호텔 예약 애플리케이션일 것이다. 이 애플리케이션

은 플래시 기반의 UI를 제공해 사용자가 직관적인 단일 화면 UI를 통해 호텔과 객실을 찾아 예

약할 수 있는 애플리케이션이다. 이 애플리케이션에서는 기존 HTML 방식의 웹 애플리케이션과

는 달리 여러 페이지를 이동하지 않고도 투숙객이 정보를 입력하는 즉시 바로 응답 결과를 확인

할 수 있다.

하지만 이런 애플리케이션을 개발하는 개발자들의 어려움은 이만저만한 게 아니었다. 플래시

를 사용해 데이터 중심 애플리케이션을 개발한다는 말은 곧 바이너리 소스 파일을 가지고 작업

해야 한다는 뜻으로 소스 제어 시스템과의 연동이 어렵다는 말이 된다. 당시에는 액션스크립트

도 그다지 객체 지향적인 언어가 아니었고(물론 이런 상황은 플래시 MX 2004와 함께 액션스크

립트 2가 발표되면서 크게 개선됐다), 또 표준 코드 작성 위치에 대한 강제 사항도 없었다. 액션

스크립트는 데이터 타입을 느슨하게 관리했고 강력한 컴파일 시점 에러 검사나 디버깅 도구가

부족해 ‘조용한 오류’가 빈번하게 일어났다. 즉 어떤 기능이 동작해야 하는데 실제로 동작하지는

않고 오류에 대한 정보도 전혀 제공되지 않는 일이 수도 없이 일어난 것이다.

xxix

많은 개발자가 참여하는 대규모 개발 환경에서는 플래시 문서상의 어느 위치에 코드를 둘지

가 애플리케이션 기획에 있어 핵심 영역 중 하나였다. 실제로 플래시 자체가 애플리케이션 개발

을 위한 용도의 제품이 아니었기 때문이다. 아울러 플래시에 내장된 액션스크립트 편집기는 경

력 개발자들의 실소를 낳았다. 특히 정교한 코드 편집기에 익숙한 자바 개발자들에게는 플래시

로 하는 작업은 생산성을 떨어뜨리고 짜증을 불러일으키기 일쑤였다.

플렉스 1은 이런 문제에 대해 매크로미디어가 처음으로 내놓은 해결책이다. 본래 서버 기반 제

품으로 출시된 플렉스는 엔터프라이즈 애플리케이션 개발자들이 익숙한 작업 흐름에 따라 애플

리케이션을 개발할 수 있게 설계됐다. 드림위버의 코드 기반 위에서 설계된 플렉스 빌더 1은 개선

된 코드 편집기를 제공하는 최초의 제품이었고 서버 라이선스를 구매한 기관에 한해 제공됐다.

여전히 문제 소지는 조금 있었지만 소스 코드를 사용해 애플리케이션을 개발하는 개발자들은

플렉스를 통해 일상적인 작업 흐름대로 개발할 수 있었고 여러 개발자의 협업도 한결 쉬워졌다.

플렉스 애플리케이션은 소스 코드 파일 형태로 개발하고 이러한 소스 코드를 공유할 수 있기 때

문이다.

플렉스 2는 진정한 객체 지향 언어인 액션스크립트 3 출시와 함께 한 걸음 더 나갔다. 플렉스

2 SDK는 무료였고 플렉스 빌더 2는 이클립스 플러그인 형태로 배포되는 최초의 통합 개발 환경

(IDE)이었다. 플렉스 IDE의 라이선스는 이미 성공한 다른 개발 도구들과 마찬가지로 개발자 라

이선스 형태로 바뀌었다. 엔터프라이즈 애플리케이션 개발자들로서는 상황이 점점 더 좋아진 것

이다.

플렉스 3는 더 나은 웹 기반 애플리케이션을 개발할 수 있는 기능뿐 아니라 어도비 AIR(공식

적인 이름은 어도비 통합 런타임이다)를 사용해 데스크톱 애플리케이션을 개발할 수 있는 기능

을 제공했다. 웹상에서 플렉스 3를 사용해 할 수 있는 것이라면 데스크톱에서도 플렉스 3를 사

용해 똑같이 할 수 있다. 플렉스 3 SDK에는 AdvancedDataGrid와 같은 새로운 시각 컨트롤들

이 추가됐는데, 이러한 컨트롤들은 플렉스 빌더 3 프로페셔널(플래시 빌더 4에서는 프리미어 에

디션이라고 한다) 라이선스를 적용받는다. 플렉스 빌더 3에는 개발자 생산성을 향상시킬 수 있는

플렉스 프로파일러와 같은 디버깅 기능이 추가됐다.

xxx

플렉스 4에서 어도비는 시각 디자인을 구현할 수 있는 새로운 방법을 도입했다. 플렉스 4에 새

로 추가된 스파크(Spark) 컴포넌트 군은 컴포넌트 스킨 아키텍처를 대부분 재설계했고 MXML

기반 프로그래밍의 편의성과 플래시 플레이어의 시각적인 렌더링 성능을 결합했다. 플렉스 4 애

플리케이션은 복잡한 텍스트 표현이 가능한 텍스트 엔진(FTE) 및 텍스트 레이아웃 프레임워크

(TLF), 3D 애니메이션 등 플래시 플레이어 10의 새로운 기능을 모두 활용할 수 있다. 새로 명명

된 플래시 빌더 4(과거 플렉스 빌더)는 플렉스와 플래시 개발자 모두가 즐겨 사용하는 액션스크

립트 편집 도구로 자리매김했다. 플래시 빌더 4에는 새로운 코드 리팩터링 및 포맷 기능과 플렉

스 애플리케이션이 런타임 시에 서버와 통신할 때 네트워크 트래픽을 추적할 수 있는 네트워크

모니터 디버깅 도구가 추가됐다.

이 책에서는 플렉스 4 애플리케이션 개발에 대한 폭넓은 내용을 다룬다. 이 책은 플렉스 4

SDK를 사용한 애플리케이션 개발에 대한 상세 이론은 물론 인기 있는 웹 서비스 아키텍처 및 애

플리케이션 서버와 애플리케이션을 연동하는 법도 다룬다. 이 책은 플래시 빌더와 플렉스 4의 문

서를 대신하기 위한 책은 아니다(이런 용도의 책이라면 책이 여러 권으로 분권돼야 함은 물론 페

이지 수도 2,000쪽은 족히 넘을 것이다). 대신 이 책에서는 웹과 데스크톱용 플렉스 애플리케이

션을 개발하고 배포하는 데 필요한 레퍼런스, 튜토리얼, 팁을 제공하고 독자들이 플렉스를 자연

스럽게 익힐 수 있도록 도와준다.

시청각 자료를 활용해 배우기를 좋아하는 독자라면 lynda.com(www.lynda.com)에 있는 저

자의 플래시 빌더 4와 플렉스 4, 어도비 AIR, 콜드퓨전, 드림위버 강좌 동영상을 확인해 볼 것을

권장한다.

이 책의 내용을 십분 활용하는 법

대부분의 장에는 Wiley.com 웹사이트 www.wiley.com/go/¦ex4에서 내려 받을 수 있는 예제

플렉스 애플리케이션과 기타 소스 코드가 들어 있다. 각 장의 예제 파일은 다른 장의 예제와는

무관하게 구성되므로 특정 주제에 대한 학습이 필요하다고 해서 그 앞에 있는 예제 코드를 모

두 살펴볼 필요는 없다.

필자가 웹사이트에서 제공하는 파일들은 주로 플렉스 프로젝트 아카이브 파일 형태로 제공된

다. 플렉스 프로젝트 아카이브는 FXP 파일로 플래시 빌더 4에서 새로 도입된 파일 형식이다. 이

파일은 .fxp라는 확장자를 갖고 있고 플래시 빌더에 기존 프로젝트를 임포트하는 데 필요한 모

든 내용이 들어 있다. 이 파일 형식은 운영체제와 무관하므로 윈도우든 맥 OS X이든 상관없이

모든 플래시 빌더 4에서 파일을 불러올 수 있다. 아울러 이 파일 형식은 MXML이나 액션스크립

트를 모르더라도 그래픽 디자이너들이 인터랙티브한 플렉스 애플리케이션 프로토타입을 개발할

수 있게 해 주는 어도비의 신제품인 플래시 카탈리스트에서 내보내는 파일 형식과도 동일하다.

xxxi

(플래시 빌더가 아니라) 무료 플렉스 SDK를 사용하는 독자라 하더라도 플렉스 프로젝트 아카

이브 파일을 활용할 수 있다. 이 경우 파일 확장자를 .zip으로 수정하고 컴퓨터의 특정 폴더 위치

에 압축을 풀기만 하면 된다. 모범 개발 방식에 따라 프로젝트의 애플리케이션 소스 코드 파일들

은 항상 src라는 아카이브 루트 폴더의 하위 폴더에 들어가게 했다.

BlazeDS, 콜드퓨전, PHP 같은 애플리케이션 서버를 다루는 장의 경우 웹사이트에서 예제를

실행하려면 먼저 해당 소프트웨어를 내려 받아 설치해야 한다. 각 장에는 소프트웨어를 내려 받

을 수 있는 관련 URL이 들어 있고 설치와 관련한 전체 설명을 수록했다. 이러한 장의 예제를 따

라 할 때는 플렉스 프로젝트를 처음부터 만들고 (플렉스 프로젝트 아카이브 파일을 불러오는 대

신) 웹사이트에서 받은 ZIP 파일을 해당 프로젝트에 압축 해제할 것을 권장한다.

마지막으로 이 책과 관련한 문제점을 찾아내거나 다음 개정판에서 다루어 줬으면 하는 주

제가 있다면 필자에게 알려주기 바란다. 질문을 하거나 독자 피드백을 전달하려면 www.

bardotech.com/¦exbible 사이트를 이용하자.

책에 사용된 표기 설명

다음 표기들은 책을 더 쉽게 볼 수 있도록 사용한다.

노트

독자들이 참고해야 하는 유용한 정보를 강조할 때 사용한다.

팁

특정 기능을 더 빠르고 쉽게 활용할 수 있는 추가 도움말을 제공하기 위해 사용한다.

주의

실수하기 쉬운 내용을 사전에 미리 경고한다.

새 기능

플렉스에 새로 추가된 기능을 강조하기 위해 사용한다.

xxxii

상호 참조

특정 주제에 대한 상세 정보를 볼 수 있는 다른 장을 소개할 때 사용한다.

예제 위치

책의 웹사이트인 www.wiley.com/go/flex4에 있는 관련 파일을 알려주는 데 사용한다.

웹 리소스

온라인에 있는 다른 웹 자료를 알려주는 데 사용한다.

xxxiii

xxxiv

Ado

be F

lash

Bui

lder

4

& F

lex

4 Bi

ble

xxxv

제 1 부

플렉스 기본 지식

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

³ 2장 : 플래시 빌더 4의 사용법

³ 3장 : 기본 플렉스 애플리케이션의 개발

³ 4장 : 플렉스 애플리케이션의 내부 구조 이해

³ 5장 : 바인딩과 컴포넌트 사용법

³ 6장 : 플렉스 애플리케이션 디버깅

³ 7장 : 이벤트 처리

1

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

플렉스 4는 웹용 어도비 플래시 플레이어와 데스크톱용 어도비 AIR에서 구동되는 소프트웨어

애플리케이션을 개발하고 배포하기 위한 플래시 플랫폼의 가장 최신 버전이다. 이와 같은 개발

도구는 이미 오래전부터 있었지만 어도비사에서 가장 최근에 발표한 플렉스 4를 활용하면 객체

지향 프로그래밍 경험이 있는 개발자의 경우 다른 프로그래밍 언어의 지식과 다른 플랫폼에서

익힌 기술을 그대로 활용해 생산성 있는 결과물을 손쉽게 만들 수 있다.

플렉스 2 출시 이후 플렉스 개발 환경은 비주얼 스튜디오, 델파이, JBuilder 같은 데스크톱

개발 환경과 유사한 개발 환경을 주도했다. 개발자는 플렉스를 사용해 소스 코드를 작성하고

애플리케이션을 로컬에서 컴파일한 다음, 웹에서 배포할 애플리케이션의 경우 사용자가 접근

할 수 있도록 최종 애플리케이션을 웹 서버에 업로드한다. 하지만 플렉스가 처음부터 이런 식

으로 시작된 것은 아니다.

플렉스는 원래 매크로미디어에서 서버 기반 애플리케이션 배포 및 호스팅 플랫폼으로 출시됐

다. 초기 플렉스 제품 라인 버전에서는 MXML/액션스크립트 컴파일러가 자바 엔터프라이즈 에

디션(JEE) 서버에서 구동되는 자바 기반 웹 애플리케이션에 포함돼 있었다. 애플리케이션 소스

코드도 당시에는 서버에 저장됐다. 사용자가 서버에 요청을 하면 애플리케이션이 ‘요청 시에’ 컴

파일되고 사용자의 브라우저로 전달돼 플래시 플레이어를 통해 재생된 것이다.

� 플렉스에 대한 기본 학습

� 플렉스 애플리케이션에 대한 소개

� 플렉스와 플래시 개발의 차이점

� 객체 지향 프로그래밍을 통한 플렉스 활용

� 플래시 플레이어의 이해

� 플래시 플레이어 역사에 대한 이해

� 플렉스 4 개발 도구를 십분 활용하는 방법

� 도움말 참조

2 l 플래시 빌더 4 & 플렉스 4 바이블

이러한 서버 기반 컴파일과 애플리케이션 배포 모델은 플렉스 웹 티어 컴파일러라는 컴포넌트

를 통해 여전히 사용 가능하다. 하지만 웹 티어 컴파일러의 컴파일러 버전이 플렉스 4 SDK나 플

래시 빌더 4에 포함된 컴파일러와 버전이 항상 일치하지는 않는다. 이로 인해 대부분의 개발자들

은 ‘로컬 컴파일’ 개발 모델을 사용하는 방식이 훨씬 간편하다고 생각한다.

이 장에서는 플렉스 애플리케이션의 성격을 살펴보고 플렉스 애플리케이션과 어도비 플래시

플레이어와의 관계, 아울러 플렉스가 여러 운영체제에 걸쳐 폭넓게 배포된 플래시 플레이어를 어

떻게 활용하는지 살펴본다.

플렉스에 대한 기본 학습

플렉스 제품 라인은 개발자들이 플래시 플레이어에서 구동되는 웹 애플리케이션과 네이티브 데

스크톱 애플리케이션인 어도비 AIR 애플리케이션을 배포할 수 있게 해 준다. 플렉스를 사용해

개발한 애플리케이션 컴파일 결과물은 어도비 플래시 저작 도구(어도비 플래시 CS4 등)를 사용

해 제작한 결과물과 형태는 동일하지만 애플리케이션을 만드는 과정은 매우 다르다.

플렉스 애플리케이션에 대한 소개

플렉스 애플리케이션은 플렉스 4 SDK를 사용해 생성한 플래시 기반 소프트웨어 형태다. 대다수

플렉스 개발자는 플래시 빌더 4 IDE(과거 플렉스 빌더)를 사용해 애플리케이션을 개발한다. 어

도비에서 새로 출시한 플래시 카탈리스트는 플래시 빌더를 사용하는 개발자와 포토샵, 일러스

트레이터 등을 사용해 애플리케이션 디자인을 표현하는 디자이너 사이에 가교 역할을 해 주는

제품이다.

플렉스 SDK와 플래시 빌더 사이의 주된 차이점은 SDK 자체는 무료이고 주로 오픈소스인 반

면 플래시 빌더는 어도비사로부터 구매하는 라이선스를 통해 사용할 수 있다는 점이다. 하지만

플래시 빌더에는 핵심이 되는 플렉스 SDK뿐 아니라 SDK와 더불어 다른 편집 도구를 사용할 때

애플리케이션 개발 과정을 더 생산성 있게 해 주고 에러를 줄여 주는 많은 도구들이 더 포함돼

있다.

웹 리소스

플렉스 SDK의 배포 버전은 플래시 빌더 4에서 번들로 제공하지만 어도비의 오픈소스 웹사이

트인 http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK에서는 SDK의

좀더 최신 버전을 받을 수 있다.

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

플래시 빌더 4 프리미엄(좀더 가격이 비싸고 더 완전한 개발 환경을 제공하는 플래시 빌더 에

디션)에서는 오픈소스 플렉스 SDK에서 제공하지 않는 데이터 시각화 컴포넌트들도 포함돼 있

다. 데이터 시각화 컴포넌트에는 인터랙티브한 시각 차트를 통해 데이터를 보여주는 차트 컴

포넌트, 그룹, 요약 정보, 멀티 컬럼 정렬, 기타 고급 기능을 보여주는 AdvancedDataGrid와

OlapDataGrid 같은 데이터 중심 고급 컴포넌트들도 포함된다.

노트

플렉스 데이터 시각화 컴포넌트는 플렉스 2 제품 라인에서는 별도의 제품을 라이선스를 맺어

서 사용 가능했다. 플렉스 3 출시와 더불어 이러한 컴포넌트는 플렉스 빌더 3 프로페셔널 라

이선스를 통해서만 사용할 수 있게 됐다. 데이터 시각화 컴포넌트의 라이선스 모델은 플래시

빌더 4 프리미엄에서도 그대로 적용된다.

오픈소스로서의 플렉스

2008년 2월 어도비사는 모질라 공개 라이선스(MPL) 1.1 버전을 통해 플렉스 SDK를 오픈

소스 프로젝트로 발표한다. 이 라이선스에서는 소스 코드를 수정하고 확장하는 것을 허용하고

코드의 일부분(또는 전체 SDK)를 배포할 수 있게 해 준다. 플렉스 SDK에 속하는 액션스크립

트 파일을 수정할 때는 다른 개발자들에게도 이를 공개해야 한다. 하지만 공개한다고 해서 개

발자의 코드 소유권이 영향을 받는 것은 아니다. 개발자는 애플리케이션에 사용한 MXML과

액션스크립트 코드에 대한 소유권을 그대로 유지하는 것이다. MPL에 대한 라이선스 복사본

은 www.mozilla.org/MPL/에서 참고할 수 있다.

앞에서 설명한 것처럼 플렉스 SDK의 모든 컴포넌트가 오픈소스 패키지에 전부 포함된 것은

아니다. 플렉스 차트 컴포넌트나 고급 데이터 표현 컴포넌트 같은 일부 컴포넌트는 상업 라이

선스를 통해서만 사용할 수 있다. 아울러 플래시 빌더도 어도비로부터 구매한 라이선스가 있

어야 사용할 수 있다.

오픈소스 플렉스 SDK는 http://opensource.adobe.com/wiki/display/flexsdk/를 통해

관리된다. 추가 정보 및 플렉스 오픈소스 프로젝트와 관련해 현재 진행 중인 논의는 아래 웹사

이트에서 확인할 수 있다.

▶▶ http://flex.org/

▶▶ http://forums.adobe.com/community/opensource/flexsdk/general

플렉스 프로그래밍 언어

플렉스 애플리케이션은 액션스크립트 3, MXML, FXG(플래시 XML 그래픽)라는 세 가지 프로

그래밍 언어를 사용해 개발한다.


▶ 액션스크립트 3 액션스크립트 언어의 가장 최신 버전으로 여러 플래시 저작 환경을 거쳐

발전했다. 완전한 객체 지향 언어인 액션스크립트 3는 ECMA 스크립트 에디션 4의 언어 명

세 초안을 기반으로 한다. 액션스크립트 3에는 클래스 정의 구문, 클래스 패키지 구조, 변

수의 강력한 데이터 타입, 클래스 상속 같은 객체 지향 언어의 요소 대부분이 들어 있다.

▶ MXML 순수 XML 기반 마크업 언어로서 플렉스 애플리케이션 및 다양한 컴포넌트들

을 정의하는 데 사용된다. MXML의 요소 중 대부분은 플렉스 클래스 라이브러리에서

제공하는 액션스크립트 3 클래스와 일치한다.

▶ FXG 새로운 XML 기반 언어로서 XML 마크업을 사용해 그래픽 객체를 표현할 수 있

게 해 준다. 새로 출시된 어도비 플래시 카탈리스트를 활용하면 MXML, FXG, 액션스

크립트를 조합해 애플리케이션의 기능과 그래픽 표현을 정의한 프로젝트를 만들 수 있

다. 아울러 이러한 프로젝트를 기반으로 플래시 빌더 4에서 추가 개발을 진행할 수 있다.

MXML에는 플렉스 애플리케이션의 저수준 그래픽 객체를 선언할 수 있는 벡터 그래픽

드로잉 태그가 여러 개 포함돼 있다. 이러한 태그들은 FXG 마크업 언어의 구문과 엘리먼

트, 어트리뷰트명을 따르도록 설계됐다. 전체 FXG 파일은 하나의 그래픽 이미지처럼 처

리할 수 있다.

새 기능

FXG(플래시 XML 그래픽)는 플렉스 애플리케이션에서 그래픽 객체를 표현하기 위해 어도비

가 개발한 새로운 언어다. 이 언어의 기능은 어도비 플래시 플레이어 10의 렌더링 모델을 충

실히 따르고 있다. 오랜 시간 동안 그래픽을 표현하는 데 사용된 또 다른 XML 언어인 SVG(

크기 조절 가능한 벡터 그래픽)와 FXG 사이에는 여러 공통점이 있다. 실제로 어도비 개발팀

도 초기에는 SVG를 사용하는 것을 검토했다가 기존 SVG가 플래시 플레이어의 그래픽 렌더

링 방식과 차이가 있어서 새로운 언어를 개발하기로 결정했다. 포토샵, 일러스트레이터, 파이

어웍스 같은 많은 어도비 크리에이티브 스위트 제품에는 그래픽을 FXG 마크업으로 내보낼 수

있는 기능이 들어 있다.

플렉스 애플리케이션을 컴파일하면 내부적으로 MXML 코드가 순수 액션스크립트 3 코드로

재작성된다. MXML은 액션스크립트만을 사용해 애플리케이션을 개발하는 것보다 쉽고 빠르게

개발할 수 있는 ‘편리한 언어’라고 할 수 있다.

노트

플래시 CS3 프로페셔널부터는 플래시 저작 도구 환경에서도 논리적인 코드, 클래스 정의, 기

타 프로그래밍 작업에 액션스크립트 3를 사용할 수 있다. 액션스크립트 3만을 지원하는 플렉

스와는 달리 플래시 저작 도구에서는 액션스크립트 2 같은 기존 언어 버전을 사용하더라도 플

래시 문서를 만들 수 있다.


그림 1.1은 플렉스 SDK의 명령행 컴파일러, 플렉스 빌더, MXML과 액션스크립트 프로그래밍

언어, 플래시 플레이어와 AIR 사이의 관계를 보여준다.

프로그래밍 언어

런타임 플랫폼

개발 도구

MXML과 FXG(XML 기반 마크업 언어)

액션스크립트 3(ECMA 스크립트 기반)

어도비 플래시 플레이어(웹 애플리케이션)

어도비 AIR(데스크톱 애플리케이션)

플렉스 SDK(무료)

플래시 빌더(상업 라이선스)

플래시 카탈리스트(상업 라이선스)

그림 1.1 | 플렉스 SDK와 플래시 빌더는 모두 MXML과 액션스크립트 소스 코드를 컴파일해

웹상의 플래시 플레이어나 데스크톱의 AIR 환경에서 구동할 수 있는 애플리케이션 결과물을 만든다.

MXML vs. 액션스크립트 3

MXML과 액션스크립트는 여러 상황에서 서로 혼용해 사용할 수 있다. MXML은 주로 애플리

케이션이나 기타 객체의 시각적인 배치를 지정하기 위해 사용하지만 둘 중 어떤 언어를 사용할지

여부는 개발자가 정하기 나름이다.

아래 예제에서 필자는 Label이라는 액션스크립트 클래스의 인스턴스를 선언하고 일부 속성과

스타일을 설정하고 있다. Label 클래스는 플렉스 SDK와 플래시 빌더 4 모두에 포함된 플렉스 4

클래스 라이브러리 중 하나다. 이 클래스의 목적은 플렉스 애플리케이션에서 단순 텍스트를 보

여주는 것이다.

새 기능

이 예제에 사용한 Label 컨트롤은 스파크 컴포넌트라는 새로운 컴포넌트 군에 속하는 컨트롤

이다(플렉스 2와 3에 포함된 컨트롤과 컴포넌트는 MX 컴포넌트라고 부른다). 스파크 Label

과 RichText, RichEditableText 같은 새로운 컨트롤들은 기존 MX Label과 Text 컨트롤을

대체하기 위한 용도로 설계됐다.


MXML을 통한 객체 선언

Label 컨트롤을 MXML을 사용해 나타낼 때는 <s:Label/>이라는 이름의 태그를 사용한다.

MXML을 사용해 Label 컨트롤 인스턴스를 생성하고 text 속성에 Hello라는 값을 설정하려면

태그를 선언하고 XML 어트리뷰트를 사용해 속성을 설정하면 된다. 다음은 컨트롤의 외양에 영

향을 주기 위해 fontWeight와 fontSize 스타일을 설정한 예제 코드다.

<s:Label▶id="myMXMLText"▶text="Hello▶from▶MXML"

▶▶▶▶fontSize="18"▶fontWeight="bold"/>

상호 참조

XML 네임스페이스 접미어 s:는 새로 생성하는 모든 플렉스 4 애플리케이션 상단에 선언되는

스파크 네임스페이스를 나타낸다.

xmlns:s="library://ns.adobe.com/flex/spark"

이 네임스페이스와 플렉스 4의 새로운 네임스페이스는 4장에서 설명한다.

액션스크립트 3를 통한 객체 선언

액션스크립트 3를 사용해 Label 및 기타 컨트롤을 생성하고 애플리케이션 레이아웃에 추가할 수

도 있다. 이와 같이 액션스크립트를 사용할 때는 먼저 객체를 변수로 선언해야 한다. 객체를 지속

적으로 참조하려면 함수 바깥에 변수를 선언해야 한다. 그런 다음 클래스의 생성자 메서드를 사

용해 인스턴스를 만들고 속성과 스타일을 설정한 후 애플리케이션 콘텐츠에 객체를 추가하면 비

로소 객체가 보이게 된다.

컨트롤의 속성과 스타일은 객체를 생성한 후 아무 때나 설정할 수 있다.

import▶mx.events.FlexEvent;

import▶spark.components.Label;

protected▶var▶myActionScriptText:Label;

protected▶function▶creationCompleteHandler(event:FlexEvent):void

{

▶▶▶▶myActionScriptText▶=▶new▶Label();

▶▶▶▶myActionScriptText.text▶=▶"Hello▶from▶ActionScript";

▶▶▶▶myActionScriptText.setStyle("fontSize",▶18);

▶▶▶▶myActionScriptText.setStyle("fontWeight",▶"bold");

▶▶▶▶this.contentGroup.addElement(myActionScriptText);

}

앞의 액션스크립트 코드는 첫 번째 예제에서 MXML 코드가 한 일을 그대로 수행한다. 이처럼

MXML 선언 대신 액션스크립트를 사용하려면 많은 코드가 필요하고 일부 코드는 커스텀 함수


에 정의해야 한다. 같은 작업을 하는 데 필요한 이런 코드 양의 차이가 MXML이 존재하는 이유

이기도 하다. MXML은 기능이나 성능을 저해하지 않으면서 애플리케이션의 코드 양을 크게 줄

여주는 효과가 있는 것이다.

새 기능

<s:Application> 태그를 통해 참조되는 새로운 플렉스 4 Application 컨테이너는 자식 객

체들을 컨테이너의 contentGroup 속성을 통해 접근할 수 있는 Group에 보관한다. 새로운

Application 컨테이너 또한 새로 추가된 스파크 컴포넌트 군에 들어 있다.

노트

앞의 액션스크립트 코드가 메인 애플리케이션 파일이라고 가정할 때 this.contentGroup.

addElement() 메서드 호출에 사용된 this는 애플리케이션 자체를 참조한다. 만일 같은 코드

가 MXML 컴포넌트나 액션스크립트 클래스에 사용됐다면, this는 해당 컴포넌트나 클래스의

현재 인스턴스를 참조하게 된다.

플렉스 개발 vs. 플래시 개발

플렉스와 플래시를 구분짓는 기준은 오랜 시간에 걸쳐 차츰 변했다. 앞에서 설명한 것처럼 플렉

스는 본래 전체 제품 라인을 지칭하는 용어였다. 즉 클래스 라이브러리, 컴파일러, 개발 도구, 서

버 환경 모두가 플렉스였던 것이다. 기존 플렉스 서버는 현재 라이브사이클 데이터 서비스로 이

름이 변경됐고 과거 플렉스 빌더라고 부르던 개발 도구도 플래시와 플렉스 개발자 모두 액션스크

립트 코드를 작성하고 수정할 때 이 도구를 사용한다는 점에서 지금은 플래시 빌더로 이름이 바

뀌었다. 이 책에서 필자는 플래시라는 용어를 플래시 프로페셔널 같은 플래시 저작 도구를 가리

키는 용어로 사용하고 최근 개명된 플래시 빌더를 가리키는 용어로는 사용하지 않겠다. 아울러

플렉스라는 용어는 주로 플렉스 4 SDK를 가리키는 용어로 사용하겠다.

개발자들은 주로 다음과 같은 성격에 해당하는 소프트웨어 애플리케이션을 개발할 때 플래시

대신 플렉스를 사용한다.

▶ 여러 개발팀이 참여하는 프로젝트

▶ 사용자와의 고수준 인터랙션

▶ 콜드퓨전, PHP, JEE 같은 애플리케이션 서버와의 동적인 데이터 연동

▶ 사용자가 선택할 수 있는 뷰나 화면 개수가 규모 면에서 무척 큰 애플리케이션


이와 대조적으로 개발자들은 다음과 같은 성격의 애플리케이션은 주로 플래시로 개발한다.

▶ 시각적인 애니메이션을 보여주는 게 주된 용도인 애플리케이션

▶ 마케팅 프레젠테이션

▶ 웹 기반 동영상 호스팅

플래시로 개발한 많은 애플리케이션은 플렉스로 개발할 수 있고 그 역도 가능하다. 둘 중 어떤

개발 도구를 선택할지 여부는 주로 배경 지식이나 기존 기술을 고려해 선택한다.

플래시를 통한 개발

앞에서 설명한 것처럼 플래시를 사용하는 개발자들은 주로 애니메이션 재생, 동영상 호스팅 같

은 작업에 플래시를 사용한다. 플래시는 타임라인을 통해 특정 시간에 따라 보여주는 결과물을

제어할 수 있다는 점에서 애니메이션 용도에 탁월하다는 평가를 받는다. 플래시는 타임라인을

통해 다음과 같은 다양한 애니메이션 기술을 지원한다.

▶ 프레임 기반 애니메이션

▶ 모션 트위닝

▶ 쉐이프 트위닝

▶ 역기구학(inverse kinematics)

플래시에서는 순수 액션스크립트 코드를 사용해 애니메이션을 만드는 기능도 지원한다. 하지

만 이러한 접근 방식은 플렉스에서도 활용할 수 있다. 독자들이 그래픽 디자이너 출신이고 시각

적인 결과물을 보면서 작업하는 데 익숙하다면 플래시 개발 환경에서 제공하는 정확한 결과와

시각적인 피드백이 마음에 들 것이다.

플래시에서 사용하는 주된 소스 파일 형태는 FLA 파일로 텍스트 기반이 아닌 바이너리 형태

다. 따라서 이 파일은 주로 소스 코드 관리 시스템을 사용해 코드를 관리하고 여러 개발자가 참

여하는 환경에는 적합하지 않다. 바이너리 파일에서는 di©를 사용해 각 바이너리 파일의 서로 다

른 버전을 체크하기가 쉽지 않다. 주로 이런 환경에서는 설사 프로젝트의 주된 형태가 플래시이

더라도 가능한 한 많은 액션스크립트 코드를 외부 텍스트 기반 파일로 옮겨놓는다. 플래시 CS5

프로페셔널과 플래시 빌더 4에서는 제품 사이의 작업 전환이 훨씬 쉬워졌다. 크리에이티브 스위

트 5부터는 드림위버, 파이어웍스, 기타 웹 기반 개발 도구가 들어 있는 웹 프리미엄 소프트웨어

번들에 플래시 빌더 4가 함께 포함됐다.


플렉스를 사용한 개발

플렉스를 사용해 애플리케이션을 개발하는 개발자들은 주로 다른 프로그래밍 언어를 개발해

본 경험이 있는 개발자들이다. 플래시에서는 프로그래밍 없이도 결과물을 보여줄 수 있지만 플

렉스 애플리케이션은 거의 대부분 코드를 기반으로 한다. 플렉스 SDK나 플래시 빌더 모두 개발

툴킷으로 타임라인을 제공하지 않으므로 플렉스에서는 애니메이션을 모두 액션스크립트를 통

해 생성해야 한다.

플렉스에는 수십, 수백 개의 뷰나 화면이 있는 대규모 애플리케이션 처리에 적합한 우수한 개

발 도구들이 있다. 플래시 CS3에는 화면 문서 기능이 있었는데 이 기능은 어도비로부터 충분한

관심을 받지 못해 ‘엔터프라이즈’ 애플리케이션에 적합한 설계를 적용하는 데까지는 발전하지 못

했다. 이 기능은 결국 플래시 CS4에서는 제거됐다.

마지막으로, 플렉스 애플리케이션은 텍스트 파일 형태로 저장하는 소스 코드를 사용해 개발

된다. 이러한 텍스트 파일은 서브버전과 같은 소스 코드 제어 프로그램에서 관리하기가 쉽다. 이

로 인해 이러한 관리 도구를 사용하는 여러 개발팀은 플렉스가 기존 작업 방식에 자연스럽게 부

합한다고 생각한다.

플래시 빌더의 디자인 뷰 기능은 그래픽 디자이너에게 친숙하고 유용하지만 어도비의 포토샵,

일러스트레이터, 파이어웍스 같은 ‘실제’ 그래픽 디자인 도구에 익숙한 디자이너에게는 항상 직

관적이지만은 않다. 하지만 풍부한 그래픽을 사용해 플렉스 애플리케이션을 개발할 수 있게 도

와주는 어도비의 플래시 카탈리스트가 출시됨에 따라 이제 그래픽 디자이너들은 플렉스 애플리

케이션 개발 과정에서 완전한 협업을 할 수 있게 됐다.

표 1.1에는 플렉스 개발과 플래시 개발 사이의 주된 차이점이 정리돼 있다.

표 1.1 플렉스 개발과 플래시 개발의 주된 차이점

작업 플렉스 플래시

애니메이션 플렉스는 Effect라고 부르는 액션스크

립트 클래스를 사용해 애니메이션을 정

의하고 재생한다. 플렉스에는 타임라인

이 없다.

플래시 타임라인을 사용하면 프레임 기반

애니메이션과 트위닝이 가능하고 액션스크

립트를 사용한 애니메이션 프로그래밍도

가능하다.

데이터 작업 플렉스에는 RPC 컴포넌트

(HTTPService, WebService,

RemoteObject)를 포함해 데이터 작

업 및 애플리케이션 서버 연동에 사용

할 수 있는 다양한 도구들이 있다. 아울

러 플렉스는 라이브사이클 데이터 서비

스와도 자연스럽게 연동된다.

플래시에서도 플렉스를 사용할 때처럼 애

플리케이션 서버와 동일한 연동이 가능하지

만 프로그래밍 도구가 플렉스만큼 직관적

이거나 강력하지 못하다.


작업 플렉스 플래시

디자인 플래시 빌더에는 애플리케이션 레이아

웃을 볼 수 있는 위지위그 디자인 뷰가

있지만 그래픽 객체를 처음부터 만들

수 있는 도구는 없다. 새로 출시된 플래

시 카탈리스트를 사용하면 디자이너들

이 포토샵과 일러스트레이터에서 작업

한 결과물을 불러와 이를 플렉스 애플

리케이션에 맞게 변형하고 플래시 빌더

에서 추가 개발이 가능하다.

플래시는 일러스트레이터만큼 완전하지는

못하지만 매우 훌륭한 그래픽 디자인 도구

다. 아울러 플래시에서는 포토샵과 일러스

트레이터에서 생성한 그래픽 결과물을 쉽

게 불러와 사용할 수 있다.

프로그래밍 언어 플렉스 4와 플래시 빌더 4에서는 액션

스크립트 3와 MXML을 사용해 컴포

넌트 정의, 인스턴스 생성을 할 수 있고

FXG를 사용해 저수준 그래픽을 선언

할 수 있다.

플래시 프로페셔널 CS4는 모든 버전의 액

션스크립트(하지만 플래시 문서 하나당 하

나의 액션스크립트 버전만 사용할 수 있다)

를 지원하지만 MXML은 지원하지 않는다.

코드 관리 플렉스 애플리케이션은 텍스트 파일로

된 소스 코드로 생성하며 이러한 소스

코드는 소스 코드 관리 시스템과 완벽

히 호환된다.

플래시 문서는 바이너리 형태이므로 소스

코드 관리 도구가 필요한 여러 개발자 환경

에서 애플리케이션을 개발할 때는 문제가

있다.

노트

어도비 AIR를 통해 데스크톱에 배포하는 플래시 기반 애플리케이션은 플렉스 SDK를 사용하

는 플래시 빌더와 플래시 프로페셔널 모두에서 개발할 수 있다. AIR 애플리케이션은 컴파일된

플래시 문서나 HTML 기반 콘텐츠를 통해서도 만들 수 있다.

플렉스와 객체 지향 프로그래밍

플렉스 애플리케이션 개발은 특히 객체 지향 프로그래밍(OOP) 방법론에 익숙한 기존 개발자들

에게 적합하다. 객체 지향 프로그래밍은 소프트웨어 애플리케이션의 행동을 제어하기 위해 ‘객

체’를 사용하는 소프트웨어 개발 방법론 중 하나다.

OOP를 활용하면 다음과 같은 장점을 비롯해 소프트웨어 개발 시 여러 가지 장점이 있다.

▶ 애플리케이션 아키텍처의 일관된 구조 유지

▶ 애플리케이션의 서로 다른 모듈 사이의 강제 계약

▶ 소프트웨어 결함을 쉽게 파악하고 수정

▶ 애플리케이션의 다양한 모듈 사이의 기능 분리를 지원

소프트웨어 개발에는 마술 총알 같은 게 없다. OOP 언어를 사용해 개발한 애플리케이션도 절

차 지향 프로그래밍을 통해 개발한 프로그램만큼 유지보수가 어려울 수 있고 설계가 취약할 수


있다. 하지만 OOP 원칙을 잘 이해한다면 성공적인 소프트웨어 개발에 많은 도움이 될 것이다.

액션스크립트 3는 완전한 객체 지향 프로그래밍 언어이므로 OOP의 기본 개념을 이해하고 이

를 플렉스 개발 과정에서 잘 지킨다면 플렉스 개발자들에게 많은 보탬이 될 것이다.

OOP에서는 모듈화, 캡슐화, 상속, 다형성이라는 기술을 주로 사용한다.

모듈화

모듈화는 애플리케이션이 작은 조각 또는 모듈 단위로 개발돼야 함을 일컫는 용어다. 예를 들어

사용자로부터 데이터를 수집하는 애플리케이션은 각 모듈이 특정 용도를 갖도록 모듈 단위로 쪼

갤 수 있다. 사용자에게 데이터 입력폼을 보여주는 코드와 데이터 수집 후 데이터를 전송하는 코

드는 서로 구별된 각기 다른 코드 모듈에 보관해야 한다. 이렇게 하면 유지보수가 쉽고 튼튼한 구

조의 애플리케이션을 쉽게 만들 수 있으며 한 모듈을 수정하더라도 다른 모듈의 행동이 바로 영

향을 받지 않게 된다.

모듈화의 반대는 집적화다. 예제 1.1처럼 코드가 집적화된 애플리케이션에서는 모든 코드와

애플리케이션의 기능이 단일 소스 코드 파일에 정의된다. 이러한 애플리케이션은 매우 ‘불안한’

애플리케이션이 되기 십상이다. 애플리케이션의 한 영역을 수정하면 다른 영역의 기능이 동작하

지 않는 경우가 흔한 것이다. 이러한 애플리케이션은 종종 스파게티 코드라고 하는데 그 이유는

서로 다른 기능이 스파게티처럼 한 데 얽혀 있기 때문이다.

예제 1.1 | 집적화된 플렉스 애플리케이션

<?xml▶version="1.0"▶encoding="utf-8"?>

<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">

▶▶▶▶<fx:Script>

▶▶▶▶<![CDATA[

▶▶▶▶▶▶▶▶import▶mx.collections.ArrayCollection;

▶▶▶▶▶▶▶▶[Bindable]

▶▶▶▶▶▶▶▶private▶var▶myData:ArrayCollection;

▶▶▶▶▶▶▶▶...추가▶액션스크립트▶코드...

▶▶▶▶]]>

▶▶▶▶</fx:Script>

▶▶▶▶<s:VGroup>

▶▶▶▶▶▶▶▶<mx:DataGrid▶dataProvider="{myData}">

▶▶▶▶▶▶▶▶▶▶▶▶<mx:columns>

▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶<mx:DataGridColumn/>




▶▶▶▶▶▶▶▶▶▶▶▶</mx:columns>

▶▶▶▶▶▶▶▶</mx:DataGrid>

▶▶▶▶▶▶▶▶<mx:Form>

▶▶▶▶▶▶▶▶▶▶▶▶<mx:FormItem▶label="First▶Name:">

▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶<s:TextInput▶id="fnameInput"/>

▶▶▶▶▶▶▶▶▶▶▶▶</mx:FormItem>

▶▶▶▶▶▶▶▶▶▶▶▶<mx:FormItem▶label="Last▶Name:">

▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶<s:TextInput▶id="lnameInput"/>

▶▶▶▶▶▶▶▶▶▶▶▶</mx:FormItem>

▶▶▶▶▶▶▶▶▶▶▶▶<mx:FormItem▶label="Address:">

▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶▶<s:TextInput▶id="addressInput"/>

▶▶▶▶▶▶▶▶▶▶▶▶</mx:FormItem>

▶▶▶▶▶▶▶▶</mx:Form>

▶▶▶▶</s:VGroup>

</s:Application>

이 애플리케이션에서는 애플리케이션의 모든 기능이 한 데 섞여 있다. 데이터 모델링, 데이터

수집, 논리적인 코드가 모두 섞여 있는 것이다. 물론 이런 애플리케이션도 동작할 수는 있지만 이

런 애플리케이션은 버그 없이 수정하기가 어렵고 특히 여러 개발팀에서 공동으로 작업할 경우

상대방의 작업을 계속 방해하게 된다는 단점이 있다.

예제 1.2와 같은 모듈화된 애플리케이션은 기능을 모듈 단위로 쪼개고 각 모듈에서 애플리케

이션의 기능 중 한 영역만을 담당한다. 이러한 아키텍처를 사용하면 프로그래머가 특정 기능을

수정할 때 어떤 모듈을 수정할지 알기 때문에 유지보수가 쉬워진다.

예제 1.2 | 모듈화된 플렉스 애플리케이션




▶▶▶▶xmlns:valueObjects="valueObjects.*"

▶▶▶▶xmlns:views="views.*"

▶▶▶▶xmlns:forms="forms.*">

▶▶▶▶<fx:Script▶source="scriptFunctions.as"/>

▶▶▶▶<valueObjects:AValueObject▶id="vo"/>

▶▶▶▶<views:ADataGrid▶id="grid"/>

▶▶▶▶<forms:AForm▶id="form"/>

</s:Application>

플렉스에서는 애플리케이션의 기능을 구현하는 데 함께 사용하는 MXML 컴포넌트와 액션스

크립트 클래스를 통해 모듈화를 적용한다.


캡슐화

캡슐화는 소프트웨어 객체가 내부 구현체를 나머지 애플리케이션 영역으로부터 가능한 한 숨기

고 공개적으로 문서화된 객체의 멤버만을 통해서 기능을 노출해야 한다는 원칙을 말한다. 올바

른 캡슐화 원칙을 적용한 클래스 정의에서는 이러한 객체 멤버를 노출하고 문서화해 애플리케이

션에서 해당 객체의 속성 설정, 메서드 호출, 이벤트 처리, 상수 참조를 할 수 있게 해 준다. 객체

멤버를 정리한 문서는 클래스의 애플리케이션 프로그래밍 인터페이스(API)라고 부른다.

플렉스 클래스 라이브러리에서 클래스 멤버에는 다음과 같은 내용들이 포함된다.

▶ 상수 값이 변하지 않는 속성을 말한다.

▶ 이벤트 객체가 사용자의 행동에 대한 정보 및/또는 공유하고자 하는 데이터에 대한 정보

를 나머지 애플리케이션 영역과 공유하기 위해 전송하는 메시지.

▶ 메서드 객체가 특정 행동을 수행하도록 호출하는 함수.

▶ 속성 객체 내에 저장된 데이터.

▶ 스킨 영역 컴포넌트의 일부 영역을 보여주고 커스텀 스킨에서 수정할 수 있는 스파크 컴

포넌트의 영역.

▶ 스킨 스테이트 컴포넌트의 시각적인 결과물을 보여주고, 감추고, 변화시키는 뷰 스테이트.

▶ 스타일 외양을 결정하는 객체의 시각적인 특징.

플렉스에서는 액션스크립트 3를 통해 캡슐화가 완전히 구현됐다. 클래스에 정의하는 각 멤버

는 접근 제한자를 통해 특정 메서드나 속성이 public, private, protected, internal 중 어느 것에

해당하는지 지정할 수 있다. 예를 들어 public 메서드를 사용하면 메서드를 호출하는 프로그래

머가 실제 실행되는 구체적인 내용을 모르더라도 애플리케이션의 모든 영역에서 클래스 내에 캡

슐화된 기능을 실행할 수 있다.

예를 들어 플래시 플레이어에서 동영상을 재생하는 법을 알고 있는 클래스가 있고 이 클래스

를 사용하면 동영상을 재생, 중단, 잠시 중단할 수 있고 음성 크기를 제어할 수 있다고 가정해 보

자. 이 기능을 수행하는 코드는 플래시에서 처리하는 동영상에 대해서 많은 내용을 알아야 하고

음성 크기를 크고 작게 하는 데 사용되는 함수 호출에 대해서도 알고 있어야 한다. 하지만 이 클

래스의 API는 다음 예제 코드처럼 메인 애플리케이션에서 아주 간단한 호출을 통해 각 기능을

수행할 수 있게끔 아주 간결하게 만들 수 있다.

public▶class▶VideoPlayer()

{

▶▶▶▶public▶function▶VideoPlayer(videoFile:String):void

▶▶▶▶{▶...▶동영상을▶불러오도록▶동영상▶라이브러리를▶호출...▶}


▶▶▶▶public▶function▶start():void

▶▶▶▶{▶...▶동영상을▶재생하도록▶동영상▶라이브러리를▶호출...▶}

▶▶▶▶public▶function▶stop():void

▶▶▶▶{▶...▶동영상을▶중지하도록▶동영상▶라이브러리를▶호출▶...▶}

▶▶▶▶public▶function▶setVolume(volume:int):void

▶▶▶▶{▶...▶볼륨을▶재설정하도록▶동영상▶라이브러리를▶호출▶...▶}

}

이 클래스의 인스턴스를 생성해 사용하는 애플리케이션은 클래스의 세부 내용은 전혀 알 필

요가 없다. 단순히 메서드를 호출하는 법만 알고 있으면 된다.

var▶myVideoPlayer:VideoPlayer▶=▶new▶VideoPlayer("myvideo.flv");

myVideoPlayer.start();

myVideoPlayer.setVolume(1);

이 경우 VideoPlayer 클래스는 애플리케이션의 나머지 영역으로부터 내부 구현체에 대한 내

용을 숨김으로써 복잡한 기능을 캡슐화한다고 말할 수 있다.

상속

상속은 특정 클래스가 다른 클래스를 확장할 수 있는 기능 및 이러한 확장을 통해 클래스의 속

성, 메서드 등을 물려받는(상속) 것을 말한다. 상속을 활용하면 클래스에 특정 멤버(속성, 메서

드 등)를 정의한 다음 이 클래스를 상속한 다른 클래스에서 해당 멤버를 공유할 수 있다.

상속 관계에서 상속하려는 기능을 갖고 있는 클래스는 상위 클래스, 기저 클래스, 부모 클래스

등으로 부른다. 아울러 이 클래스를 상속하는 클래스는 하위 클래스, 파생 클래스, 자식 클래스

라고 부른다. UML은 이러한 클래스 관계와 구조를 시각적으로 묘사하기 위한 표준화된 시각화

언어다. 이 책에서 필자는 그림 1.2에 있는 예제 그림과 같은 UML 다이어그램을 주로 사용해 클

래스 개발 과정과 다른 클래스와의 관계를 설명하고 있다.

Animal

Dog

그림 1.2 | 이 그림은 기저 클래스와 파생 클래스 사이의 관계를 보여주기 위한 예제 UML 다이어그램이다.


한 클래스는 다른 클래스를 상속할 수 있고, 그 클래스는 또 다른 클래스를 상속할 수 있다. 아

울러 이러한 상속 관계를 표현하기 위해 UML 다이어그램을 확장해 표현할 수도 있다. 그림 1.3

에 있는 UML 다이어그램에서는 상위 클래스인 Animal, 하위 클래스인 Dog과 Poodle에 대한

3단 상속 관계를 보여준다.

Animal

+ name

+ sleep()+ eat()

Dog

+ bark()+ eat()

Poodle

+ bark()

그림 1.3 | 이 다이어그램에서는 3단계에 걸친 상속 관계를 보여준다.

그림 1.2에서는 상위 클래스 Animal의 메서드를 하위 클래스인 Dog이 상속하는 것을 볼 수

있다. Dog 클래스에는 상위 클래스에는 없는 추가 메서드와 속성이 있으며, Dog 클래스는 상위

클래스의 기존 메서드를 자신만의 구현체를 통해 오버라이드할 수 있다. 이와 같은 관계는 Dog

과 Poodle 사이에도 그대로 존재한다.

모든 버전의 Animal 클래스는 잠자는 방식이 동일하기 때문에 Dog.sleep()을 호출하든

Poodle.sleep()을 호출하든 실제로는 Animal 클래스에서 구현된 메서드가 호출된다. 하지만

Dog은 자신만의 eat() 메서드가 있으므로 Dog.eat()을 호출하거나 Poodle.eat()을 호출하면 이

에 해당하는 메서드가 호출된다. 끝으로 모든 개는 짖는 방식이 다르므로 Poodle.bark()는 특정

클래스에서 구현한 고유 버전의 bark() 메서드를 호출한다.

상속을 사용하면 시간이 지남에 따라 서로 다른 기능이 필요할 때 하위 클래스를 작성해 애플

리케이션을 확장할 수 있다.

플렉스에서는 액션스크립트 상속을 통해 플렉스 클래스 라이브러리에 있는 원본을 수정하지

않고도 컴포넌트의 확장 버전을 만들 수 있다. 이렇게 하면 어도비에서 개선된 원본 클래스를 새

로 제공하더라도 애플리케이션을 재컴파일해 개선된 기능을 바로 사용할 수 있다.


다형성

다형성은 상위 클래스의 인스턴스 데이터 타입을 지정한 인자나 매개변수를 받는 메서드를 작성

하면 하위 클래스의 인스턴스를 해당 메서드에 전달할 수 있다는 원칙이다. 특정 상위 클래스를

상속하는 모든 하위 클래스는 메서드, 속성, 기타 객체 멤버를 공유하므로 상위 클래스의 인스턴

스를 인자로 받는 메서드는 하위 클래스의 인스턴스도 인자로 받을 수 있고 이 경우 메서드 호출

이 안전하게 이루어질 것임을 쉽게 알 수 있다.

다형성은 인터페이스라고 하는 프로그래밍 모델과도 병행해 사용한다. 인터페이스는 본질적

으로 인스턴스를 직접 만들 수 없는 추상 클래스 같은 타입이다. 인터페이스의 목적은 메서드와

기타 객체 멤버를 정의해 메서드를 어떻게 작성해야 할지 알려주는 데 있다. 하지만 그림 1.4에서

볼 수 있는 인터페이스처럼, 인터페이스에서는 실제로 메서드를 구현하지 않는다. 다만 특정 메

서드가 가져야 할 인자와 반환할 데이터 타입을 설명하기만 할 뿐이다.

<<interface>>

Animal

+ move()+ eat()+ sleep()

+ move()+ eat()+ sleep()

Dog

그림 1.4 | 이 UML 다이어그램에서는 인터페이스와 구현 클래스 사이의 관계를 볼 수 있다.

클래스는 실제로 어떤 행동을 하는 인터페이스 메서드의 구체적인 버전을 작성해 인터페이스

를 ‘구현한다’. 상위 클래스와 하위 클래스 사이의 관계에서처럼 메서드의 인자로 인터페이스의

인스턴스를 받게 할 수도 있다. 이 경우 런타임 시에 실제 구현체 클래스의 인스턴스를 넘겨주게

된다.

예를 들어 Animal 클래스를 인터페이스로 변환한다고 가정해 보자. 이렇게 할 경우 Animal

인스턴스는 직접 생성할 수 없고 특정 Animal 종(species)만을 생성할 수 있다. 다음 코드는 이

인터페이스를 나타내는 코드다.

public▶interface▶Animal

{


▶▶▶▶public▶function▶sleep()

▶▶▶▶{}

}

이 인터페이스에서는 메서드를 실제로 구현하지 않는다. 이 인터페이스의 목적은 메서드명과

구조를 정의하는 것뿐이다. 이 인터페이스를 구현하는 클래스는 대략 다음과 같이 작성할 수

있다.

public▶class▶Dog▶implements▶Animal

{

▶▶▶▶public▶function▶sleep()

▶▶▶▶{▶...▶개가▶잠을▶자게▶하는▶실제▶코드▶...▶}

▶▶▶▶public▶function▶bark()

▶▶▶▶{▶...▶개가▶짖게▶하는▶실제▶코드▶...▶}

}

인터페이스를 구현하는 클래스는 인터페이스에 필요 없는 다른 메서드도 추가할 수 있다는

사실에 주의하자. 이러한 접근 방식을 종종 계약 기반 프로그래밍이라고 부른다. 인터페이스가

특정 메서드 군에 해당하는 메서드와 이들 메서드를 구현하는 객체 사이에서 계약을 성립시키

는 것이다.

플렉스에서는 상위 클래스와 하위 클래스 사이의 관계 및 액션스크립트 3의 인터페이스 선언

과 구현체를 통해 이러한 다형성을 지원한다.

어도비 플래시 플레이어에 대한 이해

플렉스 애플리케이션은 어도비 플래시 플레이어와 어도비 AIR를 통해 런타임 시에 실행된다. 두

경우 모두 플렉스 애플리케이션은 SWF 파일 형식으로 컴파일된 애플리케이션 형태로 실행된다.

플렉스 애플리케이션을 웹을 통해 배포하면 웹 브라우저의 요청에 대한 웹 서버의 응답 결과

로 애플리케이션이 다운로드된다. 이어서 브라우저는 어도비 플래시 플레이어를 구동하고 이 과

정을 통해 애플리케이션이 실행된다.

어도비 AIR에는 핵심 컴포넌트 중 하나로 플래시 플레이어가 들어 있다. 어도비 AIR의 다른

컴포넌트로는 HTML을 실행하기 위한 웹 브라우저 커널, CSS, 자바스크립트, 로컬 파일 접근과

영구 데이터 저장소 접근을 위한 API 등이 있다. AIR에 포함된 플래시 플레이어의 버전은 사용

자 시스템의 웹 브라우저 플러그인이나 액티브X 컨트롤에 있는 플래시 플레이어 버전과 항상 동

일하다. 이로 인해 플렉스 애플리케이션에 구현된 모든 기능은 웹과 데스크톱 모두에서 동일하

게 동작할 수 있다.


아래 그림 1.5에 있는 다이어그램은 웹과 AIR 환경에서 배포된 플래시 플레이어의 구조상 차

이점을 보여주는 그림이다.

웹 브라우저

웹 배포 환경

플래시플레이어

액티브X나 플러그인 형태로 플래시 플레이어를 호출한다.

AIR 런타임에 플래시 플레이어와 웹 브라우저가 모두 통합돼 있다.

플래시플레이어

웹브라우저

어도비 통합 런타임(AIR)

데스크톱 배포 환경

그림 1.5 | 웹 브라우저와 AIR에 설치된 플래시 플레이어에 대한 비교 그림

어도비 플래시 플레이어의 역사에 대한 간략한 소개

원래 퓨처웨이브 소프트웨어라는 회사가 퓨처 스플래시 애니메이터라는 제품을 만들었고 이 제

품은 이후 스마트스케치라는 제품으로 발전했다. 당시 애니메이션 재생은 자바 기반으로 이루어

졌고 이 애니메이션 플레이어가 현재 어도비 플래시 플레이어의 시초가 된다. 매크로미디어가 이

기업을 인수한 후 제품의 이름의 변경됐고 1996년 매크로미디어 플래시 1.0이 출시된다.

이후 플래시 플레이어는 지속적인 발전을 거듭해 기본적인 웹 애니메이션부터 시작해 (오디오

와 비디오) 리치 미디어를 재생할 수 있는 완전한 프로그래밍 환경으로 발전했다.

매크로미디어 시절 플래시(저작 도구)는 스튜디오 번들 패키지의 일부였고 드림위버, 파이어웍

스 같은 다른 스튜디오 제품과 통합돼 있었다. 매크로미디어는 플래시 MX와 MX 2004를 자신

들이 리치 인터넷 애플리케이션(RIA)이라고 부르기 시작한 개발 환경을 위한 도구로 자리매김시

켰다. 물론 플래시 개발 환경은 애플리케이션 개발자들이 보기엔 턱없이 열악했지만 (이와 관련

해서는 ‘플렉스 개발 vs. 플렉스 개발’ 절에서 플래시를 사용할 때의 문제점에 대한 설명을 확인

하자) 플래시 플레이어는 지속적으로 기능이 발전했고 개발 과정이야 어찌됐든 완성된 애플리케

이션들을 보여줬다.


이후 어도비사가 매크로미디어를 인수한 다음 플래시는 어도비 크리에이티브 스위트 3(CS3)

제품 번들에 속하게 됐다. 이러한 제품군의 조정과 더불어 일러스트레이터와 포토샵 같은 크리

에이티브 스위트 제품들과 플래시의 연동은 더욱 견고해졌다. 애프터 이펙트나 프리미어 같은 다

른 어도비 제품에는 동영상 기반의 작업 결과물이 플래시 기반의 프레젠테이션과 연동될 수 있

도록 내보내기 기능이 새로 추가됐다. 2008년 플래시 프로페셔널 CS4를 통해 처음 소개된 플래

시 플레이어 10은 개선된 런타임 성능과 더불어 많은 새로운 기능을 제공한다.

표 1.2에는 어도비 플래시 플레이어의 주요 마일스톤이 정리돼 있다.

표 1.2 플래시 플레이어의 역사

버전 연도 새 기능

매크로미디어 플래시 플레이어 1 1996 기본적인 웹 애니메이션

매크로미디어 플래시 플레이어 2 1997 벡터 그래픽, 일부 비트맵 지원 기능, 일부 오디오 지원 기

능, 객체 라이브러리

매크로미디어 플래시 플레이어 3 1998 무비클립 엘리먼트, 알파 투명도, MP3 압축, 독립 실행형

플레이어, 자바스크립트 플러그인 연동

매크로미디어 플래시 플레이어 4 1999 액션스크립트 개선, 내부 변수, 입력 필드 객체, 스트리밍

MP3

매크로미디어 플래시 플레이어 5 2000 액션스크립트 1.0, XML 지원, 스마트클립(컴포넌트 기반

아키텍처), HTML 1.0 텍스트 형식

매크로미디어 플래시 플레이어 6 2002 애플리케이션 서버와 연동하는 플래시 리모팅, 스크린 리

더기 지원, 소렌슨 스파크 동영상 코덱

매크로미디어 플래시 플레이어 7 2003 스트리밍 오디오와 동영상, 액션스크립트 2, 플렉스와의

최초 연동 버전

매크로미디어 플래시 플레이어 8 2005 GIF와 PNG 로딩, ON VP6 동영상 코덱, 성능 개선, 블러,

드롭 섀도와 같은 시각 필터, 파일 업로드와 다운로드, 개

선된 텍스트 렌더링, 새로운 보안 기능

어도비 플래시 플레이어 9 2006 액션스크립트 3, 성능 개선, E4X XML 파싱, 바이너리 소

켓, 정규식

어도비 플래시 플레이어 9 업데

이트 3 (버전 9.0.28)

2007 H.264 동영상, 하드웨어 가속을 사용한 전체 화면 동영상

재생

어도비 플래시 플레이어 10 2008 3D 효과, 커스텀 필터와 이펙트, 개선된 텍스트 렌더

링, 동적인 사운드 생성, 벡터 데이터 타입, 동적 스트리

밍, Speex 오디오 코덱, 개선된 파일 업로드 및 다운로드

API, 색상 교정.

어도비 플래시 플레이어 10.1 2010 오픈 스크린 프로젝트가 포함된 첫 번째 배포 버전. 휴

대전화에서 액션스크립트 3를 지원하는 첫 번째 버전.

HTTP 스트리밍, 개선된 동영상 재생

매번 새 제품이 나올 때마다 플래시 플레이어의 성능은 개선됐다. 그 결과 이 책을 쓰고 있는

현 시점 기준으로 가장 최신 버전의 플래시 플레이어(10.1 버전)에는 필자가 앞에서 얘기한 모든

기능들이 전부 들어 있다.


▶ 웹 기반 애니메이션

▶ 액션스크립트 3를 사용한 객체 지향 프로그래밍

▶ 리치 미디어 호스팅과 재생

노트

일반 컴퓨터에 배포되는 플래시 플레이어 버전 외에 매크로미디어와 어도비에서는 휴대전

화나 PDA 같은 기기에서 플래시 콘텐츠를 보여줄 수 있는 플래시 라이트도 발표했다. 플래

시 CS5 프로페셔널과 함께 출시된 어도비 플래시 플레이어 10.1부터는 휴대전화와 같은 모

든 기기에서 액션스크립트 3를 지원한다. 아울러 플래시 CS5를 사용하면 플래시 콘텐츠를

iPhone 응용프로그램으로 컴파일할 수 있다.

플렉스 개발팀도 이러한 추세를 따라가고 있다. 플렉스 모바일 SDK를 사용하면 플렉스 애

플리케이션 아키텍처를 사용해 애플리케이션을 모바일 기기에 배포할 수 있다. 이와 관련

한 상세 정보는 플렉스 모바일 웹 페이지인 http://labs.adobe.com/technologies/flex/

mobile/을 참고하자.

플래시 플레이어 보급률에 대한 이해

플래시 플레이어의 장점 중 하나는 웹상의 거의 모든 곳에서 플래시를 볼 수 있을 만큼 보급률

이 높다는 것이다. 새 버전이 출시될 때마다 플래시 플레이어는 이전 버전의 보급 속도 기록을 갈

아치웠다. 플래시 플레이어 9도 마찬가지다. (어도비 웹사이트의 통계에 따르면) 2009년 12월 기

준으로 플래시 플레이어 7, 8, 9의 보급률은 (신흥 시장을 포함해) 98퍼센트 이상이고 플래시 플

레이어 10의 보급률은 93퍼센트 이상이라고 한다. 물론 이러한 보급률은 주기적으로 변동된다.

가장 최신 플래시 플레이어의 보급률을 확인하고 싶다면 www.adobe.com/products/player_

census/¦ashplayer/를 방문하자.

이러한 보급률은 플렉스를 사용해 애플리케이션을 개발할지 고민하는 기관으로서는 중요한

문제다. 왜냐하면 (가장 최근에 출시된 플렉스 애플리케이션과 플래시 문서를 실행하는 데 필요

한) 플래시 플레이어 10 사용 가능 여부가 플렉스 애플리케이션이 순조롭게 배포될지 또는 사용

자가 애플리케이션 실행 전에 플레이어를 손수 업그레이드해야 할지 여부를 결정하기 때문이다.

사용자가 플래시 플레이어를 설치해야 할 때는 설치할 수 있는 방법이 여러 가지 있다.


플래시 플레이어의 디버그 버전 사용

플래시 플레이어의 디버그 버전은 여러 가지 면에서 배포 버전과 다르다. 다음 절에서 설명하는

것처럼 플렉스 빌더 4와 플렉스 4 SDK에서 제공하는 설치 프로그램을 통해 플래시 플레이어의

디버그 버전을 설치할 수도 있다.

플래시 플레이어의 디버그 버전에는 다음과 같은 기능들이 포함된다.

▶ 플렉스 SDK에 포함된 명령행 디버거인 fdb와의 연동

▶ trace() 함수를 사용해 기록한 로그 메시지를 처리하고 보고하는 기능

▶ 브레이크포인트 같은 플래시 빌더 디버깅 도구와의 연동

▶ 기타 디버깅 도구

플래시 플레이어 디버그 버전을 실행 중인지 확인하려면 브라우저에서 플래시가 포함된 아무

웹 페이지나 방문하면 된다.

www.adobe.com/go/tn_19245

이렇게 하면 그림 1.6에 보이는 것처럼 현재 설치된 플래시 플레이어 버전을 보여주는 플래시

문서를 볼 수 있다. 이러한 플래시 문서를 플래시 디버그 플레이어를 통해 로드하면 디버그 플레

이어가 설치돼 있음을 보여주는 메시지를 볼 수 있다. 아울러 이를 통해 액티브X 버전을 실행 중

인지 플러그인 버전을 실행 중인지 여부도 알 수 있다.

그림 1.6 | 플래시 플레이어의 버전 확인


플래시 플레이어의 설치

이 책을 쓰고 있는 현 시점 기준으로 플래시 플레이어 10을 사용할 수 있는 운영체제는 다음과

같다.

▶ 윈도우

▶ 맥 OS X

▶ 리눅스

▶ 솔라리스

현재 사용 가능한 운영체제의 최신 정보와 더불어 최소 브라우저 사양과 하드웨어 사양을 확

인하려면 www.adobe.com/products/¦ashplayer/systemreqs/ 웹사이트를 방문하자.

플래시 플레이어는 다양한 형태로 사용자 컴퓨터에 설치할 수 있다.

▶ 통합 웹 브라우저 플러그인 방식

▶ 단독 실행 버전

▶ 어도비 AIR의 일부

노트

플래시 플레이어를 설치하는 방법과 상관없이 플래시 플레이어를 설치하는 사용자는 컴퓨터

에 대해 관리자 권한을 갖고 있어야 한다. 마이크로소프트 윈도우의 경우 이 말은 사용자가

관리자로 로그인해야 함을 의미한다. 맥 OS X에서는 설치 과정 동안 관리자 비밀번호를 물

어본다.

플래시 플레이어의 제거

플래시 플레이어를 설치하기 전에는 기존 버전을 제거했는지 먼저 확인해야 한다. 플래시 플레이

어를 제거하는 과정은 운영체제에 따라 조금씩 다르지만 플래시 플레이어 제거 전에는 항상 모

든 브라우저 창을 닫아야 한다.

윈도우 XP에서는 운영체제의 소프트웨이어 설치 제거 표준 툴을 사용해 플래시 플레이어를

제거할 수 있다. 즉 제어판에서 프로그램 추가 또는 제거를 선택하거나 윈도우 비스타의 경우 제

거 또는 프로그램 변경을 선택하면 된다(그림 1.7).

맥 OS X에서는 www.adobe.com/go/tn_14157 웹 페이지를 통해 다운로드할 수 있는 제거 프

로그램을 사용하면 된다.


플래시 플레이어 10 액티브X 버전과 플러그인 버전

그림 1.7 | 윈도우 비스타의 제거 또는 프로그램 변경 화면. 플래시 플레이어의 플러그인 버전과 액티브X 버

전이 모두 보인다.

플래시 빌더를 통한 설치

플래시 빌더 4를 설치하면 플래시 플레이어 디버그 버전이 자동으로 설치된다. 설치가 제대로 이

루어지려면 설치 시작 전에 먼저 모든 브라우저 창을 닫아야 한다. 설치 과정에서 열려 있는 브라

우저 창이 있으면 설치 과정을 진행하기 전에 모든 창을 닫아달라는 대화상자가 나타난다.

플래시 빌더 설치 파일의 사용

플래시 플레이어 디버그 버전을 재설치해야 할 때는 플래시 빌더나 플렉스 SDK에 포함된 버전

을 사용해야 한다. 플래시 빌더를 설치했다면 플래시 빌더 설치 폴더의 하위 폴더에서 설치 파일

을 찾을 수 있다. 윈도우의 경우 기본 설치 폴더는 다음과 같다.

C:\Program Files\Adobe\Flash Builder 4\Player\Win

이 폴더는 세 파일이 들어 있다.

▶ Install Flash Player 10 Plugin.exe 파이어폭스, 사파리, 기타 브라우저에 사용할 플러그

인 버전

▶ Install Flash Player 10ActiveX.exe 인터넥 익스플로러에 사용할 액티브X 버전

▶ FlashPlayer.exe 단독 실행형 플래시 플레이어(설치가 필요 없다. 바로 실행할 수 있다).


웹상에서의 플래시 플레이어 설치

어도비 웹사이트에서도 플래시 플레이어를 내려 받을 수 있다. 이때는 배포 버전과 디버그 버전

에 따라 다운로드할 플래시 플레이어를 선택하면 된다.

플래시 플레이어 배포 버전 다운로드

플렉스 애플리케이션이나 기타 플래시 기반 콘텐츠를 실행하는 최종 사용자는 http://get.adobe.

com/¦ashplayer/ 웹사이트를 통해 플래시 플레이어를 내려 받을 수 있다.

그림 1.8의 페이지에서는 운영체제와 브라우저에 맞는 플래시 플레이어를 다운로드할 수 있는

링크를 볼 수 있다.

그림 1.8 | adobe.com으로부터 플래시 플레이어 내려 받기

주의

이 페이지에서 다운로드하는 플래시 플레이어 버전은 디버그 버전이 아니라 배포 버전이

다. 배포 버전의 플래시 플레이어가 설치된 경우에는 애플리케이션을 테스트할 수는 있어도

trace 로그 확인, 브레이크포인트, 표현식 해석과 같은 디버깅 도구는 활용할 수 없다.

팁

플래시 플레이어 다운로드 센터에는 구글 툴바나 기타 콘텐츠를 다운로드할 수 있는 링크가

들어 있을 수 있다. 플래시 플레이어의 기능을 활용하기 위해 굳이 플래시 플레이어와 무관한

이런 콘텐츠까지 다운로드하지 않아도 된다.


플래시 플레이어의 디버그 버전 다운로드

플래시 플레이어의 디버그 버전은 www.adobe.com/support/flashplayer/downloads.html 웹

페이지에서 다운로드할 수 있다.

그림 1.9에 나온 것처럼 이 페이지에서는 다양한 운영체제와 브라우저에 맞는 모든 버전의 플

래시 플레이어가 디버그 버전, 배포 버전별로 링크돼 있다.

그림 1.9 | 어도비 플래시 플레이어 지원 센터

팁

어도비 랩스 웹 페이지인 http://labs.adobe.com을 방문하면 더 최신 버전의 플래시 플레

이어를 만날 수 있다. 어도비 랩스에서는 현재 개발 중인 프로젝트들을 소개한다. 어도비 랩스

는 현재 개발 중인 코드를 커뮤니티와 함께 나눈다는 점에서 단순히 프로젝트를 추진하는 것

이상의 의미가 있다.

플렉스 4 개발 도구

플렉스 개발자들은 플래시 빌더 4, 플렉스 4 SDK, 플래시 카탈리스트처럼 여러 개발 도구 가운

데 하나를 선택해 사용할 수 있다.


플래시 빌더 4에 대한 소개

과거 플렉스 빌더라고 부른 플래시 빌더 4는 플렉스 애플리케이션 개발을 위한 통합 개발 환경

(IDE)이다. 플래시 빌더는 대다수 개발자들이 플렉스 애플리케이션 개발 시 사용하는 도구다. 플

래시 빌더 4에 대해서는 2장에서 자세히 설명한다.

플렉스 4 SDK

플렉스 애플리케이션 개발에 필요한 플렉스 클래스 라이브러리와 명령행 도구는 모두 무료로

제공된다. 플래시 빌더를 사용하지도 않고 라이선스가 필요한 특정 컴포넌트를 사용하지도 않

는다면 어도비 사이트에서 플렉스 SDK를 내려 받아 얼마든지 애플리케이션을 개발하고 배포

할 수 있다. 플렉스 SDK를 활용할 때의 장점은 당연히 비용이다. 하지만 플래시 빌더를 사용할

때 제공되는 지원 기능 없이 Emacs나 이클립스 버전 같은 텍스트 편집기를 사용해야 한다는

단점도 있다.

가장 최신 버전의 플렉스 4 SDK는 http://opensource.adobe.com/wiki/display/f lexsdk/

Download+Flex+4에서 다운로드할 수 있다.

플렉스 SDK는 모든 운영체제에서 압축을 풀 수 있는 zip 압축 파일 형태로 배포된다.

플렉스 SDK에는 플렉스 애플리케이션 개발에 사용할 수 있는 대부분의 클래스 라이브러리가

들어 있다. 하지만 다음 컴포넌트들은 배포 시 라이선스가 필요하다.

▶ 플렉스 차트 및 기타 고급 시각 컨트롤을 포함한 플렉스 데이터 시각화 컴포넌트

▶ 애플리케이션 프로파일링 도구

그림 1.10에서 볼 수 있는 것처럼 라이선스 없이 데이터 시각화 컴포넌트를 사용하면 애플리케

이션에 있는 해당 컴포넌트에 평가판임을 알려주는 워터마크가 표시된다.

플렉스 클래스 라이브리와 더불어 플렉스 4 SDK에는 다음 명령행 도구가 포함된다.

▶ adl AIR 디버그 애플리케이션 실행 프로그램

▶ adt AIR 개발자 도구

▶ acompc AIR 컴포넌트 컴파일러

▶ amxmlc AIR 애플리케이션 컴파일러

▶ asdoc 액션스크립트 클래스로부터 문서를 추출하고 ASDoc이라는 HTML 파일을 생성

해 주는 도구

▶ compc 컴포넌트 라이브러리, RSL 및 테마 파일 생성에 사용하는 컴파일러


그림 1.10 | 워터마크가 표시된 차트 컴포넌트

▶ fcsh 컴파일 작업마다 매번 새로운 자바 가상 머신(JVM)을 실행하지 않고 여러 컴파일

작업을 수행할 수 있는 플렉스 컴파일러 쉘

▶ fdb 애플리케이션을 디버그할 수 있는 디버거

▶ mxmlc 플렉스 애플리케이션 개발용 컴파일러

▶ optimizer 액션스크립트의 컴파일된 파일 크기를 줄여 주고 ‘배포 버전’의 애플리케이

션, 컴포넌트, RSL을 만드는 최적화 도구

이러한 명령행 도구 각각의 사용법은 어도비의 문서를 참고하자.

MXMLC 명령행 컴파일러의 사용법

명령행 컴파일러인 mxmlc를 사용해 플렉스 애플리케이션을 컴파일할 때는 먼저 플렉스 4 SDK

bin 디렉터리를 시스템 경로에 추가하는 게 좋다. 이렇게 하면 각 명령마다 전체 경로를 포함시키

지 않고 컴파일러는 물론 해당 디렉터리에 있는 다른 도구도 바로 실행할 수 있다.


팁

마이크로소프트 윈도우에서 플래시 빌더 4를 설치하면 설치 프로그램에서 현재 경로에 플

렉스 4 컴포넌트들이 포함된 모든 디렉터리를 추가할 수 있는 명령창을 열어주는 메뉴 항목

을 제공한다. 이 도구를 사용하려면 윈도우 시작 메뉴에서 모든 프로그램 [Adobe ⇨ Adobe

Flex 4 SDK Command Prompt]를 선택하면 된다.

명령행에서 애플리케이션을 컴파일하려면 메인 애플리케이션 파일이 있는 폴더로 이동해야

한다.

cd▶/flex4bible/myfiles

이 디렉터리에 HelloWorld.mxml 파일이 있다고 가정할 때 애플리케이션을 컴파일하려면 다

음 명령을 실행하면 된다.

mxmlc▶HelloWorld.mxml

컴파일이 끝나면 이제 디렉터리에 HelloWorld.swf라는 새 파일이 생길 것이다. 이 파일이 바

로 웹 서버에 배포할 컴파일된 애플리케이션이다.

팁

명령행 컴파일러에는 애플리케이션을 튜닝할 수 있는 많은 옵션이 들어 있다. 컴파일러의 자

세한 사용법은 어도비의 문서를 참고하자.

도움말 얻기

플래시 빌더 4와 플렉스 4에 대한 문서는 http://help.adobe.com/en_US/Flex/4.0/UsingFlash

Builder/index.html 어도비 웹사이트에서 확인할 수 있다.

플렉스 4 SDK에 대한 가장 최신 버전의 액션스크립트 3.0 언어 레퍼런스는 http://help.adobe.

com/en_US/Flex/4.0/langref/에서 확인할 수 있다.

이러한 문서는 플래시 빌더 4에 새로 추가된 어도비 커뮤니티 도움말에서도 제공한다. 이러한

문서를 찾아보고 활용하는 법은 2장에서 자세히 설명한다.


정리

이 장에서는 어도비 플렉스를 사용한 애플리케이션 개발 분야에 대해서 소개했다. 이 장에서 배

운 내용은 다음과 같다.

▶ 플렉스 애플리케이션은 소스 코드로 개발하고 플래시 문서로 컴파일된다.

▶ 플렉스 애플리케이션은 MXML, FXG, 액션스크립트라는 세 가지 프로그래밍 언어를 사

용해 개발한다.

▶ 플렉스 애플리케이션은 웹 브라우저를 통해 전달되는 어도비 플래시 플레이어를 통해 실

행된다.

▶ 플렉스 애플리케이션은 어도비 AIR를 통해 여러 운영체제를 지원하는 데스크톱 응용프

로그램 형태로 실행할 수 있다.

▶ 플렉스 4 SDK는 무료이며 어도비에서 주관하는 오픈소스 프로젝트를 통해 내려 받을 수

있다.

▶ 플래시 빌더 4는 플렉스 애플리케이션 개발에 사용하는 상업용 통합 개발 환경이다.

▶ 플래시 카탈리스트는 그래픽 디자이너들이 풍부한 그래픽을 활용해 플렉스 애플리케이

션의 프로토타입을 개발하고 플렉스 컴포넌트에 대한 그래픽 스킨을 정의할 수 있는 새

로운 프로그램이다.

▶ 플렉스 개발자들은 주로 객체 지향 프로그래밍 개발 경험을 가지고 있지만 시간을 충분

히 들일 각오가 돼 있다면 누구든지 훌륭한 플렉스 애플리케이션 개발자가 될 수 있다.

31

02플래시 빌더 4 사용법

플래시 빌더 4는 플렉스 4 SDK를 사용한 애플리케이션 개발 시 어도비가 권장하는 개발 도구다.

플래시 빌더는 윈도우와 맥 OS X에서 사용할 수 있다.

물론 무료 플렉스 SDK를 사용하더라도 플렉스 애플리케이션을 개발하고 웹과 데스크톱에 배

포할 수 있지만 플래시 빌더를 쓰면 개발자 생산성 향상, 버그 감소, 코딩 속도 개선, 전반적인 개

발 과정 개선 등의 효과를 가져다 주므로 충분히 투자할 만한 가치가 있다.

새 기능

1장에서 설명한 것처럼 플래시 빌더는 4 버전 이전에는 플렉스 빌더라는 이름을 갖고 있었다.

어도비는 플래시와 플렉스 개발자 모두 플래시 플레이어 프로그래밍 시 편집 도구로 이 개발

도구를 사용할 것을 권장하는 과정에서 개발 도구의 이름을 이와 같이 변경했다.

� 플래시 빌더 4의 다운로드 및 설치

� 이클립스 플러그인 버전의 플래시 빌더 설치

� 플래시 빌더 기능 소개

� 뷰와 퍼스펙티브의 사용

� 작업공간과 프로젝트의 사용

� 플렉스 프로젝트의 생성

� 도움말 활용법

� 코드 검색 및 리팩터링

� 플래시 빌더 4의 새 기능 활용법

� 플래시 빌더 4와 플래시 프로페셔널 CS5의 연동


플래시 빌더 시작하기

플래시 빌더는 어도비 사이트에서 무료 시험 버전을 다운로드하거나 라이선스를 구매해 사용할

수 있다. 현재 플래시 빌더 4는 두 가지 라이선스로 제공된다.

▶ 플래시 빌더 4 표준 에디션 이 라이선스에는 웹과 데스크톱용 플렉스 애플리케이션을

개발하는 데 필요한 모든 내용이 들어 있지만 플렉스 데이터 시각화 컴포넌트와 기타 고

급 개발 및 테스트 도구는 빠져 있다.

▶ 플래시 빌더 4 프리미엄 에디션 이 라이선스에는 플래시 빌더 표준 에디션의 모든 기능

과 더불어 차트 컴포넌트, AdvancedDataGrid, OLAPDataGrid 같은 데이터 시각화 컴

포넌트가 포함된다. 또 플래시 빌더 프리미엄 라이선스에는 플렉스 프로파일러와 HT 퀵

테스트 프로페셔널(과거 머큐리 퀵테스트)를 함께 사용해 플렉스 애플리케이션의 클라

이언트 단 테스트를 자동으로 할 수 있는 플렉스 테스트 자동화 프레임워크도 포함된다.

플래시 빌더 4의 설치

어도비에서는 윈도우와 맥 OS X에서 사용할 수 있는 플래시 빌더 버전을 각각 제공한다. 운영체

제와 상관없이 플래시 빌더는 다음 두 가지 형태로 설치할 수 있다.

▶ 필요한 내용이 모두 들어 있는 단독 실행 버전

▶ 기존 설치된 이클립스에 추가할 수 있는 플러그인 버전

두 설치 방식 중 어느 것을 택하든 상관없이 플래시 빌더는 이클립스라는 다른 소프트웨어 제

품의 플러그인 형태 또는 통합된 컴포넌트 형태로 실행된다. 따라서 플래시 빌더를 설치하기 전

에는 이클립스의 성격을 먼저 잘 이해해야 한다.

노트

단독 실행 버전 설치 시 플래시 빌더 4는 이클립스 3.5.1과 함께 설치된다. 아울러 플러그인

설치 시에는 이클립스 버전 3.4 이상이 필요하다. 맥 OS X의 경우 이클립스 설치 버전은 카본

버전이어야 한다. 플래시 빌더 4의 초기 배포 버전에서는 코코아 버전이 지원되지 않는다.

새 기능

이클립스 3.5.1에는 플러그인 업데이트 및 설치를 할 수 있는 새로운 UI, 문제를 한눈에 볼 수

있는 마커 뷰, 북마크와 작업 뷰, 개선된 텍스트 검색, 기타 새로운 기능들이 추가됐다.

02 플래시 빌더 4 사용법 l 33

플래시 빌더 단독 설치

플래시 빌더 단독 설치 버전에는 플렉스 애플리케이션 개발에 필요한 모든 내용이 포함돼 있다.

이 설치 버전에는 다음 구성 요소들이 한 설치 패키지에 모두 포함돼 있다.

▶ 윈도우 설치 시 자바 런타임 환경(JRE)

▶ 이클립스 워크벤치

▶ 두 버전의 플렉스 SDK(버전 3.4와 4.0)

▶ 플래시 빌더 플러그인

▶ 플래시 플레이어 10 디버그 버전

팁

윈도우에서는 인터넷 익스플로러에 사용하는 플래시 플레이어 액티브X 버전과 나머지 브라

우저에 사용하는 플러그인 버전이 모두 설치된다. 설치하기 전에는 플래시 플레이어 설치가

성공적으로 끝나도록 모든 브라우저 창을 닫아야 한다.

플래시 빌더 단독 설치 버전의 설치파일 실행

설치파일을 실행하고 처음 나오는 화면들을 통과한다. 설치 폴더를 묻는 대화상자가 나오면 플

래시 빌더를 설치할 위치를 선택한다. 설치 과정을 끝마칠 때는 설치 옵션 화면(그림 2.1)을 확인

한 후 설치를 마친다.

그림 2.1 | 설치 옵션 화면


이클립스는 오픈소스 소프트웨어 제품으로 애플리케이션을 개발하고 배포할 수 있는 개발 도

구 플랫폼이다. 본래 이클립스는 IBM에서 자바 통합 개발 환경으로 개발했다. 이후 이클립스는

재단이라는 이름에서 알 수 있는 것처럼 ‘비수익성, 회원 지원 체제’를 추구하는 이클립스 재단으

로 기부됐다. 이클립스 재단의 목적은 이클립스 및 관련 소프트웨어의 지속적인 개발을 조직화

하고 지원하는 것이다. 이클립스 재단의 웹사이트는 www.eclipse.org이다.

이클립스는 워크벤치라고 부른다. 이클립스는 특정 언어나 플랫폼 개발에 특화된 많은 소프트

웨어 제품의 플랫폼 역할을 한다. 이러한 개별 제품은 플러그인이라고 부른다. 이클립스에는 사

용하려는 프로그래밍 언어에 따라 원하는 만큼 플러그인을 추가할 수 있다. 이 덕분에 이클립스

를 활용하면 자바, 플렉스, 콜드퓨전, XML, 기타 플러그인에서 지원하는 다른 언어들을 비롯해

여러 언어를 한 개발 환경에서 개발하고 쉽게 개발 언어를 전환해 개발을 진행할 수 있다.

이클립스 워크벤치에 사용할 수 있는 플러그인은 수백 개가 있다. 표 2.1에는 플렉스 애플리케

이션 개발자들이 주로 사용하는 이클립스 플러그인 몇 개가 정리돼 있다.

이클립스 다운로드

단독 설치 버전의 플래시 빌더를 설치할 때는 설치 과정에서 이클립스 3.5.1 전체 버전을 같이 설

치한다. 하지만 플러그인 버전의 플래시 빌더를 설치하려면 먼저 이클립스 배포판을 다운로드하

고 설치해야 한다.

표 2.1 플렉스 개발자들이 주로 사용하는 이클립스 플러그인

플러그인 설명 다운로드 사이트

자바 개발 도구

(JDT)

이클립스 기반 자바 통합 개발 환경(IDE)에서 가장 많

이 사용하는 플러그인. 코드 편집, 코드 자동 생성, 디

버깅, 분석 도구가 포함된 자바 편집기가 들어 있다.

www.eclipse.org/jdt

웹 툴 프로젝트 웹 및 자바 엔터프라이즈 에디션(EE) 애플리케이션 개

발에 사용하는 도구 모음

www.eclipse.org/

webtools

CFEclipse 콜드퓨전 개발자를 위한 오픈소스, 무료 라이선스 플

러그인

www.cfeclipse.org

콜드퓨전 빌더 콜드퓨전 9의 새 기능 지원을 위해 어도비에서 콜드퓨

전 개발자들에게 새롭게 배포한 이클립스 플러그인

www.adobe.com/

coldfusion

이클립스 설치 준비 작업

이클립스 배포판을 설치하기 전에 먼저 컴퓨터에 JRE가 설치돼 있어야 한다.

맥 OS X를 사용하는 개발자들은 운영체제에 JRE가 기본으로 설치돼 있다. 윈도우를 사용하

는 개발자들은 먼저 JRE가 설치돼 있는지 확인하고 설치돼 있지 않다면 JRE를 설치해야 한다.


가장 최신 버전의 JRE는 http://java.sun.com/javase/downloads/index.jsp에서 다운로드할

수 있다. JRE 설치 과정에 따라 JRE를 설치하고 나면 이클립스를 설치할 수 있는 준비가 모두 끝

난다.

이클립스의 라이선스

이클립스는 이클립스 공개 라이선스 버전 1.0(EPL) 라이선스를 적용받는다. 이 라이선스에서

는 원하는 컴퓨터에 얼마든지 이클립스를 무료로 다운로드, 설치, 사용할 수 있게 해 준다. 이

라이선스에 따르면 소프트웨어 회사, 비영리 기관, 개인이 오픈소스 라이선스를 통해 (자바 개

발 도구나 CFEclipse 같은) 플러그인을 배포하거나 (플래시 빌더 같은) 상업용 제품을 판매할

수 있다.

이클립스 배포판의 선택

이클립스 배포판에는 여러 가지 사전 패키지 버전이 있다. 기본 제품에는 워크벤치만 포함돼 있

으므로 기본 제품을 사용하면 얼마든지 구미에 맞게 추가 플러그인을 설치할 수 있다. 나머지 배

포 버전에는 일반적인 개발 환경에 적합한 다양한 플러그인 조합 및 설정이 포함돼 있다.

표 2.2에는 자주 사용되는 이클립스 배포 버전에 대한 설명이 정리돼 있다.

표 2.2 이클립스 배포 버전

플러그인 설명 다운로드 사이트

자바 개발자를 위한

이클립스 IDE

JDT, 소스 코드 관리 클라이언트, XML 편집기, 기타 유

용한 개발 도구가 포함돼 있다.

www.eclipse.org/

downloads

자바 EE 개발자를 위

한 이클립스 IDE

앞에 항목들과 더불어 버그질라와의 연동을 위한 마이린

(Mylyn), 트랙, JIRA(소스 코드 관리를 위한 서버 환경)

가 포함된다.

www.eclipse.org/

downloads

이클립스 클래식 JDT와 자체 이클립스 플러그인 개발을 원하는 개발자를

위한 도구가 포함된다.

www.eclipse.org/

downloads

웹 툴 플랫폼 올인원 다양한 언어와 플랫폼에 사용할 수 있는 텍스트 편집기

와 그래픽 편집기가 포함된다. 플래시 빌더의 특정 기능

을 사용해 자바 서버 사이드 코드를 생성할 수 있다.

www.eclipse.org/

webtools

이클립스 설치

이클립스 배포판은 별도 설치 프로그램 없이 압축된 파일 형태로 배포된다.

윈도우에서의 이클립스 설치

윈도우에서는 이클립스 배포판이 ZIP 압축 형태로 배포된다. 시스템상의 아무 폴더에나 압축을


풀면 윈도우에서 이클립스를 바로 설치할 수 있다.

예를 들어 윈도우용 J2EE 개발자를 위한 이클립스 IDE를 설치할 경우 설치 파일명은 아마

eclipse-jee-ganymede-SR2-win32.zip이 될 것이다. 이 ZIP 파일을 C:\eclipse 같은 아무 폴더에

나 압축해제하면 된다.

윈도우에서 이클립스를 실행하려면 이클립스 설치 폴더에서 eclipse.exe를 실행하면 된다.

맥 OS X에서의 이클립스 설치

맥 OS X에서는 이클립스 배포판이 tar 압축 형식으로 돼 있다. 맥 OS X에서 이클립스를 설치하

려면 이 압축 파일을 시스템상의 아무 폴더에나 압축 해제하면 된다. Applications 폴더 같은 아

무 폴더에나 압축 파일의 압축을 풀어 보자.

맥 OS X에서 이클립스를 설치하고 나면 이클립스 폴더에 있는 이클립스 아이콘의 위치를 찾

는다. 이어서 아이콘을 선택하고 +O를 누르거나 아이콘을 더블클릭하면 이클립스를 시작할

수 있다.

플래시 빌더 플러그인의 설치

기존 이클립스 설치 버전에 플러그인 형태로 플래시 빌더를 설치하려면 운영체제에 적합한 설치

버전을 사용해야 한다.

플래시 빌더 플러그인 설치는 설명이 따로 필요 없다. 대화상자의 설명에 따라 설치를 진행하

고 기존 설치된 이클립스를 실행하면 된다. 설치 과정에서는 이클립스 전체 버전을 설치할지 기

존 이클립스 설치 버전에 플러그인을 설치할지 묻는 대화상자가 나타난다.

이클립스 기능에 대한 소개

플래시 빌더의 기능에는 이클립스 워크벤치의 기능과 더불어 플렉스 애플리케이션 개발 생산성

을 높여주는 커스터마이징 도구가 모두 포함된다. 그림 2.2에는 플래시 빌더 설치 후 처음 보게

되는 기본 플래시 빌더 레이아웃이 나와 있다. 이 절에서는 이클립스의 기본 도구인 작업 공간,

프로젝트, 뷰, 편집기, 퍼스펙티브에 대해서 설명하겠다.


그림 2.2 | 기본 플래시 퍼스펙티브의 플래시 빌더

이클립스 작업 공간

이클립스 작업 공간은 개발 프로젝트와 이클립스의 내장 기능 및 커스터마이징할 수 있는 플래

시 빌더의 특정 기능에 대한 환경 설정으로 구성된다.

이클립스를 처음 시작하면 작업 공간을 선택하라는 대화상자가 나타난다. 기본 작업 공간 폴

더는 단독 실행형 플래시 빌더를 사용하는지, 플러그인 버전을 사용하는지 여부에 따라 다를 수

있지만 이 작업 공간의 위치는 개발자의 개인 폴더가 된다. 표 2.3에는 운영체제에 따른 서로 다

른 위치 목록이 정리돼 있다.

표 2.3 운영체제에 따른 기본 작업 공간 위치

운영체제 기본 작업 공간 위치

윈도우 XP C:\Documents and Settings\[username]\My Documents\Flash

Builder 4

윈도우 비스타 및 윈도우 7 C:\Users\[username]\Documents\Flash Builder 4

맥 OS X /Users/[username]/Documents/Flash Builder 4

이클립스 작업 공간의 가장 중요한 용도는 프로젝트의 목차를 한눈에 볼 수 있게 하는 것이다.

하지만 작업 공간의 기능은 이 뿐만이 아니다. 작업 공간에는 이클립스, 플래시 빌더, 기타 설치

된 플러그인에 대한 환경 설정을 포함해 프로젝트 관리에 필요한 모든 정보가 들어 있다.


이클립스 메뉴에서 [File ⇨ Switch Workspace]를 선택하면 작업 공간을 변경할 수 있다. 이때

기존에 사용한 작업 공간은 메뉴상에 표시된다. 사용하려는 작업 공간이 있으면 해당 작업 공간

을 선택하면 된다.

(새로운 작업 공간이든 기존 작업 공간이든) 다른 작업 공간을 선택하려면 하위 메뉴에서

[Other]를 선택하면 된다. 그림 2.3에 보이는 것처럼 작업 공간 폴더의 이름을 입력하거나 폴더

선택 도구를 사용하면 폴더를 선택할 수 있다. 기존에 존재하는 폴더명이 아닌 새폴더명을 입력

하면 폴더가 자동으로 생성된다.

팁

Copy Settings 영역을 열어서 사용 가능한 옵션 한두 개를 선택해 현재 작업 공간에 대한 설

정을 새로운 작업 공간에 복사할 수도 있다.

새로운 작업 공간을 선택하고 나면 이클립스는 자동으로 재시작해 파일이나 폴더 락을 해제

한다.

그림 2.3 | 이 대화상자에서는 새로운 작업 공간의 위치를 묻는다.

이클립스 프로젝트

이클립스 프로젝트에는 특정 애플리케이션 또는 관련 애플리케이션 그룹에 필요한 모든 리소스

가 들어 있다. 기본 이클립스 프로젝트에는 특정 루트 폴더에 대한 참조만 들어 있다. 이클립스에

서 생성하는 프로젝트는 주로 특정 프로그래밍 언어나 플랫폼과 관련한 프로젝트로 플래시 빌

더, CFEclipse, JDT, 기타 플러그인과 같은 특정 이클립스 플러그인과 연계된 형태가 된다.

노트

단일 프로젝트를 여러 작업 공간에서 참조할 수도 있다.


프로젝트 생성 과정은 플러그인별로 크게 다르므로 플렉스 프로젝트 생성에 대해서는 이 절의

후반부에서 상세히 설명하겠다.

이클립스 뷰

이클립스 뷰는 특정 기능을 수행하는 UI 패널이다. 플래시 빌더에서 사용하는 뷰 가운데는 이클

립스 워크벤치에 속해 모든 이클립스 플러그인에서 공통으로 사용하는 영역도 있다. 예를 들어

현재 컴파일 에러와 경고문을 보여주는 Problems 뷰는 대부분의 플러그인에서 공통으로 사용

한다. 나머지 뷰들은 플래시 빌더에서만 제공하는 뷰로서 플렉스 애플리케이션 개발 시에만 사

용한다.

현재 화면에 보이지 않는 뷰를 열려면 [Window ⇨ Other Views]를 선택하면 된다. 그림 2.4에

보이는 것처럼 설치된 플러그인에서 지원하는 모든 뷰를 사용할 수 있다.

새 기능

이클립스 3.5.1에는 문제(Problems), 작업(Tasks), 북마크(Bookmarks), 브레이크포인트

(Breakpoints)를 포함해 소스 코드의 여러 가지 마커들을 볼 수 있는 마커(Markers) 뷰가 있

다. 이 뷰에서는 새로운 작업, 브레이크포인트, 북마크를 추가할 수는 없지만 더블클릭을 통

해 기존 마커로 바로 이동할 수 있다. 이 뷰를 열려면 [Window ⇨ Other Views]를 선택하고

[General ⇨ Markers]를 선택하면 된다.

각 뷰는 독 모드 또는 분리 모드로 사용할 수 있다. 뷰의 위치를 도킹(docking)할 때는 작업 공

간 창의 상, 하, 좌, 우 위치를 지정할 수 있다.

그림 2.4 | 이 대화상자에서는 설치된 전체 플러그인의 뷰를 모두 선택할 수 있다.


도킹된 뷰를 움직이려면 다음 절차를 따라 한다.

1. 뷰 탭을 클릭하고 드래그한다.

2. 뷰가 도킹될 위치를 나타내는 검은 선 모양으로 커서가 바뀔 때까지 뷰를 움직인다.

3. 뷰를 새로운 위치에 도킹하도록 마우스 버튼을 놓는다.

그림 2.5에서는 뷰의 도킹 과정을 볼 수 있다.

그림 2.6에 나온 것처럼 뷰를 분리시키려면 뷰 탭을 마우스 오른쪽 클릭(맥에서는 Ctrl+클릭)

하고 컨텍스트 메뉴에서 Detached를 선택한다. 뷰가 분리된 후에는 듀얼 모니터 영역을 비롯해

화면상의 모든 위치로 뷰를 움직일 수 있다.

그림 2.5 | 뷰의 도킹 과정

그림 2.6 | 뷰 분리 과정


팁

뷰를 최대화해 전체 화면으로 보려면 뷰 탭을 더블클릭하면 된다. 이때 탭을 다시 한 번 더블

클릭하면 뷰가 원래 크기로 되돌아온다. 뷰가 전체 화면으로 보일 경우 뷰의 왼쪽 상단에 있는

복구 버튼을 누르더라도 뷰가 원래 크기로 되돌아온다.

이클립스 편집기

편집기는 특정 프로그래밍 언어에 대한 개발 지원 용도의 특수 뷰이다. 기본 이클립스 설치 버전

에는 모든 텍스트 파일을 편집할 수 있는 텍스트 편집기가 들어 있다. 아울러 각 플러그인을 추

가하면 고유 편집기를 추가한다. 예를 들어 플래시 빌더 플러그인은 MXML과 액션스크립트 파

일에 대한 편집기를 추가한다.

편집기는 작업 공간 창의 중앙에 위치하며 따로 떼어낼 수 없다. 단일 파일에 대해 여러 편집기

를 열 때는 편집기 탭을 마우스 오른쪽 클릭하고 New Editor를 선택하면 된다. 그림 2.7에서 볼

수 있듯이 이렇게 하면 같은 파일이 개별 편집기 뷰에서 열린다. 이 경우 새 편집기를 드래그해 새

로운 위치에 다시 도킹할 수도 있다. 이런 식으로 여러 편집기를 열면 한 편집기에서 수정한 내용

이 다른 편집기에도 바로 반영된다. 플래시 빌더에서는 이 방식을 활용하면 한 파일을 디자인 뷰

와 소스 뷰에서 함께 열 수 있다.

그림 2.7 | 단일 소스 파일에 대해 열린 여러 개의 편집기


이클립스 퍼스펙티브

이클립스 퍼스펙티브는 뷰를 배열한 특정 방식을 말한다. 각 플러그인에는 하나 이상의 미리 정

의된 퍼스펙티브가 있다. 예를 들어 플래시 빌더 4에는 다음 퍼스펙티브가 들어 있다.

▶ 플래시

▶ 플래시 디버그

▶ 플래시 프로파일

단독 실행형 플래시 빌더를 설치하면 플래시가 기본 퍼스펙티브가 된다. 다른 퍼스펙티브로

전환하려면 두 가지 방법 중 하나를 사용하면 된다.

이클립스 메뉴에서 [Window ⇨ Perspective]를 선택하고 퍼스펙티브를 고른다.

그림 2.8에서처럼 작업 공간 창의 상단 우측 모서리에 있는 퍼스펙티브 선택 도구를 사용한다.

퍼스펙티브 선택

그림 2.8 | 퍼스펙티브 선택 도구를 통한 퍼스펙티브 선택

팁

퍼스펙티브 내에서 뷰의 레이아웃을 커스터마이징한 다음 나중에 다시 선택할 수 있게끔 레이

아웃을 커스텀 퍼스펙티브로 저장할 수 있다. 커스텀 페스펙티브를 만들려면 플래시 빌더 메

뉴에서 [Window ⇨ Perspective ⇨ Save Perspective As]를 선택하고 기억하기 쉬운 퍼

스펙티브 이름을 지정하면 된다.


팁

Ctrl+F8(윈도우) 또는 +F8(맥) 단축키를 사용하면 마우스를 사용하지 않고 퍼스펙티브를

선택할 수 있다.

이클립스의 설정

이클립스의 설정은 대부분 Preferences 대화상자를 통해 제공된다. 그림 2.9에 보이는 대화상자

를 열려면 이클립스에서 [Window ⇨ Preferences]를 선택하면 된다.

그림 2.9 | 이클립스의 Preferences 대화상자

Preferences 대화상자의 General 탭에서는 모든 이클립스 플러그인에 공통으로 적용되는 설

정을 변경할 수 있다. 일부 설정은 설정 트리 계층 구조를 따라 저 아래에 있는 경우도 있다. 여기

서는 몇 가지 자주 사용하는 설정에 대해 설명하겠지만 이클립스의 나머지 설정 부분도 독자들

이 스스로 찾아볼 것을 권장한다.

폰트 변경

Preferences 대화상자의 General 탭에서는 MXML, 액션스크립트, 텍스트 편집기에서 텍스트를

보여줄 때 사용하는 폰트를 설정할 수 있다.

Preferences 대화상자에서 (그림 2.10에 보이는) 이 설정을 찾으려면 다음 절차를 따라 한다.

1. [Window ⇨ Preferences]를 선택해 Preferences 대화상자를 연다.

2. 왼쪽에 있는 트리에서 [General ⇨ Appearance ⇨ Colors and Fonts]를 선택한다.


3. 오른쪽에 있는 색상 및 폰트 설정 트리에서 [Basic ⇨ Text Font]를 선택한다.

4. Change 버튼을 클릭하고 새로 보이는 폰트 선택 대화상자에서 폰트를 선택한다.

5. 폰트를 선택하고 OK를 클릭해 Preferences 대화상자로 돌아온다. 다시 한 번 OK를 클릭해

변경 사항을 저장한다.

그림 2.10 | 텍스트 폰트의 선택

웹 브라우저의 선택

플렉스 웹 애플리케이션을 테스트할 때는 선택한 웹 브라우저에서 구동되는 플래시 플레이어에

서 애플리케이션을 실행한다. 플래시 빌더는 이클립스 웹 브라우저 설정 옵션을 사용한다. 기본

적으로 이 옵션에서는 사용자 시스템 브라우저(이메일 클라이언트에서 URL을 클릭하거나 기타

시스템의 링크 클릭 시 사용하는 브라우저와 동일한 브라우저)를 사용한다.

이클립스 Preferences 대화상자를 사용하면 이러한 기본 설정 대신 특정 웹 브라우저를 사용

하도록 지정할 수 있다. Preferences 대화상자가 열린 상태에서 설정 옵션의 [General ⇨ Web

Browser]를 선택하면 그림 2.11에 보이는 것처럼 사용 가능한 브라우저 목록이 나타난다. 기본

설정에서는 이클립스가 시스템 기본 브라우저를 사용한다. 선호하는 브라우저를 선택하고 OK

를 클릭해 변경 사항을 저장한다. 이제 다음 번에 플렉스 애플리케이션을 디버그할 때는 지금 선

택한 브라우저가 열리게 된다.

앞에서 설명한 설정 옵션 외에 많은 설정 옵션을 사용할 수 있지만 이러한 설정은 특정 파일이

나 애플리케이션과 관련한 설정이 대부분이다. 이러한 설정 옵션은 이 책의 다른 부분에서 그때

그때 언급하겠다.


그림 2.11 | 웹 브라우저의 선택

플래시 빌더의 사용법

플래시 빌더에는 단독 실행 버전, 플러그인 버전 여부와 상관없이 플렉스 애플리케이션을 개발

하고 테스트할 때 공통으로 필요한 모든 도구 모음이 들어 있다. 이 절에서는 플렉스 애플리케이

션 개발과 관련한 가장 일반적인 작업이라 할 수 있는 플렉스 프로젝트 생성과 도움말 리소스 검

색에 대해서 살펴본다.

플렉스 프로젝트의 생성

이클립스 프로젝트는 애플리케이션과 애플리케이션 관련 리소스가 한데 합쳐진 집합체라 할 수

있다. 플래시 빌더를 사용할 때는 플렉스 프로젝트라는 리소스 형태로 프로젝트를 생성한다. 플

렉스 프로젝트에는 표준 이클립스 프로젝트 설정과 더불어 플렉스 개발자들을 대상으로 하는

많은 설정 옵션이 추가로 들어 있다.

새로운 플렉스 프로젝트를 생성하려면 플래시 빌더 메뉴에서 [File ⇨ New ⇨ Flex Project]를

선택한다.

그림 2.12에서 볼 수 있는 것처럼 새로운 플렉스 프로젝트 마법사의 첫 화면에는 다음과 같은

정보를 제공한다.


그림 2.12 | 이 화면이 새로운 플렉스 프로젝트 생성 마법사의 첫 화면이다.

▶ 프로젝트명(Project name) 프로젝트명은 글자, 숫자, _(밑줄) 기호를 사용해 지정한다. 특

정 경우에는 공백이나 기타 특수 문자를 포함시킬 수도 있지만 보통 이런 방식은 권장하

지 않는다.

▶ 프로젝트 위치(Project location) 프로젝트의 위치로는 디스크상의 모든 위치를 지정할 수

있다. 프로젝트의 기본 위치는 작업 공간 폴더의 하위에 있는 프로젝트명과 동일한 폴더

명이지만 프로젝트를 꼭 이 위치에 둘 필요는 없다. 프로젝트 위치는 프로젝트 설정과 주

요 소스 코드 파일들이 있는 위치이며 컴파일된 애플리케이션도 주로 이 위치 내에 저장

한다.

▶ 애플리케이션 타입(Application type) 웹 애플리케이션 또는 데스크톱 애플리케이션을 선

택한다.

² 웹 애플리케이션을 선택하면 애플리케이션이 브라우저를 통해 전달되고 플래시 플레

이어에서 실행된다.

² 데스크톱 애플리케이션을 선택하면 어도비 AIR를 통해 설치하고 사용자의 데스크톱

에서 운영체제의 응용프로그램으로 실행할 수 있는 애플리케이션을 만들 수 있다.


노트

플래시 빌더에서는 단일 플렉스 프로젝트를 통해 애플리케이션을 플래시 플레이어와 AIR 모

두에 배포할 수 있게 해 주는 기능은 없다. 각 프로젝트는 두 가지 배포 옵션 가운데 한 가지를

반드시 선택해야 한다. 플래시 빌더에서는 여러 프로젝트 사이에서 리소스를 공유할 수 있으

므로 각 프로젝트를 특정 배포 옵션에 대한 쉘처럼 만든 후 공유 가능한 SWC 파일로 컴파일

되는 플렉스 라이브러리 프로젝트라는 제3의 프로젝트를 하나 더 생성하면 애플리케이션 리

소스 대부분을 쉽게 관리할 수 있다.

새 기능

플래시 빌더 4에서는 웹용으로 생성된 프로젝트를 어도비 AIR를 통해 배포할 데스크톱 애

플리케이션으로 변환할 수 있다. 이 기능을 사용하려면 프로젝트 익스플로러에서 프로젝

트를 마우스 오른쪽 클릭하고 [Add/Change Project Type ⇨ Convert to Desktop/

Adobe AIR Project]를 선택하면 된다. 이 경우 메인 애플리케이션의 루트 엘리먼트를

WindowedApplication 컴포넌트를 사용하도록 수정하는 등 프로젝트 변경 관린 소스를 일

부 수정해야 하지만 프로젝트를 처음부터 다시 만들지 않아도 되므로 편리하다.

▶ 플렉스 SDK 버전(Flex SDK version) 이 옵션값은 기본 SDK (현재 ‘플렉스 4.0’) 또는 특정

버전의 SDK로 설정할 수 있다.

² 플렉스 4.0 프로젝트는 새로운 스파크 컴포넌트를 사용하지만 과거 헤일로(Halo) 컴포넌트도 사용할 수 있다. 플렉스 4.0에는 새로운 뷰 스테이트 관리 구문 및 기타 새 SDK에 추가된 기능들이 새롭게 구현됐다.

² 플렉스 3.4 프로젝트에서는 새로 추가된 스파크 컴포넌트를 접근할 수 없으며 기존 뷰 스테이트 관리 구문만 사용할 수 있다.

▶ 서버 기술(Server technology) 아래 애플리케이션 서버들은 플래시 빌더에서 직접 지원

한다.

² ASP.NET

² 콜드퓨전

² J2EE(또는 자바 EE나 JEE라고 부른다)

² PHP

서버 기술로 J2EE를 선택한 경우 어도비 라이브사이클 데이터 서비스 ES나 오픈소스 제품인

BlazeDS를 선택해 사용할 수 있다.


노트

서버 기술로 콜드퓨전을 선택한 경우에도 라이브사이클 데이터 서비스 ES, BlazeDS, 콜드퓨

전 플래시 리모팅 가운데 하나를 서버 통신 옵션으로 선택하라는 대화상자가 나타난다. 콜드

퓨전 9에서는 BlazeDS가 콜드퓨전 서버에 자동 설치돼 있다. 더 자세한 정보는 어도비의 콜

드퓨전 지원 사이트인 www.adobe.com/support/coldfusion을 참고하자.

새 기능

플렉스 빌더 3에서는 나중에 프로젝트 관련 서버 기술을 수정할 수 없었기 때문에 플렉스 프

로젝트를 만들기 전에 애플리케이션 서버를 먼저 설치하고 테스트해야 했다. 하지만 플래시

빌더 4에서는 기존 프로젝트에 대해서도 애플리케이션 서버를 변경할 수 있는 기능이 추가됐

다. 이를 위해서는 [Project ⇨ Properties ⇨ Flex Server]를 선택해 애플리케이션 서버를

고르고 현재 프로젝트에 맞게 설정하면 된다.

이 절에서는 애플리케이션 서버가 None으로 설정됐다고 가정하겠다(특정 애플리케이션 서버

와 관련한 옵션은 24장부터 29장의 내용을 참고하자).

플렉스 프로젝트 마법사의 다음 화면에서는 결과물(Output) 폴더라고 부르는 컴파일된 플

렉스 애플리케이션 위치를 묻는 내용이 나온다. 이 폴더의 기본 위치는 프로젝트 루트의 bin-

debug 하위 폴더다. 이 폴더에는 애플리케이션의 테스트 및 디버깅에 사용할 수 있는 컴파일 버

전이 들어간다. 애플리케이션의 배포 버전은 프로젝트 생성 후 별도 과정을 통해 만든다.

팁

애플리케이션 서버와 연동하지 않고 프로젝트를 생성하면 결과물 폴더가 프로젝트 루트의 하

위 폴더로 생성된다. 이 경우 웹 애플리케이션은 로컬 파일 시스템상에서 브라우저를 통해 애

플리케이션을 로드하고 테스트할 수 있다. 애플리케이션 서버를 사용하는 프로젝트의 경우 결

과물 폴더는 테스트 웹 서버의 도큐먼트 루트 폴더 내에 생성되고 애플리케이션이 HTTP 요청

을 통해 서버로부터 로드된다.

그림 2.13에 보이는 플렉스 프로젝트 마법사의 마지막 화면에서는 다음과 같은 정보를 묻는다.

▶ 메인 소스 폴더(Main source folder) 메인 소스 폴더는 애플리케이션 소스를 구성하는

.mxml과 .as 소스 코드 파일을 보관할 위치를 말한다. 애플리케이션 .mxml 파일들은 이

폴더에 보관한다. 컴포넌트나 클래스 파일은 메인 소스 폴더 아래에 하위 폴더를 만들어

보관할 수 있다. 이러한 하위 폴더는 패키지라고 부른다.


▶ 메인 애플리케이션 파일(Main application °le) 첫 번째 애플리케이션의 이름을 말한다. 이

파일명의 기본값은 프로젝트명에 .mxml 파일 확장자를 더한 이름이다. 컴파일 과정에서

이 파일은 액션스크립트 클래스 정의로 변환되므로 파일명은 클래스 명명 규칙을 꼭 지

켜야 한다. 즉 파일명에는 글자, 숫자, 밑줄만 사용할 수 있고 알파벳 문자(A-Z)로 시작해

야 한다. 단일 프로젝트에 하나보다 많은 애플리케이션을 둘 수 있지만 프로젝트 생성 과

정에서는 단일 애플리케이션만 만들 수 있다. 나머지 애플리케이션은 프로젝트가 열린

후에 직접 만들어야 한다.

그림 2.13 | 이 대화상자에서는 웹 애플리케이션 개발에 필요한 메인 소스 폴더, 메인 애플리케이션

파일명, 결과물 폴더 URL을 묻는다.

▶ 결과물 폴더 URL(Output folder URL) 웹 애플리케이션에서 결과물 폴더 URL은 웹 브라

우저에서 애플리케이션을 테스트할 때 사용할 웹 주소를 말한다. 이 옵션은 웹 애플리케

이션용 플렉스 프로젝트를 만들 때만 나타난다. 애플리케이션 서버를 사용하는 웹 프로

젝트에서 이 옵션을 지정하지 않으면 하드 디스크로부터 컴파일된 애플리케이션을 로드

한다는 의미가 된다. 이러한 기본 설정을 사용하면 테스트 시 웹 서버가 필요 없다는 장점

이 있다(이는 마치 로컬 디스크에서 브라우저를 통해 HTML 웹 페이지를 로드하는 것과

비슷하다).

▶ 애플리케이션 ID(Application ID) 어도비 AIR를 통해 배포되는 데스크톱 애플리케이션

에서 애플리케이션 ID는 애플리케이션과 관련한 고유 식별자가 된다. 이 옵션은 데스크

톱용 플렉스 프로젝트를 만들 때만 나타난다.


노트

플렉스 빌더 2에서는 소스 코드 루트 폴더의 기본값이 프로젝트 루트 폴더였다. 플렉스 빌더

3부터는 소스 코드 루트 폴더가 src라는 이름의 프로젝트 하위 폴더로 바뀌었다.

노트

애플리케이션 파일명의 첫 부분(.mxml 3파일 확장자 이전 부분)은 컴파일 과정에서 액션스

크립트 클래스명이 된다. 애플리케이션 파일명을 정할 때 클래스 명명 규칙을 지켜야 하는 이

유가 바로 이 때문이다. 액션스크립트 클래스명에는 글자, 숫자, $ 기호, _(밑줄) 기호가 들어

갈 수 있지만 항상 알파벳 글자, $ 기호, _(밑줄) 기호 중 하나로 시작해야 한다. 클래스명이나

애플리케이션 파일명은 숫자로 시작할 수 없다.

프로젝트 설정을 적용하려면 Finish 버튼을 클릭해 플렉스 프로젝트와 메인 애플리케이션 파

일을 생성을 마무리하면 된다.

플래시 빌더의 UI에 대한 이해

플래시 빌더 4에서는 플렉스 애플리케이션 개발을 도와주는 고유 툴을 추가로 제공한다. 이러한

툴에는 편집기와 뷰가 들어 있다. 이 절에서는 이와 같은 개발 도구에 대해서 설명한다.

MXML 편집기

플래시 빌더에는 플렉스 애플리케이션 개발에 사용할 수 있는 두 가지 편집기가 들어 있다.

MXML 편집기는 애플리케이션이든 커스텀 컴포넌트이든 상관없이 모든 MXML 파일을 갖고

작업할 때 사용한다.

현재 열려 있는 프로젝트와 관련한 MXML 파일을 열면 파일은 항상 MXML 편집기에서 열린

다. 이 편집기에는 소스 모드와 디자인 모드의 두 가지 모드가 있다. 파일이 디자인 모드에서 열

리는지 소스 모드에서 열리는지 여부는 가장 최근에 사용한 다른 파일을 어느 모드에서 작업했

는지 여부에 달려 있다.

그림 2.14에서 볼 수 있듯이 MXML 편집기의 상단 버튼을 클릭하면 소스 모드와 디자인 모드

를 선택할 수 있다.

팁

윈도우와 맥 OS X에서 Ctrl+~ 단축키를 사용하면 소스 모드와 뷰 모드를 서로 전환할 수 있다.


소스 모드 디자인 모드

그림 2.14 | 소스 모드와 디자인 모드 선택 버튼

액션스크립트 편집기

액션스크립트 편집기는 순수 액션스크립트 코드가 들어 있는 파일을 편집하기 위한 편집기다.

이 편집기는 플래시와 플렉스 모두 가장 최신 버전의 액션스크립트 프로그래밍 언어를 사용하

는 현 시점에서는 플렉스 개발자와 플래시 개발자 모두 유용하게 활용할 수 있는 편집기다.

AS 파일을 열면 파일은 그림 2.15처럼 액션스크립트 편집기에서 열린다. MXML과 액션스크

립트 편집기에는 모두 코딩을 빠르고 생산성 있게 해 주는 다음 기능들이 들어 있다.

그림 2.15 | 액션스크립트 편집기

▶ 언어 코드 색상

▶ 외부 액션스크립트 클래스의 자동 임포트

▶ MXML 태그와 어트리뷰트의 자동 완성

▶ 변수 기호명의 자동 완성

▶ 함수 인자와 클래스 멤버에 대한 코드 힌트

▶ 기호와 선언에 대한 똑똑한 검색 기능

▶ 사용 중인 컴포넌트와 클래스에 대한 쉬운 링크 기능


새 기능

플래시 빌더 4에는 코드 포맷을 자동으로 수정해 주는 들여쓰기 수정 기능이 새로 추가됐다.

이 기능을 사용하려면 먼저 코드 포맷을 적용할 액션스크립트나 MXML을 선택한 다음 플래

시 빌더 메뉴에서 [Source ⇨ Correct Indentation]을 선택하면 된다. 단축키를 사용하려면

Ctrl+A(윈도우)나 +A(맥)을 누르면 현재 코드 파일의 모든 코드 포맷이 적용되고 Ctrl+I(윈

도우)나 +I(맥) 단축키를 누르면 선택된 코드의 들여쓰기가 자동으로 수정된다.

들여쓰기 방식은 플래시 빌더의 작업 공간 환경설정을 통해 관리할 수 있다. 플래시 빌

더 메뉴에서 [Window ⇨ Preferences]를 누르고 카테고리 목록에서 [Flash Builder ⇨

Indentation]를 눌러 보자. 들여쓰기 메인 화면에서 설정을 수정할 수도 있고 액션스크립트

와 MXML 화면에서 중첩된 들여쓰기 설정을 지정할 수도 있다.

플래시 빌더 뷰

플래시 빌더 4에는 특정 용도의 커스텀 뷰들이 들어 있다.

패키지 익스플로러 뷰

그림 2.16에 있는 패키지 익스플로러 뷰는 플렉스 빌더 3에서 사용하던 플렉스 내비게이터 뷰

를 대신하는 뷰다. 새로워진 이 뷰에서는 폴더 트리, 파일, 코드 패키지를 보여주고 프로젝트 리

소스를 찾아 열 수 있는 기능뿐 아니라 MXML과 액션스크립트 코드에 선언한 속성과 메서드

의 목록을 볼 수 있는 기능이 추가됐다. 이 뷰는 플래시와 플래시 디버그 퍼스펙티브에서 기본

으로 보인다. 플래시 빌더에서 다른 퍼스펙티브를 사용할 경우 이클립스 메뉴에서 [Window ⇨

Package Explorer]를 선택해 이 뷰를 열 수 있다.

그림 2.16 | 패키지 익스플로러 뷰


팁

그림 2.16에서 패키지 익스플로러 뷰에 애플리케이션 파일과 소스 파일뿐 아니라 컴포넌트의

메서드와 속성들도 표시된 것을 주의해서 보자. 이러한 속성이나 메서드를 더블클릭하면 해당

컴포넌트나 클래스의 소스 코드로 바로 이동할 수 있다.

패키지 익스플로러 뷰에서는 아무 프로젝트 폴더나 패키지를 (PC의 경우) 마우스 오른쪽 클

릭(또는 맥의 경우 Ctrl+클릭)해 새로운 프로젝트 리소스를 바로 생성할 수 있다. 이때 나타나는

컨텍스트 메뉴에서는 생성할 리소스 타입을 선택할 수 있다.

패키지 익스플로러 뷰에서는 다음 두 방식 중 하나를 통해 코드 패키지를 보여준다.

▶ 계층 구조 방식 계층 구조 방식(기본)에서는 디렉터리 구조를 표현하는 방식과 시각적으

로 유사한 트리를 사용해 패키지를 보여준다.

▶ 평행 방식 평행 방식에서는 모드 코드 패키지를 형제로 묘사하고 패키지 사이의 부모-자

식 관계를 가정하지 않는다.

그림 2.17에서는 서로 다른 패키지 표현 방식을 볼 수 있다.

계층 구조 방식 평행 방식

그림 2.17 | 패키지 익스플로러 뷰의 두 가지 방식인 계층 구조 방식(왼쪽)과 평행 (오른쪽) 방식

패키지 표현 방식을 변경하려면 다음 절차를 따라 한다.

1. 패키지 익스플로러 툴바에서 View Menu 버튼을 클릭한다. 버튼이 아래쪽 방향의 화살

표 형태로 보인다.


2. 평행 방식으로 전환하려면 [Package Presentation ⇨ Flat]을 선택하고, 기본 방식으로 돌

아오려면 [Package Presentation ⇨ Hierarchical]을 선택한다.

아웃라인 뷰

그림 2.18에서 볼 수 있는 아웃라인 뷰는 MXML이나 액션스크립트 파일에 선언된 객체들의 트

리를 보여준다. 이 뷰는 플래시 퍼스펙티브에서 기본으로 보인다. 다른 퍼스펙티브에서는 이클립

스 메뉴에서 [Window ⇨ Outline]을 선택해 이 뷰를 열 수 있다.

그림 2.18 | 아웃라인 뷰

아웃라인 뷰를 사용하면 객체를 MXML로 선언했든 액션스크립트로 선언했든 상관없이 선언

된 변수나 객체를 나타내는 코드 위치를 빠르게 찾을 수 있다.

아웃라인 뷰를 사용해 특정 변수나 객체를 나타내는 코드를 찾으려면 뷰에서 객체를 클릭하

면 된다. 이렇게 하면 현재 편집기의 커서가 해당 코드 영역으로 바로 이동해 객체를 선언한 코드

를 선택해 준다.

팁

MXML 편집기에 포커스가 있을 때는 기본 아웃라인 뷰에서 MXML 코드에 선언된 객체만을

보여준다. 이때 <Script> 영역 내에 선언한 속성이나 메서드를 보려면 아웃라인 뷰의 툴바에

있는 Show class view 버튼을 클릭해야 한다.

문제 뷰

그림 2.19에 있는 문제 뷰에는 현재 컴파일 에러와 경고문이 보인다. 코드에 버그가 있을 때는 문

제 뷰에서 상세 내용을 확인할 수 있다.


그림 2.19 | 문제 뷰

▶ 문제에 대한 설명 (에러 메시지)

▶ 문제가 들어 있는 리소스 (소스 코드 파일)

▶ 리소스의 경로(문제 파일이 들어 있는 폴더)

▶ 문제의 위치(라인 번호)

▶ 문제의 종류

새 기능

이클립스 3.5.1에는 경고와 에러가 트리를 통해 그룹 형태로 보인다. 이때 컴파일러 메시지를

확인하려면 그룹의 트리 아이콘을 클릭해야 한다.

문제 뷰에서 문제를 더블클릭하면 문제 코드로 바로 이동한다. 문제가 들어 있는 파일이 현재

열린 상태가 아니라면 플래시 빌더는 적절한 편집기를 사용해 파일을 먼저 열고 커서를 위치시

킨다.

팁

현재 작업 중인 프로젝트만 열어 두는 게 좋다. Build Automatically 기능을 사용한다면 (기

본 설정이다) 플래시 빌더는 프로젝트의 한 소스 파일을 수정하고 저장할 때마다 열려 있는 모

든 프로젝트를 재컴파일한다.

열려 있는 프로젝트에 에러나 경고문이 남아 있으면 이로 인해 플래시 빌더의 컴파일 과정이

느려진다. 아울러 이러한 에러나 경고문은 문제를 수정하거나 프로젝트를 닫기 전까지는 문제

뷰에 계속 남아있게 된다.

디자인 뷰

다음 뷰들은 MXML 편집기의 디자인 뷰에서만 사용된다.

▶ 속성(Properties) 뷰를 사용하면 간단한 UI를 통해 객체 속성을 설정하고 설정한 내용을

표현하기 위한 적절한 MXML 코드를 생성할 수 있다.


▶ 외양(Appearance) 뷰를 사용하면 MXML 객체의 주요 스타일을 편집할 수 있다.

▶ 컴포넌트(Components) 뷰를 사용하면 컨테이너와 컨트롤처럼 자주 사용하는 UI 컴포넌

트들을 애플리케이션에 드래그앤드롭할 수 있다.

▶ 스테이트(States) 뷰를 사용하면 디자인 뷰를 통해 대체 뷰 스테이트를 관리하고 새로운

스테이트를 나타내는 코드를 생성할 수 있다.

디버깅 뷰

다음 뷰들은 주로 플렉스 애플리케이션을 디버깅할 때 사용한다.

▶ 콘솔(Console) 뷰에서는 trace 정보 및 기타 상세 디버깅 메시지를 볼 수 있다.

▶ 디버그(Debug) 뷰에서는 코드를 단계별로 제어하고 디버깅 세션을 끝마치고 재개할 수

있다.

▶ 변수(Variables) 뷰에서는 애플리케이션이 브레이크포인트에 걸려 실행이 중단된 상태에

서 현재 스코프 내에서 사전 정의된 모든 변수를 볼 수 있다.

▶ 브레이크포인트(Breakpoints) 뷰에서는 브레이크포인트를 관리할 수 있다.

▶ 표현식(Expressions) 뷰에서는 애플리케이션이 브레이크포인트에 걸려 실행이 중단된 상

태에서 임의의 액션스크립트 표현식을 해석하고 결과를 확인할 수 있다.

▶ 네트워크 모니터(Network Monitor) 뷰에서는 리모트 서비스 호출을 모니터링하고 검사할

수 있다.

새 기능

네트워크 모니터 뷰를 사용하면 플렉스 애플리케이션과 애플리케이션 서버 사이의 런타임

HTTP 트래픽을 모니터링할 수 있다.

상호 참조

디버깅 뷰는 6장에서 자세히 설명한다.


도움말의 활용

플렉스 개발 플랫폼에 대한 문서는 플래시 빌더 설치 과정에서 함께 설치된다. 이러한 개발 문서

는 여러 가지 방법을 통해 접근할 수 있다.

▶ 도움말 콘텐츠 탐색

▶ 도움말 용어 검색

▶ 컨텍스트 기반 도움말 활용

도움말 콘텐츠 탐색

플래시 빌더에서는 [Help ⇨ Flash Builder Help]를 선택해 그림 2.20에 보이는 도움말 콘텐츠를

볼 수 있다.

새 기능

플래시 빌더 4에서는 어도비 커뮤니티 도움말이라는 새로운 이름의 프로그램을 통해 온라인

도움말 콘텐츠를 볼 수 있다. 이 프로그램은 데스크톱 응용프로그램으로 어도비에서 제공하는

도움말 콘텐츠와 서드 파티 문서 리소스에서 제공하는 링크를 함께 제공한다.

그림 2.20 | 도움말 콘텐츠 화면


도움말 콘텐츠의 첫 화면에는 모든 플렉스 문서에 대한 링크가 들어 있다. 플래시 빌더에 대한

주요 문서는 Using Flash Builder 4 아래에 있다. 이 제목 아래에는 (여러 링크 가운데) 다음과 같

은 링크들이 들어 있다.

▶ About Flash Builder

▶ Flash Builder Workbench

▶ Working with data in Flash Builder

▶ Extending services for data-centric development

▶ ActionScript 3.0 Reference

각 링크를 따라가면 플렉스 개발 시 특정 주제와 관련한 도움말 콘텐츠 영역으로 이동할 수

있다.

도움말 용어 검색

어도비 커뮤니티 도움말 애플리케이션에서는 검색할 단어를 입력할 수 있는 기능이 있다. 도움말

용어를 검색하려면 다음 절차를 따라 한다.

1. 플래시 빌더 메뉴에서 [Help ⇨ Flash Builder Help]를 선택한다.

2. Search 입력 상자를 클릭하고 용어를 입력한다.

3. 엔터 또는 리턴키를 누른다.

검색이 성공적으로 끝나면 검색 용어가 들어 있는 페이지들에 대한 링크가 표시된다(그림

2.21). 이들 링크 중 아무 링크나 클릭해도 도움말 콘텐츠를 확인할 수 있다. 이 페이지는 도움말

창의 별도 틀을 통해 제공된다.

그림 2.21 | 도움말 창 내에서의 검색


팁

어도비 커뮤니티 도움말 애플리케이션에서 도움말 콘텐츠가 보일 때 해당 콘텐츠는 어도비 웹

사이트나 개발자 하드 디스크에 있는 자료 중 하나다. 로컬 콘텐츠를 가지고 작업할 때는 콘텐

츠를 로컬 http 서버에서 호스팅하므로 서버가 시작하느라 첫 번째 콘텐츠 페이지가 열리기까

지 다소 시간이 걸릴 수 있다. 하지만 서버가 일단 시작한 다음부터는 이클립스 세션이 유지되

는 동안 서버가 계속 열려 있다.

동적 도움말의 활용

동적 도움말 기능을 활용하면 현재 수정 중인 코드와 관련한 도움말 콘텐츠를 볼 수 있다. 예를

들어 DataGrid 컴포넌트를 가지고 작업하는 도중 어떤 속성, 메서드, 이벤트를 사용할 수 있는지

궁금할 수 있다. 이때는 관련 컴포넌트에 대한 도움말 주제로 빠르게 넘어가 어도비 커뮤니티 도

움말 애플리케이션에서 제공하는 정보를 볼 수 있다.

어도비 커뮤니티 도움말에서 동적 도움말을 보려면 다음 절차를 따라 한다.

1. 도움이 필요한 클래스 타입 선언이나 MXML 태그에 커서를 위치시킨다.

2. Shi± +F2를 누른다.

이렇게 하면 별도 도움말 창을 통해 현재 선택된 주제에 대한 도움말이 표시되는 것을 볼 수

있다.

노트

플래시 빌더에서 API 문서를 제공하는 액션스크립트 클래스명이나 MXML 태그에 마우스 커

서를 위치시키고 Shift+F2를 눌러서 도움말 프로그램을 실행할 때 도움말 목록의 첫 번째 항

목은 보통 해당 클래스에 대한 API 문서가 된다.


코드 검색

플래시 빌더와 이클립스에는 코드를 검색하고 찾을 수 있는 다양한 도구가 들어 있다. 이러한 도

구 중 두 개는 이클립스 워크벤치에서 제공하며 세 번째 도구는 플래시 빌더 플러그인에서 제공

한다.

이클립스 검색 도구 활용법

이클립스에는 코드 검색 도구가 두 개 있다. 바로 ‘찾기/바꾸기’와 ‘파일 내에서 찾기’가 이에 해당

한다. 첫 번째 방식은 한 번에 한 파일에서 코드를 찾을 때 사용하고 두 번째 방식은 여러 파일에

서 코드를 검색할 때 사용한다.

찾기/바꾸기의 활용

그림 2.22에 있는 찾기/바꾸기 대화상자를 사용하면 현재 열려 있는 파일에서 코드를 찾을 수

있다. 이 대화상자는 소스 뷰에서 현재 열려 있는 MXML 편집기에서만 사용할 수 있다. 플래

시 빌더 메뉴에서 [Edit ⇨ Find/Replace]를 선택하면 (키보드 단축키는 Ctrl+F(윈도우) 또는

+F(맥)이다) 이 대화상자를 열 수 있다.

그림 2.22 | 찾기/바꾸기 대화상자

팁

찾기/바꾸기 대화상자에서 찾기 작업을 수행한 다음 플래시 빌더 편집 메뉴에서 다음 찾기와

이전 찾기를 반복해서 사용할 수 있다. 단독 실행형 플래시 빌더에서 이러한 작업에 사용하는

단축키는 다음 찾기의 경우 Ctrl+K, 이전 찾기의 경우 Ctrl+Shift+K이다. 기본적으로 찾기 작

업은 현재 커서 위치를 기준으로 앞쪽으로 검색을 수행한다. 파일 전체를 검사하려면 먼저 커

서를 파일 최상단에 두고 찾기/바꾸기 대화상자를 열면 된다. 또는 현재 커서 위치를 기준으

로 뒷쪽으로 검색을 수행하게 지정할 수도 있다.


파일 내에서 찾기

그림 2.23에서 볼 수 있는 파일 내에서 찾기 대화상자는 파일 검색 도구라고도 부르는데 프로젝

트, 디렉터리, 작업 공간 전체에 걸쳐 여러 파일을 검사할 수 있게 해 준다. 이 검색 방식에서는 검

색을 미세 조정할 수 있는 다양한 옵션을 제공한다. 플래시 빌더 메뉴에서 [Search ⇨ Find in

Files]를 선택하면 이 대화상자를 열 수 있다. 플래시 빌더 이클립스 플러그인을 사용하는 독자

라면 [Search ⇨ File]에서 이 메뉴를 찾을 수 있다.

그림 2.23 | 파일 내에서 찾기 대화상자(파일 검색)

이 도구를 사용할 때는 다음 사항들을 선택해야 한다.

▶ 검색하려는 문자열을 텍스트 필드에 입력한다.

▶ 대소문자 구분 여부와 검색에 정규식을 사용할지 여부를 지정한다.

▶ 검색하려는 파일 종류를 나타내는 파일명 패턴 필드를 설정한다. 예를 들어 액션스크립

트 파일과 클래스로 검색을 제한할 생각이라면 이 값을 *.as로 설정하면 된다. 추가로 검

색할 파일 확장자를 고르려면 Choose 버튼을 선택한다.

▶ 검색 범위를 작업 공간, 선택된 리소스, 전체 프로젝트 등으로 설정한다.

Search 버튼을 누르면 검색 작업이 시작된다. 검색 결과는 그림 2.24와 같이 검색된 모든 리소

스에 대한 링크 형태로 검색 뷰에 나타난다.


그림 2.24 | 검색된 리소스를 보여주는 검색 뷰

플래시 빌더 코드 모델 검색 도구의 사용

플래시 빌더에는 코드 모델을 기반으로 하는 새로운 검색 도구가 추가됐다. 이 검색 도구를 사용

하면 다음과 같은 검색이 가능하다.

▶ 객체 참조 검색

▶ 객체 선언 검색

▶ 코드 리팩터링

객체 참조 검색

변수나 객체가 선언된 위치를 알고 있다면 코드 모델 검색 도구를 사용해 객체를 참조한 모든 위

치를 찾아낼 수 있다.

1. MXML이나 액션스크립트 편집기에서 변수 선언이 있는 곳에 마우스 커서를 위치시킨다.

2. 플래시 빌더 메뉴에서 [Search ⇨ References]를 선택한다. 또는 변수 선언을 마우스 오

른쪽 클릭하고 컨텍스트 메뉴에서 References를 선택해도 된다.

3. 다음 옵션 가운데 검색 범위를 지정한다.

² 작업 공간

² 프로젝트

² 파일

검색 결과는 검색 뷰에 나타난다.


선언 검색

변수나 객체가 사용된 위치를 알고 있다면 코드 모델 검색 도구를 사용해 객체의 원래 위치를 찾

을 수 있다.

1. MXML이나 액션스크립트 편집기에서 변수를 참조하는 위치에 마우스 커서를 둔다.

2. 플래시 빌더 메뉴에서 [Search ⇨ Declarations]를 선택한다. 또는 변수 선언을 마우스 오

른쪽 클릭하고 컨텍스트 메뉴에서 Declarations를 선택한다.

3. 다음 옵션 가운데 하나를 검색 범위로 지정한다.

² 작업 공간

² 프로젝트

² 파일

검색 결과는 검색 뷰에 나타난다.

플렉스 빌더 3에서는 Mark Occurrences라는 새로운 옵션이 추가됐다. 이 기능은 편집 중인

소스 코드 파일에서 변수명이나 특정 타입의 참조에 하이라이트를 표시하는 기능이다. 예를 들

어 <s: Label> 선언에 마우스 커서를 가져다 대면 현재 파일에 있는 모든 <s:Label>에 하이라이

트가 표시된다. 마찬가지로 myVar 같은 변수에 마우스 커서를 놓으면 해당 변수의 참조나 선언

에 모두 하이라이트가 표시된다.

새 기능

플래시 빌더 4에서는 새로운 작업 공간을 만들 때 Mark Occurrences가 자동으로 활성화된다.

그림 2.25에서 볼 수 있듯이 이 기능은 형광펜 모양의 이미지 아이콘을 클릭해 플래시 빌더 툴

바에서 활성화/비활성화할 수 있다.

그림 2.25 | Mark Occurrences 기능의 토글 버튼

변수명 리팩터링

코드를 리팩터링할 때는 객체 참조명이나 타입을 모두 수정한다. 이러한 리팩터링은 문자열 값을

기반으로 하는 전체 찾기/바꾸기 작업과는 크게 다르다. 전체 찾기/바꾸기 작업 시에는 다른 문

자에 속하는 문자열을 실수로 수정해 결과가 엉망이 되기 십상이다. 하지만 코드 리팩터링 시에


는 플렉스 컴파일러와 플래시 빌더의 코드 모델링 도구에서 알고 있는 내부 참조를 기반으로 검

색이 이루어진다.

코드 리팩터링 도구를 사용해 전역으로 변수명을 수정하려면 다음 절차를 따라 한다.

1. 변수의 참조나 선언에 마우스 커서를 가져다 댄다.

2. 플래시 빌더 메뉴에서 [Source ⇨ Refactor ⇨ Rename]을 선택한다. (또는 변수에 마우

스 오른쪽 클릭 후 컨텍스트 메뉴에서 [Refactor ⇨ Rename]을 선택하거나 키보드 단축

키인 Ctrl+Alt+R을 누른다.)

3. 그림 2.26 같은 변수명 변경 대화상자가 나타나면 새로운 변수명을 입력한다. 대화상자의

미리보기 버튼을 누르면 코드 리팩터링 결과를 미리 볼 수 있다. 그림 2.27에 있는 것처럼

미리보기 대화상자에서는 기존 소스 코드와 리팩터링 이후 소스 코드를 함께 보여준다.

4. 변경 사항을 반영하고 변수명을 전역으로 수정하려면 OK를 클릭한다.

그림 2.26 | 변수명 변경 대화상자

그림 2.27 | 리팩터링 변경 사항 미리보기


소스 코드 파일 리팩터링

액션스크립트나 MXML 파일명의 변경도 해당 파일명이 프로젝트에서 일관되게 참조하는 액션

스크립트 타입을 나타낸다는 점에서 리팩터링이라고 부른다.

파일을 래팩터링하려면 패키지 익스플로러 뷰에서 파일명을 그냥 수정하면 된다.

1. 파일을 선택하고 F2(윈도우)나 엔터(맥)키를 누르거나 파일을 마우스 오른쪽 클릭하고 컨

텍스트 메뉴에서 Rename을 선택한다.

2. 클래스명 변경 대화상자에서 새로운 파일명을 입력한다.

3. 필요에 따라 변경 사항을 미리보기를 통해 확인한다.

4. 변경 사항을 반영하려면 OK를 클릭한다.

이렇게 하면 현재 프로젝트에서 수정된 파일을 참조하는 참조들이 클래스 선언과 생성자명을

포함해 모두 업데이트된다.

노트

패키지 익스플로러 뷰에서 액션스크립트 클래스 파일명을 변경하면 파일명에 맞게끔 클래스

선언과 생성자 메서드(생성자가 있는 경우)가 모두 업데이트된다.

기존 소스 코드 파일의 이동

플래시 빌더 4에는 소스 코드 파일을 새로운 패키지로 이동할 수 있는 기능이 추가됐다. 이 기능

은 MXML 컴포넌트와 액션스크립트 클래스 모두에 사용할 수 있다.

새 기능

플래시 빌더 4에는 클래스나 컴포넌트의 물리적인 위치에 따른 애플리케이션 및 프로젝트 리

팩터링 기능이 추가됐다.

클래스나 컴포넌트는 패키지 익스플로러 뷰나 소스 코드 내에서 옮길 수 있다.

패키지 익스플로러에서는 옮기려는 클래스를 클릭한 후 [File ⇨ Move]를 선택하면 된다(클래

스를 마우스 오른쪽 클릭하고 컨텍스트 메뉴에서 Move를 선택할 수도 있다). 그림 2.28에서 볼

수 있는 것처럼 이렇게 하면 새로운 위치를 묻는 대화상자가 나타난다.

새로운 폴더 위치를 선택하고 미리보기를 클릭하면 소스 코드 변경 사항을 미리 볼 수 있다. 이

동 작업을 마무리하려면 OK를 클릭하면 된다.


그림 2.28 | 클래스나 컴포넌트의 이동

액션스크립트 클래스의 소스 코드에 대해서 동일한 리팩터링 작업을 수행하려면 클래스명을

마우스 오른쪽 클릭하고 컨텍스트 메뉴에서 [Refactor ⇨ Move]를 누르면 된다. 이때도 미리보

기와 리팩터링 작업을 마무리할 수 있는 대화상자가 똑같이 나타난다.

노트

액션스크립트 클래스 파일을 새로운 패키지로 이동하면 클래스 파일은 수정된 패키지명을 적

용해 리팩터링되고 현 프로젝트 내에서 클래스를 참조하는 기존 참조도 함께 업데이트된다.

노트

액션스크립트 클래스를 패키지 뷰 내에서 드래그해 한 폴더에서 다른 폴더로 이동하거나 패키

지명을 변경하면 클래스 파일 내의 패키지 선언이 코드 리팩터링 엔진을 통해 업데이트된다.

코드 자동 생성

플래시 빌더 4에는 애플리케이션 코드를 생성하고 수정할 수 있는 많은 기능이 들어 있다. 이들

기능 중 일부는 플렉스 빌더 2 버전부터 제공된 기능이지만, 나머지 기능 중에는 플래시 빌더 4

에서 새로 추가된 기능도 있다.


게터와 세터 메서드의 자동 생성

액션스크립트 3는 처음 나왔을 때부터 클래스의 private 속성에 접근할 수 있는 게터와 세터 메

서드 사용법을 지원했지만 이전 버전의 플렉스 빌더까지는 필요한 코드를 자동으로 만들어 주

는 기능이 전혀 없었다.

새 기능

플래시 빌더 4에는 게터와 세터 자동 생성 기능이 새로 추가됐다.

하지만 이제 public 속성을 선언한 후 플래시 빌더를 통해 속성을 private 속성으로 변환하고

게터, 세터를 만들 수 있게 됐다. 다음 절차를 따라 해 보자.

1. 새로운 액션스크립트 클래스를 생성한다.

2. String 타입의 myVar public 속성을 선언한다. 이 경우 액션스크립트 클래스는 대략 다

음과 같게 될 것이다.

package

{

▶▶▶▶public▶class▶MyClass

▶▶▶▶{

▶▶▶▶▶▶▶▶public▶var▶myVar:String;

▶▶▶▶}

}

3. 변수명에 마우스 커서를 놓는다.

4. [Source ⇨ Generate Getter/Setter]를 선택한다. 그림 2.29에 보이는 것처럼 옵션을 선택할

수 있는 대화상자가 나타날 것이다.

그림 2.29 | 게터/세터 메서드의 자동 생성


5. 대화상자의 기본 설정을 그대로 둔 채 OK를 누른다.

이제 public 속성명 앞에 밑줄 접두어가 추가되고 private 속성으로 속성이 바뀌었을 것이다.

아울러 속성에 필요한 게터/세터 메서드도 생성됐을 것이다. 이로 인해 최종 클래스 코드는 다음

과 같이 바뀌게 된다.

package

{

▶▶▶▶public▶class▶MyClass

▶▶▶▶{

▶▶▶▶▶▶▶▶private▶var▶_myVar:String;

▶▶▶▶▶▶▶▶public▶function▶get▶myVar():String

▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶▶▶▶▶return▶_myVar;

▶▶▶▶▶▶▶▶}

▶▶▶▶▶▶▶▶public▶function▶set▶myVar(v:String):void

▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶▶▶▶▶_myVar▶=▶v;

▶▶▶▶▶▶▶▶}

▶▶▶▶}

}

물론 모든 코드에 게터/세터를 만들 필요는 없다 1 (public 속성만으로 충분한 경우가 대부분이

다). 하지만 게터/세터가 필요하다면 이제 플래시 빌더를 활용해 기본 코드 구조를 좀더 쉽게 만

들 수 있다.

이벤트 핸들러 자동 생성

플래시 빌더에서는 이벤트 핸들러(애플리케이션에서 전달한 이벤트에 반응해 호출되는 메서드)

를 MXML 태그의 어트리뷰트를 사용해 정의할 수 있다. 예를 들어 Button 컴포넌트가 click 이벤

트 발생 시 button1_clickHandler() 메서드를 호출할 경우 다음과 같은 코드를 사용할 수 있다.

<s:Button▶label="Click▶me"▶click="button1_clickHandler()"/>

플래시 빌더 4에서는 필요한 이벤트 핸들러 함수와 이를 호출하는 코드를 자동으로 생성해 준

다. 이 기능은 7장에서 좀더 자세히 설명한다.

1 　 (옮긴이) OOP 원칙에 따르면 속성을 public으로 선언하는 것보다 private으로 선언한 후 명시적인 게터/세터를 두는 게 더 좋

다. 게터/세터가 있으면 속성값을 대입하기 전에 유효성을 검증할 수 있고 반환값을 반환할 때도 추가 로직을 처리할 수 있는

등 여러 가지 장점이 있다.


플래시 빌더와 플래시 프로페셔널 CS5의 연동

플래시 빌더 4와 플래시 프로페셔널 CS5는 다양한 방식의 연동을 고려해 설계됐다. 플래시 개발

자들이 액션스크립트 3에 점점 더 익숙해짐에 따라 플래시 개발자들도 플래시 저작 도구에서 제

공하는 코드 편집 환경보다 더 나은 코드 편집 환경을 바라게 됐다. 플래시 빌더는 이와 같은 더

나은 코딩 경험을 전달할 수 있는 개발 환경이다.

액션스크립트 3를 사용하는 플래시에서는 속성 패널에서 도큐먼트 클래스 속성을 설정할 수

있다. 이러한 도큐먼트 클래스(및 기타 액션스크립트 지원 클래스)는 플래시 빌더의 플래시 프로

페셔널 프로젝트를 통해 만들 수 있다. 플래시 프로페셔널 CS5를 사용하는 개발자라면 이 프로

젝트를 통해 무비클립 심볼 및 기타 플래시에서 접근할 수 있는 객체들에 대한 정보부터 시작해

코드 힌트, 코드 자동 완성, 임포트 구문 관리, 기타 플렉스 개발자들이 수년간 사용한 다른 기

능들을 사용할 수 있다.

플래시 빌더에서 플래시 프로페셔널 프로젝트를 생성하기 전에 먼저 플래시 프로페셔널에서

플래시 프레젠테이션을 만들어야 한다. 플래시 빌더에서는 기존 바이너리 FLA 파일 형식이나 새

로운 XML 기반의 XFL 파일 형식으로 저장된 플래시 프레젠테이션에 접근할 수 있다.

새로운 플래시 프레젠테이션을 생성하려면 다음 절차를 따라 한다.

1. 컴퓨터에서 플래시 빌더와 플래시 프로페셔널 CS5를 실행한다.

2. 플래시 프로페셔널 CS5에서 메뉴의 [File ⇨ New]를 선택한다.

3. 새 문서 대화상자에서 액션스크립트 3.0을 선택하고 OK를 클릭한다.

4. 파일을 디스크상의 아무 경로에나 저장한다.

주의

이때 플래시 프레젠테이션의 파일명과 이 파일이 저장되는 폴더명은 서로 달라야 한다. 파일

명과 폴더명이 동일할 경우 플래시 빌더가 필요한 플래시 프로페셔널 프로젝트를 제대로 만들

수 없다.

5. 텍스트 툴을 사용해 스테이지에 텍스트 객체를 추가하고 타입을 TLFText로 설정한

다. 인스턴스명을 myText로 지정한다(과거 플래시 프로페셔널 버전을 사용 중이라면

Dynamic Text로 타입을 설정할 수 있다).

6. [Window ⇨ Components]를 선택한다.

7. 컴포넌트 패널에서 UI 영역의 버튼을 드래그해 스테이지에 놓는다.


8. 새로 추가한 버튼에 myButton이라는 인스턴스명을 지정한다.

9. 파일을 저장한다.

이어서 새 프레젠테이션의 도큐먼트 클래스를 설정하고 이 클래스를 관리할 플래시 빌더 프로

젝트를 생성한다.

1. 속성 패널을 연다.

2. 그림 2.30에 보이는 것처럼 Class에 클래스명을 설정한다. 필자는 보통 확장자를 뺀 플래

시 프레젠테이션과 동일한 이름으로 클래스명을 설정한다. 예를 들어 FlashPreso.fla에

대한 도큐먼트 클래스는 FlashPreso로 지정한다.

그림 2.30 | 속성 패널에서 플래시 프레젠테이션의 클래스명을 설정하는 방법

3. 클래스명 옆에 있는 연필 아이콘을 클릭한다.

4. 클래스가 존재하지 않는다는 액션스크립트 클래스 경고 대화상자가 보일 경우 OK를 클

릭하고 연필 아이콘을 다시 한 번 클릭한다.

5. 이어서 나오는 그림 2.31과 같은 대화상자에서 플래시 빌더를 애플리케이션 편집 프로그

램으로 선택하고 OK를 클릭한다.


그림 2.31 | 플래시 빌더를 도큐먼트 클래스의 편집 도구로 선택

6. 플래시 빌더로 돌아온다(플래시 빌더가 자동으로 포커스를 받을 수도 있다). 새로운 플

래시 프로페셔널 프로젝트를 생성할지 묻는 대화상자가 보일 것이다. 이때 대상 파일은

위에서 만든 플래시 프레젠테이션 파일로 자동으로 설정돼 있을 것이다.

7. 기본 설정을 그대로 둔 채 Finish를 클릭한다.

이제 앞에서 지정한 클래스명을 갖고 플래시 프로페셔널에 사용할 액션스크립트 클래스가 들

어 있는 플래시 프로페셔널 프로젝트가 플래시 빌더에서 생성될 것이다.

팁

자동 생성된 클래스는 Sprite 클래스를 상속하고 플래시 프레젠테이션을 나타낸다.

package

{

▶▶▶▶import▶flash.display.Sprite;

▶▶▶▶public▶class▶FlashPreso▶extends▶Sprite

▶▶▶▶{

▶▶▶▶▶▶▶▶public▶function▶FlashPreso()

▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶}

▶▶▶▶}

}

액션스크립트 클래스에서 플래시 프레젠테이션의 타임라인을 제어하고 싶다면 상위 클래스

를 Sprite에서 MovieClip으로 수정하면 된다.

package

{

▶▶▶▶import▶flash.display.MovieClip;

▶▶▶▶public▶class▶FlashPreso▶extends▶MovieClip

▶▶▶▶{


▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶}

▶▶▶▶}

}


액션스크립트에서 접근하려는 각 객체에 대해서는 클래스 선언 내에(생성자 메서드 바깥에)

public 속성 선언을 추가해야 한다. 각 속성에 플래시에서 사용하는 인스턴스명 및 객체 타입과

일치하는 속성명과 타입을 지정한다. 이때 필요한 import 문이 있다면 함께 추가해야 한다. 예제

클래스에서는 플래시 프레젠테이션의 객체와 일치하는 Button, TLFTextField 속성들을 선언하

고 있다.

package

{

▶▶▶▶import▶fl.controls.Button;

▶▶▶▶import▶fl.text.TLFTextField;

▶▶▶▶import▶flash.display.MovieClip;

▶▶▶▶public▶class▶FlashPreso▶extends▶MovieClip

▶▶▶▶{

▶▶▶▶▶▶▶▶public▶var▶myText:TLFTextField;

▶▶▶▶▶▶▶▶public▶var▶myButton:Button;


▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶}

▶▶▶▶}

}

노트

코드 변경 사항을 저장하면 플래시 빌더는 플래시 프로페셔널로 넘어가 선언의 이름과 타입이

모두 일치하는지 체크한다. 플래시 프레젠테이션에 있는 객체와 일치하지 않는 코드를 사용한

경우 플래시 빌더에 컴파일 에러가 표시된다.

이제 애플리케이션의 기능을 런타임 시에 관리하도록 코드를 추가할 수 있는 준비가 모두 끝

났다. 예제 2.1에 있는 도큐먼트 클래스는 버튼 객체에 대한 클릭 이벤트를 리스닝하고 클릭 이벤

트에 반응해 텍스트 객체의 모습을 바꾼다.


예제 2.1 플래시 프레젠테이션 내의 두 객체에 접근하는 도큐먼트 클래스

package

{

▶▶▶▶import▶fl.text.TLFTextField;

▶▶▶▶import▶fl.controls.Button;

▶▶▶▶import▶flash.display.Sprite;

▶▶▶▶import▶flash.events.MouseEvent;

▶▶▶▶public▶class▶FlashPreso▶extends▶Sprite

▶▶▶▶{

▶▶▶▶▶▶▶▶public▶var▶myText:TLFTextField;

▶▶▶▶▶▶▶▶public▶var▶myButton:Button;


▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶▶▶▶▶myButton.addEventListener(MouseEvent.CLICK,▶clickHandler);

▶▶▶▶▶▶▶▶}

▶▶▶▶▶▶▶▶protected▶function▶clickHandler(event:MouseEvent):void

▶▶▶▶▶▶▶▶{

▶▶▶▶▶▶▶▶▶▶▶▶myText.text▶=▶"You▶clicked";

▶▶▶▶▶▶▶▶}

▶▶▶▶}

}

노트

도큐먼트 클래스 기능은 플래시 CS3 프로페셔널에 처음으로 도입됐으며 액션스크립트 3를

사용하는 모든 플래시 프레젠테이션에서 사용할 수 있다. 이 절에서 설명한 절차는 이러한 플

래시 저작 도구 버전 모두에 그대로 응용할 수 있다.

플래시 프레젠테이션은 플래시 프로페셔널이나 플래시 빌더에서 테스트할 수 있다. 두 제품 모

두 메뉴에서 [Run ⇨ Test Movie]를 선택하거나 Ctrl+엔터(윈도우) 또는 +엔터(맥) 단축키를

누르면 된다. 플래시 빌더에서 테스트를 시작하면 프레젠테이션을 실행하기 위해 플래시 프로페

셔널로 포커스가 넘어간다.

간단한 도큐먼트 클래스를 만드는 데 성공하고 나면 플래시에서 필요한 나머지 액션스크립트

클래스들도 얼마든지 쉽게 추가할 수 있다. 아울러 플래시 프로패셔널에서 무비클립 심볼의 링

키지 속성을 새로운 액션스크립트 클래스로 설정한 다음 플래시 빌더로 넘어와서 앞에서 도큐먼

트 클래스를 만들 때처럼 클래스를 생성하고 편집할 수도 있다.


정리

이 장에서는 플래시 빌더 4의 성격과 기능에 대해서 설명했다. 이 장에서 다룬 내용은 다음과

같다.

▶ 플래시 빌더 4는 이클립스에서 사용할 수 있는 플러그인이다.

▶ 플래시 빌더 4는 윈도우와 맥 OS X 운영체제에서 사용할 수 있다.

▶ 플래시 빌더의 단독 실행용 설치 파일에는 이클립스 3.5.1을 비롯해 플렉스 애플리케이션

개발에 필요한 모든 설정이 전부 들어 있다.

▶ 플래시 빌더의 플러그인 설치 옵션을 사용하면 플래시 빌더를 기존 이클립스 설치 버전

상에 설치할 수 있다.

▶ 플래시 빌더 플러그인 설치에는 이클립스 3.4 이상 버전이 필요하다.

▶ 플래시 빌더는 플렉스 개발자뿐 아니라 플래시 개발자도 액션스크립트 파일 편집을 위해

사용할 수 있다.

▶ 플래시 빌더는 코딩을 더 빠르게 생산성 있게 해 주는 뷰와 편집기를 이클립스에 추가해

준다.

75

03기본 플렉스 애플리케이션 개발

이 장에서는 기본 “Hello World” 플렉스 애플리케이션을 생성하고 웹에 배포하는 과정을 설

명한다. 애플리케이션 개발 과정을 살펴본 후에는 애플리케이션 SWF 파일과 이를 지원하는

HTML 파일 사이의 관계를 비롯해 플렉스 애플리케이션의 기본 성격에 대해서 설명한다. 이 장

에서는 플래시 빌더에서 자동으로 생성하는 ‘래퍼’ HTML 파일의 내용과 더불어 관련 자바스크

립트 라이브러리 파일도 살펴본다.

이 장의 마지막 부분에서는 플렉스 애플리케이션을 웹사이트에 배포할 수 있는 다음 세 가지

방법에 대해서 설명한다.

▶ 자체 창으로 열리는 고유 애플리케이션

▶ 기존 웹 페이지에서 일부 영역을 차지하는 애플릿

이 장을 끝마치고 나면 플렉스 애플리케이션을 좀더 잘 이해할 수 있음을 물론 애플리케이션

을 사용자에게 어떻게 전달해야 할지 알 수 있다.

노트

이 장의 코드 예제와 캡처 화면에서는 독자들이 플래시 빌더 4를 사용해 애플리케이션을 개발

한다고 가정한다. 플렉스 4 SDK와 자체 텍스트 편집기를 사용하는 독자라 하더라도 개발 과

정은 이와 유사하지만 코드 자동 완성 기능과 필자가 설명 과정에서 언급하는 기타 개발 생산

성 도구들은 사용할 수 없다.

� "Hello World" 애플리케이션의 개발

� 작업 공간 전환

� 플렉스 프로젝트 생성

� HTML 템플릿의 이해

� 배포 버전 내보내기

� 플렉스 애플리케이션의 웹 배포

� 플렉스 애플리케이션과 드림위버 CS4의 웹 페이지 연동


"Hello World" 애플리케이션 개발

프로그래밍 언어를 막론하고 제일 먼저 개발하는 프로그램은 항상 "Hello World" 프로그램이

다. 가장 단순한 형태의 이 애플리케이션은 보통 텍스트 결과물 한 줄이 들어가는 게 전부다.

노트

이어지는 설명에서 필자는 독자들이 단독 실행형 플래시 빌더 버전을 사용한다고 가정한다.

플러그인 버전을 사용할 경우 개발 과정상 차이가 있을 때는 팁을 통해 별도 개발 절차를 명시

해 두었다.

작업 공간의 전환

2장에서 설명한 것처럼 제일 먼저 할 일은 플렉스 프로젝트를 만드는 일이다. 이러한 프로젝트에

는 소스 코드와 기타 자원들이 모두 들어간다.

작업 공간을 전환하려면 다음 절차를 따라 한다.

1. 플래시 빌더 4를 연다.

2. 메뉴에서 [File ⇨ Switch Workspace]를 선택한다.

3. 하드 디스크상의 아무 위치에서나 ¦ex4bible라는 이름의 새 폴더를 만들어 선택하고 OK

를 클릭한다. 윈도우 사용자라면 이 폴더는 예컨대 C:\¦ex4bible이 될 것이고, 맥 OS X 사

용자라면 폴더가 사용자의 홈 디레터리 내의 /Users/[username]/Documents/flex4bible

등이 될 것이다.

작업 공간을 선택한 다음에는 플래시 빌더가 닫혔다가 다시 열리는 것을 볼 수 있다. 그림 3.1

에 있는 새 작업 공간에서는 플래시 빌더 시작 페이지와 기본 플래시 퍼스펙티브를 볼 수 있다.

새로 만든 작업 공간은 비어 있으며 아무런 프로젝트도 들어 있지 않다.

노트

가끔 작업 공간 폴더를 프로젝트 폴더의 부모 폴더가 아니라 형제 폴더로 만들기도 한다. 이렇

게 하는 이유는 작업 공간에는 하드 디스크상의 절대 경로에 대한 참조가 들어 있고 이를 옮길

수 없기 때문이다. 프로젝트 폴더의 위치를 변경하면 작업 공간을 다시 만들어야 한다.

03 기본 플렉스 애플리케이션 개발 l 77

팁

플래시 빌더를 닫고 윈도우 탐색기나 검색을 통해 작업 공간 폴더의 .metadata 하위 폴더를

찾아서 삭제하면 작업 공간을 처음부터 다시 만들 수 있다. 이렇게 한 다음 플래시 빌더를 다

시 열면 작업 공간 데이터가 자동으로 재생성된다.

이렇게 작업 공간을 다시 만든 다음 패키지 익스플로러 뷰에서 기존 프로젝트를 보려면 프로

젝트를 불러와야 한다. [File ⇨ Import]를 선택하면 가져오기 대화상자가 나온다. 이 대화상

자에서 [General ⇨ Existing Projects into Workspace]를 선택한 후 프로젝트의 루트 폴

더를 찾아 선택하면 프로젝트를 불러올 수 있다. 프로젝트가 다시 보이고 활성화된 것을 확인

하면 Finish를 클릭한다.

그림 3.1 | 새 작업 공간의 기본 플래시 퍼스펙티브

프로젝트의 생성

플렉스 프로젝트를 생성하려면 다음 절차를 따라 한다.

1. 메뉴에서 [File ⇨ New ⇨ Flex Project]를 선택한다.

팁

플러그인 버전의 플래시 빌더를 사용 중이라면 [File ⇨ New ⇨ Other]를 선택한다. 이렇게

하면 마법사 화면이 나타나는데 이때 [Flash Builder ⇨ Flex Project]를 선택하면 된다.


그림 3.2 | 새 플렉스 프로젝트 마법사의 첫 화면

2. 그림 3.2에 보이는 첫 화면에서 프로젝트명으로 chapter03을 입력한다.

3. 프로젝트 위치상의 기본 위치 사용 옵션이 선택됐는지 확인한다. 프로젝트 위치는 기본

적으로 작업 공간 폴더 하위의 chapter03 폴더명이 된다. 예를 들어 윈도우 사용자라면 기본

폴더 위치가 C:\¦ex4bible\chapter03 등이 될 것이다.

4. 애플리케이션 타입으로 (플래시 플레이어에서 실행되는) 웹 애플리케이션 옵션을 선택

한다.

5. 플렉스 SDK 버전으로 기본 SDK (현재 ‘플렉스 4.0’) 사용 옵션을 선택한다.

6. 애플리케이션 서버 타입 드롭다운 메뉴에서 None/Other를 선택하고 Next를 클릭한다.

7. 그림 3.3에 보이는 결과물 폴더 설정 화면에서 bin-debug 결과물 폴더 옵션을 그대로 사용

한다. 이 폴더는 컴파일된 애플리케이션의 디버그 버전과 지원 파일들이 들어가는 위치다.

8. Next를 클릭한다.

노트

플렉스 빌더 2에서는 기본 결과물 폴더가 bin으로 설정돼 있었고 이 폴더에 컴파일된 애플리

케이션의 디버그 버전과 배포 버전이 모두 들어갔다. 하지만 플렉스 빌더 3부터는 배포 버전

을 내보낼 폴더와 구분하기 위해 기본 결과물 폴더가 bin-debug로 변경됐다.


그림 3.3 | 새 플렉스 프로젝트 마법사의 두 번째 화면

9. 그림 3.4에 보이는 플렉스 프로젝트 생성 화면에서 기본 설정을 그대로 사용한다.

² 메인 소스 폴더: src.

² 메인 애플리케이션 파일: HelloWorld.mxml.

² 결과물 폴더 URL: 공백으로 남겨두고 기본 설정을 그대로 사용한다.

그림 3.4 | 새 플렉스 프로젝트 마법사의 세 번째 화면

10. Finish를 클릭해 프로젝트와 메인 애플리케이션 파일 생성을 마무리한다. 이제 그림 3.5

처럼 메인 애플리케이션 파일이 편집기 뷰에 보일 것이다. 새로 만든 작업 공간에서 작업

중이라면 파일이 소스 모드에서 보일 것이다. 이 경우 애플리케이션의 소스 코드를 바로

볼 수 있다.


노트

화면 크기에 맞추기 위해 그림 3.5의 코드에서는 각 시작 태그 어트리뷰트 다음에 줄바꿈을

추가했다.

그림 3.5 | 새로 만든 메인 애플리케이션 파일을 소스 모드에서 확인한 화면

Hello World

플렉스 4 애플리케이션에서는 애플리케이션의 자식 객체 레이아웃에 새로운 아키텍처를 사용

한다. 플렉스 3에서는 <mx:Application> 컴포넌트에 absolute, horizontal, vertical 중 한 문자

열 값을 지정할 수 있는 layout 속성이 있었다. 플렉스 4에서는 <s:Application> 태그의 레이아

웃이 Layout 클래스의 인스턴스를 통해 결정된다. 이제 애플리케이션의 layout 속성은 주로 사

용할 레이아웃 클래스 인스턴스로 감싼 <s:layout> 태그를 사용해 설정한다. 다음은 애플리케이

션에서 세로 레이아웃을 사용하는 예제 코드다.




▶▶▶▶xmlns:mx="library://ns.adobe.com/flex/mx"

▶▶▶▶minWidth="955"▶minHeight="600">

▶▶▶▶<s:layout>

▶▶▶▶▶▶▶▶<s:VerticalLayout/>

▶▶▶▶</s:layout>

</s:Application>

플렉스 4 애플리케이션의 기본 레이아웃은 basic 레이아웃이라는 스키마다. 이 레이아웃 구

조는 시각 객체들이 애플리케이션의 좌측 상단 모서리를 기준으로 자신의 위치를 유지하는 플

렉스 3의 absolute 레이아웃과 유사하다. 예제 애플리케이션에서는 세로 레이아웃을 사용하고

있다.


노트

플렉스 4 애플리케이션에서는 플렉스 3 애플리케이션보다 더 많은 XML 네임스페이스와

MXML 자식 태그를 사용한다. 이 내용은 4장에서 자세히 설명한다.

플렉스 애플리케이션에서 간단한 메시지를 보여주려면 다음 절차를 따라 한다.

1. 소스 모드에서 애플리케이션을 편집 중인지 확인한다.

2. <s:Application> 태그에서 minWidth와 minHeight 어트리뷰트를 모두 제거한다. 이렇

게 하면 애플리케이션이 브라우저 크기에 따라 자동으로 크기를 조절한다.

3. <fx:Declarations> 엘리먼트와 안에 들어 있는 주석을 삭제한다. 이 엘리먼트는 플렉스 4

에서 시각 객체가 아닌 객체를 선언할 때 사용하지만 이 예제에서는 불필요하다.

4. 커서를 <s:Application> 태그 내에 둔다.

5. <layout을 입력한다. 입력 도중 (그림 3.6에 보이는 것 같은) 창이 나타나 현 상황에서 사

용할 수 있는 추천 속성과 객체들을 보여줄 것이다.

그림 3.6 | 코드 힌트 사용

6. 코드 추천 목록에서 s:layout을 선택한 다음 >를 입력해 태그를 닫는다. 플래시 빌더가

<s:layout> 태그를 자동으로 완성하는 것을 확인한다.

<s:layout>

</s:layout>

7. 커서를 <s:layout> 시작 태그와 종료 태그 사이에 두고 <vertical을 입력한다. 추천 코드

목록에서 s:VerticalLayout을 선택한 다음 XML 빈 태그 구문을 사용해 태그를 완성한다.

<s:layout>


▶▶▶▶<s:VerticalLayout/>

</s:layout>

8. 상단 패딩(paddingTop) 20과 center 가로 정렬을 <s:Vertical>에 추가한다.

<s:VerticalLayout▶paddingTop="20"▶horizontalAlign="center"/>

새 기능

플렉스 4에서는 자동 레이아웃 결정에 도움이 되는 패딩, 정렬, 갭 설정이 Application이 아

니라 VerticalLayout과 HorizontalLayout 클래스에 구현된다. 아울러 이러한 설정은 이제

스타일이 아니라 속성 형태로 구현된다.

9. </:layout> 종료 태그와 </s:Application> 종료 태그 사이의 빈 줄에 마우스 커서를 놓

는다.

10. <label을 입력하고 클래스 목록에서 s:Label을 선택한다.

11. 다음과 같이 Label 객체 선언을 완성한다.

<s:Label▶text="Hello▶World"▶fontSize="36"/>

새 기능

이 애플리케이션에 있는 <s:Label> 태그는 스파크 Label 컴포넌트의 인스턴스를 생성한다.

기존 MX Label과 달리 스파크 Label은 오른쪽 방향에서 왼쪽으로 텍스트를 쓸 수 있고 플래

시 플레이어 10에서 새롭게 지원하는 나머지 텍스트 렌더링 기능을 모두 활용할 수 있다. 새

로 추가된 텍스트 컨트롤 중에는 RichText와 RichEditableText도 있다. 이들 컨트롤은 9장

에서 자세히 설명한다.

12. 전체 애플리케이션 코드를 확인한다. 완성된 코드는 대략 다음과 같다.




▶▶▶▶xmlns:mx="library://ns.adobe.com/flex/mx">

▶▶▶▶<s:layout>

▶▶▶▶▶▶▶▶<s:VerticalLayout▶paddingTop="20"▶horizontalAlign="center"/>

▶▶▶▶</s:layout>

▶▶▶▶<s:Label▶text="Hello▶World"▶fontSize="36"/>

</s:Application>


13. [File ⇨ Save]을 선택해 파일을 저장한다.

14. 브라우저에서 애플리케이션을 실행하려면 [Run ⇨ Run HelloWorld]를 선택하면 된다.

그림 3.7에서 볼 수 있듯이 이제 브라우저 창에서 애플리케이션이 열릴 것이다.

그림 3.7 | 웹 브라우저에서 실행 중인 완성된 애플리케이션

팁

현재 애플리케이션을 실행할 때는 키보드 단축키 Ctrl+F11(윈도우)나 +Shift+F11(맥)을

눌러도 된다.

html-template 폴더에 대한 이해

웹상에서 배포하는 각 플렉스 프로젝트에는 html-template이라는 폴더가 들어 있다. 이 폴더에

는 HTML 템플릿과 브라우저에서 애플리케이션을 구동하는 데 필요한 지원 파일들이 들어 있

다. 소스 코드를 변경하면 플래시 빌더에서는 매번 HTML 템플릿 파일을 사용해 HTML 래퍼를

재빌드한다. 이와 동시에 html-template 폴더의 내용은 컴파일된 애플리케이션이 들어 있는 결

과물 폴더로 복사된다. 그림 3.8에는 html-template 폴더의 내용이 나와 있다.

노트

애플리케이션을 배포할 때 웹 서버에 html-template 폴더와 이 폴더의 내용을 복사하지 않

아도 된다. 이 파일들은 컴파일 과정에서만 사용된다.


그림 3.8 | html-template 폴더의 구조

팁

플래시 빌더에는 소스 코드 파일을 수정할 때마다 애플리케이션 컴파일을 자동으로 다시 하는

Build Automatically 속성이 있다. 원하는 경우에만 애플리케이션이 컴파일되게 하려면 플

래시 빌더에서 [Project ⇨ Build Automatically]를 선택하면 된다. 이 속성을 다시 활성화하

려면 같은 메뉴를 다시 한 번 선택하면 된다.

컴파일 과정에서 html-template 디렉터리 내의 파일 대부분은 디버그 버전 애플리케이션이

들어 있는 결과물 폴더로 단순 복사된다. 이때 사용되는 HTML 래퍼 파일은 html-template 폴

더 내의 index.template.html이라는 이름의 템플릿 파일을 기반으로 생성된다. 아울러 소스 코

드 내에서 MXML이나 액션스크립트 코드 파일에 해당하지 않는 파일 또는 바이너리 그래픽 파

일처럼 임베디드 에셋에 해당하지 않는 파일들은 모두 디렉터리 구조를 따라 결과물 폴더로 함

께 복사된다.

팁

애플리케이션에서 임베드하지 않은 에셋 파일을 결과물 폴더로 복사할지 여부를 선택할 수도

있다. [Project ⇨ Properties]를 선택한 다음 플렉스 컴파일러 항목을 선택한다. 컴파일러 옵

션에서 Copy non-embedded files to output folder를 원하는 설정으로 설정한다. 이 설

정은 웹 애플리케이션 배포 버전에 포함되는 파일 및 데스크톱 애플리케이션의 AIR 설치 패키

지에 포함되는 파일에도 영향을 미친다.

html-template 디렉터리에는 다음 세 파일과 한 개의 하위 폴더가 있다.

▶ index.template.html 런타임 시에 애플리케이션을 실행하는 역할을 하기 위해 자동으

로 생성하는 HTML ‘래퍼’ 파일의 기본 템플릿 파일.


▶ swfobject.js 런타임 시에 플래시 플레이어를 로드하는 데 사용하는 함수들이 들어 있

는 자바스크립트 라이브러리. 이 파일에는 사용자의 컴퓨터에 현재 플래시 플레이어가 설

치돼 있는지, 설치돼 있다면 버전이 어떻게 되는지를 판단하는 코드도 들어 있다.

▶ playerProductInstall.swf 6.65 또는 이하 버전의 플래시 플레이어가 설치돼 있을 때 사

용자 시스템의 플래시 플레이어를 업그레이드하는 플래시 애플리케이션.

▶ history 하위 폴더 이 폴더에는 히스토리 관리 기능(비IE 브라우저용)을 구현하는 파일

들이 들어 있다.

² historyFrame.html은 런타임 시에 메인 페이지의 <iframe>에 로드되는 HTML 페이지의 템플릿 파일이다.

² history.js는 historyFrame.html에서 호출하는 자바스크립트 함수들이 들어 있는 자바스크립트 라이브러리다.

² history.css는 메인 페이지의 히스토리 프레임을 숨기는 데 사용하는 CSS 규칙이 들어 있는 파일이다.

새 기능

플래시 빌더 4에서는 플래시 플레이어와 애플리케이션을 배포할 때 플렉스 빌더 3에서 사

용하던 AC_OE_Tags.js 파일 대신 오픈소스 SWFObject 자바스크립트 라이브러를 사용

한다. 가장 최신 버전의 SWFObject 라이브러리 및 문서는 http://code.google.com/p/

swfobject/에서 다운로드할 수 있다.

HTML 래퍼 템플릿

HTML 템플릿 파일인 index.template.html에는 아래 내용이 모두 들어 있다.

▶ HTML 코드

▶ swfobject.js에 들어 있는 자바스크립트 함수에 대한 호출

▶ 히스토리 이동과 딥 링크를 관리하는 ‘히스토리’ 파일들

▶ 자동 생성된 파일에 전달될 값들에 대한 치환자

컴파일 시점에는 이러한 HTML 템플릿을 통해 웹 서버에 배포할 HTML ‘래퍼’ 파일이 생성된

다. 이 절에서는 이 파일의 각 부분과 용도에 대해서 설명한다.


HTML <head> 영역

템플릿 HTML 파일의 <head> 영역에는 CSS와 자바스크립트 파일에 대한 링크들이 들어간다.

<title> 엘리먼트에는 애플리케이션의 pageTitle 속성을 통해 값이 채워지는 변수가 들어 있다.

<title>${title}</title>

자동 생성되는 HTML 래퍼 페이지에서 이 값을 채우려면 <s:Application>의 시작 태그에서

pageTitle 속성을 설정하면 된다.




▶▶▶▶pageTitle="Hello▶World">

다음으로 CSS 선언에서는 기본 마진과 패딩을 제거하고 <html>과 <body> 엘리먼트의 높이

를 100%로 설정한다. ¦ashContent id 선택자는 웹 페이지에서 애플리케이션을 보여줄 위치에

해당하는 <div> 엘리먼트를 참조한다.

<style▶type="text/css"▶media="screen">

▶▶▶▶html,▶body▶{▶height:100%;▶}

▶▶▶▶body▶{▶margin:0;▶padding:0;▶overflow:hidden;▶text-align:center;▶}

▶▶▶▶#flashContent▶{▶display:none;▶}

</style>

팁

hidden을 overflow로 설정하면 플래시 플레이어의 크기(또는 페이지 내의 다른 엘리먼트의

크기)가 페이지 영역보다 클 경우 페이지 크기를 벗어난 영역이 보이지 않게 된다. 페이지에서

스크롤바를 보여주고 싶다면 overflow 스타일을 scroll로 설정하면 된다.

<link> 태그에서는 history 폴더에 있는 history.css 파일을 불러오고 <script> 태그에서는

history.js 자바스크립트 라이브러리를 불러온다.

<link▶rel="stylesheet"▶type="text/css"▶href="history/history.css"▶/>

<script▶type="text/javascript"▶src="history/history.js"></script>

<script> 엘리먼트는 swfobject 코드 라이브러리를 불러온다.

<script▶type="text/javascript"▶src="swfobject.js"></script>

이어서 나오는 또 다른 <script> 엘리먼트에는 사용자의 현재 플래시 플레이어 버전을 확인하

고 이에 따라 반응하는 코드가 들어 있다.


▶ 애플리케이션에 구동에 필요한 플래시 플레이어 버전이 설치돼 있다면 애플리케이션을

로드한다.

▶ 사용자의 플래시 플레이어 버전이 최소 6.0.65 이상이지만 애플리케이션에 필요한 버전

에는 못 미치는 경우 playerProductInstall.swf를 로드해 사용자가 플래시 플레이어를 업

그레이드하게끔 도와준다. 이 과정에서 (이를테면 사용자가 컴퓨터에 대한 관리자 권한

이 없어서) 에러가 발생하면 플래시 기반 업그레이드 설치 프로그램에서는 (사용자가 어

떤 문제가 발생했는지 몰라 답답해하지 않도록) 관련 메시지를 보여준다.

▶ 플래시 플레이어가 아예 설치돼 있지 않거나 설치 버전이 6.0.65 이전 버전이면 어도비 웹

사이트에서 플래시 플레이어를 다운로드할 수 있는 링크를 표시한다.

HTML 문서의 다음 자바스크립트 코드 영역에서는 현재 애플리케이션에 필요한 플래시 플레

이어 버전을 정의한다.

var▶swfVersionStr▶=

"${version_major}.${version_minor}.${version_revision}";

이 중 version_major, version_minor, version_revision은 플렉스 프로젝트의 속성을 통해 설

정할 수 있다.

1. 플래시 빌더 메뉴에서 [Project ⇨ Properties]를 선택한다.

2. 속성 대화상자에서 그림 3.9처럼 플렉스 컴파일러 영역을 선택한다.

3. 필수 플래시 플레이어 버전 옵션에서 필요한 버전 번호로 버전을 수정한다.

플래시 플레이어의 필수 버전을 설정한다.

그림 3.9 | 필수 플래시 플레이어 버전 번호 설정 화면


팁

플래시 빌더 4에서 새 플렉스 프로젝트를 생성하면 프로젝트의 필수 플래시 플레이어 버전

이 플렉스 SDK 설정에 따라 달라진다. 이 설정은 SDK 폴더 내의 frameworks/flex-config.

xml 파일에서 <target-player> 엘리먼트에 들어 있다.

<target-player>10.0.0</target-player>

flex-config.xml 파일의 내용을 변경하면 재컴파일 전에 모든 프로젝트를 ‘클린’해야 한다.

[Project ⇨ Clean]를 선택해 모든 프로젝트를 클린하고 OK를 누르면 된다.

나머지 스크립트는 버전 검사를 마치고 애플리케이션을 실행하는 코드다.

var▶xiSwfUrlStr▶=▶"playerProductInstall.swf";

var▶flashvars▶=▶{};

var▶params▶=▶{};

params.quality▶=▶"high";

params.bgcolor▶=▶"${bgcolor}";

params.allowscriptaccess▶=▶"sameDomain";

var▶attributes▶=▶{};

attributes.id▶=▶"${application}";

attributes.name▶=▶"${application}";

attributes.align▶=▶"middle";

swfobject.embedSWF(

▶▶▶▶"${swf}.swf",▶"flashContent",

▶▶▶▶"${width}",▶"${height}",

▶▶▶▶swfVersionStr,▶xiSwfUrlStr,

flashvars,▶params,▶attributes);



swfobject.createCSS("#flashContent",▶"display:block;textalign:left;");

▶

swfobject.embedSWF()에 대한 함수 호출은 플래시 플레이어를 구동하고 ¦ashContent라는

id가 있는 <div> 위치에 애플리케이션이 들어가게 하는 HTML 코드를 동적으로 만들어 준다.

swfobject.createCSS()에 대한 함수 호출은 애플리케이션이 제대로 실행되도록 <div> 태그의

나머지 내용을 보이지 않게 한다.

<head> 영역에는 ¦ashContent라는 id가 있는 <div> 태그가 들어 있다.

<div▶id="flashContent">

▶▶▶▶<p>

▶▶▶▶▶▶▶▶To▶view▶this▶page▶ensure▶that▶Adobe▶Flash▶Player▶version

▶▶▶▶▶▶▶▶${version_major}.${version_minor}.${version_revision}▶or

▶▶▶▶▶▶▶▶greater▶is▶installed.


▶▶▶▶</p>

▶▶▶▶<a▶href="http://www.adobe.com/go/getflashplayer">

▶▶▶▶▶▶▶▶<img▶src="http://www.adobe.com/images/shared/download_buttons/

▶▶▶▶▶▶▶▶get_flash_player.gif"▶alt="Get▶Adobe▶Flash▶Player"▶/>

▶▶▶▶</a>

</div>

이 <div> 태그의 내용은 애플리케이션이나 플래시 업그레이드 설치 프로그램이 제대로 로드

되지 않을 때만 나타난다. 기본적으로 이 <div> 태그에는 필요한 플래시 플레이어 버전을 나타

내는 텍스트 메시지와 더불어 사용자가 플래시 플레이어를 다운로드할 수 있는 어도비 웹사이

트에 대한 링크 이미지가 들어 있다. 하지만 이 부분에 들어가는 HTML 코드는 필요에 따라 얼

마든지 수정할 수 있다.

애플리케이션의 실행

HTML 래퍼에서 플래시 플레이어를 구동하면 래퍼 HTML에서는 params 객체를 통해 특정 매

개변수들을 전달한다.

var▶params▶=▶{};

params.quality▶=▶"high";

params.bgcolor▶=▶"${bgcolor}";

params.allowscriptaccess▶=▶"sameDomain";

이 중 quality와 allowScriptAccess는 고정값을 갖고 있다. bgcolor 매개변수는 애플리케이션

의 <s:Application> 태그에서 정의하거나 S|Application 타입 선택자에서 선언한 CSS 선언을 통

해 동적으로 설정된다.

노트

allowScriptAccess 속성은 never, always, sameDomain 가운데 하나로 설정할 수 있다.

이 속성값은 플래시 플레이어의 외부 스크립팅 범위를 결정한다. 스크립트 보안 모델에 대한

상세 정보는 www.adobe.com/go/tn_16494의 기사를 참고하자.

flashvars 매개변수의 사용

¦ashvars 객체를 사용하면 이름을 임의로 지정한 매개변수를 애플리케이션으로 전달할 수 있

다. ¦ashvars 객체를 정의하고 나면 ¦ashvars 매개변수를 플렉스 애플리케이션으로 전달할 수

있다. ¦ashvars 객체에는 이름을 지정한 매개변수를 추가할 수 있다.


var▶flashvars▶=▶{};

var▶flashvars.param1▶=▶"Some▶value";

플렉스 애플리케이션에서 이러한 매개변수에 접근하려면 애플리케이션의 parameters 속성을

사용하면 된다.

trace(this.parameters.param1);

HTML <noscript> 영역

페이지 하단에 있는 <noscript> 영역에는 자바스크립트를 지원하지 않는 브라우저에서 플래시

플레이어를 구동하기 위한 코드가 들어간다.

<noscript>

▶▶▶▶<object▶classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

▶▶▶▶width="${width}"▶height="${height}"▶id="${application}">

▶▶▶▶▶▶▶▶<param▶name="movie"▶value="${swf}.swf"▶/>

▶▶▶▶▶▶▶▶<param▶name="quality"▶value="high"▶/>

▶▶▶▶▶▶▶▶<param▶name="bgcolor"▶value="${bgcolor}"▶/>

▶▶▶▶▶▶▶▶<param▶name="allowScriptAccess"▶value="sameDomain"▶/>

▶▶▶▶▶▶▶▶

▶▶▶▶▶▶▶▶<object▶type="application/x-shockwave-flash"

▶▶▶▶▶▶▶▶data="${swf}.swf"▶width="${width}"▶height="${height}">

▶▶▶▶▶▶▶▶▶▶▶▶<param▶name="quality"▶value="high"▶/>

▶▶▶▶▶▶▶▶▶▶▶▶<param▶name="bgcolor"▶value="${bgcolor}"▶/>

▶▶▶▶▶▶▶▶▶▶▶▶<param▶name="allowScriptAccess"▶value="sameDomain"▶/>

▶▶▶▶▶▶▶▶▶▶▶▶

▶▶▶▶▶▶▶▶▶▶▶▶<a▶href="http://www.adobe.com/go/getflashplayer">

▶▶▶▶▶▶▶▶▶▶▶▶<img▶src="http://www.adobe.com/images/shared/download_buttons/

▶▶▶▶▶▶▶▶▶▶▶▶get_flash_player.gif"▶alt="Get▶Adobe▶Flash▶Player"▶/>

▶▶▶▶▶▶▶▶▶▶▶▶</a>

▶▶▶▶▶▶▶▶▶▶▶▶

▶▶▶▶▶▶▶▶</object>

▶▶▶▶▶▶▶▶

▶▶▶▶</object>

</noscript>

이 영역에 들어 있는 코드는 자바스크립트를 전혀 지원하지 않는 브라우저나 브라우저 보안 설

정을 통해 자바스크립트 실행을 비활성화한 환경에서만 실행된다. 물론 이런 환경이 드문 것은

사실이지만 이런 브라우저 설치 환경이 전혀 없는 것은 아니다.

이 방식을 사용해 플래시 플레이어를 로드할 때의 유일한 단점은 인터넷 익스플로러를 사용자

의 경우 자바스크립트 코드 없이 플래시 플레이어를 로드하는 과정에서 사용자 불편이 초래될


수 있다는 점이다. 이 경우 애플리케이션을 사용하려면 사용자는 먼저 플래시 (플렉스) 애플리케

이션을 클릭하거나 스페이스바를 눌러야 한다. 이런 사용자 경험은 불편하기는 하지만 그렇다고

크게 문제가 되지는 않는다.

주의

매개변수를 추가하거나 수정할 때는 자바스크립트는 물론 HTML 래퍼 파일에 있는 embed와

object 태그에서도 변경 사항을 같이 반영해야 한다.

주의

이러한 HTML은 원하는 대로 수정할 수 있지만 이런 수정은 항상 결과물 폴더에 생성된

HTML 파일이 아니라 HTML 템플릿 페이지에서 해야 한다. 자동 생성된 파일을 직접 수정할

경우 다음 번 애플리케이션 컴파일 시 수정 내용이 모두 원복된다.

히스토리 관리 파일

html-template 폴더에는 history라는 하위 폴더가 들어 있다. 이 폴더에는 자바스크립트 코드를

통해 동적으로 추가되는 <iframe> 엘리먼트에서 호출하는 HTML 래퍼 파일들이 들어 있다. 이

러한 파일들은 ViewStack, TabNavigator, Accordion 컨테이너 사용 시 히스토리 기능을 구현

하기 위해 사용된다. 이와 같은 히스토리 기능을 사용하면 사용자는 마이크로소프트 이외의 웹

브라우저에서 앞으로 가기, 뒤로 가기 버튼을 사용해 애플리케이션의 뷰 스테이트를 오갈 수 있

다. 이들 파일에서 지원하는 또 다른 기능으로는 딥 링크 기능이 있다. 딥 링크 기능을 사용하면

URL 요청을 기반으로 애플리케이션이 특정 상태로 열리게 하는 URL 패턴을 작성할 수 있다.

내비게이터 컨테이너의 히스토리 관리 기능이나 딥 링크를 사용하지 않아도 된다면 플래시 빌

더가 히스토리 파일을 생성하지 않도록 프로젝트 단위로 설정할 수 있다. 다음 절차를 따라 하면

히스토리 관리와 딥 링크 기능을 비활성화할 수 있다.

1. 패키지 익스플로러 뷰에서 프로젝트를 선택한다.

2. 플래시 빌더 메뉴에서 Project Properties를 선택한다.

3. 속성 대화상자에서 플렉스 컴파일러 항목을 선택하고 Enable integration with Web

browsers 옵션을 체크 해제한다.

4. OK를 클릭해 변경 사항을 저장한다. 이 경우 HTML 래퍼에 대한 옵션이 수정됐으므로

html-template 폴더 내의 모든 파일을 삭제하고 다시 만든다는 경고 대화상자가 나타난다.


5. OK를 클릭해 대화상자를 닫고 프로젝트가 다시 빌드될 때까지 기다린다.

6. 패키지 익스플로러 뷰에서 html-template 폴더와 bin-debug 폴더의 내용을 확인한다. 이

제 프로젝트 배포 결과물에 history 하위 폴더가 사라진 것을 볼 수 있을 것이다.

웹 리소스

딥 링크는 플렉스 3에서 추가됐다. 딥 링크에 대한 자세한 정보는 http://livedocs.adobe.

com/flex/3/html/help.html?content=deep_linking_2.html에서 확인할 수 있다.

애플리케이션 배포

이제 애플리케이션 생성이 끝났고 개발 환경과 테스트 환경에서 애플리케이션이 문제 없이 실행

된다. 이 시점에서 독자들은 애플리케이션을 사용자에게 보여주고 싶을 것이다. 이 절에서는 공개

배포에 적합한 애플리케이션 버전을 만드는 방법과 애플리케이션을 배포하는 방법을 설명한다.

배포 빌드의 생성

결과물 폴더에 있는 애플리케이션이나 테스트와 디버깅 시점에 실행하는 애플리케이션의 버전

은 "디버그" 버전이다. 이 SWF 파일은 디버깅 시에만 사용되는 부가 정보를 포함하고 있어서 사

용자에게 배포할 배포 버전과 비교해 크기가 훨씬 크다.

노트

플렉스 빌더 2에서는 애플리케이션의 디버그 버전과 배포 버전이 단일 결과물 폴더에 들어 있

었다. 당시에는 애플리케이션을 배포하려면 파일명에 debug가 포함되지 않은 HTML과 SWF

파일들을 웹 서버로 복사해야 했다. 하지만 플렉스 빌더 3부터는 디버그 버전과 배포 버전을

각기 다른 폴도에 빌드하고 배포 빌드의 경우 별도 과정을 통해 직접 내보내야 한다.

플렉스 웹 애플리케이션의 배포 빌드를 생성하려면 다음 절차를 따라 한다.

1. 플래시 빌더 메뉴에서 Project Export Release Build를 선택하거나 File Export

Release Build를 선택한다.


2. 그림 3.10에 보이는 배포 빌드 내보내기 대화상자에서 다음 항목을 선택한다.

a. 내보낼 애플리케이션을 선택한다.

b. 소스 보기 기능을 사용할지 여부를 지정한다.

c. 배포 빌드를 내보낼 폴더를 선택한다.

3. Finish를 클릭해 배포 빌드 내보내기를 마친다.

그림 3.10 | 웹 애플리케이션의 배포 빌드 내보내기 대화상자

노트

배포 빌드 폴더에는 단일 애플리케이션과 지원 파일들만 들어간다. 이와 비교해 bin-debug

폴더에는 프로젝트에 있는 모든 애플리케이션의 디버그 버전이 들어간다.

배포 빌드 내보내기를 마치면 컴파일된 애플리케이션과 지원 파일들이 들어 있는 새 폴더가 생

긴다. 이 애플리케이션 버전은 사용자에게 배포하기 위해 최적화한 버전이다. 이 애플리케이션은

디버그 정보를 포함하지 않아서 디버그 버전과 비교해 용량이 매우 작다.

간단한 Label 컨트롤 하나가 들어 있는 기본 "Hello World" 애플리케이션 파일을 컴파일할 경

우 디버그 버전의 크기는 98K이지만 배포 버전 크기는 51K에 불과하다. 당연히 사용자에게는 배

포 버전을 다운로드해 사용하게 하는 게 맞다.


새 기능

플렉스 4에서는 모든 플렉스 애플리케이션이 공유하는 액션스크립트 클래스들이나 기

타 SDK 요소들이 기본적으로 애플리케이션 SWF와 구분된 RSL(런타임 공유 라이브러

리) 파일로 컴파일돼 있다. 이러한 파일들도 .swf 파일 확장자를 갖고 있는데 이들 파일

은 런타임 시에 클래스가 필요할 때 애플리케이션에서 로드한다. 이러한 파일의 예로는

framework_4.0.0.12685.swf, spark_4.0.0.12685.swf 등이 있다(여기서 파일명에 들어

있는 버전 번호는 애플리케이션을 컴파일하는 플렉스 4 SDK에 따라 달라질 수 있다). 플렉스

4 웹 애플리케이션을 배포할 때는 배포 폴더에 있는 SWF 파일들을 모두 웹사이트의 애플리

케이션 폴더로 복사해야 하다.

이와 같은 프레임워크의 기본 연결 방식은 프로젝트 옵션 대화 상자의 플렉스 빌드 경로 화면

에서 드롭다운 메뉴를 통해 바꿀 수 있다. SDK 클래스가 메인 애플리케이션 SWF 파일로 함

께 컴파일되게 하려면 프레임워크 연결 방식을 소스 병합 방식으로 설정하면 된다. 이와 같이

수정하고 저장한 후 플래시 빌더 메뉴에서 Project Clean을 선택하고 OK를 눌러 프로젝트

의 애플리케이션들을 재빌드해 보자. 결과 파일의 크기가 훨씬 커졌지만 웹사이트에 업로드할

파일 수가 줄어든 것을 확인할 수 있을 것이다.

배포 버전의 테스트

플렉스 웹 애플리케이션의 배포 버전을 테스트하려면 웹 브라우저에서 HTML 래퍼 파일을 열면

된다. 구체적인 절차는 다음과 같다.

1. 패키지 익스플로러 뷰에서 배포 빌드 폴더를 열고 HTML 래퍼 파일을 찾는다. 이 파일은

애플리케이션과 이름이 같고 파일 확장자가 . html인 파일이다.

2. HTML 파일을 마우스 오른쪽 클릭하고 Open With Web Browser를 선택한다.

이렇게 하면 그림 3.11처럼 이클립스 편집기 뷰 내에서 웹 브라우저가 열릴 것이다.

그림 3.11 이클립스 편집기 뷰에서의 배포 버전 실행


주의

앞의 설명을 따라 배포 빌드를 실행할 때는 항상 애플리케이션이 설정한 웹 서버가 아니라 시

스템의 로컬 파일에서 열린다. 애플리케이션을 웹 서버에서 테스트해야 한다면 서버를 수동으

로 설정하거나 bin-release 폴더를 웹 서버의 도큐먼트 루트 폴더에 둔 다음 적절한 URL을

사용해 웹 브라우저에서 파일을 열어야 한다.

배포 빌드의 배포

애플리케이션의 배포 빌드를 배포하려면 FTP나 웹사이트에 대한 파일 배포 시 주로 사용하는

기타 방식을 통해 배포 버전 폴더의 파일을 전부 웹사이트로 업로드하면 된다. 이때 업로드할 파

일에는 다음과 같은 파일들이 들어간다.

▶ 컴파일된 애플리케이션 SWF 파일

▶ 애플리케이션에서 RSL로 사용하는 프레임워크 클래스가 들어 있는 SWF 파일들

▶ HTML 래퍼 파일

▶ 자바스크립트 라이브러리 파일

▶ playerProductInstall.swf

▶ history 폴더

▶ 애플리케이션에 추가한 기타 자원

이렇게 파일을 업로드한 다음에는 사용자들에게 HTML 래퍼 페이지의 URL을 제공하면 된

다. 예를 들어 registration이라는 이름의 애플리케이션 배포 버전이 필자의 웹사이트인 www.

bardotech.com에 업로드됐다면, HTML 래퍼 파일의) 이름은 registration.html이므로 배포

URL의 경로는 www.bardotech.com/registration/registration.html이 된다.

팁

프로그래머들은 종종 사용자들이 새 브라우저 창을 통해 플렉스 애플리케이션을 실행하게 한

다. 새 브라우저 창에는 히스토리가 없으므로 사용자가 실수로 브라우저의 뒤로 가기 버튼을

눌러서 애플리케이션이 언로드될 일이 없다. 다음 HTML 코드를 사용하면 새 창에서 필자의

웹사이트 애플리케이션을 사용할 수 있다.

<a▶href="registration/registration.html"▶target="_blank"/>


애플리케이션과 기존 웹 페이지의 연동

어떤 플렉스 애플리케이션은 애플릿(웹 페이지의 일부 영역에서만 사용하는 애플리케이션) 형태

로 설계된다. HTML에 대한 지식만 조금 있다면 이러한 플렉스 애플릿도 쉽게 만들 수 있다.

1. 애플리케이션을 보여줄 웹 페이지 영역을 지정한다. 영역을 지정하려면 이미지, 액티브X

컨트롤, 자바 애플릿 공간처럼 공간을 지정하면 된다. HTML 테이블을 사용하거나 CSS

와 더불어 <div> 태그를 사용하면 페이지 영역의 크기와 위치를 제어할 수 있다.

2. 플렉스 애플리케이션 코드에서 웹 페이지 내의 애플리케이션이 사용할 수 있는 크기와

일치하도록 픽셀값을 지정해 <s:Application> 태그의 높이와 너비를 설정한다. 예를 들

어 페이지 내의 <div> 태그의 높이와 너비가 각각 300픽셀, 200픽셀이라면, 다음 코드를

사용해 플렉스 애플리케이션의 크기를 설정하면 된다.




▶▶▶▶height="300"▶width="200">

애플리케이션이 컴파일될 때 height와 width 설정은 생성되는 HTML 파일로 전달된다.

3. 생성된 HTML 래퍼 파일의 <head> 영역에 들어 있는 자바스크립트 파일과 초기화 코드

를 애플리케이션을 보여줄 페이지의 <head> 영역에 모두 복사한다.

4. 애플리케이션을 보여줄 웹 페이지 내에 id가 ¦ashContent인 <div> 엘리먼트를 만든다.

주의

웹 서버에 플렉스 애플릿을 배포할 때도 앞에서와 같은 파일들이 모두 포함됐는지 확

인한다. 즉, 자바스크립트 라이브러리, 히스토리 파일, 업그레이드 설치 SWF 파일

(playerProductInstall.swf)이 모두 포함돼야 한다.

이제 그림 3.12와 같이 애플리케이션이 HTML 페이지의 일부처럼 보이지만 이때도 프로그래

밍한 기능이 모두 제대로 동작한다.

플렉스 애플리케이션과 드림위버 연동

드림위버는 애플리케이션 개발자가 아닌 웹사이트 개발자들이 자주 사용하는 개발 도구다. 컴

파일된 플렉스 애플리케이션은 결국 플래시 문서이므로 드림위버의 웹 페이지 코드 생성 기능을

사용하면 플렉스 애플리케이션을 기존 웹 페이지로 불러올 수 있다.


플렉스 애플리케이션

그림 3.12 | HTML 파일에서 애플릿 형태로 실행 중인 플렉스 애플리케이션

주의

드림위버를 사용해 플렉스 애플리케이션 웹 페이지와 연동할 때는 드림위버에서 플렉스 애플

리케이션을 단순 SWF 파일로 처리하기 때문에 히스토리 관리 기능이 연동되지 않는다.

노트

이 절에서 설명하는 절차는 드림위버 MX를 시작으로 최신 드림위버 버전 모두에 똑같이 적용

할 수 있다. 하지만 결과로 생성되는 웹 페이지 코드는 드림위버 버전에 따라 조금씩 다르다.

필자가 여기서 설명한 코드는 드림위버 CS4와 드림위버 CS5의 생성 코드와 일치한다.

다음 절차를 따라 하면 드림위버 CS4를 사용해 플렉스 애플리케이션을 웹 페이지와 연동할

수 있다.

1. 플래시 빌더 메뉴에서 Project Properties를 선택한다.

2. 프로젝트 속성 대화상자에서 플렉스 빌드 경로 화면을 연다.

3. 프레임워크 연결 방식을 코드 병합 방식으로 설정하고 OK를 누른다. 이렇게 하면 드림위

버의 웹 페이지와 연동할 수 있는 단일 애플리케이션 SWF를 만들 수 있다.

4. 플렉스 애플리케이션 코드에서 <s:Application> 태그의 높이와 너비를 웹 페이지에서 사

용할 수 있는 높이와 너비에 맞게 특정 픽셀값으로 설정한다. 예를 들어 웹 페이지에 높이

가 150 픽셀, 너비가 250 픽셀인 <div>가 있다면 플렉스 애플리케이션에서 다음 코드를

사용해 크기를 조절할 수 있다.





▶▶▶▶height="250"▶width="150">

5. 플래시 빌더 메뉴에서 Project Export Release Build를 선택한다. 나머지 대화상자를

모두 통과해 애플리케이션 배포 버전을 생성한다.

6. 배포 버전 폴더에 있는 애플리케이션 SWF 파일을 드림위버 사이트로 복사한다.

7. 드림위버에서 플렉스 애플리케이션을 보여줄 페이지 영역에 마우스를 놓는다.

8. 드림위버 메뉴에서 Insert Media SWF를 선택한다. 그림 3.13에 보이는 것처럼 찾기

대화상자가 나오면 플래시 문서를 선택한다.

그림 3.13 | 드림위버에서 플렉스 애플리케이션 플래시 문서로 선택하는 화면

9. 플렉스 애플리케이션 SWF 파일을 선택한다.

10. 그림 3.14 같은 Object Tag Accessibility Attributes 대화상자가 나타나면 스크린 리더기

를 사용해 웹사이트를 방문하는 사람들에게 보여줄 제목을 입력한다. 애플리케이션은

그림 3.15처럼 초기에는 회색 사각형 형태로 보이게 된다.

팁

드림위버에서는 Assets 패널에서 플래시 문서를 드래그하거나 선택해 플래시 문서 삽입 절차

를 시작할 수도 있고 키보드 단축키인 Ctrl+Alt+F(윈도우), +Alt+F(맥)를 사용해 플래시를

삽입할 수도 있다.


그림 3.14 | 드림위버에서의 접근성 어트리뷰트 설정

그림 3.15 | 비활성화된 애플리케이션

11. 드림위버의 디자인 뷰에서 비활성화된 SWF 파일을 선택하고 속성 패널(그림 3.16)의 재

생 버튼을 눌러 애플리케이션을 실행한다. 애플리케이션이 드림위버에서 로드되는 게 보

일 것이다.

12. 애플리케이션 미리보기를 멈추려면 속성 패널에서 정지 버튼을 클릭하면 된다.

13. View Live View를 선택하거나 문서 툴바에 있는 Live View 버튼을 클릭하면 페이지

를 미리 볼 수 있다. 라이브 뷰를 마치려면 버튼을 다시 누르면 된다.

14. 웹 페이지를 저장한다.

클릭 시 플렉스 애플리케이션을 미리볼 수 있다

그림 3.16 | 드림위버에서 애플리케이션을 로드하려면 재생 버튼을 누르면 된다.

팁

드림위버 CS4의 새로운 라이브 뷰 기능을 사용하면 플렉스 애플리케이션을 포함한 전체 페이

지를 미리 볼 수 있다.


주의

플래시 프로페셔녈이 설치된 상태에서 드림위버의 속성 패널에서 편집 버튼을 누르면 플래시

저작 도구가 실행되고 SWF 파일의 소스에 해당하는 FLA 파일을 묻는 대화상자가 나타난다.

하지만 플렉스에서 SWF 파일을 만든 경우 이런 파일이 있을리가 만무하다. 플렉스 애플리케

이션은 플래시 저작 도구에서는 편집할 수 없다.

그림 3.17에 보이는 것처럼 드림위버 CS4와 CS5에서 웹 페이지를 저장하면 swfobject_

modi°ed.js와 expressInstall.swf라는 이름의 파일이 사이트에 추가됐음을 알리는 대화상자가

나타난다. 이들 파일은 플래시 빌더에서 자동으로 생성해 준 swfobject.js, playerProductInstall.

swf 파일과 같은 용도의 파일로서 플렉스 애플리케이션을 제대로 보여주려면 웹사이트에 함께

배포해야 한다.

그림 3.17 | 드림위버에서는 사이트에 자바스크립트 라이브러리를 추가해 준다.

주의

본래 드림위버가 플렉스 애플리케이션 구동에 필요한 플래시 플레이어 버전을 감지해 해당 버

전에 맞는 HTML 코드를 생성하는 게 맞지만 드림위버는 가끔 버전을 오해해 다음과 같은 코

드를 생성할 수 있다.

<param▶name="swfversion"▶value="6.0.65.0"▶/>

이때는 코드를 다음과 같이 수정해 애플리케이션 구동에 플래시 플레이어 10 또는 그 이상 버

전이 필요하다는 사실을 알려주면 된다.

<param▶name="swfversion"▶value="10.0.0"▶/>▶


정리

이 장에서는 플래시 빌더 4를 사용해 간단한 플렉스 프로젝트와 애플리케이션을 만들고 관리하

는 법을 설명했다. 이 장에서는 배운 내용은 다음과 같다.

▶ 플래시 빌더를 사용할 때는 플렉스 프로젝트를 통해 플렉스 애플리케이션을 개발한다.

▶ 플렉스 애플리케이션은 SWF 파일로 컴파일되고 배포 시 추가 지원 파일이 필요하다.

▶ html-template 폴더에 있는 파일들은 동적으로 생성되는 HTML 래퍼 파일에 대한 템플

릿 파일들이다.

▶ 기본 bin-debug 폴더에 들어 있는 컴파일된 파일들은 디버깅 및 테스트 용도이며 웹사이

트 배포 버전보다 파일 크기가 훨씬 크다.

▶ 웹 브라우저용으로 배포하는 플렉스 애플리케이션에서는 오픈소스 SWFObject 자바

스크립트 라이브러리를 사용해 플래시 플레이어를 로드하며 애플리케이션을 보여주는

HTML 코드를 런타임 시에 동적으로 생성한다.

▶ 웹사이트에 배포할 플렉스 애플리케이션은 배포 버전으로 만들어야 한다.

▶ 배포 폴더에는 주로 배포에 사용할 단일 애플리케이션만 들어간다.

▶ 애플리케이션 크기를 적절히 조절한 후 동적으로 생성된 HTML 파일의 코드를 웹 페이

지로 복사하면 플렉스 애플리케이션 기존 웹 페이지와 연동할 수 있다.

▶ 드림위버 CS4를 사용하면 플렉스 애플리케이션을 웹 페이지로 불러와 연동할 수 있다.