ADOBE AIR

https://github.com/cepiloth/http://overface.tistory.com/

Jae Hoon, Lim2014.03.26

SUBJECT

1.ABOUTWEB

2.WEBLOUTION

3.INTERNAL DISCORD OF PLATFORM

4.ABOUTAIR

5.MOBILEAPP

6.REFERENCE

ABOUT WEBEvolution Of The Web

ABOUT WEBWeb 2.0 등장배경

클라이언트 / 서버MAIN FRAME

WEB APPLICATIONS

REAC H

LOCAL

GLOBAL

RICHTEXT UI 미디어가 결합된 GUI

1992

1998

2004

HTML 의 한계Page 단위 어플리케이션제한된 UI 브라우저 호환성요청시에만 데이터 제공오프라인시 동작 불가

C/S 환경의 장점스크린 단위 어플리케이션확장가능한 UI 라이브러리온라인 / 오프라인 모드 지원WYSIWYG 형식의 출력

RIA

웹 2.0

ABOUT WEB

<submit><data>

<data><data>

<data><data>

<data><data>

<data><data>

<data>

<submit>

<data>

<data>

<data>

<Web 2.0><Web 1.0>

• 대기시간 축소 • 네트웍 트랙픽 감소 • 서버 부하 경감 • 에러 감소

Web 1.0 vs Web 2.0

ABOUT WEB

WAS 데이터

DBMS

LDAP

CRM/ERP/CM

WebServices.

ServiceAdapter

JavaBeans

JMS

Spring

Hibernate

……

.

WASData

Service

데이터

DBMS

LDAP

CRM/ERP/CM

WebServices.

ServiceAdapter

JavaBeans

JMS

Spring

Hibernate

……

.

……

..

……

..

….

1

2

3

4

N

……

..

……

..

1

2

3

4

N

Query 1

Query 2

Query 3

Query 4

Query N

Query 1Data Cache Service

Messaging Service

RPC ServiceRequest

Response

Produce

Subscribe

<WEB 1.0> <WEB 2.0>

• N 개의 요청당 N 개의 DB 쿼리 실행 • 요청 개수 만큼 트래픽 및 프로세스 실행 • 웹 1.0 • 실시간 서비스 어려움• 리소스 증가 : 시간 , 트래픽 , DB 쿼리

• N 개의 요청당 1 회 만 DB 쿼리 실행 • 트래픽이 줄고 반응이 빠름 • 웹 2.0 • 실시간 협업 서비스• 리소스 감소 : 시간 , 트래픽 , DB 쿼리

WEB ARCHITECTURE

ABOUT WEBWAS

런타임컴파일러

app.mxml

app.swf

http:// acme.com/app.mxml

LiveCycle Data Service

J2EE

Resource

DBMS

LDAP

CRM/ERP/CM

WebServices.

플래시플레이어

데이터 연동 서비스

RPC 서비스

실시간 Data 연동 서비스

Message ServiceData Management Service

ServiceAdapter

JavaBeans

JMS

Spring

Hibernate

……

.

데이터 요청 (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 ServicesWeb Services

Remote Objects

FLEX APPLICATION OPREATION PROCEDURE

ABOUT WEBWEB 2.0

• 새로운 패러다임으로 웹 2.0

• 웹 2.0 용어의 유래와 의미– 과거의 웹활용과 다른 , 새로운 형태의 웹의 활용을 의미– 새로운 기술이 많이 활용되기는 하지만 , 특정한 기술을 의미하지는 않음 (AJAX / RSS 등 )

• 주요특징 - 참여 , 개방 , 공유• X-Internet, RIA

ABOUT WEBRIA vs X-Internet

ABOUT WEB

• X-Internet = eXecutable internet + eXtended In-ternet

X- 인터넷 (X-Internet) 이란 ?

ABOUT WEB

• X-Internet = eXecutable internet + eXtended In-ternet

X- 인터넷 (X-Internet) 이란 ?

WEBOLUTIONWEB3.0 = WEBOLUTION

NETWORKING

INTERNET

WEB 2.0

골격계 형성 근육계 형성 신경계 형성

WEB 3.0

지능망 형성

WEB3.0 = WEBOLUTIONWEBOLUTION

웹 3.0웹 2.0참여 소통

공유 융합

개방 개인화

WEBOLUTIONWEB3.0 = WEBOLUTION

WEBOLUTION

• 소통– 실시간– 협업

• 융합– 정보의 융합– 플랫폼의 융합

• 개인화– 동적인 UI 생성– 위젯

소통 서비스 : 예 ) Facebook.com

융합 서비스 : 예 ) Open Screen Project

개인화 서비스 : 예 ) iGoogle.com

ABOUT RIARich Internet Application

ABOUT RIARIA vs HTML5?

INTERNAL DISCORD OF PLATFORM공주를 만나려면 전문직을 ?

INTERNAL DISCORD OF PLATFORM

• ? = 플랫폼 마다 다른 개발자를 뽑아 ?

기술자인 마리오도 힘들다

ABOUT AIR

[DESKTOP APPLICATION] [WEB APLLICATION] [MOBILE APLLICATION] [DEVICE APPLICATION]

CROSS PLATFORM

ABOUT AIR

<ADOBE AIR>

운영체제

AIR + Flex API

AIR 실행 파일 ( 플렉스 / 플래시 / HTML)

AIR 런타임

<FLEX>

웹브라우저

Flex API

SWF( 플래시 실행파일 )

플래시 플레이어

AIR & FLEX

ABOUT AIRAIR RUNTIME

ABOUT AIR

ADOBE AIR 를 사용하면 웹 개발자는 자신이 갖고 있는 기존 기술을 이용해 리치 인터넷 애플리케이션 (RIA) 을

구축하여 데스크탑에 배포가 가능

ADOBE AIR

ABOUT AIRRIA APLLICATION FOR GENERAL USER

ABOUT AIRRIA APLLICATION FOR GENERAL USER

ABOUT AIRRIA APLLICATION FOR GENERAL USER

ABOUT AIRRIA APLLICATION FOR GENERAL USER

ABOUT AIRRIA APLLICATION FOR GENERAL USER

ABOUT AIRRIA APLLICATION FOR BUSINESS USER

ABOUT AIRRIA APLLICATION FOR BUSINESS USER

ABOUT AIRRIA APLLICATION FOR BUSINESS USER

ABOUT AIRRIA APLLICATION FOR BUSINESS USER

ABOUT AIRRIA APLLICATION FOR BUSINESS USER

ABOUT AIRRIA APLLICATION FOR BUSINESS USER

ABOUT AIRAPPLICATIONS THAT REQUIRE AIR

1. 데스크탑과 기타 데스크탑 어플리케이션 통합2. 로컬 디스크와 같이 로컬 리소스 활용3. 백그라운드에서 어플리케이션 실행4. 사용자와 지속적인 연결5. 오프라인뿐만 아니라 인터넷에 자주 연결하지 않는 경우에도 지원6. 사용자 요구에 맞게 유저 인터페이스를 제작하여 어플리케이션 고유 브랜드 소유

ABOUT AIR

크로스 플랫폼 애플리케이션통합된 렌더링통합된 DOM 및 스크립팅

FlashFlexActionScriptXML오디오비디오

HTML

PDF

HTMLHTMLJavaScriptXMLCSS

Flash

PDF

Adobe AIR API

Mac, Windows, Linux 및 디바이스 OS

파일 시스템 액세스 네트워크 감지 알림 애플리케이션 업데이트 드래그 앤 드롭 로컬 데이터베이스 ...

ADOBE AIR APLLICATION STACK

ABOUT AIRFLASH BUILDER PROJECT TYPE

FLEX PROJECT(WEB)

FLEX PROJECT(DECKTOP)

WEB APPLICATIONS

DESKTOP APPLICATION(Windows, Linux, Mac)

MOBILE APPLICATION(ANDROID, IOS, BLACKBERRY..)FLEX MOBILE PROJECT

MOBILE APPLICATION

(1) 플래시 빌더에서 XML 소스파일 작성

(2)컴파일

(3) 웹브라우저의 플래시플레이어에서 실행

FxExam1_1.mxml

FxExam1_1.swf

FLASH BUILDER USAGE

MOBILE APPLICATION

1. 모바일 브라우저에서 플렉스 웹사이트를 구동하는 것2. 모바일 HTML 처럼 화면 , 폰트 , 이벤트 최적화가 필요함

MOBILE WEB

MOBILE APPLICATION

1. 모바일용 플래시 플레이어가 설치되어 있어야 함2. 플래시플레이어는 안드로이드 마켓에서 무료 다운 로드 가능

MOBILE WEB

MOBILE APPLICATION

1. 플렉스로 만든 안드로이드 앱을 마켓에서 설치함2. 플래시 플레이어모바일 AIR 가 설치되어 있어야함

MOBILE APP

MOBILE APPLICATION

모바일 AIR 가 설치되어 있지 않으면 다음과 같은 설치 안내로 이동

MOBILE APP

MOBILE APP VS MOBILE WEB

모바일앱 모바일웹개발방식 전용 SDK HTML

배포방식 전용 앱스토어 웹사이트장점 폰 API 활용 개발 , 배포용이성단점 잦은 배포와 업데이트 브라우저방식

FLEX 구현 모바일 어플리케이션 웹 어플리케이션

MOBILE APPLICATION

MOBILE APPLICATION

• S/W – TOUCH EVENT, CALL, SQLite DB ETC.• H/W – SENSOR, CAMERA, GPS, MIC ETC.

FLASH MOBILE SPECFICATION

MOBILE APPLICATIONFLASH MOBILE SPECFICATION

1. 플렉스 모바일 프로젝트 생성2. 플렉스 기본 컴포넌트로 UI 작성3. 이벤트 처리는 액션스크립트로 작성4. 실행1) On Desktop Mode : Emulator2) On Device Mode : 폰을 USB 연결하여 실행* 해당 제조사의 USB 드라이버를 설치하면 가능

REFERENCE

• http://okgosu.net• http://jidolstar.tistory.com• http://adobe.com• http://www.evolutionoftheweb.com