Upload
-
View
545
Download
2
Embed Size (px)
Citation preview
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
HTMLHTMLJavaScriptXMLCSS
Flash
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