Microsoft PowerPoint - 2.Building RIA with SEAM_1_이동호.ppt [호환 모드]

Building RIA with SEAM 이동호대표 가호컨설팅 JavaCommunity.Org Adobe Community Champion

Agenda Rich Internet Application Flex & AIR Flex & Seam Integration Q/A

Rich Internet Application Rich Internet Application 이란? 사용자경험이란? RIA 세계의삼국지 브라우져에서데스크탑으로.. 든든한서포터 Web 2.0 MashUp 마술.. RIA 업무환경을위해달리다

Rich Internet Application 이란? RIA 란데스크톱응용프로그램의특징과기능을가지는웹응용프로그램 일반적으로페이지의새로고침없이한페이지에서동작하는웹응용프로그램 데스크톱프로그램 RIA 웹프로그램

Rich Internet Application 이란? Globa l HTML의한계 Page 단위어플리케이션 제한된 UI( 총 6개 ) 브라우저호환성 Request-only data No offline operation WEB APPLICATIONS 2004 Web 2.0 REACH Loc al MAINFRAME 1992 1998 RICH INTERNET APPLICATIONS C/S 환경의장점 스크린단위어플리케이션 확장가능한 UI 라이브러리 온라인 / 오프라인모드지원 WYSIWYG 형식의출력 CLIENT/SERVER Text UI RICH Integrated media GUI

Rich Internet Application 이란? 기존 웹 어플리케이션 리치 인터넷 어플리케이션 Less waiting Less bandwidth Less server load <submit> <data> <d t > <data> <data> <data> <data> <data> <data> <data> <data> <data> data <submit> <data> Fewer errors <data> <data>

Rich Internet Application 이란? 기존웹어플리케이션 리치인터넷어플리케이션

사용자경험이란? 사용자경험 (User Experience) 이란? 사용자가어떤시스템이나제품, 서비스등을직간접적으로이용하면서느끼고생각하게되는총체적경험

사용자경험이란? Why User Experience? Simplicity Productivity it Familiarity Personalization

사용자경험이란?

사용자경험이란?

사용자경험이란?

RIA 세계의삼국지 Flex Silverlightli JavaFX FlashPlayer 기반.Net 기반 JAVA 기반

브라우져에서데스크탑으로..

든든한서포터 Web 2.0 Longtail 개방 마케팅 Web 2.0 참여 공유 사용자중심의웹플랫폼화 Blog 비즈니스 20 모델 2.0 IT ( 사이버생태계 ) Open API / 신사업창출 웹기반 Google Doc&Spreadsheets S/W 의진화 Open API / 마켓플레이스

MashUp 마술.. OpenAPI 란? 자사의 API를외부에공개하는것일반적으로웹서비스 (Web Service) 형태로공개하는것

MashUp 마술.. 매시업 (Mash-Up) 이란? 한가지이상의소스에서가져온정보를엮어새롭거나적어도유용한어떤것을만드는방식으로섞는것 RIA

RIA 업무환경을위해달리다 Accuracy Performance Convenience Beauty

Flex & AIR Flex Flex Demo AIR AIR Demo Flex & AIR 활용방안

Flex Flex 고성능인 RIA 를효율적으로개발하기위해서설계된프레임워크 웹사이트, 인트라넷, 엔터프라이즈어플리케이션개발에사용 Flex 제품라인 Adobe Flex 3 SDK (software development kit) Adobe Flex Builder 3 Adobe LiveCycle Data Services ES

Flex Software Development Kit Flex 를작성할때사용되는테크놀로지와유틸리티의기본세트 오픈소스정책 http://opensource.adobe.com/wiki/display/flexsdk/flex+sdk Flex 컴파일러 Flex 라이브러리 Flex 소스

Flex Builder FLEX SDK, FLEX 데이터서비스어플리케이션을개발하기위한 IDE FLEX 어플리케이션의개발, 설계, 및디버그에도움이되는툴 Open Source 플랫폼인 Eclipse 워크벤치위에구축

Flex Builder

Flex 장점 User Experience Deployment Enterprise Cross Brwoser

MXML 코드 MXML 은 Flex 에서 UI 를표현하기위한 XML 형태의언어 <?xml version="10" 1.0 encoding="utf utf-8 8"?> <mx:application xmlns:mx="http://www.adobe.com/2006/mxml layout="vertical > <mx:script> <![CDATA[ private function sum():void{ c.text = String(Number(a.text) + Number(b.text)); } ]]> </mx:script> <mx:panel layout="horizontal" title=" 계산기 <mx:textinput id="a" width="50"/> <mx:label text="+"/> <mx:textinput id="b" width="50"/> <mx:label text="="/> <mx:textinput id="c" width="50"/> <mx:button label=" 더하기 " click="sum()"/> </mx:panel> </mx:application>

ActionScript 3.0 코드 ActionScript 는 Flash Player 위에구동되는스크립트형태의언어 package sample { import mx.formatters.numberformatter; public class HelloWorld { public static const TESTER:String = " 홍길동 "; public function HelloWorld() { trace(sayhello(helloworld.tester) as String); } } } public function sayhello(name:string):string { return " 안녕하세요 "+name; }

Flex UI & Container

Flex UI & Container

Flex UI & Container

Flex UI & Container

Flex UI & Container

Flex 데이터바인딩 <mx:label id= "labelone" text= "hello"/> <mx:label text="{labelone.text}"/> text text labelone labeltwo <mx:label id= labelone" text="hello"/> <mx:label id="labeltwo"/> <mx:binding source="labelone.text destination= labeltwo.text"/>

Flex 이벤트 Tight coupling text text ComponentThree ComponentOne ComponentTwo

Flex 이벤트 Loose coupling text text 이벤트청쥐자 ComponentThree ComponentOne ComponentTwo

MVC 패턴

Flex 컴포넌트확장 TextInput 확장 - 숫자와콤마만입력되게 package { import mx.controls.textinput; } public class XTextInput extends TextInput { public function XTextInput() { super(); this.restrict = "0-9,"; } }

Flex 디자인 [ CSS 편집기 ]

Flex 디자인 [ 스킨 ] ScaleNine http://www.scalenine.com fle[ks]ray http://fleksray.org/flex_skin.html

Flex 통신 <mx:httpservice/> <mx:webservice/> <mx:remoteobject/> HTTP SOAP AMF LiveCycle Data Service & Blaze DS

Flex 배포 I 클라이언트사이드어플리케이션 HTML, ColdFusion, PHP, 및그외의종류의 Web 페이지에파묻힌 SWF 파일로서배포 클라이언트에서독립적으로작동 40

Flex 배포 II HTTPService 및 WebService 를사용한데이터액세스 41

Flex 배포 III 라이브사이클데이터서비스를사용한데이터액세스 42

Flex DEMO DEMO

AIR 소개 HTML HTML JavaScript XML CSS Flash PDF Flash Flex ActionScript XML Audio Video HTML PDF Cross-OS Application Integrated Rendering Integrated DOMs & Scripting File System Access Network Detection Notifications Application Update Drag and Drop Local Database... Adobe AIR APIs Mac, Windows, Linux & Device OS

AIR 배포 Build Package Deploy.air file Operating System Flex Builder 3 Installed Application Flash CS3 Professional SWF SWF Photoshop HTML PNG, JPEG... HTML PNG, JPEG...

AIR DEMO DEMO

Flex & Seam Integration Seam Framework Granite Data Services Flex & Java 연동 Action Message Format Seam 설정 Flex & Seam 연동 Flex & Seam Demo AIR &S Seam Demo

Seam Framework 야구공은 단단하게감은실덩어리겉에두장의가죽을 108 번바느질해서꿰매어만듭니다. 심 (seam) 이란이두장의가죽을이어놓은 ' 이음매 ' 를말합니다. EJB Tier = Contextual Components WEB Tier

Granite Data Services Open Source Flex Server Framework Tide Data Framework 지원 Hibernate/JPA 객체지원, Annotation 지원, 서비스호출지원자바서버프레임워크지원 EJB 3, Spring, Seam, Guice <mx:httpservice/> <mx:webservice/> <mx:remoteobject/> HTTP SOAP AMF Granite Data Services

Flex & Java 연동 객체직렬화 객체복원 클래스로딩 메소드찾기 객체복원객체직렬화메소드호출 FLEX GraniteDS 50

Flex & Java 연동 FLEX Server <mx:script> function resulthandler(event){ } </mx:script> alert(event.result); result); <mx:remoteobject id= hi source= HelloWorld result= resulthandler(event) > <mx:methd name= hello /> </mx:remoteobject> <mx:button click= hi.hello( 동호 ) /> AMF public String hello(string name){ return 안녕하세요 +name; } HelloWorld.mxml HelloWorld.class 51

Action Message Format 소개 Action Script 객체를직렬화하기위해만든최적화포맷 AMF0 와 AMF3 버전이있음 특징 바이너리포맷 Character Encoding 유지됨 [ UTF-8 ] 객체의구조와내용이정확히전달 FLEX 객체 JAVA 객체 52

Action Message Format undefined null false true integer 타입 바이너리숫자 0x00 0x01 0x02 0x03 0x04 [ ] {name: 홍길동, age:100}, { name: 이산, age:120} double 0x05 string xml-doc date array object xml byte-array 0x06 0x07 0x08 0x09 0x0A 0x0B 0x0C 0x090x0A0x06name 0x06홍길동0x06age 0x04100.. 04100 53

Action Message Format Java -> Actionscript null -> null java.lang.number -> Number java.lang.boolean, boolean -> Boolean java.lang.string, java.lang.character, char[] -> String java.util.collection, java.lang.reflect.array -> Array java.util.map, java.util.dictionary, java.lang.throwable -> Object org.w3c.dom.document -> XML 오브젝트 ActionScript -> Java null -> null Number -> java.lang.double Boolean -> java.lang.boolean String -> java.lang.string Date -> java.util.date XML -> org.w3c.dom.document Aarry -> java.util.arraylist Object -> Map 54

Seam 설정 services-config.xml <services> <service id="granite-service" class="flex.messaging.services.remotingservice" messagetypes="flex.messaging.messages.remotingmessage"> <destination id="seam"> <channels> <channel ref="my-graniteamf"/> </channels> <properties> <factory>seamfactory</factory> </properties> </destination> </service> </services> <factories> <factory id="seamfactory" class="org.granite.tide.seam.seamservicefactory"/> </factories>

Seam 설정 granite-config.xml <granite-config scan="true"> <security type="org.granite.seam21.security.seam21securityservice"/> <tide-components> <tide-component instance-of="org.jboss.seam.security.identity"/> <tide-component annotated-with="javax.ejb.stateless"/> <tide-component annotated-with= with="javax.ejb.stateful Stateful"/> </tide-components> </granite-config>

Seam 설정 web.xml <!-- Seam --> <listener> <listener-class>org.jboss.seam.servlet.seamlistener</listener-class> </listener> <!-- GraniteDS --> <filter> GraniteDS용기본필더셋팅 </filter> <!-- GraniteDS --> <servlet> GraniteDS 용기본서블릿셋팅 </servlet>

Flex & Seam 연동 Seam.mxml import org.granite.tide.seam.seam; granite tide import org.granite.tide.seam.context; import org.granite.tide.component; import org.granite.tide.events.tideresultevent; <mx:application preinitialize="seam.getinstance().initapplication() > [In] public var register:component; [Out(remote="true")] [ ( )] public var user:user = new User();

Flex & Seam 연동 Seam.mxml private function register():void { var validation:array = Validator.validateAll([ vname, vusername, vpassword ]); if (validation.length == 0) { user.username = fusername.text; user.name = fname.text; t user.password = fpassword.text; register.register(registerresult); } }; private function registerresult(event:tideresultevent):void id l id { if (event.result == null) Alert.show(event.context.statusMessages.messages.getItemAt(0).summary); else appview.selectedindex = 1; }

Flex & Seam 연동 Flex 컴파일옵션 -locale l en_us -services../webcontent/web-inf/flex/services-config.xml -include-libraries../flex_libs/granite-essentials.swc -keep-as3-metadata=bindable,managed,changeevent,noncommittingchangeevent, Transient,Version,Name,In,Out,Observer,Destroy Metadata 소스상에서컴파일시행동을지시할때사용한다. 컴파일되고나면 SWF 에흔적을남기지않고사라진다. -keep-as3-metadata 여기에적혀있는 metatdata td t 는컴파일되어도 SWF 에정보를남긴다.

Flex & Seam Demo DEMO

AIR & Seam Demo DEMO

Q&A Q&A

감사합니다. 즐기면서하지않으면아무것도익힐수없다. - 윌리엄셰익스피어