Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park.

Presentation on theme: "Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park."— Presentation transcript:

1 Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park

2 Outline Rich Internet Application Adobe Flex

3 RIA: Rich Internet Application 대부분의 자료는 www.likejazz.com 에서 발췌www.likejazz.com

4 RIA: Rich Internet Application

5 IT 시대에서의 기술의 혁명 ? “ 내가 담배피면서 생각해 봤는데, 기술의 혁명은 UI 의 혁신에서 시작 되는 것 같아 ” by 다음 커뮤니티 개발 2 팀 개발자 권모씨

6 RIA = UI?

7 RIA 의 정의 by wikipedia

8 RIA 데스크탑 애플리케이션의 특징과 기능을 구현한 웹 애플리케이션

9 RIA 기술의 종류 JavaScript –Ajax Adobe Flash Player –Adobe products Flash, Flex, Flash Media Server, Flash Remoting… Active-X Controls Java Applets, Java Applications User Interface Languages –XUL, SVG

10 RIA 기술의 종류 JavaScript –Ajax Adobe Flash Player –Adobe products Flash, Flex, Flash Media Server, Flash Remoting… Active-X Controls Java Applets, Java Applications User Interface Languages –XUL, SVG

11 RIA 의 과거 - 현재 - 미래

12 과거기술 – Active-X

13 과거기술 – Java Applets

14 미래기술 – User Interface Languages XUL –Mozilla Foundation’s XML-based user interface markup language XAML –XML-based language used to define objects and their properties, relationships and interactions –Used in.NET Framework 3.0 SVG –XML markup language for describing 2-D vector graphics.

15 XUL

16 SVG – scalable vector graphics

17 SVG - Sample <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" /> <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />

18 SVG - Sample <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <rect x="80" y="60" width="250" height="250" rx="20" style="fill:#ff0000; stroke:#000000;stroke-width:2px;" /> <rect x="140" y="120" width="250" height="250" rx="40" style="fill:#0000ff; stroke:#000000; stroke-width:2px; fill-opacity:0.7;" />

19 현재 기술 최고의 인기를 구가하고 있는 2 가지 기술

20 2 가지 기술 ? FLASHAJAX

21 FLASH - 2 가지 키워드 FLASH VIDEO FLEX

22 Flash Video (FLV)

23 FLEX? FLEX = FLASH?

24 Flex

25 Flex 로 만든 사이트

26 2 가지 기술 : FLASHAJAX

27 AJAX - 2 가지 키워드 RubyOnRails Google

28 RubyOnRails Ruby: 프로그래밍 언어 (c.f C/C++, Python …) –RubyOnRails: Ruby 로 만든 웹 어플리케이션 프레임웍 Prototype: RubyOnRails 에 포함된 자바스크립트 라이브러리 –script.aculo.us: 여러가지 기능 (effects, sortable) 을 구현한 Prototype 의 확장팩 (add-on)

29 RubyOnRails

30 Google Gmail, google map 을 통한 AJAX 의 대중화 대부분의 신규 서비스에 AJAX 활용

31 Google with AJAX Gmail Google Maps Google Calendar Google Groups Google Docs, Spreadsheet & Presently

32 Google Web Toolkit

33 자바 스크립트를 모르는 서버 개발자가 자바 언어를 사용하여 Ajax 를 구현 할 수 있게 해준다.

34 Ajax Framework Rico Yahoo! UI Library(YUI) 이외에도 90 개가 넘는 프레임웍이 존재

35 인기 있는 RIA 기술의 공통점 1 XML Meta-Information Data about data

36 인기 있는 RIA 기술의 공통점 2 ECMAScript Dialects: ActionScript, JavaScript European Computer Manufacturers Association

37 인기 있는 RIA 기술의 공통점 3 Asynchronous 비동기 통신

38 Asynchronous

39

40 인기 있는 RIA 기술의 공통점 4 통합개발환경 IDE, RAD Rapid Application Development Integrated Development Environment

41 FLEX IDE

42 인기 있는 RIA 기술의 공통점 정리 XML 기반 ECMAScript 기반 Asynchronous 통합 개발 환경 지원

43 ADOBE FLEX

44 Flex? 다종 플랫폼에서 돌아 갈수 있는 RIA 개발 기술 Adobe Flash 기술 기반 XML- 기반 Markup Language – 빠른 개발 – 손쉬운 그래픽 유저 인터페이스 개발 –ActionScript 를 활용한 Interactivity 구현 Microsoft 의 Silverlight 와 경쟁관계

45 Flex.org Showcase

46 Flex History Flex 1.0 - March 2004 Flex 1.5 - October 2004 Flex 2.0 (Alpha) - October 2005 Flex 2.0 Beta 1 - February 2006 Flex 2.0 Beta 2 - March 2006 Flex 2.0 Beta 3 - May 2006 Flex 2.0 Final- June 28, 2006 Flex 2.0.1 - January 5, 2007 Flex 3.0 Beta 1 - June 11, 2007 Flex 3.0 Beta 2 - October 1, 2007

47 참고서적 “ 예제로 배우는 Adobe 플렉스 2” 옥상훈 지음 에이콘 출판사

48 Flex 시작하기 필요한 것 –SDK 받기  압축해제SDK 받기 –Java runtime environmentJava 컴퓨터 내 환경 변수 설정 – 내컴퓨터  속성  고급  환경변수  PATH 에 bin 폴더 추가

49 Hello World: Your First Flexing! <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> HelloWorld.mxml

50 Hello World: Your First Flexing! 실행법 : mxmlc HelloWorld.mxml

51 XML? 확장 가능한 Markup 언어 XML : e X tensible M arkup L anguage

52 Markup Language 정보를 포장하기 위한 언어 문서의 내용 Multimedia Programming 박상일 디지털콘텐츠 문서의 내용 Multimedia Programming 박상일 디지털콘텐츠

53 MXML is a XML <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> HelloWorld.mxml 처리지시문 : xml 문서임을 나타냄 Tag