슬라이드 1

651 views
531 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
651
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

슬라이드 1

  1. 1. Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park
  2. 2. Outline • Rich Internet Application • Adobe Flex
  3. 3. RIA: Rich Internet Application 대부분의 자료는 www.likejazz.com 에서 발췌
  4. 4. RIA: Rich Internet Application
  5. 5. IT 시대에서의 기술의 혁명 ? “ 내가 담배피면서 생각해 봤는데 , 기술의 혁명은 UI 의 혁신에서 시작 되는 것 같아” by 다음 커뮤니티 개발 2 팀 개발자 권모씨
  6. 6. RIA = UI?
  7. 7. RIA 의 정의 by wikipedia
  8. 8. RIA 데스크탑 애플리케이션의 특징과 기능을 구현한 웹 애플리케이션
  9. 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. 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. 11. RIA 의 과거 - 현재 - 미래
  12. 12. 과거기술 – Active-X
  13. 13. 과거기술 – Java Applets
  14. 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. 15. XUL
  16. 16. SVG – scalable vector graphics
  17. 17. SVG - Sample <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="467" height="462"> <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;" /> </svg>
  18. 18. SVG - Sample <?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" width="467" height="462"> <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;" /> </svg>
  19. 19. 현재 기술 최고의 인기를 구가하고 있는 2 가지 기술
  20. 20. 2 가지 기술 ? FLASH AJAX
  21. 21. FLASH - 2 가지 키워드 • FLASH VIDEO • FLEX
  22. 22. Flash Video (FLV)
  23. 23. FLEX? FLEX = FLASH?
  24. 24. Flex
  25. 25. Flex 로 만든 사이트
  26. 26. 2 가지 기술 : FLASH AJAX
  27. 27. AJAX - 2 가지 키워드 • RubyOnRails • Google
  28. 28. RubyOnRails • Ruby: 프로그래밍 언어 (c.f C/C++, Python …) – RubyOnRails: Ruby 로 만든 웹 어플리케이션 프레임웍 • Prototype: RubyOnRails 에 포함된 자바스크립트 라이브러리 – script.aculo.us: 여러가지 기능 (effects, sortable) 을 구현 한 Prototype 의 확장팩 (add-on)
  29. 29. RubyOnRails
  30. 30. Google • Gmail, google map 을 통한 AJAX 의 대중화 • 대부분의 신규 서비스에 AJAX 활용
  31. 31. Google with AJAX • Gmail • Google Maps • Google Calendar • Google Groups • Google Docs, Spreadsheet & Presently
  32. 32. Google Web Toolkit
  33. 33. Google Web Toolkit 자바 스크립트를 모르는 서버 개발자가 자바 언어를 사용하여 Ajax 를 구현 할 수 있게 해준다 .
  34. 34. Ajax Framework • Rico • Yahoo! UI Library(YUI) • 이외에도 90 개가 넘는 프레임웍이 존재
  35. 35. 인기 있는 RIA 기술의 공통점 1 XML Meta-Information Data about data
  36. 36. 인기 있는 RIA 기술의 공통점 2 ECMAScript Dialects: ActionScript, JavaScript European Computer Manufacturers Association
  37. 37. 인기 있는 RIA 기술의 공통점 3 Asynchronous 비동기 통신
  38. 38. Asynchronous
  39. 39. Asynchronous
  40. 40. 인기 있는 RIA 기술의 공통점 4 통합개발환경 IDE, RAD Rapid Application Development Integrated Development Environment
  41. 41. FLEX IDE
  42. 42. 인기 있는 RIA 기술의 공통점 정리 • XML 기반 • ECMAScript 기반 • Asynchronous • 통합 개발 환경 지원
  43. 43. ADOBE FLEX
  44. 44. Flex? • 다종 플랫폼에서 돌아 갈수 있는 RIA 개발 기술 • Adobe Flash 기술 기반 • XML- 기반 Markup Language – 빠른 개발 – 손쉬운 그래픽 유저 인터페이스 개발 – ActionScript 를 활용한 Interactivity 구현 • Microsoft 의 Silverlight 와 경쟁관계
  45. 45. Flex.org • Showcase
  46. 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. 47. 참고서적 • “ 예제로 배우는 Adobe 플렉스 2” • 옥상훈 지음 • 에이콘 출판사
  48. 48. Flex 시작하기 • 필요한 것 – SDK 받기  압축해제 – Java runtime environment • 컴퓨터 내 환경 변수 설정 – 내컴퓨터속성고급환경변수 PATH 에 bin 폴더 추가
  49. 49. Hello World: Your First Flexing! <?xml version="1.0"?> <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:Panel> </mx:Application> HelloWorld.mxml
  50. 50. Hello World: Your First Flexing! • 실행법 : mxmlc HelloWorld.mxmlmxmlc HelloWorld.mxml
  51. 51. XML? • 확장 가능한 Markup 언어 XML: eXtensible Markup LanguageXML: eXtensible Markup Language
  52. 52. Markup Language • 정보를 포장하기 위한 언어 문서의 내용 Multimedia Programming 박상일 디지털콘텐츠 문서의 내용 <class>Multimedia Programming</class> <professor> 박상일 </professor> <department> 디지털콘텐츠 </department>
  53. 53. MXML is a XML <?xml version="1.0"?> <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:Panel> </mx:Application> HelloWorld.mxml 처리지시문 : xml 문서임을 나타냄 Tag

×