1 / 72

Flex 아키텍트 가이드 Ver 1.0

Flex 아키텍트 가이드 Ver 1.0. 옥상훈 차장 한국어도비시스템즈. Contents. 아키텍트란 ? 플렉스 작동 구조 LiveCyle Data Service ( 구 Flex Data Service) 클라이언트 환경구성 서버 환경 구성 애플리케이션 아키텍처 개발 아키텍처 개발 가이드 디자이너 협업 기타. 개요. 0. 아키텍트란 ?. 분석적 사고. 골든룰. 역할. 논리적 판단. 논리적 판단. 0. 아키텍트란 ?. 논리관계 팩트 파악 데이터량 / 처리 시간 / 리소스

aldon
Download Presentation

Flex 아키텍트 가이드 Ver 1.0

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flex 아키텍트 가이드 Ver 1.0 옥상훈 차장 한국어도비시스템즈

  2. Contents • 아키텍트란? • 플렉스 작동 구조 • LiveCyle Data Service(구 Flex Data Service) • 클라이언트 환경구성 • 서버 환경 구성 • 애플리케이션 아키텍처 • 개발 아키텍처 • 개발 가이드 • 디자이너 협업 • 기타

  3. 개요 0. 아키텍트란? • 분석적 사고 • 골든룰 • 역할 • 논리적 판단

  4. 논리적 판단 0. 아키텍트란? • 논리관계 팩트 파악 • 데이터량 / 처리 시간 / 리소스 • 논리 관계에 대한 최선의 판단 • 비례 – 반비례 관계 • Q : 모뎀사용자들을 위해 대량의 데이터를 처리할 수 있도록 해주세요. • 양립 – 상충관계(모순 관계) • Q : 한 화면에서 모든 데이터를 빨리 볼 수 있게 해주세요. • 확장성과 한계점 • Q : 대량의 데이터를 한 화면에서 최대한 빠르게 실행되도록 해주세요.

  5. 분석적 사고 0. 아키텍트란? • 패턴의 인식 • 반복되는 패턴(업무, 코드)은 규칙화 한다. • 시스템 에러가 발생하는 패턴을 규명한다.  원인 분석 • 발생 가능한 문제 파악 • 문제점을 최소화 • 여러 대안 제시 • 규칙의 정리 • 공통된 패턴을 일반화하여 규칙으로 만들어 낸다. • 규칙화된 것은 개발 표준에 적용한다.

  6. 골든룰 0. 아키텍트란? • 개발 시간을 N배 늘인다고 해서 아웃풋이 N배 증가하지 않는다. • 개발 시간을 늘이면 업무 강도는 느슨해지고 관리 체계에 대한 불만이 증가한다. • 개발 업무는 정신 노동이므로 쉴 때는 쉬고 먹을 때는 먹어야 한다. • N명의 개발자를 투입한다고 해서 개발 속도가 N배 되는 것은 아니다. • 개발자의 수가 늘어날 수록 업무 분담을 위한 커뮤니케이션과 관리적 요소가 증가한다. • 개발자는 모름지기 개발에만 집중하도록 모든 지원을 아끼지 않아야 한다. • 개발 사이클의 자동화 : 개발 – 소스 버전 관리 – 컴파일 – 디버깅 – 배포 – 테스팅 • 모든 개발자의 환경은 서버와 동일한 환경에서 개발할 수 있도록 한다. • 알고리즘 구현 능력 / 데이터 구조의 이해 / 커뮤니케이션 스킬 향상 • 80:20의 법칙 • 구현이 어려운 20% 때문에 전체 일정이 지연된다. • 애플리케이션 성능을 저하하는 곳은 전체 소스의 20% 미만이다.

  7. 역할 0. 아키텍트 [인프라 가이드] [개발 가이드] • 개발 환경 구성 • 개발자의 개발환경 정의 및 통일 • 개발환경의 최적화 • 애플리케이션 아키텍처 정립 • 개발 프레임워크 정의 • 데이터베이스 연동 방법 정의 • 타 시스템 인터페이스 방법 정의 • 시스템 아키텍처 • 서버 설치 및 환경 구성 • 개발 테스트 환경 구성 • 내외부 시스템간 통신 및 인터페이스 구성 • 표준 정의 • 명명 규칙, 코딩 규칙, 프레임워크 사용 규칙, SQL • 개발 가이드 • 표준 (프레임워크)에 근거한 코드 샘플 • 공통 모듈 개발 • 개발 사이클 정립 • 개발 – 소스 버전 관리 – 컴파일 – 디버깅 – 배포 – 테스팅 • 개발 사이클의 프로세스화

  8. X인터넷 관점에서의 플렉스 기술 아키텍처 1. 플렉스 작동구조 [X인터넷] [플렉스] 웹브라우저 컴포넌트 실행환경 컴포넌트 실행엔진 플래시 플레이어 컴포넌트 실행코드 SWF(플래시 실행파일) 컴포넌트 라이브러리 플렉스 컴포넌트 라이브러리 • 플렉스는 플래시 플레이어에서 작동한다. • 플렉스의 실행파일은 플래시 실행파일과 동일한 SWF파일이다. • 플렉스는 플래시플레이어 보안모델(샌드박스)을 그대로 적용 받는다. • 플렉스 컴포넌트 라이브러리는 액션스크립트로 되어 있다.

  9. HTTP Services http:// acme.com/app.mxml Web Services Remote Objects app.swf LiveCycle Data Service Message Service Data Management Service 데이터 요청(HTTP, WSDL, Java Method) 데이터 전송(XML, SOAP, AMF) app.swf 플렉스 애플리케이션의 작동방식 1. 플렉스 작동구조 WAS Resource ServiceAdapter 런타임컴파일러 데이터 연동 서비스 DBMS JavaBeans RPC 서비스 app .mxml 웹브라우저 JMS 플래시플레이어 LDAP Spring 실시간 Data 연동 서비스 Hibernate CRM/ ERP/CM ……. Web Services. J2EE • 1. 웹브라우저에서 플렉스 URL 호출하면 플렉스 데이터 서비스에서 *.mxml을 *.swf으로 컴파일 • 2. *.swf는 PC에 다운로드되어 플래시플레이어에서 실행됨 • 3. 플렉스 애플리케이션에서 데이터 요청 : HTTP, WSDL, Java Method • 4. 결과 데이터를 플렉스 애플리케이션으로 리턴 : XML, SOAP, AMF

  10. LiveCycle Data Service 데이터 요청(HTTP, WSDL) 데이터 요청(HTTP, WSDL, Java Method) 데이터 전송(XML, SOAP) 데이터 전송(XML, SOAP, AMF) app.swf 플렉스와 일반 플래시의 실행 방식 1. 플렉스 작동구조 WAS 웹브라우저 • 1. 웹브라우저에서 플렉스 URL 호출하면 플렉스 데이터 서비스에서 *.mxml을 *.swf으로 컴파일 • 2. *.swf는 PC에 다운로드되어 플래시플레이어에서 실행됨 런타임컴파일러 데이터 연동 서비스 app .mxml 웹브라우저 RPC 서비스 웹브라우저 http:// acme.com/app.mxml http:// acme.com/app.mxml 플래시플레이어 플래시플레이어 app.swf app.swf app.swf 실시간 Data 연동 서비스 XML JSP PHP ASP • 1. 웹브라우저에서 플래시 SWF 호출 • 2. *.swf는 PC에 다운로드되어 플래시플레이어에서 실행됨

  11. LCDS의 기능 2. LiveCycle Data Service LiveCycle Data Services RPC Service Data ManagementService Message Service Web Service 데이터 동기화 협업 HTTP Service On/Off Line Data Publish/Subscribe Runtime Compiler Remote Object 페이징 데이터 푸시 서비스 어댑터 Java JMS Hibernate ColdFusion Custom…

  12. http:// acme.com/app.mxml Flex Data Service app.swf LCDS의 작동 방식 2. LiveCycle Data Service • 런타임 컴파일링 • web.xml파일에는 *.mxml요청을 FlexMxmlServlet에서 처리하도록 설정되어 있음 • FlexMxmlServlet에서 *.mxml을 *.swf로 컴파일 • Jsp컴파일처럼 파일 변경유무를 체크함 • *.swf는 사용자 PC에 캐쉬됨 WAS FlexMxmlServlet 웹브라우저 app .mxml 플래시플레이어 web.xml app.swf

  13. 데이터 연동 서비스 RPC 서비스 HTTP Services Web Services Remote Objects 실시간 Data 연동 서비스 LiveCycle Data Service Message Service Data Management Service 데이터 요청(HTTP, WSDL, Java Method) 데이터 전송(XML, SOAP, AMF) LCDS의 데이터 연동 2. LiveCycle Data Service • RPC 방식 • <mx:WebService> 방식 : WSDL 호출  오브젝트 리턴 • <mx:RemoteObject> 방식 : 자바빈즈 메서드 호출  오브젝트 리턴 • <mx:HTTPService> 방식 : 특정 URL호출  XML데이터 리턴 • 실시간 연동 • <mx:DataService> 데이터 서비스 방식 •  데이터 동기화 • <mx:Producer><mx:Consumer>메시지 서비스방식 •  JMS메시징 WAS services-config.xml proxy-config.xml 웹브라우저 플래시플레이어 remoting-config.xml messaging-config.xml data-management-config.xml

  14. LCDS의 통신 방식 2. LiveCycle Data Service

  15. Messaging System X Adapter X JMS Provider JMS Adapter Messaging System Y Adapter Y 실시간 처리 2. LiveCycle Data Service LiveCycle Data Service 2.5 Message Service Endpoint RTMP AMF HTTP Publisher Subscriber

  16. 대량 데이터 처리 2. LiveCycle Data Service • 안정적인 데이터 처리 속도 • 2만 건까지 1초 이내의 응답속도를 보임 • Ajax – XML – Binary간 데이터 쿼리 비교 • 1,000건 이하는 별차이 없음 • 1,000건 이상은 LCDS를 사용한 방법이 성능을 보장 • 서버 자원 사용 감소 • 변경된 데이터만 전송하도록 설정 가능 • 네트워크 사용 감소 • 압축된 바이너리 데이터사용

  17. Client Browser FlashPlayer 9.0 LCDS 서버 구성 – 2 tier 2. LiveCycle Data Service WAS Flex Server WAS Flex Server HTTP • 클라이언트에서 WAS를 호출 • 클라이언트 – WAS : HTTP프로토콜 • WAS는 클라이언트의 Request를 LCDS에 전달 : web.xml에 설정이 되어 있음

  18. Client Browser FlashPlayer 9.0 LCDS 서버 구성 – 3 tier 2. LiveCycle Data Service WEB SERVER WAS Flex Server WEB SERVER WAS WEB SERVER Flex Server • 클라이언트에서 Web Server를 호출 • 클라이언트 – Web Server : HTTP프로토콜 • Web Servcer는 클라이언트의 Request를 WAS에 전달 : http.conf 같은 웹서버 설정파일에 정의 • WAS는 클라이언트의 Request를 LCDS에 전달 : web.xml에 설정이 되어 있음

  19. 개요 3. 클라이언트 환경 구성 • 목적 • 개발자가 플렉스 애플리케이션을 개발할 수 있도록 환경구성을 한다. • 플렉스 개발툴을 설치 및 최적 활용 • 플렉스 화면 디자인 • 에러 없는코딩 • 컴파일링 • 디버깅 • CVS 연동 및 각종 플러그인 복합 활용 • 방법 • 플렉스 빌더 설치 : 플렉스만 개발 가능 • 이클립스에 플렉스 빌더를 플러그인으로 설치 : Java 코딩도 병행 가능 • 유의 사항 • http://www.adobe.com/products/flex/productinfo/systemreqs/ • 이클립스 버전 확인 : 3.1, 3.2 까지 지원 • 플렉스빌더 버전확인 : 2.0, 2.01, 3.0 베타

  20. 플렉스 제품군의 변화 3. 클라이언트 환경 구성 Flex 2 : 2006년 7월 Flex 3 : 2008년 상반기 Flex 1.5 : 2005년 2월 Flex Builder 1.5 Flex Builder 2 Flex Builder 3 Basic Flex Charting 2 Flex Builder 3 Enterprise Flex SDK 2 Flex SDK 3 Flex Presentation Server 1.5 Flex Data Service 2 LiveCycle Data Service 2.5

  21. 플렉스 빌더 설치 3. 클라이언트 환경 구성 • 인스톨 파일 실행시 ‘Flex Builder and Flex SDK’를 선택 후 설치 진행

  22. 플렉스 빌더 설치 3. 클라이언트 환경 구성 • 설치 디렉토리 • C:\Program Files\Adobe\Flex Builder 2 • 설치된 파일들 • configuration • Flex SDK2 • Jre : Java 1.4.12 • Player : 디버그용 플래시플레이어 • Plugins : 이클립스 플러그인들 • Adobe_Flex_Builder_2_InstallLog.log • FlexBuilder.exe • FlexBuilder.ini : Heap메모리 설정

  23. 이클립스 플러그인 설치 3. 클라이언트 환경 구성 • 인스톨 파일 실행시 ‘Flex Builder Plug-in and Flex SDK’를 선택 후 설치 진행

  24. 이클립스 플러그인 설치 3. 클라이언트 환경 구성 • 이클립스가 설치된 폴더를 선택

  25. LCDS 설치 4. 서버 환경 구성 • 개요 • LCDS는 WAS 위에서 구동된다. • 기존에 설치된 WAS가 없으면 기본 WAS(Jrun)와 함께 설치함 • LCDS의 역할 • 런타임 컴파일 : mxml의 요청이 들어오면 swf로 컴파일 • 자바 객체 호출 및 결과 전송 : RemoteObject를 호출하여 결과를 바이너리 포맷(AMF)로 리턴 • 실시간 메시징 : RTMP프로토콜을 이용하여 실시간으로 서버 메시지 전송 • 데이터 매니징 : DAO패턴으로 구현된 자바객체를 이용해 데이터 동기화 • 유의 사항 • WAS가 지원하는 버전인지 확인 • WAS가 사용하는 JDK가 지원하는 버전인지 확인 • http://www.adobe.com/products/livecycle/systemreqs.html

  26. LCDS 설치 4. 서버 환경 구성 • 방법 • 기존에 설치된 WAS가 없는 경우 • 기본 WAS(Jrun)와 함께 설치함 • 기설치된 WAS에 신규 웹컨텍스트에 설치하는 경우 • 톰캣이나 Jrun은 flex.war파일명을 웹컨텍스트명으로 바꾸어서웹애플리케이션디렉토리에 압축을 풀어주면 됨 • 기존에 사용하고 있는 웹컨텍스트에 설치하는 경우 • flex.war의 압축을 해제하여 WEB-INF디렉토리 밑에 있는 파일들을 웹컨텍스트 디렉토리의 WEB-INF디렉토리에 복사해준다. • WEB-INF디렉토리 밑에 있는 web.xml의 설정과 flex.war에 들어있는 web.xml설정을 카피해서 넣어준다. • 라이센스 파일 • WEB-INF/flex/license.properties에 들어있는 각 항목에 해당하는 시리얼번호 입력 후 서버 재기동 • fds=LCDS(FDS)의 시리얼번호 • charting=플렉스 챠팅의 시리얼번호 • fb=플렉스빌더의 시리얼번호

  27. LCDS 설치 4. 서버 환경 구성 • 플렉스 관련 디렉토리 및 파일

  28. WAS 환경 구성 4. 서버 환경 구성 • LCDS와 WAS와의 관계 • LCDS는 WAS에서 작동하기 위한 서블릿 외에 여러 라이브러리로 구성됨 (flex.war 파일에 포함) • WAS가 구동될 때 LCDS의 서블릿들이 같이 init될 수 있도록 WEB-INF/web.xml을 설정해주는 것이 중요 • 또한 플렉스의 각종 라이브러리들을 WEB-INF디렉토리 밑에 같이 복사함 • WAS 환경 구성 • 기존의 WAS에서 web.xml을 수정하여 사용할 경우 flex.war의 web.xml을 그대로 덮어쓰지 않도록 함 • 웹서버 연동 • Jsp컴파일을 위해 웹서버에서 jsp요청을 WAS로 넘어오도록 설정하듯이 • 플렉스의 요청(*.mxml)이 들어오면 WAS로 넘어가도록 함 • 자바 객체 연동을 위해 RemoteObject요청(http://서버/messagebroker/amf) 주소 또한 WAS로 넘어가도록 설정

  29. WAS 환경 구성 4. 서버 환경 구성 • WAS 및 LCDS 초기화 순서 JSPServlet 초기화 웹애플리케이션 디플로이 FlexMxmlServlet 초기화 flex-config.xml 로드 MessageBrokerServlet초기화 FlexSwfServlet초기화 FlexInternalServlet초기화

  30. WAS 환경 구성 4. 서버 환경 구성

  31. LCDS 환경 설정 4. 서버 환경 구성

  32. 개요 5.애플리케이션 아키텍처 • 목적 • 최종 실행물 (SWF 애플리케이션)의 기본 골격 정의 • 고려할 사항 • 메인 애플리케이션 구성 • 프레임워크 및 데이터 연동 • 외부 인터페이스 • 프로그램 배포 • 기존 웹애플리케이션과 다른 점 (X-internet) • 사용자 PC에 실행파일(SWF)이 다운로드 된다. • 플래시 플레이어에서 SWF는 실행된다. • SWF는 바뀌지 않으면 인터넷 임시디렉토리에 캐시된다.

  33. 메인 애플리케이션 구성 5.애플리케이션 아키텍처 • 메인 애플리케이션 크기 • 가능한 한 최소의 크기로 줄여야 함 • 크기가 작을수록 • 웹서버에서 클라이언트로 다운로드 되어야 할 SWF사이즈 감소 • 퍼포먼스 향상 • 변경된 모듈의 업데이트 용이 • 애플리케이션의 크기를 좌우하는 요소 • 메인에 포함되는 컴포넌트 개수 • 메인에 들어가는 화면수 • Embed asset (이미지, 폰트) • XML 데이터

  34. 메인 애플리케이션 구성 5.애플리케이션 아키텍처 • SWF 애플리케이션 분리 여부 • 확장성 : 화면의 개수가 수십 개 이상으로 애플리케이션 사이즈가 현저히 커질 것으로 예상되는 경우 • 로딩속도 : 네트워크 속도가 낮아 애플리케이션 로딩 속도에 문제를 줄 경우 • 배포 : 애플리케이션 내의 모듈의 변경이 잦아 부분적으로 배포해야 할 경우 • SWF 애플리케이션 분리 방법 • 1 + N : 1개의 메인 SWF+ N개의 화면당 N개의 SWF로 구성 • 서브 SWF는 ModuleLoader를 이용하여 로딩 • html + N : 1개의 컨트롤 html + N개의 SWF • Html에서 각 SWF를 로드하도록 컨트롤

  35. 메인 애플리케이션 구성 5.애플리케이션 아키텍처 • 메인 애플리케이션 사이즈 축소 방안 • 불필요한 Embed asset(이미지, 폰트) 사용 자제 • RSL(Runtime Shared Library) 사용 • 초기에 구동되지 않는 부분은 ModuleLoader로 별도의 SWF로 로딩 • livedocs의퍼포먼스 가이드 문서 (http://livedocs.adobe.com/flex/201/html/performance_118_15.html ) • Disabling debugging : 디버그에 필요한 정보가 SWF에서 제외됨 • Examining linker dependencies : dependency report에서 참조할 필요가 없는 클래스배제 • Avoiding initializing unused classes : getQualifiedClassName 함수를 통해 불필요하게 클래스가 initialize 안되도록 함 • Externalizing assets : Embed asset(이미지, 폰트)들을 런타임다운로드로 변경 • Using character ranges for embedded fonts : 폰트에서 사용하는 되는 문자셋 범위를 flex-config.xml에 설정 • 가비지콜렉션 및 메모리 관련 기고 : http://blogs.adobe.com/aharui/2007/03/garbage_collection_and_memory.html

  36. RSL(Runtime Shared Library) 5.애플리케이션 아키텍처 • SWF파일을 클라이언트에게 전송할 때 같이 공유할 컴포넌트를 라이브러리로 묶어서 전송하는 방법 • http://livedocs.adobe.com/flex/201/html/rsl_124_1.html#168690

  37. 데이터 타입 5.애플리케이션 아키텍처

  38. 프레임워크의 역할 : 확장성 5.애플리케이션 아키텍처 프레임워크가 없는 경우 프레임워크가 있는 경우 - 벽돌이 추가되어도 같은 패턴으로 쌓인다. - 벽돌을 추가하는 패턴을 익혀야 한다. • 벽돌을 추가하는 패턴을 익히지 않아도 된다. • - 벽돌이 추가될수록 패턴들이 제각기 나타남.

  39. 데이터 & 프레임워크 연동 5.애플리케이션 아키텍처 • 플렉스에서 메시지 전송(폼 입력값) • HTTPService • http프로토콜을 통해 GET/POST방식으로 전송 • 파일 업로드는 MultipartRequest를 통해 전송가능 • 서블릿이나 JSP(또는 ASP, PHP)에서 전송된 폼 값 처리 가능 • RemoteObject • http프로토콜을 이용하나 데이터는 AMF라는 바이너리 포맷으로 전송 • 메소드의 파라미터나 액션스크립트 객체를 서버의 자바빈즈 메소드로 전송할 수 있음 • WebService • Http프로토콜을 이용하여 웹서비스 호출 • 웹서비스의 파라미터 전송

  40. 데이터 & 프레임워크 연동 5.애플리케이션 아키텍처 • 플렉스로 결과 메시지 전송 • HTTPService • 서블릿이나 JSP(또는 ASP, PHP)에서 결과 XML 데이터 생성 • RemoteObject • ArrayList나 Object형태로 메소드 호출 결과 리턴 • WebService • XML 데이터 결과 전송 • SAP의 경우 UI처리에 불필요한 메타 데이터를 제거하는 파싱 로직이 필요하기도 함

  41. Flex CRUD 프로그램 아키텍쳐 5.애플리케이션 아키텍처 • 전체 구조 Main App HTTPService(조회) 조회 처리 Web app 조회 등록 입력 처리 Web APP 수정 HTTPService (등록,수정,삭제) RequestObj 수정 처리 Web App 삭제 삭제 처리 Web App

  42. Flex CRUD 프로그램 아키텍쳐 5.애플리케이션 아키텍처 • 조회 • 1단계(FLEX) : 조회 이벤트 발생(버튼 클릭) • 2단계(FLEX) : HTTPService send (JSP 호출) • 3단계(JSP) : 파라미터 파싱 • 4단계(JSP) : SQL 처리 • 5단계(JSP) : 결과 XML 생성 • 6단계(FLEX) : 결과 XML 보여주기

  43. Flex CRUD 프로그램 아키텍쳐 5.애플리케이션 아키텍처 • 조회 [플렉스 클라이언트] [WAS] <mx:HTTPSerivce/> request.getParameter(); SQL execute 데이터바인딩 <?xml version="1.0" encoding="utf-8"?> <resultSet> <record> <empNo>0</empNo> <empName>gosu</empName> <job>dev</job> <sal>100</sal> </record> <pageNavigation> <page>10</page> … </resultSet> <mx:DataGrid/> <mx:Button/>

  44. Flex CRUD 프로그램 아키텍쳐 5.애플리케이션 아키텍처 • 입력/수정/삭제 • 1단계(FLEX) : 조회 이벤트 발생(버튼 클릭) • 2단계(FLEX) : 폼 값을 파라미터 객체에 저장 • 3단계(FLEX) : HTTPService send (JSP 호출) • 4단계(JSP) : 파라미터 파싱 • 5단계(JSP) : SQL 처리 • 6단계(JSP) : 결과 XML 생성 • 7단계(FLEX) : 결과 XML 보여주기

  45. <mx:Form/> Flex CRUD 프로그램 아키텍쳐 5.애플리케이션 아키텍처 • 입력/수정/삭제 [플렉스 클라이언트] [WAS] <mx:HTTPSerivce/> request.getParameter(); SQL execute <?xml version="1.0" encoding="utf-8"?> <resultSet> <message></message> <errorCode>1</errorCode> <txCount>10</txCount> </resultSet> <mx:Button/>

  46. 외부 인터페이스 5.애플리케이션 아키텍처 • 인터페이스 연동 개요 • 플렉스는 플래시플레이어 런타임에서 작동하는 애플리케이션임 • 플렉스와 다른 런타임을 가지는 애플리케이션과의 연동 • 주요 인터페이스 • 자바스크립트연동 • 플렉스의 ExternalInterface를 활용하여 자바스크립트를 호출하거나 자바스크립트에서 플렉스의 액션스크립트를 호출할 수 있음 • Html 연동 • 플렉스에서 html을 보여주려면 IFrame을 사용 • 단 IFrame은 한 번에 여러 개를 띄울 수 없다. • ActiveX 연동(보안모듈 연동) • ActiveX는 자바스크립트를 이용하여 컨트롤 할 수 있으므로 자바스크립트 연동 방법과 동일 • ActiveX기반의 보안모듈이나 리포팅툴 등은 자바스크립트를 통해 연동 • SAP 연동 • SAP은 WebService나 JCO를 통해서 RemoteObject를 사용하여 데이터 연동 가능

  47. 프로그램 배포 5.애플리케이션 아키텍처 • 플렉스 SWF 배포 방법 • SWF파일 직접 배포 • WAS보다는 웹서버에서 배포하는 것이 좋음 • 프로그램이 자주 바뀌지 않을 경우에 사용 • MXML을 런타임 컴파일해서 배포 • 런타임 컴파일은 MXML소스가 변경되었을 경우에만 작동함 • WAS에서 웹서버를 거쳐 컴파일된 SWF가 클라이언트로 리턴 • 프로그램이 자주 바뀔 경우에 사용 • Adobe AIR를 이용한 배포 • SWF를 AIR 의 adt 명령어를 사용해 air 아카이브 파일에 포함 • AIR파일을 다운받으면 AIR런타임이 설치된 경우 바로 사용자 PC에 설치 • 설치된 AIR파일은 추후에 업데이트도 가능함 • 플렉스 캐싱 • SWF는 사용자 PC에 브라우저가 사용하는 임시 디렉토리에 캐시됨 • SWF를 무조건 새로 받게 하려면 html헤더에서 no-chache 옵션을 주도록 함 • RSL로 설정한 swf 파일 또한 캐시됨

  48. 프로그램 배포 5.애플리케이션 아키텍처 • 플래시 플레이어 버전 체크 • 플렉스는 플래시플레이어 9 이상에서 작동함. • 플래시 플레이어 9.0.x 는 몇 가지 버전이 존재하며 번호가 높을 수록 최신 업데이트가 적용된 플레이어임 • http://www.adobe.com/support/flashplayer/downloads.html • 플래시 플레이어 버전은 자바스크립트에서 체크 가능하며 플렉스 빌더에서 컴파일하면 자동으로 생성되는 html안에 함수 생성 (hasRequestedVersion 변수값) • 플래시 플레이어 업데이트 • 플래시 플레이어는 3가지 경우의 수가 존재 • 원하는 버전이 설치된 경우 : 플렉스 컨텐츠를 보여줌 • 8.x 이하 버전이 설치된 경우 : 9.x대로 자동 업데이트 함  playerProductInstall.swf 실행 • 플래시 플레이어가 설치 안된 경우 : 플래시 플레이어 ActiveX를 설치하도록 함

  49. 프로그램 배포 5.애플리케이션 아키텍처 • 유의 사항 • 플래시 플레이어 자동업데이트 • 6.0.65버전부터 동작 가능하며 이하 버전의 경우는 사용자가 새로 설치 해야 함 • 플래시 플레이어 강제 인스톨 • 신규 설치 페이지로 이동해서 설치 : http://www.adobe.com/go/getflash • Object 태그를 이용해서 ActiveX플러그인 설치 방법으로 설치 • SWF컨텐츠를 보여주는 스크립트 • 플렉스빌더에서 컴파일시 생성되는 html안에 AC_FL_RunContent라는 이름으로 함수 생성 • SWFObject나 기타 함수로도 가능하나 한 가지 함수로 통일하는 것이 좋음 • 서로 다른 버전으로 작성된 SWF가 같이 보여질 때 • Object태그에서 플래시 플레이어 필요버전은 최상위 버전으로 일치 시켜야 함

  50. 체크 항목 정리 5.애플리케이션 아키텍처

More Related