플렉스 4.5 플래시 빌더 정석(OKGOSU의)(CD1장포함)(에이콘 웹 프로페셔널 시리즈 31)

이 책에서는 플렉스 입문자가 처음 플렉스를 배울 때 반드시 알아야 할 플렉스의 기초와 개발툴인 플래시 빌더 사용법, 플렉스 컴포넌트를 이용해 화면을 구성하는 방법을 다룬다. 또한 중급자를 위해 커스텀 플렉스 컴포넌트를 만들 때 알아야 할 이벤트 처리와 컴포넌트 작성법, CSS와 스킨 컴포넌트, UI컴포넌트의 커스터마이징 방법을 다룬다. 그리고 서버 데이터를 보여주기 위해 XML, 웹서비스, 오픈 API 연동 방법과 BlazeDS, LCDS 서버 설정과 연동 방법을 다룬다. 후반부에서는 웹뿐만 아니라 데스크탑과 모바일에서 플렉스 앱을 개발하기 위해 프로젝트 생성과 설정 및 주요 API 이해를 돕는 예제를 다룬다.



< 소개 >



어도비 플렉스(Adobe Flex)는 XML 태그로 된 소스파일(*.mxml)을 컴파일해 웹 뿐만 아니라, 데스크탑, 모바일 기기에서 구동 가능한 애플리케이션을 만들어내는 개발 플랫폼이다. 아이폰이나 안드로이드 앱을 만드려면 오브젝티브C나 자바 같은 언어를 익혀야 하지만 플래시 빌더 4.5에서는 프로젝트를 만들 때 타겟 플랫폼을 지정하고 액션스크립트를 이용하여 개발하면 실행 가능한 애플리케이션을 개발할 수 있다.



초창기 플렉스 버전은 웹 브라우저의 플래시 플레이어에서만 구동 가능한 실행파일(*.swf)만 만들어냈지만, 플렉스 3 버전에서는 데스크탑 애플리케이션(*.air), 플렉스 4.5 버전에서는 스마트폰에서 실행 가능한 애플리케이션을 만들 수 있게 됐다. 2011년 말이면 안드로이드폰 뿐만 아니라 아이폰, 블랙베리 플레이북에서도 구동 가능한 앱을 플렉스 만으로 만들어 낼 수 있다.



이 책에서는 플렉스 입문자들이 처음 플렉스를 배울때 반드시 알아야 할 플렉스의 기초 문법부터 개발툴인 플래시 빌더 사용법, 플렉스 컴포넌트를 이용하여 화면을 구성하는 방법을 다룬다. 그리고 기존 플렉스 3 이전 버전 사용자를 위한 플렉스 4.x 마이그레이션 가이드도 포함했다. 그리고 서버 데이터를 보여주기 위해 XML, 웹서비스, 오픈 API 연동 방법과 BlazeDS, LCDS서버 설정과 연동 방법을 다룬다. 플렉스 중급자를 위해 커스텀 플렉스 컴포넌트를 만들기 위해 알아야할 이벤트 처리와 컴포넌트 작성법, CSS와 스킨 컴포넌트, UI컴포넌트의 커스터마이징 방법을 다룬다. 그리고 웹뿐만 아니라 데스크탑과 모바일에서 플렉스 앱을 개발하기 위해 프로젝트 생성과 설정 및 주요 API 이해를 돕는 예제를 다룬다.



★ 이 책에서 다루는 내용 ★



■ 플렉스 개발자라면 반드시 알아야 할 플렉스 완전정복

플렉스 입문자를 위한 플렉스 기초 문법부터, 화면 구성, 이벤트 처리, 오픈 API, BlazeDS, LCDS 서버 연동까지 단계적으로 구성했다.



■ 플렉스 API의 개념을 직관적으로 이해할 수 있게 구성한 풀 컬러 편집

책 내용을 눈으로 보고 쉽게 이해할 수 있도록 각 개념마다 풀소스 예제 코드와 풀 컬러의 실행 결과화면을 넣어 더욱 쉽고 빠르고 재미있게 플렉스를 배울 수 있다.



■ 플렉스 3에서 플렉스 4.x로 마이그레이션

기존 플렉스 사용자가 플렉스 4.x 버전으로 마이그레이션하기 위한 가이드와 팁 수록



■ 플렉스 컴포넌트 프로그래밍

플렉스 중급자를 위한 액션스크립트 문법과 이벤트 처리부터 UI컴포넌트를 커스터마이징하는 방법까지 다룬다.



■ 웹뿐만 아니라 데스크탑과 모바일 애플리케이션 개발

플렉스를 이용해 웹 애플리케이션뿐만 아니라 데스크탑 애플리케이션과 모바일 애플리케이션(안드로이드)을 개발하는 방법을 다룬다.



★ 이 책의 대상 독자 ★



이 책은 웹 개발자, 플래시/플렉스 개발자 그리고 학생들을 위한 책이다. 이 책을 이해하기 위해서는 웹과 플래시가 어떻게 돌아가는지 아는 수준 정도라면 충분하다. 플렉스는 빠르고 쉽게 RIA 애플리케이션을 만들어내기 위한 일종의 UI프레임워크다. 따라서 특정 기술에 대한 지식보다 독자에게 더 필요한 것은 화면을 얼마나 논리적으로 구성하고 플렉스의 컴포넌트로 만들어 낼 수 있는 분석력이다.



★ 이 책의 구성 ★



1부 플렉스 준비 코스



1장 플렉스란 무엇인가?

플렉스는 플래시의 유저 인터페이스를 XML을 이용해 만들어내는 멀티플랫폼 리치 인터넷 애플리케이션(RIA) 기술이다. 웹뿐만 아니라 데스크탑, 모바일 플랫폼에서도 구동 가능한 플렉스는 화면 구성에 필요한 다양한 컴포넌트를 제공하며, 이러한 컴포넌트를 조합해 쉽고 빠르게 UI를 만들어낼 수 있다. 1장에서는 플렉스가 어떤 것인지, 작동은 어떻게 되며 개발을 위해 알아야 할 사항은 무엇인지를 살펴본다. 그리고 플렉스4.x(4와 4.5) 버전에 들어오면서 달라진 점과, 플렉스 이전 버전을 마이그레이션할 때 체크할 사항들을 알아보자.



2장 플렉스 빨리 시작하기

플렉스 개발은 일반적으로 플래시 빌더 버전 4.5 (구 플렉스 빌더)를 이용한다. 2장에서는 플래시 빌더를 설치해 플렉스의 개발환경을 구성하고, 예제 애플리케이션을 개발해봄으로써 플렉스의 개발 과정을 이해한다. 또한 플렉스가 제공하는 전반적인 컴포넌트를 살펴본다.



2부 플렉스 기초 코스



3장 플렉스 개발 기본기

플렉스 개발을 잘하려면 개발툴, MXML 태그, 액션스크립트, 이 3가지에 익숙해져야 한다. 개발툴을 잘 사용하면 개발과 디버깅 시간을 획기적으로 줄일 수 있다. 또한 MXML은 XML 문법을 따르므로 XML이 플렉스에서 어떻게 활용되는지를 잘 이해해야 한다. MXML의 각 태그에 해당하는 컴포넌트는 액션스크립트로 만들어져 있다. 따라서 컴포넌트를 잘 활용하려면 액션스크립트의 이해가 매우 중요하다. 3장에서는 플래시 빌더 개발툴의 사용법과 플렉스 개발에 필수적인 MXML과 액션스크립트의 문법을 배울 것이다.



4장 플렉스 컴포넌트

플렉스의 보이는 화면을 구성하는 컴포넌트는 화면 구성 역할에 따라 크게 컨트롤과 컨테이너로 분류할 수 있다. 4장에서는 컨트롤, 컨테이너 컴포넌트의 종류와 사용법을 다양한 예제와 함께 다룰 것이다. 또한 컴포넌트의 외형을 정의하는 스타일의 종류와 이를 컴포넌트에 적용하기 위한 CSS의 사용법, 플렉스 4.x에서 새롭게 추가된 CSS도 함께 살펴본다. 그리고 화면 전환을 위한 스테이트와 이펙트의 사용법도 같이 배워보자.



5장 데이터 시각화 컴포넌트의 활용

플렉스를 사용하는 가장 큰 목적은 데이터를 보여주는 데 있다. 이를 데이터 시각화라고 하며, 플렉스의 컴포넌트 중 dataProvider 속성을 갖는 컴포넌트가 여기에 해당한다. 5장에서는 데이터 시각화 컴포넌트의 사용법과 이벤트와 데이터 처리 방법을 살펴본다. 그리고 데이터를 다른 컴포넌트의 형태로 바꿔서 보여주기 위한 아이템렌더러의 사용법과 차트를 활용한 데이터 시각화 방법을 같이 배워보자.



3부 플렉스 핵심 코스



6장 플렉스 커스텀 컴포넌트

플렉스 커스텀 컴포넌트는 플렉스 화면을 구성할 때 모양이나 기능이 맞지 않아 기본 컴포넌트를 수정하거나 새롭게 만든 컴포넌트다. 플렉스에서는 컴포넌트의 스킨을 변경하거나 컴포넌트의 MXML이나 액션스크립트 클래스, UI컴포넌트를 확장 정의하여 커스텀 컴포넌트를 만들 수 있다. 6장에서는 아래의 플렉스 커스텀 컴포넌트를 만드는 3가지 방법과 컴포넌트를 정교하게 제어하기 위한 이벤트 처리 방법을 같이 배워보자.



7장 XML 데이터와 오픈 API 매쉬업

플렉스는 XML과 AMF(Action Message Format) 포맷의 데이터 연동을 지원한다. XML은 JSP, PHP, ASP 같은 웹 프로그램에서 만들거나 포털사에서 제공하는 오픈 API 서비스나 웹서비스 호출을 통해 플렉스에 연동해 보여줄 수 있는 데이터 포맷이다. AMF는 텍스트가 아닌 바이너리 포맷으로 액션스크립트 객체를 송수신할 때 사용할 수 있다. 바이너리 포맷이므로 빠르고 대량의 데이터를 처리할 수 있으나 객체 변환을 위한 서버가 있어야 가능하다.



8장 BlazeDS와 LCDS 서버를 이용한 자바 연동

플렉스에서 J2EE(WAS) 서버 환경의 자바 객체 또는 프레임웍과 연동하거나 서버 푸시를 통해 실시간 통신이 가능한 애플리케이션을 만드려면 BlazeDS 서버나 LCDS 서버가 필요하다. 이때 플렉스는 바이너리 형태인 AMF 포맷으로 서버의 자바 객체를 송수신한다. 또한 특정 포트로 소켓 형태로 연결해 실시간으로 서버의 메시지를 푸시(메시징 서비스)하거나 데이터베이스의 변경 내용을 업데이트할 수도 있다. 여기서는 BlazeDS와 LCDS의 특징부터 설정 방법, 자바 객체 또는 프레임웍을 호출할 수 있는 RemoteObject, 메시지를 송수신하는 Producer와 Consumer 그리고 데이터베이스의 변경을 업데이트하는 DataService의 사용법을 배워보자.



4부 플렉스 응용 코스



9장 플렉스 데스크탑 애플리케이션 개발

플렉스 데스크탑 애플리케이션(에어 애플리케이션)은 어도비 에어(Adobe AIR, 이하 에어)의 API를 이용해 만든다. 데스크탑 에어 애플리케이션은 웹 브라우저가 아니라 데스크탑에 설치되어 실행되므로 화면 크기나 모양의 제약이 없어지고 파일, 클립보트, 프로세스 등 데스크탑 리소스에도 접근할 수 있다. 그리고 WebKit이라는 오픈소스 웹 브라우저 엔진이 내장돼 있어 표준 HTML을 지원한다. 또한 SQLite라는 오픈소스 임베드 데이터베이스가 내장돼 있어 데이터베이스를 생성해 쿼리를 할 수 있다. 여기서는 이러한 API를 비롯해 화면 제어, 데스크톱 파일 제어, 네이티브 프로세스와 인터랙션하는 에어의 핵심 API 사용법을 예제와 함께 살펴보자.



10장 플렉스 모바일 애플리케이션 개발

플렉스 모바일 애플리케이션은 안드로이드나 아이폰, 블랙베리 플레이북과 같은 스마트폰에서 작동하는 플렉스 애플리케이션이다. 개발 과정이나 작동원리는 데스크탑에서 작동하는 에어 애플리케이션과 유사하다. 에어 런타임이 플렉스 애플리케이션을 윈도우, 리눅스, 맥에서 작동하도록 하듯이, 스마트폰에 설치된 모바일 에어 런타임 앱이 플렉스 모바일 애플리케이션이 안드로이드, 아이폰, 블랙베리 플레이북에서 작동하도록 하는 원리다. 여기서는 모바일 환경에 대한 이해와 플렉스로 모바일 애플리케이션을 개발하는 과정 및 핵심 API 사용법을 예제와 함께 살펴보자.

1부 플렉스 준비 코스



1장. 플렉스란 무엇인가?

___1.1 플렉스의 이해

______1.1.1 플렉스 애플리케이션 개발과정의 이해

______1.1.2 플렉스와 플래시의 차이점

___1.2 플렉스의 화면 구성 방법

______1.2.1 플렉스 화면 구성 과정

______1.2.2 플렉스 UI 컴포넌트들: 컨트롤

______1.2.3 플렉스 UI 컴포넌트들: 데이터 시각화

______1.2.4 플렉스 UI 컴포넌트들: 레이아웃 컨테이너

______1.2.5 플렉스 UI 컴포넌트들: 네비게이터 컨테이너

___1.3. 플렉스 4.x SDK에서 달라진 사항

______1.3.1 새로 추가된 Spark 계열 컴포넌트들

______1.3.2 새로 추가된 네임스페이스들: s, fx

______1.3.3 새로 추가된 CSS 정의 방법

______1.3.4 FXG를 이용한 컴포넌트 스키닝

______1.3.5 레이아웃 정의

______1.3.6 새로운 스테이트 정의

___1.4 플렉스 4.x 버전 마이그레이션 가이드

______1.4.1 플렉스 4.x 마이그레이션 고려사항

______1.4.2. 플래시빌더에서 플렉스 3 버전을 4.x 프로젝트로 전환하기

___1.5 플렉스 4.x 모바일 적용 가이드

______1.5.1 모바일 플렉스 웹 형태

______1.5.2 모바일 플렉스 앱 형태



2장. 플렉스 빨리 시작하기

___2.1 플렉스 개발환경 구성

______2.1.1 플래시 빌더의 종류

______2.1.2 설치 전 확인 사항

______2.1.3 교재 실습을 위한 개발 환경

______2.1.4 플래시 빌더 4 설치

___2.2 플렉스 개발 맛보기

______2.2.1 플렉스 프로젝트 생성

______2.2.2 플렉스 소스 코딩

______2.2.3 플렉스 애플리케이션 컴파일과 실행

______2.2.4 플렉스 컴포넌트 둘러보기

______2.2.4.1 MXML 애플리케이션 생성

______2.2.4.2 플렉스 화면 구성과 소스 코딩

______2.2.4.3 뚜르 드 플렉스(Tour de flex)



2부 플렉스 기초 코스



3장. 플렉스 개발 기본기

___3.1 플래시 빌더

______3.1.1 플래시 빌더 툴의 구성

______3.1.1.1 워크벤치와 워크스페이스

______3.1.1.2 퍼스펙티브와 뷰

______3.1.2 플래시 빌더를 이용한 개발

______3.1.2.1 프로젝트 속성 관리

______3.1.2.2 화면 디자인

______3.1.2.3 플렉스 코딩

______3.1.2.4 빌드와 실행

______3.1.3 디버깅 개요

______3.1.3.1 프리 컴파일 디버깅

______3.1.3.2 런타임 디버깅

______3.1.4 플래시 디버그 퍼스펙티브

______3.1.4.1 디버그 실행과 종료

______3.1.4.2 변수값 출력과 상태값 확인

______3.1.4.3 디버그 코드 실행결과 확인

___3.2 XML과 MXML의 이해

______3.2.1 XML의 이해

______3.2.1.1 XML의 구조

______3.2.1.2 XML의 주요 개념

______3.2.2 MXML의 기본 문법

______3.2.2.1 MXML의 3가지 역할

______3.2.2.2 MXML문법의 7가지 규칙

______3.2.2.3 MXML과 플렉스 컴포넌트의 관계 이해

______3.2.2.4 XML 네임스페이스

______3.2.3 데이터 바인딩

___3.3 액션스크립트 3.0 문법

______3.3.1 액션스크립트의 이해

______3.3.1.1 액션스크립트의 버전

______3.3.1.2 액션스크립트 3.0의 특징

______3.3.2 액션스크립트 기본 문법

______3.3.2.1 문장, 블록과 주석

______3.3.2.2 변수의 정의와 사용

______3.3.2.3 함수의 정의와 사용

______3.3.2.4 연산자

______3.3.3 액션스크립트 클래스

______3.3.3.1 클래스의 구조

______3.3.3.2 클래스의 정의

______3.3.3.3 생성자 함수와 인스턴스화

______3.3.3.4 인스턴스와 스태틱 변수 함수 호출

______3.3.3.5 클래스의 상속



4장. 플렉스 컴포넌트

___4.1 컨트롤 컴포넌트

______4.1.1 버튼 형태

______4.1.2 날짜와 숫자 입력

______4.1.3 텍스트 형태

______4.1.4 이미지와 멀티미디어 형태

___4.2 레이아웃 컨테이너

______4.2.1 컨텐츠 정렬

______4.2.2 타이틀이 있는 컨텐츠

______4.2.3 박스, 공간 처리 및 기타

___4.3 내비게이터 컨테이너

______4.3.1 Accordion과 TabNavigator

______4.3.2 ViewStack과 버튼바

___4.4 플렉스 컴포넌트 스타일

______4.4.1 스타일의 기본

______4.4.1.1 스타일 지정하는 방법

______4.4.1.2 스타일의 종류

______4.4.2 플렉스 CSS의 활용

______4.4.2.1 스타일의 상속

______4.4.2.2 CSS 선택자

______4.4.2.3 mx 계열 컨트롤의 스킨 스타일 적용

___4.5 스테이트와 이펙트

______4.5.1 스테이트

______4.5.1.1 스테이트의 적용

______4.5.1.2 스테이트의 포함과 제외 속성 적용

______4.5.2 이펙트의 활용

______4.5.2.1 이펙트 트리거

______4.5.2.2 이펙트의 종류

______4.5.2.3 스테이트에 이펙트 적용



5장. 데이터 시각화 컴포넌트의 활용

___5.1 플렉스에서의 데이터 처리

______5.1.1 데이터 연결

______5.1.2 데이터 바인딩의 응용

___5.2 데이터 시각화 컴포넌트 사용법

______5.2.1 콤보박스 형태

______5.2.2 메뉴 형태

______5.2.3 리스트 형태

___5.3 데이터 시각화 컴포넌트 응용기술

______5.3.1 아이템 렌더러 기본

______5.3.2 아이템 렌더러 스크립팅

______5.3.3 DataGroup 컴포넌트와 아이템 에디터

______5.3.4 데이터그리드 listData와 labelFunctio

___5.4 차트의 활용

______5.4.1 차트의 기본

______5.4.2 차트의 응용



3부 플렉스 핵심 코스



6장. 플렉스 커스텀 컴포넌트

___6.1 플렉스 컴포넌트 스키닝

______6.1.1 컴포넌트 스킨의 기본

______6.1.2 컴포넌트 스킨의 구성요소

______6.1.3 FXG (Flash XML Graphic format)

______6.1.4 DataRenderer와 SkinnableContainer

___6.2 플렉스 기본 컴포넌트의 커스터마이징

______6.2.1 MXML 컴포넌트와 액션스크립트 컴포넌트

______6.2.2 커스텀 컴포넌트와 부모 컴포넌트간 연동

___6.3 이벤트 처리

______6.3.1 이벤트의 종류

______6.3.2 이벤트 핸들러

______6.3.3 이벤트 디스패쳐와 커스텀 이벤트

______6.3.4 이벤트의 전파 과정

___6.4 UIComponent

______6.4.1 UIComponent의 기본

______6.4.1.1 updateDisplayList

______6.4.1.2 measure

______6.4.1.3 createChildren

______6.4.2 UIComponent의 무효화 메카니즘

______6.4.2.1 컴포넌트 속성값 설정

______6.4.2.2 invalidateProperties와 commitProperties

______6.4.2.3 invalidateSize와 measure

______6.4.2.4 invalidateDisplayList와 updateDisplayList

______6.4.3 UIComponent 의 라이프사이클과 활용

______6.4.3.1 UIComponent의 라이프 사이클

______6.4.3.2 UIComponent의 응용



7장. XML데이터와 오픈 API 매쉬업

___7.1 HTTPService

______7.1.1 HTTPService 사용법

______7.1.2 HTTPService와 웹프로그래밍 연동

______7.1.3 HTTPService 결과 처리

______7.1.4 크로스도메인과 보안

___7.2 오픈 API 매쉬업을 위한 플렉스 테크닉

______7.2.1 오픈 API 매쉬업 기본

______7.2.2 네이버 오픈 API 연동

______7.2.3 우편 번호 서비스 연동

___7.3 WebService와 웹 애플리케이션 테크닉

______7.3.1 웹서비스 이용

______7.3.2 파일 업로드

______7.3.3 파일 다운로드

______7.3.4 ExternalInterface를 이용한 자바스크립트 연동



8장. BLAZEDS와 LCDS 서버를 이용한 자바 연동

___8.1 서버 연동 개요와 환경 설정

______8.1.1 BlazeDS 설치

______8.1.2 LCDS 설치

______8.1.3 서버 연동 플렉스 프로젝트 생성

___8.2 자바 RemoteObject

______8.2.1 Remote Object 호출

______8.2.2 RemoteObject 매개변수 전달

______8.2.3 자바 객체 수신

______8.2.4 액션스크립트 객체 전송

______8.2.5 플렉스 세션 처리

___8.3 메시지 서비스

______8.3.1 메시지 서비스

______8.3.2 JMS 메시지 수신

___8.4 데이터 매니지먼트 서비스

______8.4.1 데이터 매니지먼트 서비스 개요

______8.4.2 데이터 조회

______8.4.3 데이터 입력, 수정, 삭제



4부 플렉스 응용 코스



9장. 플렉스 데스크탑 애플리케이션 개발

___9.1 어도비 에어의 개요

______9.1.1 어도비 에어의 기능

______9.1.2 에어 개발 맛보기

___9.2 어도비 에어 핵심 API

______9.2.1 네이티브 윈도우

______9.2.2 윈도우 크롬

______9.2.3 데스크톱 파일 관리

______9.2.4 웹킷 브라우저와 소켓모니터

______9.2.5 네이티브 프로세스 실행

______9.2.6 SQLite 데이터베이스

___9.3 어도비 에어의 업데이트와 배포

______9.3.1 애플리케이션 업데이트

______9.3.2 *.air 파일 패키징

______9.3.3 배포 방법



10장. 플렉스 모바일 애플리케이션 개발

___10.1 모바일 플렉스 앱의 개요

______10.1.1 스마트폰의 이해

______10.1.2 모바일 플렉스 앱 개발 과정

______10.1.3 디바이스 연결과 개발 환경 설정

______10.1.4 모바일 플렉스 앱 개발 맛보기

______10.1.5 스마트폰 환경을 고려한 플렉스 구현 테크닉

___10.2 모바일 플렉스 핵심 API

______10.2.1 터치 이벤트 처리

______10.2.2 UI 내비게이션

______10.2.3 데이터 처리

___10.3 앱 업데이트와 배포

______10.3.1 애플리케이션 디스크립터 파일

______10.3.2 애플리케이션 배포 및 업데이트

옥상훈 저자 옥상훈은 1997년에 한양대 생물학과를 졸업하고 자바 개발자로 IT 무림에 입문했다. 국내 자바 초창기에 자바크래프트닷넷, 자바스터디 운영자로 활동했으며 한국 자바개발자협의회(JCO, JavaCommunity.Org)의 회장, 한국 SW 아키텍트 연합 공동(KASA, Korea Alliance of SW Architect) 회장을 역임했다. 2005년에 매크로미디어 주최 플렉스 공모전 대상을 수상한 계기로 매크로미디어 컨설턴트를 거쳐 한국 어도비 시스템즈에서 RIA 아키텍트를 맡았었다. 현재는 NHN 플랫폼 제휴팀에 재직 중이고 ZDNet에서 UX 컬럼니스트로 활동하고 있다. 주요 저서로는 『예제로 배우는 Adobe 플렉스』와 『okgosu의 액션스크립트 정석』이 있고 독자들을 위한 강좌, 질문 답변, 최신 IT 소식을 전하는 okgosu.net 사이트를 운영하고 있다.