Flex 2 Introductionokgosu.net/pds/ADOBE_FLEX2.0_20070322.pdf플렉스는html내에임베드될수있으며html의자바스크립트와플렉스의액션스크립트는서로호출하여결과를받을

2006 Adobe Systems Incorporated. All Rights Reserved.1

Flex 2 Introduction

Sang-Houn Ok

Adobe Presales

2007-02-09


목차

What is X-internet ?X-Internet = C/S + WEB

X-Internet 기술 아키텍쳐

C/S - WEB - X-internet

X-Internet 기술 비교

What is WEB 2.0 ?WEB 2.0은 트랜드이다.

WEB 2.0 구현을 위한 기술 3요소

What is Flex 2 ?Flex 2

Flash vs Flex

Flex 2의 구성

Flex 2 개발Flex 2 개발을 위한 기초

Flex Builder 2

Flex Component

Custom Component

Flex 컴포넌트 연동

Flex Data Services 2FDS의 기능

실시간 처리

대량 데이터 처리

Demo

ApolloWhat is Apollo?

Apollo Applicaion

Flex 구축 사례


CLIENT/SERVERMAINFRAME

WEB APPLICATIONS

REA

CH

Local

Global

RICHText UI Integrated media GUI

1992

1998

2004

X-internet

WEB 2.0

C/S 장점 + WEB 장점 = X-internet What is X-Internet ?


컴포넌트 라이브러리

컴포넌트 실행코드

컴포넌트 실행엔진

컴포넌트 실행환경

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

SWF (플래시실행파일)

플래시 플레이어

웹브라우저

[X인터넷] [플렉스]

X인터넷의 기술 아키텍쳐 What is X-Internet ?


C/S – WEB – X-Internet 비교

C/S WEB X-internet (Flex)

유저인터페이스 자체컴포넌트 Html(jsp 등) 자체컴포넌트

설치프로그램 클라이언트모듈 없음 플래시플레이어

웹서비스 이용 낮다 높다 높다

대량 데이터처리 가능 제한적 가능

오프라인작업 가능 불가능 가능

실시간 모니터링 가능 제한적 가능

컴포넌트 개발 제한적 템플릿화 가능

네트워크사용량 적음 높음 적음

레거시시스템 연동 제한적 가능 가능

프로그램배포 설치프로그램필요 없음 자동배포

What is X-Internet ?

주) X-internet은 RIA(Rich Internet Application)이라고도 함


X-Internet 기술 비교

Flash SmartClient Flex Ajax Droplet

★ ★ ★ ★

★ ★

★

★ ★

★

★

★

★ ★

★ ★

실시간 서비스 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

★ ★ ★

★ ★

★ ★

★ ★

★

★ ★ ★

★

★

★ ★

★ ★

★ ★

★

★

★ ★ ★

★ ★

★ ★ ★

★

Curl

범용성 ★ ★ ★ ★ ★ ★ ★

UI풍부성 ★ ★ ★ ★ ★ ★

개발환경 용이성 ★ ★ ★ ★ ★ ★ ★ ★

다중플랫폼지원 ★ ★ ★ ★ ★ ★ ★

벤더기술 독립성 ★ ★ ★ ★

기술자 Pool 및 이전용이성 ★ ★ ★ ★ ★ ★

컴포넌트화 ★ ★ ★ ★ ★ ★ ★

다중디바이스 지원 ★ ★ ★ ★ ★

프로그램배포 용이성 ★ ★ ★ ★ ★ ★ ★

What is X-Internet ?


WEB 2.0은 트랜드이다

WEB 2.0은 기존의 WEB과 구분 지으려는 새로운 트랜드이다.

사회 문화적인 정의

대중이 적극 참여, 공유 활동으로써 새로운 컨텐츠를 지속 창출해내는 문화

많은 사용자 경험에 의해 새로운 지성과 문화를 만들어 내는 웹의 사회적인 현상

기술적인 정의

웹을 플랫폼으로 사용하기 위한 제반 기술 트랜드

웹을 소프트웨어 작동을 위한 환경으로 인식

기술 키워드

시멘틱(Semantic) : RSS, SOAP

리치(Rich) : RIA, Ajax, Flex

보덜리스(Borderless) : Widget, Flash

오픈(Open) : Open API, User Community, Always Beta

스탠다드(Standard) : XML, CSS, UTF-8, HTML, ECMAScript

매쉬업(Mash-up)

What is WEB 2.0?


View: 리치 인터넷

Model: 표준화된 데이터

Control: 공개된 API

WEB2.0 구현을 위한 기술 3요소 - MVC What is WEB 2.0?


플렉스는 무엇인가요?

플렉스는 디자이너들이 플래시로 개발하는 화면을 개발자들이XML(MXML) 및 스크립트 언어(액션스크립트)로 화면을 개발할 수 있도록만든 X-Internet기술입니다.

컴파일

XML로 된 소스 파일(MXML) 플래시 플레이어에서 작동하는 실행 파일(SWF)

What is Flex 2?


플렉스와 플래시의 차이점은 무엇입니까?

플렉스는 플래시 기술로부터 탄생했습니다.

그래서 플래시나 플렉스로 구축된 사이트는 비슷한 UI를 가집니다.

플렉스는 플래시의 컴포넌트들을 XML태그로 표현할 수 있도록 컴포넌트화 하였습니다.

플래시는 플래시8(또는 스튜디오8)로써 각종 도형과 컴포넌트들을 마우스로써 디자인하는 반면, 플렉스는 그런 플래시 컴포넌트들을 XML태그 스크립트를 코딩합니다.

아래는 플래시MX에서 버튼을 만드는 것과 플렉스빌더에서 버튼을 만드는 것을 캡쳐한 것입니다.

플래시개발 플렉스개발

What is Flex 2?


Flex 2의 구성 What is Flex 2?

Visual LayoutVisual Layout

Flex Builder 2

Code HintingCode Hinting

DebuggingDebugging

Skinning and StylingSkinning and Styling

Flex SDK 2

Flex Utilities Compiler, Debugger, Automated Testing

Flex Data Services 2

Message ServicesMessage Services

Data Management ServiceData Management Service

RPC ServicesRPC Services

Flex Languages MXML and ActionScript 3.0

Flex Framework

Components, Containers, LayoutManagers, Behaviors, and Effects

ChartingCharting

Flex Charting Extensible charting componentExtensible charting component


Flex 개발을 위한 기초

플렉스 코드는 XML기반의 mxml태그와자바스크립트와 유사한 액션스크립트로 구성되어있습니다.

MXML을 배우기 위해서는

html태그에 대한 기본 지식(CSS포함)

XML에 대한 기본 문법

ActionScript를 배우기 위해서는

자바스크립트 기본 지식

이벤트 및 객체에 대한 이해

그 외에 알면 도움되는 것들

JDBC를 사용하는 자바빈즈 코딩

플래시 기초 (SWC컴포넌트 제작관련)[코드 예]<?xml version="1.0" encoding=“utf-8"?><mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Script>function myButtonClick() {

mx.controls.Alert.show('Hello Flex !', ‘OkGosu.Net');}

</mx:Script><mx:Box backgroundColor="yellow" width="100" height="100" horizontalAlign="center" verticalAlign="middle">

<mx:Button label="클릭" fontSize="20" click="myButtonClick()"/></mx:Box>

</mx:Application>

Flex 2 개발


Flex Builder 2 기능 – 시각적 레이아웃 및 디자인

Flex Builder 2의 디자인 뷰를 사용하여 복잡한 Flex 어플리케이션을신속하게 디자인

그래픽 방식의 속성 편집기를 사용하셔 컴포넌트의 스타일을 변경하고디자인 뷰에서 바로 미리 볼 수 있음.

Flex 2 개발


플렉스에는 어떤 컴포넌트들이 있나요? Flex 2 개발

컨트롤 컴포넌트

사용자와 직접 반응을 하는 컴포넌트 (예 : 버튼)

MXML API를 통해서 속성과 이벤트를 정의

액션스크립트에서 조작이 가능

컨테이너 컴포넌트

컴포넌트 들을 담아서 위치를 잡아주는 컴포넌트 (예 : 캔버스)

플래시 플레이어가 그리는 사각 표면을 정의

종류

컨트롤의 크기와 위치를 정의하는 Layout 컨테이너

컨트롤의 이동과 네비게이션을 정의하는 Navigator 컨테이너


1 2 3

4

5

6

7

8

9

10

11

12

13 14

15

16

17

18

19

20

21

1.Button 2.CheckBox3.ColorPicker 4.DateChooser5.DateField 6.Hslider7.Vsilder 8.Image9.Label 10.LinkButton11.DataGrid 12.RichTextEditor13.NumericStepper 14.ComboBox 15.PopUpButton 16.PopUpMenuButton17.ProgressBar 18.RadioButtonGroup19.Text 20.TextInput21.TextArea

컨트롤 컴포넌트 Flex 2 개발


컨테이너 컴포넌트 (레이아웃)

1.Canvas 2.HBox 3.HDividedBox 4.HRule5.VBox 6.VDividedBox 7.Vrule 8.Tile 9.Grid 10.Panel & ControlBar 11. TitleWindow 12.Form

1 2

3

5 6

4

7

8 9

1011 12

Flex 2 개발


컨테이너 컴포넌트(네비게이터)

1.Accordion 2.TabNavigator 3.ViewStack 4.ButtonBar 5.LinkBar 6.MenuBar 7.TabBar 8.ToggleButtonBar

1

3

2

4

5

6

7

8

Flex 2 개발


챠트 컴포넌트

1 2 3

4 5 6

7 8 9

LineChart ColumnChart AreaChart

BarChart PieChart PlotChart

HLOCChartCandleStickChartBubbleChart

Flex 2 개발


플렉스 컴포넌트 확장

플렉스에서 제공하지 않는 컴포넌트는 3가지 방법으로 구할 수 있습니다.기존 컴포넌트를 확장(기능 추가)해서 사용

액션스크립트로 새로운 컴포넌트로 정의해서 사용

플래시의 컴포넌트를 플렉스에 넣어서 사용

Flex 2 개발


플렉스에서 데이터와 연동은 어떻게 하나요?

플렉스는 3가지 방법으로 데이터와 연동할 수 있습니다.WebService 호출 : 오브젝트 리턴

자바빈즈 호출 : 오브젝트 리턴

특정 URL호출 : XML데이터 리턴

Flex Server

Client Browser

FlashPlayer7.0

MXMLMXMLMXML

SWFSWFSWF

MXMLMXMLJSP

JSP Container

EJBEJBEJBWebServiceWebServiceWebService

MXMLMXMLXMLMXMLMXMLJSP

MXMLMXML

JavaBeans

<mx:RemoteObject> <mx:WebService> <mx:HTTPService> <mx:HTTPService>

flex-config.xml

<mx:HTTPService>

<mx:RemoteObject>

Flex 2 개발


플래시, HTML, ActiveX 등 기타 애플리케이션과의 연동

모두 연동이 가능합니다. 즉 서로 함수를 호출할 수 있으며 호출할 때 파라미터를 같이넘겨주고 결과를 받을 수 있습니다.

플래시는 플렉스에서 컴포넌트로 사용할 수 있으며 액션스크립트로 제어할 수 있습니다.

플렉스는 html내에 임베드될 수 있으며 html의 자바스크립트와 플렉스의 액션스크립트는 서로 호출하여 결과를 받을수 있습니다.

ActiveX의 function은 자바스크립트를 통해서 플렉스의 액션스크립트에서 호출할 수 있습니다.

기타 웹에서 작동하는 애플리케이션은 자바스크립트를 통해 플렉스의 액션스크립트를 호출함으로써 제어가가능합니다.

Flex 2 개발


Flex Data Services 2의 기능

Flex Data Services

Web Service

RPC 서비스

HTTP Service

Remote Object

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

데이터 동기화

데이터 관리

OCC

페이징

Run

time

Com

pile

rR

untim

e C

ompi

ler협업

메시징

Publish/Subscribe

데이터 푸시

JavaJava JMSJMS HibernateHibernate ColdFusionColdFusion Custom…Custom…

Flex Data Service 2


실시간 처리

MessageService

Flex Enterprise Services

Adapter Y

Adapter X

MessagingSystem Y

MessagingSystem X

Endpoint JMSProviderJMS Adapter

PublisherSubscriber

RTMPAMFHTTP

Flex Data Service 2

http://cloud.macromedia.com/strategy/2005/roadmap.html






대량 데이터 처리

데이터 처리

수만 건의 데이터 처리 가능

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

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

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

Ajax-Flex (X ML)-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

데이터건수

수행

시간

Ajax

Flex(XML)

Flex(FDS:RO)

Flex Data Service 2


John’s session Linda’s session

Demo : Collaboration Dashboard Flex Data Service 2


Demo : Data Services

Data Service를 이용하면

MVC 아키텍쳐 코딩 : Model(DAO 이용)과 View의 분리

실시간 데이터 동기화

Flex Data Service 2


아폴로(Apollo)

Free cross-operating system runtime

Desktop에서 브라우저 없이 RIA 실행

Flash, Flex, HTML, JavaScript, Ajax

2007년 상반기 릴리즈

Apollo APIsFile I/O

Online / Offline

Windowing

Clipboard

System Drag and Drop

Full Network API support

Local Storage / Settings

Flash content via ActionScript 3 / AVM2, and thus Flash 8 / AVM1 SWF

Apollo Runtime


What is “Apollo”? Apollo Runtime


“Apollo” Applications

Installed from web browser or file system

Launched like any desktop application

Chrome completely controlled by application

Integrated with usual desktop functionality

Apollo Runtime


Flex 2 적용 분야 및

사례


Flex 적용 분야

Product Configuration & Selection

고객이 원하는 정보를 보다편리하고 신속하게 찾고구성할 수 있도록 함으로써구매 유도 -> 매출 증대

고객 사례Harley DavisonVadaphoneCJMall 등 다수

Data Visualization

복잡한 다단계의 작업을Flex로 구현하여 화면이동을 최소화하고 직관적인인터페이스를 제공하여 작업생산성 증대 및 오류율 감소

고객 사례Dorado, Zones, Optimal Payments , 신한은행, 이니텍, 한밭대등 다수

챠트나 그리드를 이용한시각적인 데이터 현황판을제공하여 보다 빠른 의사결정을 가능하게 함.

고객 사례SAP, Brocade, 삼성전자동부그룹, 태평양 등 다수

Complex, Multi-Step Processes

http://www.harley-davidson.com/pr/gm/customizer/launchCustomizer.asp

http://flexapps.macromedia.com/flex15/worldco/worldco.swf


금융금융

공공공공

건설/화학건설/화학

교육교육서비스서비스

제조제조

통신통신

솔루션 OEM 솔루션 OEM

유통유통

삼성전자, 태평양, LG Philips LCD, 후지쯔, LS 산전, LG 그룹

Handy Soft, DI2, M2 Soft, Wemb, 이니텍, 이메타,

동부정보기술, LG CNS, LG AD

KT(SEM), KTF

CJ 홈쇼핑, GS eShop

굿모닝 신한증권, 삼성카드, 신한은행, 동부화재

부산교육청, 서울시 시설관리공단, 국방(5163 부대)

동부건설, 동부한농화학

한밭대학교, 동명대학교, 인제대학교, 금오공과대학교, 상주대학교, 호남대학교, 동신대학교, 광주대학교, 전주대학교, 나사렛대학교, 대덕대학교, 배제대학교, 김천대학교, 서울산업대학교, 서울여자대학교, 전남과학대학

Flex2 는 제조, 금융, 통신, 공공 및 교육 등 전 사업분야에 적용되고 있으며, 타 솔루션 제품에 OEM 형태로 판매되고 있습니다.

국내 주요 고객사


해외 주요 고객사

플랫폼 벤더

정부/공공

금융 분야

통신

기타

교육


제조 분야 고객사례 : 삼성전자

삼성전자

반도체 사업부문 : 임원 정보 시스템

반도체 사업부문: 사회 공헌 시스템

반도체 사업부문: DVS (Design Verification System)

반도체 사업 부문: 기존 E_Spec화면을 Flex로전환 중임.

프린터 사업부: 해외 영업 현황 관리 및 제품정보 시스템

2006년 6월 삼성전자 표준 X-Internet 솔루션으로 Flex 선정

현재 온양사업자, 구미 사업장, 화성사업장에서 다수의 프로젝트 진행 중

어도비Flex, 삼성전자 X-인터넷표준으로 채택돼

[동아일보 2006-06-30 12:33]

어도비시스템즈는 어도비 Flex(Flex)가 삼성전자의X-인터넷 표준으로 채택되었다고 30일 밝혔다.

어도비 Flex는 최근 차세대 인터넷으로 각광받는웹2.0의 핵심 기술인 리치 인터넷 애플리케이션(RIA, Rich Internet Application)을 지향하는 최적의솔루션이다. …

삼성전자의 한 관계자는 "시스템 접속속도 향상, 사용자들의 다양한 화면 개발요구 충족을 위해최근에 X-인터넷 표준으로 어도비의 Flex를 채택하는등 IT 솔루션에 대한 지속적인 제품 표준화를추진함으로써 시스템의 안정성을 확보하고 유지보수비용을 절감할 수 있을 것으로 기대한다"라고 말했다.


OEM 고객사례 : 핸디소프트

Handy BAM (Business Activity Monitoring) 솔루션 UI에 Flex 적용

Handy BAM업무 프로세스의 실행 중에발생하는 이벤트와 데이터를실시간으로 파악하여, 지표와조직 및 프로세스 관점에서의비즈니스 성과를 측정하고, 이벤트를 분석하여 실시간으로경보를 제공하는 시스템.

Handy BAM 솔루션에 Flex가포함되어 공급됨


• 개요동부 그룹 전사정보를 한 눈에 보기 위한 임원용EIS 시스템을 Flex로 구축

• Flex 도입 효과- 직관적이고 풍부한 UI 제공- 브라우저 내에 C/S 환경 구축- 한 눈에 전반적인 상황 파악- 전사정보의 실시간 서비스로 빠른 의사 결정이

가능해짐.

서비스 분야 사례 : 동부그룹 EIS


• 개요TV 방송에서 진행한 인터넷 쇼핑몰에서 다시볼 수 있는 서비스를 Flex로 구축

• Flex 도입 효과- 고객에게 직관적이고 편리한 UI 제공- 원하는 정보를 신속하게 검색- 고객별 검색 요건에 따라 원하는 정보를

즉각적으로 필터링 (no page refresh, 슬라이드 바 등의 직관적인 UI로 필터링 기능수행)

유통 분야 사례 : CJMall eTV 홈쇼핑


• 개요굿모닝 신한증권 내의 시스템별 장애 현황을 한 눈에 파악하기 위한 관리 시스템 구축에 Flex를 사용

• Flex 도입 효과- 업무 Flow별 장애 상태 확인 가능- 장비별 비즈니스 장애율을 직관적으로 제공하여

효율적 유지 보수 가능- Dash Board를 통한 시스템 통합 관리- 직관적인 UI 제공

금융 분야 사례 : 굿모닝 신한증권 AMS


공공 분야 사례 : 생산기술연구원

요약 :

생산기술연구원 성과관리 시스템

도입효과

연구원의 연구 성과를 실시간으로관리하고 연구 성과를 투명하게관리하여 연구 진척 상황을실시간으로 파악 할 수 있도록 함.

기타 공공 레퍼러스

- 가축개량사업소 육종농가관리시스템

- KISTI 연구관리시스템

- 국정원 사이버교육시스템


교육 분야 사례 : 한밭대 학사행정 시스템

개요 :

한밭 대학교 대학 종합 정보 관리 시스템

도입 효과

Flex 2를 활용하여 빠른 데이터 처리가장점인 클라이언트측 프로세싱과 개발의효율성 및 유지보수의 용이성을 위한객체지향 컴포넌트 환경을 지향하고, 직관적인 UI가 가능한 Dynamic Web(Web2.0)기반의 학사 시스템을 구축 가능


OEM 사례 1 : WeMB

WeMB는 HP OpenView UI, IWR(Intelligent Web Report)솔루션을 Flex기반으로 제공하고 있음

기존의 웹 어플리케이션의 특성 및 한계를 극복

Flex Dataset component를 통한 빠른 응답 속도와 대용량 데이터 통합 처리

기존의 Chart의 한계를 뛰어넘는 다차원 Chart 제공

데모 링크: http://www.wemb.co.kr/demo/demo_sample/GMSH/Demo/index.html

http://www.wemb.co.kr/demo/demo_sample/GMSH/Demo/index.html


OEM 사례 2 : M2Soft

M2Soft의 Report Designer에 Flex 적용 중

M2Soft Report Designer는 다양한 데이터베이스와 직,간접으로 연동하여 사용자의 요구에 맞는 보고서를 손쉽게작성할 수 있는 Reporting Tool

M2Soft Report Designer는 Server, Editor, Viewer로 구성됨


기타 국내 Flex OEM 사례

Initech보안 인증 모듈 Flex적용

Di2Reporting 모듈 Flex 적용

eMeta대학 학사행정 시스템 솔루션 UI Flex 적용


Documents

Flex 2 Introductionokgosu.net/pds/ADOBE_FLEX2.0_20070322.pdf플렉스는html내에임베드될수있으며html의자바스크립트와플렉스의액션스크립트는서로호출하여결과를받을