예제로 배우는 Adobe 플렉스

제1부 플렉스 준비 코스

1장 RIA의 표준, 플렉스 41
1.1 리치 인터넷 애플리케이션의 등장 42
1.2 플렉스의 탄생 45
1.2.1 플렉스란? 45
1.2.2 플렉스와 플래시 46
1.3 플렉스의 역사 51
1.3.1 플렉스 1 51
1.3.2 플렉스 1.5 52
1.4 웹의 역사를 다시 쓴 플렉스 53
1.4.1 플렉스 2 53
1.4.2 플렉스 3 57
1.4.3 웹 2.0을 위한 플렉스 60
1.5 요약 65

2장 플렉스 개발 맛보기 67
2.1 플렉스 개발환경 구축 68
2.1.1 플렉스 개발환경 구축시 체크할 사항 68
2.1.2 실습을 위한 환경설정 70
2.1.3 플렉스 빌더 설치 72
2.1.4 라이프사이클 데이터 서비스 2 설치 77
2.1.5 기존 WAS에 라이프사이클 데이터 서비스 설치하기 81
2.1.6 플렉스 SDK 설치 83
2.1.7 플렉스 SDK 사용법 84
2.1.8 플렉스 데이터 비주얼라이제이션 88
2.2 Hello Flex! 90
2.2.1 플렉스 프로젝트 생성 90
2.2.2 화면 구성 94
2.2.3 HelloFlex 실행 98
2.3 요약 100

제2부 플렉스 기초 코스

3장 플렉스 빌더: 플렉스를 위한 최적의 개발툴 105
3.1 플렉스 빌더 인터페이스 구성 106
3.1.1 워크벤치 107
3.1.2 퍼스펙티브 108
3.1.3 뷰 110
3.1.4 에디터 113
3.2 플렉스 빌더를 이용한 개발 118
3.2.1 Flex Development 퍼스펙티브 119
3.2.2 네비게이터 뷰를 이용한 파일과 프로젝트 관리 120
3.2.2.1 프로젝트 관리 120
3.2.2.2 프로젝트 내의 리소스 관리 121
3.2.2.3 프로젝트 속성 관리 122
3.2.3 MXML 에디터를 이용한 플렉스 화면 디자인 136
3.2.4 스테이트 뷰를 이용한 화면 전환 146
3.2.5 프로퍼티 뷰를 이용한 플렉스 컴포넌트 속성 관리 150
3.2.6 아웃라인 뷰를 이용한 플렉스 컴포넌트 중첩 관계 보기 151
3.2.7 컴포넌트 뷰를 이용한 컴포넌트 리스트 보기 154
3.2.8 프러블럼 뷰를 이용한 에러 코드 수정 157
3.3 플렉스 디버깅 158
3.3.1 Flex Debugging 퍼스펙티브 158
3.3.2 디버그 뷰 159
3.3.3 콘솔 뷰 163
3.3.4 브레이크포인트 뷰 164
3.3.5 베리어블 뷰 166
3.3.6 익스프레션 뷰 168
3.4 요약 171

4장 MXML을 이용한 플렉스 컴포넌트 사용 173
4.1 플렉스 기본 문법 174
4.1.1 MXML의 기본 문법 174
4.1.2 XML의 개념 이해 176
4.2 MXML과 플렉스 컴포넌트의 관계 이해 180
4.3 플렉스 컴포넌트의 기본 183
4.3.1 컨트롤 컴포넌트 183
4.3.1.1 Button 185
4.3.1.2 LinkButton 186
4.3.1.3 CheckBox 187
4.3.1.4 RadioButton 188
4.3.1.5 RadioButtonGroup 188
4.3.1.6 ColorPicker 190
4.3.1.7 DateChooser 190
4.3.1.8 DateField 191
4.3.1.9 HSlider/VSlider 194
4.3.1.10 NumericStepper 194
4.3.1.11 Label 197
4.3.1.12 Text 197
4.3.1.13 TextArea 198
4.3.1.14 TextInput 198
4.3.1.15 RichTextEditor 200
4.3.1.16 Image 202
4.3.1.17 SWFLoader 202
4.3.1.18 ProgressBar 203
4.3.1.19 VideoDisplay 204
4.3.2 데이터를 함께 보여주는 컨트롤 210
4.3.2.1 데이터 바인딩 210
4.3.2.2 ComboBox 216
4.3.2.3 Tree 219
4.3.2.4 List 223
4.3.2.5 TileList 223
4.3.2.6 HorizontalList 228
4.3.2.7 DataGrid 229
4.3.3 데이터 모델 232
4.3.3.1 배열 데이터의 표현 232
4.3.3.2 XML 데이터의 표현 233
4.3.4 레이아웃 컨테이너 236
4.3.4.1 네비게이터 컨테이너 241
4.3.5 차트 컴포넌트 250
4.3.5.1 데이터 보는 방법에 따른 차트의 종류에 대한 이해 251
4.3.5.2 차트 속성에 대한 이해 252
4.3.5.3 차트가 사용할 데이터 구조의 이해 253
4.4 요약 261

5장 액션스크립트 3.0 263
5.1 액션스크립트 소개 264
5.1.1 액션스크립트의 버전 264
5.1.2 액션스크립트 3.0의 특징 265
5.2 MXML에서 액션스크립트의 사용 267
5.3 액션스크립트의 문법 269
5.4 클래스 선언 276
5.4.1 패키지 선언 276
5.4.2 클래스의 정의 278
5.4.3 클래스 변수 종류: 인스턴스, 로컬, 스태틱 280
5.4.4 클래스 생성자 282
5.4.5 클래스의 확장 283
5.5 액션스크립트 연산자 285
5.6 이벤트 처리 287
5.6.1 시스템에서 발생하는 이벤트 287
5.6.2 사용자의 동작과 관련된 이벤트 288
5.6.3 이벤트 객체 289
5.7 액션스크립트 실전 예제 290
5.7.1 키보드 이벤트 처리 예제 290
5.7.2 단축키 처리 예제 292
5.7.3 Click 이벤트 및 MenuEvent 처리 예제(계산기) 294
5.7.4 Mouse 이벤트 처리 예제(달력) 297
5.8 요약 302

제3부 플렉스 2 핵심 코스

6장 RIA를 위한 플렉스 스타일 305
6.1 플렉스 화면 구성 가이드 306
6.1.1 플렉스 화면 구성 원칙 306
6.1.2 플렉스 화면을 구성할 때 피해야 할 요소 311
6.2 플렉스 화면 구성 작업 312
6.2.1 화면 크기 정하기 312
6.2.1.1 Size 속성 설정 312
6.2.1.2 Layout Constraints 속성 설정 317
6.2.2 화면 분할 319
6.2.2.1 수직/수평으로 화면을 분리할 때:
VBox/HBox, VDividedBox/HDividedBox 319
6.2.2.2 컴포넌트 레이아웃에 따른 사이즈 결정 원리 320
6.2.2.3 가로 세로로 들어갈 컴포넌트들을 나열해서 보여줄 때:
Grid, Tile 322
6.2.2.4 기타 컨테이너 323
6.2.2.5 컨테이너 속성 설정을 통한 레이아웃 설정 325
6.2.3 적절한 컨트롤의 사용 326
6.2.4 화면 전환 328
6.3 이펙트의 활용 330
6.3.1 어떤 경우에 이펙트를 줄 것인가? 331
6.3.2 어떤 이펙트를 줄 것인가? 340
6.3.3 적용하는 이펙트의 속성을 어떻게 변화시킬까? 347
6.3.3.1 이펙트의 속성 시작값과 종료값의 변화 347
6.3.3.2 이펙트가 플레이되는 시간: duration 348
6.3.3.3 이펙트 적용 수치 변화: easingFunction 348
6.3.3.4 이펙트 적용 대상: target, targets 350
6.3.3.5 컴포지트 이펙트 352
6.4 플렉스 스타일 353
6.4.1 스타일과 프로퍼티 354
6.4.2 컴포넌트 공통 스타일 355
6.4.2.1 폰트 관련 스타일 355
6.4.2.2 외부 간격 스타일 357
6.4.2.3 내부 내용간 간격 설정 스타일 358
6.4.2.4 내부 컴포넌트들 간의 간격 설정 360
6.4.3 컨트롤 계열에 적용 가능한 스타일 361
6.4.3.1 아이콘 설정 관련 스타일 361
6.4.3.2 스킨 설정 관련 스타일 361
6.4.3.3 컴포넌트 내부 글자 설정 관련 스타일 363
6.4.4 컨테이너 계열에 적용 가능한 스타일 364
6.4.4.1 배경 설정 관련 스타일 364
6.4.4.2 테두리 설정 관련 스타일 366
6.4.5 스타일 상속 368
6.4.6 스타일 적용 369
6.4.6.1 MXML 태그에서 스타일 정의 369
6.4.6.2 CSS에서 스타일 정의 370
6.4.6.3 액션스크립트에서 스타일 정의 375
6.4.6.4 getStyle()과 setStyle() 메소드 377
6.5 플렉스 프로젝트별 스타일 구현 방안 378
6.5.1 플렉스 프로젝트별 스타일 접근 방향 378
6.5.2 플렉스 스타일의 일괄 정의 방법: 테마 379
6.5.3 플렉스 애플리케이션에 테마 적용 방법 380
6.6 요약 381

7장 플렉스 데이터 연동 384
7.1 플렉스 데이터 연동 개요 384
7.1.1 플렉스 데이터 연동 원리 384
7.1.1.1 플렉스가 제공하는 데이터 연동 방법 384
7.1.1.2 플렉스의 데이터 통신 방식 비교 386
7.1.1.3 HTTPService 방식 388
7.1.1.4 WebService 방식 390
7.1.1.5 RemoteObject 방식 393
7.1.1.6 DataService 방식 397
7.2 HTTPService 401
7.2.1 HTTPService의 API 개요 401
7.2.2 XML 데이터를 HTTPService로 연결하기 403
7.2.3 crossdomain.xml 405
7.2.4 result 이벤트와 fault 이벤트에 대한 핸들러 406
7.2.5 DB쿼리 결과를 XML로 리턴하는 JSP와 연동 409
7.2.6 JSP 프로그램에 파라미터 전송하기 412
7.2.7 Named HTTPService 414
7.2.7.1 config 파일 설정 414
7.2.7.2 Named HTTPService의 예제 417
7.2.8 액션스크립트를 이용한 HTTPService 호출 419
7.3 WebService 421
7.3.1 WebService의 API 개요 421
7.3.2 WebService의 호출 예제 422
7.3.3 액션스크립트를 이용한 WebService의 호출 예제 425
7.3.4 닷넷 WebService의 호출 예제 428
7.4 RemoteObject 430
7.4.1 RemoteObject의 API 개요 431
7.4.2 RemoteObject의 기본 예제 431
7.4.3 RemoteObject를 사용하는 플렉스 애플리케이션 작성 434
7.4.4 다중 메소드 RemoteObject의 사용 예제 436
7.4.4.1 RemoteObject 사용 환경 설정 436
7.4.4.2 다중 메소드를 호출하는 RemoteObject 플렉스 애플리케이션
작성 439
7.4.5 액션스크립트를 이용한 RemoteObject의 사용 예제 442
7.5 메시지 서비스 444
7.5.1 메시지 서비스의 API 개요 444
7.5.1.1 Producer 444
7.5.1.2 Consumer 445
7.5.2 메시지 서비스를 이용한 채팅 예제 구현 446
7.5.2.1 메시지 서비스 구현을 위한 환경 설정 446
7.5.2.2 메시지 서비스를 이용한 플렉스 채팅 애플리케이션 작성 448
7.5.3 메시지 서비스를 이용한 실시간 모니터링 예제 구현 451
7.5.3.1 데이터를 공급하는 자바빈즈 구현 451
7.5.3.2 Feed 클래스 컨트롤을 위한 RemoteObject 설정 453
7.5.3.3 메시지 서비스에서 사용할 RTMP 채널 설정 454
7.5.3.4 모니터링을 위한 플렉스 애플리케이션 작성 456
7.6 데이터 관리 서비스 458
7.6.1 DataService의 API 개요 458
7.6.2 DataService를 이용한 데이터 동기화 예제 구현 459
7.6.2.1 MemberDAO 클래스 작성 460
7.6.2.2 MemberAssembler 클래스 작성 463
7.6.2.3 MemberAssembler 클래스에 대한 destination 설정 464
7.6.2.4 DataService를 사용하는 플렉스 애플리케이션 작성 466
7.7 요약 469

제4부 플렉스 2 응용 코스

8장 플렉스 커스텀 컴포넌트 473
8.1 커스텀 컴포넌트 개요 474
8.1.1 커스텀 컴포넌트란? 474
8.1.2 커스텀 컴포넌트를 만드는 이유 475
8.1.3 상용 커스텀 컴포넌트 477
8.1.4 컴포넌트화와 코딩 철학 479
8.2 MXML 컴포넌트 480
8.2.1 MXML 컴포넌트의 개요 480
8.2.2 기본 컴포넌트를 확장한 MXML 컴포넌트 만들기 481
8.2.2.1 새 프로젝트 생성 481
8.2.2.2 패키지 경로를 위한 폴더 생성 482
8.2.2.3 MXML 컴포넌트 정의 패널 열기 483
8.2.2.4 MXML 컴포넌트의 속성과 함수 정의 484
8.2.2.5 메인 애플리케이션에서 MXML 컴포넌트의 사용 486
8.2.3 사용자 정의 이벤트를 이용하는 MXML 컴포넌트 만들기 487
8.2.3.1 사용자 정의 이벤트를 사용하는 이유 487
8.2.3.2 사용자 정의 이벤트 발생시키기 488
8.2.3.3 사용자 정의 이벤트 만들기 491
8.3 액션스크립트 컴포넌트 495
8.3.1 액션스크립트 컴포넌트의 개요 495
8.3.2 액션스크립트 컴포넌트 만들기 496
8.3.2.1 액션스크립트 프로젝트 생성 496
8.4 SWC 컴포넌트 501
8.4.1 SWC 컴포넌트의 개요 501
8.4.2 SWC 컴포넌트 만들기 502
8.4.2.1 플렉스 라이브러리 프로젝트 기본 정보 정의 502
8.4.2.2 액션스크립트 클래스 정의 503
8.4.2.3 액션스크립트 클래스 수정 504
8.4.2.4 SWC 컴포넌트 빌드 504
8.4.3 다른 프로젝트에서 SWC 컴포넌트 사용하기 505
8.5 오픈소스 플렉스 컨포넌트 사용하기 508
8.5.1 오픈소스 플렉스 컴포넌트 공유 사이트 508
8.5.2 Flexlib 컴포넌트 적용하기 512
8.6 요약 515

9장 플렉스 성능과 개발생산성 향상 517
9.1 성능 향상 가이드 518
9.1.1 플렉스 애플리케이션 아키텍처 518
9.1.2 플렉스 성능 향상 요소 520
9.1.2.1 플렉스 성능 향상 공식 520
9.1.2.2 애플리케이션 사이즈 축소 방안 521
9.1.3 성능 향상 테크닉 522
9.1.4 ModuleLoader 사용 방법 524
9.1.4.1 모듈 생성 525
9.1.4.2 모듈과 통신하기 529
9.1.5 플렉스 빌더의 메모리와 성능 프로파일러 531
9.1.5.1 프로파일러의 기능 531
9.1.5.2 플래시플레이어 가비지 컬렉션의 특징 532
9.2 개발생산성 향상 가이드 541
9.2.1 개발환경 구축 가이드 541
9.2.1.1 HTTP 모니터링툴 설치 541
9.2.1.2 trace 로그 보기 543
9.2.1.3 trace 로그뷰 플러그인 설정(eclipse-flair 플러그인) 546
9.2.1.4 에디트 플러스에서 플렉스 개발 환경 구축 549
9.2.2 개발 생산성 향상을 위한 플렉스 빌더의 기능 552
9.2.2.1 데이터베이스로부터 플렉스 애플리케이션 코드 자동 생성 552
9.2.2.2 웹서비스 코드 자동 생성 기능 564
9.2.2.3 소스코드 리팩토링 568
9.3 플렉스 개발자를 위한 시스템 아키텍처 가이드 569
9.3.1 플렉스 애플리케이션 배포 569
9.3.1.1 애플리케이션을 보내는 쪽: 서버 570
9.3.1.2 애플리케이션을 받아서 실행하는 쪽: 클라이언트 570
9.3.2 RSL을 사용한 애플리케이션 배포 572
9.3.2.1 RSL을 적용할 때 고려해야 할 사항 573
9.3.2.2 RSL의 종류 573
9.3.3 애플리케이션 최적화와 자동화를 위한 MXMLC 명령어 사용법 575
9.3.3.1 익스터널 라이브러리 적용 컴파일 576
9.3.3.2 인증 프레임웍 RSL 컴파일 577
9.3.3.3 플렉스 컴파일러 쉘(FCSH)의 사용 579
9.4 요약 580

제5부 플렉스 실전 코스

10장 플렉스 실전 프로젝트와 UX 가이드 585
10.1 플렉스 프로젝트 도입 가이드 586
10.1.1 플렉스 프로젝트 특성의 이해 586
10.1.1.1 플렉스 UX의 3요소 587
10.1.2 플렉스 프로젝트 유형 592
10.1.2.1 적용 유형에 따른 분류 592
10.1.2.2 적용 범위에 따른 분류: 전체 플렉스/부분 플렉스 597
10.1.3 플렉스 프로젝트 태스크 599
10.1.4 플렉스 프로젝트 팀원의 구성 600
10.1.4.1 플렉스 프로젝트 역할 정의 601
10.1.4.2 플렉스 프로젝트 업무영역의 중첩성 601
10.2 UX 향상을 위한 디자이너와 개발자의 협업 602
10.2.1 디자이너와 개발자의 협업 602
10.2.1.1 협업 프로세스 603
10.2.2 디자이너와 개발자 협업을 위한 스킬셋 604
10.2.2.1 플렉스 빌더의 CSS 에디터 605
10.2.2.2 런타임 CSS 608
10.2.2.3 Flex Component Kit을 활용한 플래시와 플렉스의 협업 613
10.2.3 UX 향상을 위한 고려사항 627
10.2.3.1 UI와 Usability와 UX 627
10.2.3.2 UX의 구현 수준 평가 628
10.2.3.3 UX 기술 가이드 629
10.3 요약 631

11장 플렉스 프로젝트 팁 633
11.1 프레임웍 아키텍처 634
11.1.1 프레임웍의 필요성 634
11.1.2 프레임웍의 고려사항 635
11.1.3 플렉스 프레임웍 패턴 635
11.1.4 외부 인터페이스 정의 637
11.1.4.1 플렉스에서 제공하는 외부 시스템 연동방법 638
11.1.4.2 외부 인터페이스와 연동 방법 639
11.2 캔곰 프레임웍 640
11.2.1 캔곰 프레임웍의 구성 640
11.2.2 캔곰 프레임웍의 작동원리 642
11.2.3 캔곰 프레임웍의 구현 644
11.2.3.1 캔곰 프로젝트 생성 644
11.2.3.2 캔곰 폴더 만들기 645
11.2.3.3 view 디렉토리에서의 작업 646
11.2.3.4 vo 디렉토리에서의 작업 648
11.2.3.5 business 디렉토리에서의 작업 651
11.2.3.6 control 디렉토리에서의 작업 653
11.2.3.7 commands 디렉토리에서의 작업 655
11.2.3.8 model 디렉토리에서의 작업 656
11.2.3.9 캔곰 프레임웍의 작동 658
11.3 플렉스 실전에 도움이 되는 예제 660
11.3.1 아웃룩 예제 660
11.3.2 플렉스 WAS 세션 처리 예제 661
11.3.3 플렉스에서 팝업 윈도우 띄우고 컨트롤하기 662
11.3.4 Multi 헤더와 item Renderer를 적용한 DataGrid 예제 663
11.3.5 HTTPService를 이용한 CRUD(데이터 입력, 수정, 삭제 조회) 예제 663
11.3.6 Ajax와 플렉스 664
11.3.7 다국어 처리 예제 665
11.3.7.1 로케일 모듈 컴파일 방법 666
11.3.8 테마, MDI, 다국어 처리 예제 667
11.3.9 ExternalInterface 예제 668
11.3.10 OLAPGrid 예제 669
11.3.11 플렉스 애플리케이션간 파라미터 전송 670
11.4 플렉스 개발 관련 에러 메시지와 해결방법 670
11.5 플렉스 참고자료 677
11.5 1 자주 들어오는 질문 677
11.5.1.1 자바(JVM, JRE) 관련 677
11.5.1.2 데이터 연동 관련 678
11.5.1.3 기타 플렉스 관련 680
11.5.1.4 이 책에 들어있는 플렉스 예제 관련 681
11.5.2 플렉스 관련 즐겨찾기 정리 683
11.6 요약 684

부록 어도비 에어 개발 가이드

A 어도비 에어의 개요 686
A.1 어도비 에어 소개 686
A.2 에어의 주요 기능 687
A.3 어도비 에어 개발환경 687
A.3.1 어도비 에어 런타임 설치 687
A.3.2 에어 SDK 설치 689
A.4 에어 애플리케이션 개발 맛보기 689
A.5 에어 애플리케이션 적용 사례 691

B 에어의 새로운 기능 693
B.1 파일 693
B.1.1 로컬 자원 접근 제한 693
B.1.2 어도비 에어의 파일 API 소개 694
B.1.3 File 클래스 694
B.2 로컬 데이터베이스 699
B.2.1 로컬 데이터베이스 API 700
B.2.2 데이터베이스 실행 방식 702
B.2.3 데이터베이스 연결(생성) 702
B.2.4 SQL 쿼리문 실행 704
B.3 네이티브 윈도우 707
B.3.1 NativeWindow 관련 클래스 707
B.3.2 윈도우 크롬 707
B.3.3 윈도우 생성 709
B.3.4 윈도우 관리 710
B.4 내장 브라우저 710
B.4.1 웹 브라우저 만들기 711

C 에어 애플리케이션의 배포와 업데이트 712
C.1 *.air 파일 패키징 712
C.1.1 에어 디스크립터 파일 712
C.1.2 에어 배포파일(*.air) 작성 715
C.2 배포 방법 724
C.2.1 기본적인 배포 724
C.2.2 웹을 통한 배포 724
C.3 애플리케이션 업데이트 729
C.3.1 Updater 클래스 729
C.3.2 air 파일을 사용자 PC로 다운로드하기 730

D 에어의 활용과 윈도우 애플리케이션 연동 731
D.1 에어로 개발 가능한 응용 범위 732
D.2 AIRConnector를 이용한 윈도우 애플리케이션 연동 734
D.2.1 윈도우 애플리케이션과 에어 연동 개요 735
D.2.2 AIRConnector의 활용 736
D.3 에어의 미래