Multimedia Programming 21: By FLEX Departments of Digital Contents Sang Il Park
Outline Rich Internet Application Adobe Flex
RIA: Rich Internet Application 대부분의 자료는 에서 발췌
RIA: Rich Internet Application
IT 시대에서의 기술의 혁명 ? “ 내가 담배피면서 생각해 봤는데, 기술의 혁명은 UI 의 혁신에서 시작 되는 것 같아 ” by 다음 커뮤니티 개발 2 팀 개발자 권모씨
RIA = UI?
RIA 의 정의 by wikipedia
RIA 데스크탑 애플리케이션의 특징과 기능을 구현한 웹 애플리케이션
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
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
RIA 의 과거 - 현재 - 미래
과거기술 – Active-X
과거기술 – Java Applets
미래기술 – 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.
XUL
SVG – scalable vector graphics
SVG - Sample <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <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 - Sample <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" " <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;" />
현재 기술 최고의 인기를 구가하고 있는 2 가지 기술
2 가지 기술 ? FLASHAJAX
FLASH - 2 가지 키워드 FLASH VIDEO FLEX
Flash Video (FLV)
FLEX? FLEX = FLASH?
Flex
Flex 로 만든 사이트
2 가지 기술 : FLASHAJAX
AJAX - 2 가지 키워드 RubyOnRails Google
RubyOnRails Ruby: 프로그래밍 언어 (c.f C/C++, Python …) –RubyOnRails: Ruby 로 만든 웹 어플리케이션 프레임웍 Prototype: RubyOnRails 에 포함된 자바스크립트 라이브러리 –script.aculo.us: 여러가지 기능 (effects, sortable) 을 구현한 Prototype 의 확장팩 (add-on)
RubyOnRails
Google Gmail, google map 을 통한 AJAX 의 대중화 대부분의 신규 서비스에 AJAX 활용
Google with AJAX Gmail Google Maps Google Calendar Google Groups Google Docs, Spreadsheet & Presently
Google Web Toolkit
자바 스크립트를 모르는 서버 개발자가 자바 언어를 사용하여 Ajax 를 구현 할 수 있게 해준다.
Ajax Framework Rico Yahoo! UI Library(YUI) 이외에도 90 개가 넘는 프레임웍이 존재
인기 있는 RIA 기술의 공통점 1 XML Meta-Information Data about data
인기 있는 RIA 기술의 공통점 2 ECMAScript Dialects: ActionScript, JavaScript European Computer Manufacturers Association
인기 있는 RIA 기술의 공통점 3 Asynchronous 비동기 통신
Asynchronous
인기 있는 RIA 기술의 공통점 4 통합개발환경 IDE, RAD Rapid Application Development Integrated Development Environment
FLEX IDE
인기 있는 RIA 기술의 공통점 정리 XML 기반 ECMAScript 기반 Asynchronous 통합 개발 환경 지원
ADOBE FLEX
Flex? 다종 플랫폼에서 돌아 갈수 있는 RIA 개발 기술 Adobe Flash 기술 기반 XML- 기반 Markup Language – 빠른 개발 – 손쉬운 그래픽 유저 인터페이스 개발 –ActionScript 를 활용한 Interactivity 구현 Microsoft 의 Silverlight 와 경쟁관계
Flex.org Showcase
Flex History Flex March 2004 Flex 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 January 5, 2007 Flex 3.0 Beta 1 - June 11, 2007 Flex 3.0 Beta 2 - October 1, 2007
참고서적 “ 예제로 배우는 Adobe 플렉스 2” 옥상훈 지음 에이콘 출판사
Flex 시작하기 필요한 것 –SDK 받기 압축해제SDK 받기 –Java runtime environmentJava 컴퓨터 내 환경 변수 설정 – 내컴퓨터 속성 고급 환경변수 PATH 에 bin 폴더 추가
Hello World: Your First Flexing! <mx:Application xmlns:mx=" <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=" <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/> HelloWorld.mxml
Hello World: Your First Flexing! 실행법 : mxmlc HelloWorld.mxml
XML? 확장 가능한 Markup 언어 XML : e X tensible M arkup L anguage
Markup Language 정보를 포장하기 위한 언어 문서의 내용 Multimedia Programming 박상일 디지털콘텐츠 문서의 내용 Multimedia Programming 박상일 디지털콘텐츠
MXML is a XML <mx:Application xmlns:mx=" <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=" <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