Flex 아키텍트 가이드 Ver 1.0

2006 Adobe Systems Incorporated. All Rights Reserved.

Flex 아키텍트 가이드

Ver 1.0

옥상훈

차장

한국어도비시스템즈


Contents

아키텍트란 ? 플렉스 작동 구조 LiveCyle Data Service

( 구 Flex Data Service) 클라이언트 환경구성 서버 환경 구성 애플리케이션 아키텍처 개발 아키텍처 개발 가이드 디자이너 협업 기타


개요

논리적 판단

0. 아키텍트란 ?

분석적 사고 골든룰 역할


논리적 판단

논리관계 팩트 파악 데이터량 / 처리 시간 / 리소스

논리 관계에 대한 최선의 판단 비례 – 반비례 관계

Q : 모뎀사용자들을 위해 대량의 데이터를 처리할 수 있도록 해주세요 .

양립 – 상충관계 ( 모순 관계 )

Q : 한 화면에서 모든 데이터를 빨리 볼 수 있게 해주세요 .

확장성과 한계점

Q : 대량의 데이터를 한 화면에서 최대한 빠르게 실행되도록 해주세요 .



분석적 사고

패턴의 인식 반복되는 패턴 ( 업무 , 코드 ) 은

규칙화 한다 .

시스템 에러가 발생하는 패턴을 규명한다 . 원인 분석

발생 가능한 문제 파악 문제점을 최소화

여러 대안 제시

규칙의 정리 공통된 패턴을 일반화하여

규칙으로 만들어 낸다 .

규칙화된 것은 개발 표준에 적용한다 .



골든룰

N 명의 개발자를 투입한다고 해서 개발 속도가 N 배 되는 것은 아니다 .

개발자의 수가 늘어날 수록 업무 분담을 위한 커뮤니케이션과 관리적 요소가 증가한다 .


개발 시간을 N 배 늘인다고 해서 아웃풋이 N 배 증가하지 않는다 .

개발 시간을 늘이면 업무 강도는 느슨해지고 관리 체계에 대한 불만이 증가한다 .

개발 업무는 정신 노동이므로 쉴 때는 쉬고 먹을 때는 먹어야 한다 .

80:20 의 법칙 구현이 어려운 20% 때문에 전체

일정이 지연된다 .

애플리케이션 성능을 저하하는 곳은 전체 소스의 20% 미만이다 .

개발자는 모름지기 개발에만 집중하도록 모든 지원을 아끼지 않아야 한다 .

개발 사이클의 자동화 : 개발 – 소스 버전 관리 – 컴파일 – 디버깅 – 배포 – 테스팅

모든 개발자의 환경은 서버와 동일한 환경에서 개발할 수 있도록 한다 .

알고리즘 구현 능력 / 데이터 구조의 이해 / 커뮤니케이션 스킬 향상


역할 0. 아키텍트

표준 정의 명명 규칙 , 코딩 규칙 , 프레임워크

사용 규칙 , SQL

개발 가이드 표준 ( 프레임워크 ) 에 근거한 코드

샘플

공통 모듈 개발

개발 사이클 정립 개발 – 소스 버전 관리 – 컴파일 –

디버깅 – 배포 – 테스팅 개발 사이클의 프로세스화

개발 환경 구성 개발자의 개발환경 정의 및 통일 개발환경의 최적화

애플리케이션 아키텍처 정립 개발 프레임워크 정의 데이터베이스 연동 방법 정의 타 시스템 인터페이스 방법 정의

시스템 아키텍처 서버 설치 및 환경 구성

개발 테스트 환경 구성

내외부 시스템간 통신 및 인터페이스 구성

[ 개발 가이드 ] [ 인프라 가이드 ]


컴포넌트 실행환경컴포넌트 실행환경

[X 인터넷 ] [ 플렉스 ]

X 인터넷 관점에서의 플렉스 기술 아키텍처

플렉스는 플래시 플레이어에서 작동한다 .

플렉스의 실행파일은 플래시 실행파일과 동일한 SWF 파일이다 .

플렉스는 플래시플레이어 보안모델 ( 샌드박스 ) 을 그대로 적용 받는다 .

플렉스 컴포넌트 라이브러리는 액션스크립트로 되어 있다 .

컴포넌트 실행엔진컴포넌트 실행엔진

컴포넌트 실행코드컴포넌트 실행코드

컴포넌트 라이브러리컴포넌트 라이브러리

웹브라우저웹브라우저

플렉스 컴포넌트 라이브러리플렉스 컴포넌트 라이브러리

SWF(플래시 실행파일 )SWF(플래시 실행파일 )

플래시 플레이어플래시 플레이어

1. 플렉스 작동구조


WASWAS

플렉스 애플리케이션의 작동방식

런타임컴파일러런타임컴파일러

app.mxml

app.swf

http:// acme.com/app.mxml

LiveCycle Data Service

J2EEJ2EE

ResourceResource

DBMS

LDAP

CRM/ERP/CM

WebServices.


플래시플레이어 플래시플레이어

데이터 연동 서비스데이터 연동 서비스

RPC 서비스RPC 서비스

실시간 Data 연동 서비스실시간 Data 연동 서비스

Message Service

Data Management Service

ServiceAdapterServiceAdapter

JavaBeansJavaBeans

JMSJMS

SpringSpring

HibernateHibernate

…….데이터 요청 (HTTP, WSDL, Java Method)

app.swf

데이터 전송 (XML, SOAP, AMF)

1. 웹브라우저에서 플렉스 URL 호출하면 플렉스 데이터 서비스에서 *.mxml 을 *.swf 으로 컴파일 2. *.swf 는 PC 에 다운로드되어 플래시플레이어에서 실행됨 3. 플렉스 애플리케이션에서 데이터 요청 : HTTP, WSDL, Java Method 4. 결과 데이터를 플렉스 애플리케이션으로 리턴 : XML, SOAP, AMF

HTTP Services

Web Services

Remote Objects



플렉스와 일반 플래시의 실행 방식

1. 웹브라우저에서 플렉스 URL 호출하면 플렉스 데이터 서비스에서 *.mxml 을 *.swf 으로 컴파일

2. *.swf 는 PC 에 다운로드되어 플래시플레이어에서 실행됨



WASWAS

런타임컴파일러런타임컴파일러

app.mxml

app.swf


데이터 연동 서비스

데이터 연동 서비스


실시간 Data 연동

서비스

실시간 Data 연동

서비스데이터 요청 (HTTP, WSDL, Java Method)

app.swf


http:// acme.com/app.mxml 웹브라우저웹브라우저



app.swf

데이터 요청 (HTTP, WSDL)

app.swf

데이터 전송 (XML, SOAP)


XMLJSPPHPASP

1. 웹브라우저에서 플래시 SWF 호출 2. *.swf 는 PC 에 다운로드되어

플래시플레이어에서 실행됨



LCDS 의 기능

LiveCycle Data Services

Web Service

RPC Service

HTTP Service

Remote Object

서비스 어댑터서비스 어댑터

데이터 동기화

Data ManagementService

On/Off Line Data

페이징

Ru

nti

me C

om

piler

Ru

nti

me C

om

piler

협업

Message Service

Publish/Subscribe

데이터 푸시

JavaJava JMSJMS HibernateHibernate ColdFusionColdFusion Custom…Custom…

2. LiveCycle Data Service


LCDS 의 작동 방식

런타임 컴파일링 web.xml 파일에는 *.mxml 요청을 FlexMxmlServlet 에서 처리하도록 설정되어

있음

FlexMxmlServlet 에서 *.mxml 을 *.swf 로 컴파일

Jsp 컴파일처럼 파일 변경유무를 체크함

*.swf 는 사용자 PC 에 캐쉬됨

WASWAS

FlexMxmlServletFlexMxmlServlet

app.mxml

app.swf


Flex Data Service



app.swf

web.xml



LCDS 의 데이터 연동

RPC 방식 <mx:WebService> 방식 : WSDL 호출 오브젝트 리턴

<mx:RemoteObject> 방식 : 자바빈즈 메서드 호출 오브젝트 리턴

<mx:HTTPService> 방식 : 특정 URL 호출 XML 데이터 리턴

실시간 연동 <mx:DataService> 데이터 서비스 방식

데이터 동기화

<mx:Producer><mx:Consumer>메시지 서비스방식

JMS메시징

WASWAS




데이터 연동 서비스데이터 연동 서비스


실시간 Data 연동 서비스실시간 Data 연동 서비스

Message Service


HTTP Services

Web Services

Remote Objects

데이터 요청 (HTTP, WSDL, Java Method)


services-config.xmlservices-config.xml

proxy-config.xml

remoting-config.xml

messaging-config.xml

data-management-config.xml



LCDS 의 통신 방식

데이터연동방법 통신프로토콜

데이터 포맷 데이터처리 애플리케이션 LCDS2 사용여부

실시간메시징

RPC Service

HTTPService HTTPHTTPS

XML XML, ASP, JSP, PHP 등 DB 연결이 지원되는 모든 웹프로그램

선택적 X

WebService HTTPHTTPS

XML SOAP 메시지

WebService 를 제공할 수 있는 시스템

선택적 X

RemoteObejct

HTTPHTTPS

AMF: Java Object (List, Map) 가능

자바빈즈 클래스 필수 X

Data Service

MessageService

RTMP AMF: Java Object (List, Map) 가능

자바빈즈 클래스 필수 O


HTTPRTMP

AMF: Java Object (List, Map) 가능

자바빈즈 클래스 필수 O



실시간 처리

MessageService

LiveCycle Data Service 2.5

Adapter Y

Adapter X

MessagingSystem Y

MessagingSystem X

EndpointJMS

ProviderJMS Adapter

PublisherSubscriber

RTMPAMFHTTP



대량 데이터 처리

안정적인 데이터 처리 속도 2만 건까지 1 초 이내의 응답속도를

보임

Ajax – XML – Binary 간 데이터 쿼리 비교

1,000건 이하는 별차이 없음

1,000건 이상은 LCDS 를 사용한 방법이 성능을 보장

서버 자원 사용 감소 변경된 데이터만 전송하도록 설정 가능

네트워크 사용 감소 압축된 바이너리 데이터사용

Ajax- Flex(XML)- Flex(FDS)

156 357 730

5885

15544

38200

170 218 3731792

4733

9690

31 63 109 374 499 842

0

5000

10000

15000

20000

25000

30000

35000

40000

45000

100 500 1000 5000 10000 20000

데이터건수

수행

시간

AjaxFlex(XML)Flex(FDS:RO)



LCDS 서버 구성 – 2 tier

Client Browser

FlashPlayer 9.0

WASFlex Server

WASFlex Server

클라이언트에서 WAS 를 호출 클라이언트 – WAS : HTTP 프로토콜

WAS 는 클라이언트의 Request 를 LCDS 에 전달 : web.xml 에 설정이 되어 있음

HTTP



LCDS 서버 구성 – 3 tier

클라이언트에서 Web Server 를 호출 클라이언트 – Web Server : HTTP 프로토콜

Web Servcer 는 클라이언트의 Request 를 WAS 에 전달 : http.conf 같은 웹서버 설정파일에 정의

WAS 는 클라이언트의 Request 를 LCDS 에 전달 : web.xml 에 설정이 되어 있음

Client Browser

FlashPlayer 9.0

WEB SERVER

WEB SERVER

WEB SERVER


WASFlex Server

WASFlex Server


개요

목적 개발자가 플렉스 애플리케이션을 개발할 수 있도록 환경구성을 한다 . 플렉스 개발툴을 설치 및 최적 활용

플렉스 화면 디자인 에러 없는 코딩 컴파일링 디버깅 CVS 연동 및 각종 플러그인 복합 활용

방법 플렉스 빌더 설치 : 플렉스만 개발 가능 이클립스에 플렉스 빌더를 플러그인으로 설치 : Java 코딩도 병행 가능

유의 사항 http://www.adobe.com/products/flex/productinfo/systemreqs/ 이클립스 버전 확인 : 3.1, 3.2 까지 지원 플렉스빌더 버전확인 : 2.0, 2.01, 3.0 베타

3. 클라이언트 환경 구성


플렉스 제품군의 변화

Flex Builder 1.5Flex Builder 1.5

Flex Presentation Server 1.5

Flex Presentation Server 1.5

Flex Builder 2Flex Builder 2

Flex Data Service 2Flex Data Service 2

Flex Charting 2Flex Charting 2

Flex SDK 2Flex SDK 2

Flex Builder 3 BasicFlex Builder 3 Basic



Flex Builder 3 EnterpriseFlex Builder 3 Enterprise

Flex SDK 3Flex SDK 3

Flex 1.5 : 2005년 2 월 Flex 2 : 2006년 7 월 Flex 3 : 2008년 상반기



플렉스 빌더 설치

인스톨 파일 실행시 ‘ Flex Builder and Flex SDK’ 를 선택 후 설치 진행



설치 디렉토리 C:\Program Files\Adobe\Flex

Builder 2

설치된 파일들 configuration

Flex SDK2

Jre : Java 1.4.12

Player : 디버그용 플래시플레이어

Plugins : 이클립스 플러그인들

Adobe_Flex_Builder_2_InstallLog.log

FlexBuilder.exe

FlexBuilder.ini : Heap메모리 설정

플렉스 빌더 설치 3. 클라이언트 환경 구성


이클립스 플러그인 설치

인스톨 파일 실행시 ‘ Flex Builder Plug-in and Flex SDK’ 를 선택 후 설치 진행



이클립스 플러그인 설치

이클립스가 설치된 폴더를 선택



LCDS 설치

개요 LCDS 는 WAS 위에서 구동된다 .

기존에 설치된 WAS 가 없으면 기본 WAS(Jrun) 와 함께 설치함

LCDS 의 역할 런타임 컴파일 : mxml 의 요청이 들어오면 swf 로 컴파일

자바 객체 호출 및 결과 전송 : RemoteObject 를 호출하여 결과를 바이너리 포맷(AMF) 로 리턴

실시간 메시징 : RTMP 프로토콜을 이용하여 실시간으로 서버 메시지 전송

데이터 매니징 : DAO 패턴으로 구현된 자바객체를 이용해 데이터 동기화

유의 사항 WAS 가 지원하는 버전인지 확인

WAS 가 사용하는 JDK 가 지원하는 버전인지 확인

http://www.adobe.com/products/livecycle/systemreqs.html

4. 서버 환경 구성


LCDS 설치

방법 1. 기존에 설치된 WAS 가 없는 경우

기본 WAS(Jrun) 와 함께 설치함

2. 기설치된 WAS 에 신규 웹컨텍스트에 설치하는 경우 톰캣이나 Jrun 은 flex.war 파일명을 웹컨텍스트명으로 바꾸어서

웹애플리케이션디렉토리에 압축을 풀어주면 됨

3. 기존에 사용하고 있는 웹컨텍스트에 설치하는 경우 flex.war 의 압축을 해제하여 WEB-INF 디렉토리 밑에 있는 파일들을 웹컨텍스트

디렉토리의 WEB-INF 디렉토리에 복사해준다 .

WEB-INF 디렉토리 밑에 있는 web.xml 의 설정과 flex.war 에 들어있는 web.xml 설정을 카피해서 넣어준다 .

라이센스 파일 WEB-INF/flex/license.properties 에 들어있는 각 항목에 해당하는 시리얼번호 입력 후 서버 재기동

fds=LCDS(FDS) 의 시리얼번호 charting= 플렉스 챠팅의 시리얼번호 fb= 플렉스빌더의 시리얼번호



LCDS 설치

플렉스 관련 디렉토리 및 파일


디렉토리명 설명

/WEB-INF 웹애플리케이션 설치 디스크립터 파일 (web.xml) 포함

/WEB-INF/flex Flex 환경 설정 파일 위치

/WEB-INF/flex/user_classes 사용자 정의 액션스크립트 클래스와 MXML 컴포넌트 포함

/WEB-INF/lib Flex 서버관련 jar 파일 포함

/WEB-INF/flex/frameworks SWC 컴포넌트 파일 포함 (framework.swc, rpc.swc 등 )


WAS 환경 구성

LCDS 와 WAS 와의 관계 LCDS 는 WAS 에서 작동하기 위한 서블릿 외에 여러 라이브러리로 구성됨 (flex.war

파일에 포함 )

WAS 가 구동될 때 LCDS 의 서블릿들이 같이 init될 수 있도록 WEB-INF/web.xml을 설정해주는 것이 중요

또한 플렉스의 각종 라이브러리들을 WEB-INF 디렉토리 밑에 같이 복사함

WAS 환경 구성 기존의 WAS 에서 web.xml 을 수정하여 사용할 경우 flex.war 의 web.xml 을

그대로 덮어쓰지 않도록 함

웹서버 연동 Jsp 컴파일을 위해 웹서버에서 jsp 요청을 WAS 로 넘어오도록 설정하듯이

플렉스의 요청 (*.mxml) 이 들어오면 WAS 로 넘어가도록 함

자바 객체 연동을 위해 RemoteObject 요청 (http:// 서버 /messagebroker/amf) 주소 또한 WAS 로 넘어가도록 설정



WAS 환경 구성

WAS 및 LCDS 초기화 순서

웹애플리케이션 디플로이 JSPServlet 초기화

FlexMxmlServlet 초기화

flex-config.xml 로드

MessageBrokerServlet초기화

FlexSwfServlet초기화 FlexInternalServlet초기화



WAS 환경 구성

매핑된 서블릿 이름 설명

MessageBrokerServlet

플렉스 데이터 서비스의 메시징 및 RPC 요청을 처리해주는 서블릿

FlexMxmlServlet *.mxml 의 요청을 처리해주며 , mxml 을 swf 으로 컴파일해줌

FlexSwfServlet *.swf 에 대한 요청이 오면 swf 를 리턴 해주는 서블릿

FlexForbiddenServlet

지정된 확장자의 파일 접근을 막아주는 서블릿으로 *.as나 *.swc 파일의 접근을 막는다

FlexInternalServlet

플렉스 파일을 관리해주는 서블릿



LCDS 환경 설정 4. 서버 환경 구성

Filename Description

services-config.xml 플렉스 데이터 서비스의 최상위 설정파일-remoting-config.xml 경로-proxy-config.xml 경로-messaging-config.xml 경로-data-management-config.xml 경로-보안 제약 사항-채널 정의-로깅 설정

remoting-config.xml RemoteObject 에서 사용할 서비스명과 자바빈즈의 이름에 대한 정의

proxy-config.xml 프록시를 사용하는 WebService 와 HTTPService 의 설정 파일

messaging-config.xml Message Service 에서 사용할 서비스 이름 (JNDI 명 ) 과 속성들에 대한 정의

data-management-config.xml

Data Management Service 에서 사용할 자바빈즈객체와 서비스이름에 대한 정의


개요

목적 최종 실행물 (SWF 애플리케이션 ) 의 기본 골격 정의

고려할 사항 메인 애플리케이션 구성

프레임워크 및 데이터 연동

외부 인터페이스

프로그램 배포

기존 웹애플리케이션과 다른 점 (X-internet) 사용자 PC 에 실행파일 (SWF) 이 다운로드 된다 .

플래시 플레이어에서 SWF 는 실행된다 .

SWF 는 바뀌지 않으면 인터넷 임시디렉토리에 캐시된다 .

5. 애플리케이션 아키텍처


메인 애플리케이션 구성

메인 애플리케이션 크기 가능한 한 최소의 크기로 줄여야 함

크기가 작을수록

웹서버에서 클라이언트로 다운로드 되어야 할 SWF 사이즈 감소

퍼포먼스 향상

변경된 모듈의 업데이트 용이

애플리케이션의 크기를 좌우하는 요소

메인에 포함되는 컴포넌트 개수

메인에 들어가는 화면수

Embed asset ( 이미지 , 폰트 )

XML 데이터




SWF 애플리케이션 분리 여부 확장성 : 화면의 개수가 수십 개 이상으로 애플리케이션 사이즈가 현저히 커질 것으로 예상되는 경우

로딩속도 : 네트워크 속도가 낮아 애플리케이션 로딩 속도에 문제를 줄 경우

배포 : 애플리케이션 내의 모듈의 변경이 잦아 부분적으로 배포해야 할 경우

SWF 애플리케이션 분리 방법 1 + N : 1 개의 메인 SWF + N 개의 화면당 N 개의 SWF 로 구성

서브 SWF 는 ModuleLoader 를 이용하여 로딩

html + N : 1 개의 컨트롤 html + N 개의 SWF

Html 에서 각 SWF 를 로드하도록 컨트롤




메인 애플리케이션 사이즈 축소 방안 불필요한 Embed asset( 이미지 , 폰트 ) 사용 자제

RSL(Runtime Shared Library) 사용

초기에 구동되지 않는 부분은 ModuleLoader 로 별도의 SWF 로 로딩

livedocs 의퍼포먼스 가이드 문서 (http://livedocs.adobe.com/flex/201/html/performance_118_15.html )

Disabling debugging : 디버그에 필요한 정보가 SWF 에서 제외됨

Examining linker dependencies : dependency report 에서 참조할 필요가 없는 클래스배제

Avoiding initializing unused classes : getQualifiedClassName 함수를 통해 불필요하게 클래스가 initialize 안되도록 함

Externalizing assets : Embed asset( 이미지 , 폰트 ) 들을 런타임다운로드로 변경

Using character ranges for embedded fonts : 폰트에서 사용하는 되는 문자셋 범위를 flex-config.xml 에 설정

가비지콜렉션 및 메모리 관련 기고 : http://blogs.adobe.com/aharui/2007/03/garbage_collection_and_memory.html



RSL(Runtime Shared Library)

SWF 파일을 클라이언트에게 전송할 때 같이 공유할 컴포넌트를 라이브러리로 묶어서 전송하는 방법

http://livedocs.adobe.com/flex/201/html/rsl_124_1.html#168690



데이터 타입

데이터 타입 기본값 크기 값 범위

Boolean false true, false

int (new) 0 32 bit -2,147,483,648 (-231) ~ 2,147,483,647 (231 - 1)

Number NaN 64 bit Number.MAX_VALUE == 1.79769313486231e+308Number.MIN_VALUE == 4.940656458412467e-324

void undefined

Object null

String null 16 bit UTF-16

uint (new) 0 32 bit unsingned

0 ~ 4,294,967,295 (232 - 1)

Not declared undefined

All other classes

null



프레임워크의 역할 : 확장성

프레임워크가 있는 경우프레임워크가 없는 경우

- 벽돌을 추가하는 패턴을 익히지 않아도 된다 .- 벽돌이 추가될수록 패턴들이 제각기 나타남 .

- 벽돌이 추가되어도 같은 패턴으로 쌓인다 .- 벽돌을 추가하는 패턴을 익혀야 한다 .



데이터 & 프레임워크 연동

플렉스에서 메시지 전송 ( 폼 입력값 ) HTTPService

http 프로토콜을 통해 GET/POST 방식으로 전송

파일 업로드는 MultipartRequest 를 통해 전송가능

서블릿이나 JSP(또는 ASP, PHP) 에서 전송된 폼 값 처리 가능

RemoteObject

http 프로토콜을 이용하나 데이터는 AMF 라는 바이너리 포맷으로 전송

메소드의 파라미터나 액션스크립트 객체를 서버의 자바빈즈 메소드로 전송할 수 있음

WebService

Http 프로토콜을 이용하여 웹서비스 호출

웹서비스의 파라미터 전송



데이터 & 프레임워크 연동

플렉스로 결과 메시지 전송 HTTPService

서블릿이나 JSP(또는 ASP, PHP) 에서 결과 XML 데이터 생성

RemoteObject

ArrayList나 Object형태로 메소드 호출 결과 리턴

WebService

XML 데이터 결과 전송

SAP 의 경우 UI 처리에 불필요한 메타 데이터를 제거하는 파싱 로직이 필요하기도 함



Flex CRUD 프로그램 아키텍쳐

전체 구조

조회 처리 Web app

입력 처리 Web APP

수정 처리 Web App

삭제 처리 Web App

Main App

HTTPService( 조회 )조회

등록

수정

삭제HTTPService( 등록 ,수정 , 삭제 )

RequestObj




조회 1 단계 (FLEX) : 조회 이벤트 발생 ( 버튼 클릭 )

2 단계 (FLEX) : HTTPService send (JSP 호출 )

3 단계 (JSP) : 파라미터 파싱 4 단계 (JSP) : SQL 처리 5 단계 (JSP) : 결과 XML 생성 6 단계 (FLEX) : 결과 XML 보여주기




조회

<mx:Button/>

<mx:HTTPSerivce/>

SQL execute

request.getParameter();

<?xml version="1.0" encoding="utf-8"?><resultSet> <record> <empNo>0</empNo> <empName>gosu</empName> <job>dev</job> <sal>100</sal> </record><pageNavigation><page>10</page> …</resultSet>

<mx:DataGrid/>


데이터바인딩

[ 플렉스 클라이언트 ] [WAS]



입력 /수정 /삭제 1 단계 (FLEX) : 조회 이벤트 발생 ( 버튼 클릭 )

2 단계 (FLEX) : 폼 값을 파라미터 객체에 저장 3 단계 (FLEX) : HTTPService send (JSP 호출 )

4 단계 (JSP) : 파라미터 파싱 5 단계 (JSP) : SQL 처리 6 단계 (JSP) : 결과 XML 생성 7 단계 (FLEX) : 결과 XML 보여주기




입력 /수정 /삭제

<mx:Button/>

<mx:HTTPSerivce/>

SQL execute

request.getParameter();

<?xml version="1.0" encoding="utf-8"?><resultSet> <message></message> <errorCode>1</errorCode> <txCount>10</txCount></resultSet>


<mx:Form/>

[ 플렉스 클라이언트 ] [WAS]


외부 인터페이스

인터페이스 연동 개요 플렉스는 플래시플레이어 런타임에서 작동하는 애플리케이션임

플렉스와 다른 런타임을 가지는 애플리케이션과의 연동

주요 인터페이스 자바스크립트 연동

플렉스의 ExternalInterface 를 활용하여 자바스크립트를 호출하거나 자바스크립트에서 플렉스의 액션스크립트를 호출할 수 있음

Html 연동

플렉스에서 html 을 보여주려면 IFrame 을 사용

단 IFrame 은 한 번에 여러 개를 띄울 수 없다 .

ActiveX 연동 ( 보안모듈 연동 )

ActiveX 는 자바스크립트를 이용하여 컨트롤 할 수 있으므로 자바스크립트 연동 방법과 동일

ActiveX 기반의 보안모듈이나 리포팅툴 등은 자바스크립트를 통해 연동

SAP 연동

SAP 은 WebService나 JCO 를 통해서 RemoteObject 를 사용하여 데이터 연동 가능



프로그램 배포

플렉스 SWF 배포 방법 SWF 파일 직접 배포

WAS 보다는 웹서버에서 배포하는 것이 좋음 프로그램이 자주 바뀌지 않을 경우에 사용

MXML 을 런타임 컴파일해서 배포 런타임 컴파일은 MXML 소스가 변경되었을 경우에만 작동함 WAS 에서 웹서버를 거쳐 컴파일된 SWF 가 클라이언트로 리턴 프로그램이 자주 바뀔 경우에 사용

Adobe AIR 를 이용한 배포 SWF 를 AIR 의 adt 명령어를 사용해 air 아카이브 파일에 포함 AIR 파일을 다운받으면 AIR 런타임이 설치된 경우 바로 사용자 PC 에 설치 설치된 AIR 파일은 추후에 업데이트도 가능함

플렉스 캐싱 SWF 는 사용자 PC 에 브라우저가 사용하는 임시 디렉토리에 캐시됨 SWF 를 무조건 새로 받게 하려면 html헤더에서 no-chache 옵션을 주도록 함 RSL 로 설정한 swf 파일 또한 캐시됨



프로그램 배포

플래시 플레이어 버전 체크 플렉스는 플래시플레이어 9 이상에서 작동함 .

플래시 플레이어 9.0.x 는 몇 가지 버전이 존재하며 번호가 높을 수록 최신 업데이트가 적용된 플레이어임

http://www.adobe.com/support/flashplayer/downloads.html

플래시 플레이어 버전은 자바스크립트에서 체크 가능하며 플렉스 빌더에서 컴파일하면 자동으로 생성되는 html 안에 함수 생성 (hasRequestedVersion 변수값 )

플래시 플레이어 업데이트 플래시 플레이어는 3가지 경우의 수가 존재

원하는 버전이 설치된 경우 : 플렉스 컨텐츠를 보여줌

8.x 이하 버전이 설치된 경우 : 9.x 대로 자동 업데이트 함 playerProductInstall.swf 실행

플래시 플레이어가 설치 안된 경우 : 플래시 플레이어 ActiveX 를 설치하도록 함



프로그램 배포

유의 사항 플래시 플레이어 자동업데이트

6.0.65 버전부터 동작 가능하며 이하 버전의 경우는 사용자가 새로 설치 해야 함

플래시 플레이어 강제 인스톨

신규 설치 페이지로 이동해서 설치 : http://www.adobe.com/go/getflash

Object 태그를 이용해서 ActiveX 플러그인 설치 방법으로 설치

SWF컨텐츠를 보여주는 스크립트

플렉스빌더에서 컴파일시 생성되는 html 안에 AC_FL_RunContent 라는 이름으로 함수 생성

SWFObject나 기타 함수로도 가능하나 한 가지 함수로 통일하는 것이 좋음

서로 다른 버전으로 작성된 SWF 가 같이 보여질 때

Object태그에서 플래시 플레이어 필요버전은 최상위 버전으로 일치 시켜야 함



체크 항목 정리

대분류 중분류 소분류 결과 자바 개발툴 연계 가능 여부

런타임 디버깅 가능 여부 위지윅개발 가능 여부

형상관리 가능 여부 자동 빌드 작업 가능 여부

SW 테스팅 작업 가능 여부 기본 컴포넌트 개수 확장 컴포넌트 개수

프레임웍 연계 가능 여부 자바빈즈 연동 가능 여부 웹서비스 연동 가능 여부

보안툴 연동 가능 여부 입력 완료 까지 걸린 시간

데이터 입력에 필요한 컨트롤 존재여부 입력시 에러 발생 여부

입력 예외 사항에 대한 방지의 구현 정도 화면의 편리함의 정도

화면 디자인을 쉽게 수정 가능 여부 데이터 정확성 데이터 일치 여부 데이터 가독성 데이터를 쉽게 읽을 수 있는 지 체크 데이터 표현의 다양성 데이터를 얼마나 다양하게 표현할 수 있는 지 체크

엑셀 화면의 데이터를 엑셀로 출력 가능한 지 여부이미지 화면의 데이터를 이미지로 출력 가능한 지 여부PDF 화면의 데이터를 PDF 로 출력 가능한 지 여부1000건 1,000 건의 데이터를 화면에 보여주는데 걸린 시간5000건 5,000 건의 데이터를 화면에 보여주는데 걸린 시간10000건 10,000 건의 데이터를 화면에 보여주는데 걸린 시간

데이터 시각화

데이터 출력

데이터 처리 속도

입력처리 편의성

입력 에러 방지 처리

화면의 편리성

데이터 입력 편의성

개발 편의성

개발 생산성

데이터 인터페이스

기본 체크 사항



개요

개발 아키텍처의 중요성 개발자는 알고리즘의 구현에 집중할 수 있도록 함으로써 개발생산성과 품질 향상 개발이 지연되는 프로젝트의 경우 개발자 아키텍처가 허술함 개발 아키텍처가 허술하면 개발자들이 알고리즘 구현 외의 잡다한 업무에 많은 시간을 보냄

환경 설정 문제로 인한 에러 잡기 컴파일하면서 결과 기다리기 수작업 소스 코드 관리 원시적인 디버깅

개발 아키텍처의 업무 범위 개발에 필요한 일련의 작업들은 모두 해당함 개발환경구성 ( 개발툴 설치 , 컴파일 , 디버깅 , 소스코드 버전관리 , 서버 환경 설정 ) 등 개발 업무 프로세스

개발 관련 작업들의 사이클화 ( 개발 작업은 순환하도록 함 )

기술적 에로 사항 질문 답변 프로세스 개발 표준 가이드 적용 프로세스

6. 개발 아키텍처


개발 환경 구성

개발툴 플렉스빌더의 편리한 기능을 최대한 이용하도록 가이드한다 .

위지윅 디자인

코드 힌트

API 및 도움말

컴파일 & 실행

런타임 디버깅

자바개발 병행 가능

메모리 프로파일링 ( 플렉스 빌더 3)

기타 이클립스에서 상속되는 다양한 기능들




컴파일 플렉스 SDK 에 있는 mxmlc 명령어가 mxml 을 SWF 로 컴파일 해줌

mxmlc 에는 다양한 옵션이 있음 : 클래스패스 , 문자셋 등

플렉스 SDK 는 플렉스 빌더 및 LCDS(FDS) 에 포함이 되어 있음

LCDS 의 런타임 컴파일 기능은 mxmlc 를 자바에서 실행함

http://livedocs.adobe.com/flex/201/html/compilers_123_05.html

mxmlc 명령어는 ant 를 이용해서 빌드 스크립트로 만들 수 있음

http://livedocs.adobe.com/flex/201/html/build_044_07.html

http://livedocs.adobe.com/flex/201/html/build_044_12.html




디버깅 플렉스 빌더 런타임 디버깅

플래시플레이어는 반드시 디버거 버전이어야 함

플렉스 빌더 설치시 같이 설치되나 다른 버전일 경우에는 언인스톨 후 재설치 http://www.adobe.com/support/flashplayer/downloads.html

플렉스 빌더에서 컴파일하는 프로젝트에서 런타임 디버깅 가능

LCDS 에서 컴파일 하는 경우에는 디버깅용 프로젝트를 따로 만들어서 디버깅 trace 로깅

C:\Documents and Settings\ 사용자 ID\mm.cfg 파일에 설정 mm.cfg 파일에는 액션스크립트에서 trace() 안의 내용이 출력되는 파일명 지정

TraceOutPutFileName=C:/Documents and Settings/sok.ADOBENET/flashlog.txt

ErrorReportingEnable=1

TraceOutputFileEnable=1

HTTPWatch 설치 RPC 서비스 모니터링 및 디버깅 : HTTPService, WebService, RemoteObject

기타 플렉스 에러로그 : C:\lcds\jrun4\servers\default\flex\WEB-INF\flex\logs\flex.log

참조 : WAS 콘솔 및 WAS 에러 로그



개발 사이클

개발 사이클의 이해 코딩 & 디버깅 – CVS 커밋 /업데이트 – 소스 코드 빌드 – 배포 – 테스팅 코드는 한번에 완성되는 것이 아니라 다양한 경우에 대한 테스트를 통과해야함 테스트에서 통과하지 못하면 다시 코딩부터 작업이 시작 이런 반복되는 작업들을 자동화시켜 놓지 않으면 개발자들의 시간을 많이 소모하는 요소가 됨

코딩 기본 템플릿 ( 주석 , 코딩 스타일 ) 을 제공하여 일관성 있게 코딩 CVS 와 연동하여 버전 관리 및 소스 코드를 보호함 소스코드는 개발자 PC 에서 실행해서 최소한의 기능 테스트를 하고 서버에 올리도록 한다 .

빌드는 개발자가 많을 경우 일정 시간을 정해놓고 빌드하는 것이 효율적임

디버깅 모든 에러에는 원인이 반드시 존재한다 .

에러가 나면 원인 찾기에 최대한 주력한다 .

원인 분석의 단초는 각종 에러 로그에 들어있다 .

시스템을 구간별로 나누어서 에러가 날만한 범위를 좁혀 나간다 . ( 클라이언트 – 웹서버 – WAS - DB)



플렉스 빌더 도움말 기능 ASDocs : 모든 컴포넌트에 대한 설명과 Example 제공

Flex 2 Developer 가이드 : 컴포넌트 및 액션스크립트 클래스에 대한 자세한 설명 제공

LiveDocs : http://livedocs.adobe.com/flex/201/ Getting Started with Flex 2

Flex 2 Developer's Guide

Building and Deploying Flex 2 Applications

Creating and Extending Flex 2 Components

Programming ActionScript 3.0

Using Flex Builder 2

Flex 2 Language Reference

Flex Data Services 2 Java Reference

개발 레퍼런스 7. 개발 가이드


Adobe DevNet 사이트 한글 : http://www.adobe.com/kr/devnet/flex/

영문 : http://www.adobe.com/devnet/flex/

Adobe 플렉스 포럼 : http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=60

플렉스 5대 Explorer 1.Flex 2 Component Explorer

2.Flex 2 Style Explorer

3.Flex 2 Effect Explorer

4.Flex 2 Filter Explorer

5.Flex 2 Primitive Explorer

개발 레퍼런스 7. 개발 가이드


오픈 소스 컴포넌트 사이트

Adobe Flex 컴포넌트 포털 FlexBox

flexlib - Google Code 챠트모음 (quietlyscheming.com)

7. 개발 가이드


Flex 2 Component Explorer 7. 개발 가이드


Flex 2 Style Explorer 7. 개발 가이드


오픈소스 Flex Component Library

0.Adobe Flex 컴포넌트 포털

1.FlexBox

2.flexlib - Google Code 3.Fisheye 4.FlexBook 5.Interactive Calendar 6.Landscape Zoomer 7.RandomWalk 8.DisplayShelf 9.플렉스게이지

10.USA Map

11.콤보Filtering Collections

12.플렉스이미지저장

13.easingFunction테스트

14.Charting Components Explorer

15.Flex Wares Marquee

16.플렉스냅킨스킨

17.플렉스스프링

18.SpringGraph-AmazonDemo

19.Skins-Wrapper.swf 20.챠트모음(quietlyscheming.com) 21.챠트배경(quietlyscheming.com) 22.flexmaps협업 23.JMS-portfolio 24.LiveReflection 25.renderer3d 26.Self-labeling text input 27.FLEX-Winamp

7. 개발 가이드


오픈소스 Flex Component Library 7. 개발 가이드


플렉스 개발자와 디자이너와의 협업

플렉스 디자인 역할 플렉스 컴포넌트 배치

플렉스 빌더의 디자인 뷰에서 기본적인 컴포넌트 레이아웃 정의

컴포넌트의 네비게이션 형태 정의

컴포넌트 스타일 정의

CSS : 플렉스 빌더에서 CSS 편집

각 컴포넌트 별 스킨 이미지 파일 직접 편집

http://livedocs.adobe.com/flex/201/html/skinning_071_08.html

http://livedocs.adobe.com/flex/201/html/skinning_071_03.html

컴포넌트 테마 편집 : 테마는 컴포넌트 스킨 ( 이미지 , 플래시 등 ) 및 CSS 의 모음

8. 디자이너 협업



런타임 CSS 플렉스 2.0.1 부터는 CSS 를 SWF 로 컴파일 하여 런타임시 스킨을 즉시 바꿀 수

있도록 지원

방법

플렉스 빌더에서 CSS 를 SWF 로 컴파일

메인 애플리케이션에서 SWF 를 바꿔주는 코드 삽입

주의사항 폰트는 사이즈 축소를 위해 플래시 타입의 폰트를 사용함

큰 이미지는 Embed 하기 보다는 URL 로 정의 ( 배경 , 아이콘 등 )

성능을 고려한 이펙트 , 애니메이션 , 그라디에이션




구분 전체 플렉스 HTML + 플렉스 일부 기능만 플렉스

장점

- 전체가 플렉스 화면이므로 일관성 있는 UI 를 구성할 수 있음

- 화면 내부에 있는 UI 의 요소 컨트롤이 편리함

- 개발 생산성이 높음

Html 의 기능 ( 메뉴 ) 을 플렉스와 함께 사용할 수 있음

- 플렉스 부분의 구현이 간단함

- 개발생산성이 높음

단점

- 화면이 많아서 플렉스 SWF 파일의 사이즈가 너무 커질 수 가 있음

- 화면이 많을 경우에는 각 화면별로 별도 SWF 파일로 구성

- Html 과 플렉스 컴포넌트와 인터페이스 함수를 따로 구현해야 함- 개발생산성이 떨어짐

- 플렉스 화면요소의 편리함( 유저빌리티 ) 을 살릴 수가 없음



플렉스 적용 프로젝트 유형

RIA 로 기간 업무 개발 데이터 구조를 이해하고 XML 로 만들어 낼 수 있는 능력이 필요 , SQL 이해

DataGrid, ComboBox, ArrayCollection, HTTPService, RemoteObject 를 주로 사용

자바 개발자 출신이 유리함

예 ) 회계시스템

RIA 웹사이트 구축 플렉스 컴포넌트를 조합해서 원하는 화면을 만들어 낼 수 있는 능력이 필요

플렉스 컴포넌트의 스타일에 대한 이해 , 커스텀 컴포넌트 제작 , 플래시 연동

플래시 디자이너 , 액션스크립터 출신이 유리

예 ) 쇼핑몰 , 영화예매 , 포털

9. 기타


플렉스 적용 프로젝트 유형

RIA 모니터링 실시간 모니터링을 위한 아키텍쳐 , SQL 작성 , 플렉스 데이터 서비스에 대한 이해

자바 개발자 출신이 유리

예 ) 생산모니터링 , 시스템 모니터링

플렉스 컴포넌트 개발 플렉스의 기본 컴포넌트를 활용하여 사용자 정의 컴포넌트를 작성

액션스크립트에 대한 깊은 이해가 필요

액션스크립터 출신이 유리

예 ) DataGrid, Chart, Reporting

9. 기타


참고 문서

[Adobe 자료 : 플렉스 개발자 센터] Flex 빠른 시작 가이드 : 시작하기

MXML 과 ActionScript 를 사용한 코딩 간단한 어플리케이션 제작 이벤트 처리 Flex 구성 요소의 위치 및 레이아웃 지정 어플리케이션 에셋 임베드

Flex 빠른 시작 가이드 : 간단한 유저 인터페이스 구축 컨트롤 사용 컨테이너 사용 구성 요소 스타일 지정 효과 추가 상태 만들기 상태 전환 정의 툴팁 사용 커서 제어

기술 문서 FLEX Builder 2 를 이용한 FLEX 어플리케이션 제작 Flex Data Service 의 개요 Flex Data Services 2 에서 RPC 서비스 사용 Flex 를 사용해 사용자의 웹 경험을 변화시키는 방법 ActionScript 3.0 개요 ActionScript 3.0 학습에 도움이 되는 팁 Flex 2.0: 차세대 리치 인터넷 어플리케이션 제작

9. 기타


참고 문서

1. AIR 소개 자료 : http://okgosu.net/pds/AIR_RIA4Desktop_20070724.ppt

2. 플렉스 도입 가이드 문서 플렉스 도입 가이드

Flex 및 FDS 아키텍쳐

플렉스개발가이드 모음

Flex1.5/FLEX2/FLEX3 기술비교

ADOBE FLEX2.0 소개

LiveCycle PolicyServer 소개자료

SAP 의 VC 의 Flex1.5 vs Flex2.0 비교

Why Flex? by okgosu

WhyOpenSource by okgosu

캔곰프레임워크 아키텍쳐

9. 기타


플렉스 관련된 FAQ

RIA 기술로서의 플렉스 3대 장점1. UI 개선 : 플래시와 같은 화면 및 이펙트

2. 속도 개선 : 화면을 모두 전송받아 PC 에서 실행하고 데이터만 서버에서 요청하므로 처리 속도가 빠름

3. 코드 재사용 : 플렉스는 컴포넌트로 되어있기 때문에 코드 재사용성이 매우 높음

* 플렉스 만의 3대 장점1. 다양한 컴포넌트 활용 : 많은 오픈 소스 플렉스 컴포넌트와 상용 컴포넌트들을 활용할 수 있음

2. 플래시 디자이너와 협업 : 플래시 디자인을 플렉스 컴포넌트로 간단히 변환하여 사용 가능

3. 멀티플랫폼 , 멀티디바이스 가능 : AIR 를 이용하여 배포 가능

9. 기타


플렉스 관련된 FAQ

LCDS( 구 FDS) 의 4대 장점1. 데이터 처리 속도 향상 : 압축된 데이터 포맷으로 대량의 데이터도 빠르게 처리 가능

2. 기존 시스템 프레임웍과 쉽게 연동 가능

3. 실시간 서버 데이터 푸쉬 : 서버에서 실시간으로 데이터를 받아 클라이언트에 전송 가능

4. 데이터 보안 적용 : HTTPS 또는 3rd 파티 보안 서버와 연동

플렉스 데이터 서비스를 사용하지 않았을 경우1. 성능 보장이 안됨

2. 서버에서 클라이언트에 데이터 푸쉬를 할 수 없음

3. 데이터는 xml 로 처리해야 하므로 프레임워크와의 연계가 어렵고 데이터 보안 적용이 어려움

4. 실시간 연동 및 협업 애플리케이션 개발이 어려움

AIR( 아폴로 ) 의 3대 장점1. 실행 속도 향상 : 사용자 PC 에 실행코드가 설치됨

2. CS 수준의 기능 제공 : 파일 읽고 쓰기 및 네트워킹 , 윈도우 애플리케이션 통제 등이 가능

3. 멀티 OS 지원 : 윈도우 , 매킨토시 , 리눅스 지원

9. 기타
