Post on 01-Mar-2020
2006 Adobe Systems Incorporated. All Rights Reserved.1
Flex 2 Introduction
Sang-Houn Ok
Adobe Presales
2007-02-09
2006 Adobe Systems Incorporated. All Rights Reserved.2
목차
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 구축 사례
2006 Adobe Systems Incorporated. All Rights Reserved.3
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 ?
2006 Adobe Systems Incorporated. All Rights Reserved.4
컴포넌트 라이브러리
컴포넌트 실행코드
컴포넌트 실행엔진
컴포넌트 실행환경
플렉스 컴포넌트 라이브러리
SWF (플래시실행파일)
플래시 플레이어
웹브라우저
[X인터넷] [플렉스]
X인터넷의 기술 아키텍쳐 What is X-Internet ?
2006 Adobe Systems Incorporated. All Rights Reserved.5
C/S – WEB – X-Internet 비교
C/S WEB X-internet (Flex)
유저인터페이스 자체컴포넌트 Html(jsp 등) 자체컴포넌트
설치프로그램 클라이언트모듈 없음 플래시플레이어
웹서비스 이용 낮다 높다 높다
대량 데이터처리 가능 제한적 가능
오프라인작업 가능 불가능 가능
실시간 모니터링 가능 제한적 가능
컴포넌트 개발 제한적 템플릿화 가능
네트워크사용량 적음 높음 적음
레거시시스템 연동 제한적 가능 가능
프로그램배포 설치프로그램필요 없음 자동배포
What is X-Internet ?
주) X-internet은 RIA(Rich Internet Application)이라고도 함
2006 Adobe Systems Incorporated. All Rights Reserved.6
X-Internet 기술 비교
Flash SmartClient Flex Ajax Droplet
★ ★ ★ ★
★ ★
★
★ ★
★
★
★
★ ★
★ ★
실시간 서비스 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★
★ ★ ★
★ ★
★ ★
★ ★
★
★ ★ ★
★
★
★ ★
★ ★
★ ★
★
★
★ ★ ★
★ ★
★ ★ ★
★
Curl
범용성 ★ ★ ★ ★ ★ ★ ★
UI풍부성 ★ ★ ★ ★ ★ ★
개발환경 용이성 ★ ★ ★ ★ ★ ★ ★ ★
다중플랫폼지원 ★ ★ ★ ★ ★ ★ ★
벤더기술 독립성 ★ ★ ★ ★
기술자 Pool 및 이전용이성 ★ ★ ★ ★ ★ ★
컴포넌트화 ★ ★ ★ ★ ★ ★ ★
다중디바이스 지원 ★ ★ ★ ★ ★
프로그램배포 용이성 ★ ★ ★ ★ ★ ★ ★
What is X-Internet ?
2006 Adobe Systems Incorporated. All Rights Reserved.7
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?
2006 Adobe Systems Incorporated. All Rights Reserved.8
View: 리치 인터넷
Model: 표준화된 데이터
Control: 공개된 API
WEB2.0 구현을 위한 기술 3요소 - MVC What is WEB 2.0?
2006 Adobe Systems Incorporated. All Rights Reserved.9
플렉스는 무엇인가요?
플렉스는 디자이너들이 플래시로 개발하는 화면을 개발자들이XML(MXML) 및 스크립트 언어(액션스크립트)로 화면을 개발할 수 있도록만든 X-Internet기술입니다.
컴파일
XML로 된 소스 파일(MXML) 플래시 플레이어에서 작동하는 실행 파일(SWF)
What is Flex 2?
2006 Adobe Systems Incorporated. All Rights Reserved.10
플렉스와 플래시의 차이점은 무엇입니까?
플렉스는 플래시 기술로부터 탄생했습니다.
그래서 플래시나 플렉스로 구축된 사이트는 비슷한 UI를 가집니다.
플렉스는 플래시의 컴포넌트들을 XML태그로 표현할 수 있도록 컴포넌트화 하였습니다.
플래시는 플래시8(또는 스튜디오8)로써 각종 도형과 컴포넌트들을 마우스로써 디자인하는 반면, 플렉스는 그런 플래시 컴포넌트들을 XML태그 스크립트를 코딩합니다.
아래는 플래시MX에서 버튼을 만드는 것과 플렉스빌더에서 버튼을 만드는 것을 캡쳐한 것입니다.
플래시개발 플렉스개발
What is Flex 2?
2006 Adobe Systems Incorporated. All Rights Reserved.11
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
2006 Adobe Systems Incorporated. All Rights Reserved.12
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 개발
2006 Adobe Systems Incorporated. All Rights Reserved.13
Flex Builder 2 기능 – 시각적 레이아웃 및 디자인
Flex Builder 2의 디자인 뷰를 사용하여 복잡한 Flex 어플리케이션을신속하게 디자인
그래픽 방식의 속성 편집기를 사용하셔 컴포넌트의 스타일을 변경하고디자인 뷰에서 바로 미리 볼 수 있음.
Flex 2 개발
2006 Adobe Systems Incorporated. All Rights Reserved.14
플렉스에는 어떤 컴포넌트들이 있나요? Flex 2 개발
컨트롤 컴포넌트
사용자와 직접 반응을 하는 컴포넌트 (예 : 버튼)
MXML API를 통해서 속성과 이벤트를 정의
액션스크립트에서 조작이 가능
컨테이너 컴포넌트
컴포넌트 들을 담아서 위치를 잡아주는 컴포넌트 (예 : 캔버스)
플래시 플레이어가 그리는 사각 표면을 정의
종류
컨트롤의 크기와 위치를 정의하는 Layout 컨테이너
컨트롤의 이동과 네비게이션을 정의하는 Navigator 컨테이너
2006 Adobe Systems Incorporated. All Rights Reserved.15
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 개발
2006 Adobe Systems Incorporated. All Rights Reserved.16
컨테이너 컴포넌트 (레이아웃)
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 개발
2006 Adobe Systems Incorporated. All Rights Reserved.17
컨테이너 컴포넌트(네비게이터)
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 개발
2006 Adobe Systems Incorporated. All Rights Reserved.18
챠트 컴포넌트
1 2 3
4 5 6
7 8 9
LineChart ColumnChart AreaChart
BarChart PieChart PlotChart
HLOCChartCandleStickChartBubbleChart
Flex 2 개발
2006 Adobe Systems Incorporated. All Rights Reserved.19
플렉스 컴포넌트 확장
플렉스에서 제공하지 않는 컴포넌트는 3가지 방법으로 구할 수 있습니다.기존 컴포넌트를 확장(기능 추가)해서 사용
액션스크립트로 새로운 컴포넌트로 정의해서 사용
플래시의 컴포넌트를 플렉스에 넣어서 사용
Flex 2 개발
2006 Adobe Systems Incorporated. All Rights Reserved.20
플렉스에서 데이터와 연동은 어떻게 하나요?
플렉스는 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 개발
2006 Adobe Systems Incorporated. All Rights Reserved.21
플래시, HTML, ActiveX 등 기타 애플리케이션과의 연동
모두 연동이 가능합니다. 즉 서로 함수를 호출할 수 있으며 호출할 때 파라미터를 같이넘겨주고 결과를 받을 수 있습니다.
플래시는 플렉스에서 컴포넌트로 사용할 수 있으며 액션스크립트로 제어할 수 있습니다.
플렉스는 html내에 임베드될 수 있으며 html의 자바스크립트와 플렉스의 액션스크립트는 서로 호출하여 결과를 받을수 있습니다.
ActiveX의 function은 자바스크립트를 통해서 플렉스의 액션스크립트에서 호출할 수 있습니다.
기타 웹에서 작동하는 애플리케이션은 자바스크립트를 통해 플렉스의 액션스크립트를 호출함으로써 제어가가능합니다.
Flex 2 개발
2006 Adobe Systems Incorporated. All Rights Reserved.22
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
2006 Adobe Systems Incorporated. All Rights Reserved.23
실시간 처리
MessageService
Flex Enterprise Services
Adapter Y
Adapter X
MessagingSystem Y
MessagingSystem X
Endpoint JMSProviderJMS Adapter
PublisherSubscriber
RTMPAMFHTTP
Flex Data Service 2
2006 Adobe Systems Incorporated. All Rights Reserved.24
대량 데이터 처리
데이터 처리
수만 건의 데이터 처리 가능
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
2006 Adobe Systems Incorporated. All Rights Reserved.25
John’s session Linda’s session
Demo : Collaboration Dashboard Flex Data Service 2
2006 Adobe Systems Incorporated. All Rights Reserved.26
Demo : Data Services
Data Service를 이용하면
MVC 아키텍쳐 코딩 : Model(DAO 이용)과 View의 분리
실시간 데이터 동기화
Flex Data Service 2
2006 Adobe Systems Incorporated. All Rights Reserved.27
아폴로(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
2006 Adobe Systems Incorporated. All Rights Reserved.28
What is “Apollo”? Apollo Runtime
2006 Adobe Systems Incorporated. All Rights Reserved.29
“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
2006 Adobe Systems Incorporated. All Rights Reserved.30
Flex 2 적용 분야 및
사례
2006 Adobe Systems Incorporated. All Rights Reserved.31
Flex 적용 분야
Product Configuration & Selection
고객이 원하는 정보를 보다편리하고 신속하게 찾고구성할 수 있도록 함으로써구매 유도 -> 매출 증대
고객 사례Harley DavisonVadaphoneCJMall 등 다수
Data Visualization
복잡한 다단계의 작업을Flex로 구현하여 화면이동을 최소화하고 직관적인인터페이스를 제공하여 작업생산성 증대 및 오류율 감소
고객 사례Dorado, Zones, Optimal Payments , 신한은행, 이니텍, 한밭대등 다수
챠트나 그리드를 이용한시각적인 데이터 현황판을제공하여 보다 빠른 의사결정을 가능하게 함.
고객 사례SAP, Brocade, 삼성전자동부그룹, 태평양 등 다수
Complex, Multi-Step Processes
2006 Adobe Systems Incorporated. All Rights Reserved.32
금융금융
공공공공
건설/화학건설/화학
교육교육서비스서비스
제조제조
통신통신
솔루션 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 형태로 판매되고 있습니다.
국내 주요 고객사
2006 Adobe Systems Incorporated. All Rights Reserved.33
해외 주요 고객사
플랫폼 벤더
정부/공공
금융 분야
통신
기타
교육
2006 Adobe Systems Incorporated. All Rights Reserved.34
제조 분야 고객사례 : 삼성전자
삼성전자
반도체 사업부문 : 임원 정보 시스템
반도체 사업부문: 사회 공헌 시스템
반도체 사업부문: 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 솔루션에 대한 지속적인 제품 표준화를추진함으로써 시스템의 안정성을 확보하고 유지보수비용을 절감할 수 있을 것으로 기대한다"라고 말했다.
2006 Adobe Systems Incorporated. All Rights Reserved.35
OEM 고객사례 : 핸디소프트
Handy BAM (Business Activity Monitoring) 솔루션 UI에 Flex 적용
Handy BAM업무 프로세스의 실행 중에발생하는 이벤트와 데이터를실시간으로 파악하여, 지표와조직 및 프로세스 관점에서의비즈니스 성과를 측정하고, 이벤트를 분석하여 실시간으로경보를 제공하는 시스템.
Handy BAM 솔루션에 Flex가포함되어 공급됨
2006 Adobe Systems Incorporated. All Rights Reserved.36
• 개요동부 그룹 전사정보를 한 눈에 보기 위한 임원용EIS 시스템을 Flex로 구축
• Flex 도입 효과- 직관적이고 풍부한 UI 제공- 브라우저 내에 C/S 환경 구축- 한 눈에 전반적인 상황 파악- 전사정보의 실시간 서비스로 빠른 의사 결정이
가능해짐.
서비스 분야 사례 : 동부그룹 EIS
2006 Adobe Systems Incorporated. All Rights Reserved.37
• 개요TV 방송에서 진행한 인터넷 쇼핑몰에서 다시볼 수 있는 서비스를 Flex로 구축
• Flex 도입 효과- 고객에게 직관적이고 편리한 UI 제공- 원하는 정보를 신속하게 검색- 고객별 검색 요건에 따라 원하는 정보를
즉각적으로 필터링 (no page refresh, 슬라이드 바 등의 직관적인 UI로 필터링 기능수행)
유통 분야 사례 : CJMall eTV 홈쇼핑
2006 Adobe Systems Incorporated. All Rights Reserved.38
• 개요굿모닝 신한증권 내의 시스템별 장애 현황을 한 눈에 파악하기 위한 관리 시스템 구축에 Flex를 사용
• Flex 도입 효과- 업무 Flow별 장애 상태 확인 가능- 장비별 비즈니스 장애율을 직관적으로 제공하여
효율적 유지 보수 가능- Dash Board를 통한 시스템 통합 관리- 직관적인 UI 제공
금융 분야 사례 : 굿모닝 신한증권 AMS
2006 Adobe Systems Incorporated. All Rights Reserved.39
공공 분야 사례 : 생산기술연구원
요약 :
생산기술연구원 성과관리 시스템
도입효과
연구원의 연구 성과를 실시간으로관리하고 연구 성과를 투명하게관리하여 연구 진척 상황을실시간으로 파악 할 수 있도록 함.
기타 공공 레퍼러스
- 가축개량사업소 육종농가관리시스템
- KISTI 연구관리시스템
- 국정원 사이버교육시스템
2006 Adobe Systems Incorporated. All Rights Reserved.40
교육 분야 사례 : 한밭대 학사행정 시스템
개요 :
한밭 대학교 대학 종합 정보 관리 시스템
도입 효과
Flex 2를 활용하여 빠른 데이터 처리가장점인 클라이언트측 프로세싱과 개발의효율성 및 유지보수의 용이성을 위한객체지향 컴포넌트 환경을 지향하고, 직관적인 UI가 가능한 Dynamic Web(Web2.0)기반의 학사 시스템을 구축 가능
2006 Adobe Systems Incorporated. All Rights Reserved.41
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
2006 Adobe Systems Incorporated. All Rights Reserved.42
OEM 사례 2 : M2Soft
M2Soft의 Report Designer에 Flex 적용 중
M2Soft Report Designer는 다양한 데이터베이스와 직,간접으로 연동하여 사용자의 요구에 맞는 보고서를 손쉽게작성할 수 있는 Reporting Tool
M2Soft Report Designer는 Server, Editor, Viewer로 구성됨
2006 Adobe Systems Incorporated. All Rights Reserved.43
기타 국내 Flex OEM 사례
Initech보안 인증 모듈 Flex적용
Di2Reporting 모듈 Flex 적용
eMeta대학 학사행정 시스템 솔루션 UI Flex 적용
2006 Adobe Systems Incorporated. All Rights Reserved.44