머드초보의 블로그

다운로드는 여기서....-_- adobe.com 사이트에 가입하셔야 합니다.

플래시 빌더4 Beta 2 다운로드

BlazeDS버전이 4.X대여야 잘 됩니다. 3.X대면 안되더군요.
그리고 BlazeDS버전이 4.x의 Beta1버전이 있는데, 이걸로 하면 요런 에러가 뜹니다.

그냥 막 하면 잘 안되더군요. 구글링을 해보니 여러 블로그에서 이런 시도를 한 흔적들이 있었습니다-_- App Engine이 자바를 지원한다고 할 때부터 외국에서는 다양한 시도를 하나봅니다-_- 이번 Spring BlazeDS Integration도 누가 먼저 시도를 한 흔적이 있었네요.

이번 Spring BlazeDS Integration 1.0.1릴리즈 기념과 Spring교육 끝난 기념으로 간만에 삽질해봤습니다.
하지만, messaging 등의 심화적인 것은 못해보구요. 우선 서비스를 가져오는지만 해봤습니다.

삽질환경

- IDE
Eclipse3.5와 구글앱앤진 플러그인 - http://code.google.com/intl/ko-KR/eclipse/docs/download.html
Flex Builder 3.0.2
JDK 1.6.0 U14
- 라이브러리
Spring Framework 2.5.6
BlazeDS 3.2.0.3978
Spring BlazeDS Integration 1.0.1
Jackson 1.2.0
Cglib 2.1.3

1. App Engine 프로젝트 생성
프로젝트 생성하고 나서 라이브러리들을 다 복사합니다. 저는 아래와 같이 라이브러리를 복사했습니다.
기존App Engine lib, spring.jar, spring-webmvc.jar, blazeds.war에 있는 lib, jackson-core-lgpl-1.2.0.jar, jackson-mapper-lgpl-1.2.0.jar, cglib-nodep-2.1_3.jar, org.springframework.flex-1.0.1.RELEASE.jar
그리고, appengine-web.xml파일에 한줄 추가합니다.
[code]<sessions-enabled>true</sessions-enabled>[/code]
이거 필요한건지는 잘 모르겠군요-_-
WEB-INF폴더아래 blazeds.war파일에 들어있는 flex폴더를 복사합니다(*-config.xml의 파일이 있는 것)

2. 서비스 클래스 생성
이제 서비스를 만들어봅시다. 초간단 헬로우서비스를-_-
src폴더에 만들어봅시다. 전 com.mudchobo.springblazedsserver.service패키지에 HelloService클래스를 생성했음!
HelloService.java
[code]package com.mudchobo.springblazedsserver.service;

public class HelloService {

    public String sayHello(String name) {
        return "Hello, " + name;
    }
}[/code]

3. 설정파일 생성 및 설정
스프링관련 설정을 해야해요. web.xml에서 디폴트로 설정된 servlet설정을 지우고 아래를 추가
web.xml
[code]<context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            /WEB-INF/config/*-context.xml
        </param-value>
    </context-param>
    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
   
    <!--  SpringDispatcherServlet -->
    <servlet>
        <servlet-name>flex</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>flex</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>[/code]
flex라는 이름의 서블릿을 만들었으니 스프링 설정파일이름인 flex-servlet.xml을 생성합니다.
flex-servlet.xml
[code]<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:flex="http://www.springframework.org/schema/flex"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-2.5.xsd
        http://www.springframework.org/schema/flex
        http://www.springframework.org/schema/flex/spring-flex-1.0.xsd">
   
    <flex:message-broker />
   
    <flex:remoting-destination ref="helloService"/>
</beans>[/code]
flex라는 네임스페이스를 제공하는데요. <flex:message-broker />이 한줄로 모든 설정이 되어버립니다. M1 삽질했을 때에는 네임스페이스 없어서 bean써주고, 다 설정했던 기억이 나네요. 네임스페이스로 한줄로-_-

remoting-destination태그는 destination을 설정하는 건데, 해당 bean을 ref하면 해당 bean이름으로 destination으로 flex에서 가져올 수 있어요.
그럼 서비스를 설정할 설정파일을 생성해봅시다. configlocation을 /config/*-context.xml을 잡았는데, /config/services-context.xml파일을 만들어봅시다^^
services-context.xml
[code]<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd">

    <bean id="helloService" class="com.mudchobo.springblazedsserver.service.HelloService" />
   
</beans>[/code]
방금 만든 HelloService를 bean으로 설정.

마지막으로 flex/services-config.xml에서 default-channels를 추가합시다.
[code]<services>
        <service-include file-path="remoting-config.xml" />
        <service-include file-path="proxy-config.xml" />
        <service-include file-path="messaging-config.xml" />
        <default-channels>
            <channel ref="my-amf"/>
        </default-channels>       
    </services>[/code]
그리고 이것도 추가해야해요.
[code]<system>
        <manageable>false</manageable>
            ....
       </system>[/code]
이거 추가안하면 앱엔진에서 이런 에러로그를 뿜음-_-
org.springframework.beans.factory.BeanCreationException: Error creating bean with name '_messageBrokerDefaultHandlerMapping': Initialization of bean failed; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name '_messageBroker': Invocation of init method failed; nested exception is org.springframework.beans.factory.BeanInitializationException: MessageBroker initialization failed; nested exception is java.lang.NoClassDefFoundError: java.lang.management.ManagementFactory is a restricted class. Please see the Google App Engine developer's guide for more details.

관리자 기능이라고 하는 것 같은데, 정확히 뭔지는 잘 모르겠지만, 끄면 잘 됩니다-_-

4. 클라이언트 프로젝트 생성
flex project를 생성할 때 이렇게 생성해주면 편합니다.
Flex Project선택 -> Project name쓰고, Application server type은 J2EE, Create combined Java~~는 체크해제, Use remote object access service는 체크하고, Next.
그 다음 Serverlocation 셋팅을 Root folder는 AppEngine의 war폴더를 지정해주면 되구요.
Root URL은 앱엔진 기본 실행 경로인 http://localhost:8080하면 되구요. Context root는 /로 지정하면 됩니다.
그러면 디버그나 Run시에 localhost:8080/프로젝트명/프로젝트명.html로 실행이 돼요.
코드는
SpringBlazeDSClient.mxml
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:RemoteObject id="srv" destination="helloService" />
    <mx:TextInput id="inputName" />
    <mx:Button label="전송" id="btnConfirm" click="srv.sayHello(inputName.text)" />
    <mx:Label id="labelResult" text="{srv.sayHello.lastResult}" />
   
</mx:Application>[/code]
이 코드 너무 활용하는 것 같아-_- 암튼 destination은 helloService로 설정했기 때문에 이걸로 지정하면 됩니다.

5. 이제 배포 및 실행
이제 swf파일도 appengine프로젝트에 생성하고, AppEngine을 배포하고 실행하면 또다른 에러를 보실 수 있습니다-_-
[RPC Fault faultString="Detected duplicate HTTP-based FlexSessions, generally due to the remote host disabling session cookies. Session cookies must be enabled to manage the client connection correctly." faultCode="Server.Processing.DuplicateSessionDetected" faultDetail="null"]
와....미쳐버립니다. 이건 뭔가....검색해보니 앱엔진이 여러 서블릿배포할 때 1개의 클라이언트 정보를 동일하게 배포를 해서 어쩌구 라고 번역기를 돌리니 써있네요-_- 이걸 픽스한 jar파일이 돌아다닙니다-_-
기존 flex-messaging-core.jar파일을 위 파일로 교체해주면 되더군요.

이제 실행하면 잘 될겁니다.
실행주소입니다.
http://mudchobo1.appspot.com/SpringBlazeDSClient/SpringBlazeDSClient.html


messaging이나 security적용한 것도 한번 해봐야겠네요.

참고사이트
http://www.adobe.com/jp/devnet/flex/articles/google_app_eng_w_beazeds_p2.html
http://martinzoldano.blogspot.com/2009/04/appengine-adobe-blazeds-fix.html

네이트에서 cyworld가 opensocial에 참가한다는 글을 보았는데요.
8월중에 api를 공개했네요. opensocial 표준으로 작성된 것으로 보이구요. 아직은 0.8인데, 0.9를 지원할 예정인 듯 합니다.

facebook 같은 경우에는 flash를 위한 라이브러리를 제공하는데요. 여긴 제공하지 않아서 javascript라이브러리를 이용해서 개발해야합니다. ExternalInterface를 이용하면 데이터를 받을 수 있고, 요청할 수 있습니다^^

개발자등록하기
http://devsquare.nate.com/ 여기가 데브스퀘어! 네이트앱스토어 관련 사이트입니다.
여기에 가시면 '개발자 등록하기' 버튼이 있습니다. 대충 작성하고(?) 등록하면 되는데, 사진이 필수부분입니다-_-

테스트하기
http://devsquare.nate.com/appstore/javascript 여기에 가면 아주 간단한 '자신의 프로필 가져오기', '일촌 목록가져오기' 등등의 javascript 라이브러리 사용법이 있어요. 여기에서 아무코드나 긁어다가 좌측상단에 프로필정보에 보면 앱스등록 버튼이 있어요. 그걸 클릭하고, sandbox라는 메뉴가 있는데요. 거기가 테스트존같은 겁니다.
거기에 소스를 붙여넣으면 결과가 아래에 나와요 ^^

플래시 넣기
플래시는 gadgets.flash.embedFlash함수를 이용해서 삽입합니다.
[code]gadgets.flash.embedFlash("swf주소",
    "divFlash",
    "10",
    {
        id:"flashOpenSocialTest",
        width: 200,
        height: 300,
        wmode: "transparent",
        allowScriptAccess: "always"
    }
);[/code]

일촌목록을 가져오는 예제와 플래시 연동하는 소스
module소스
[code]<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="플래시테스트">
        <Require feature="opensocial-0.8" />
        <Require feature="flash" />
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
            <script type="text/javascript">
                function thisMovie(movieName) {
                    if(navigator.appName.indexOf("Microsoft") != -1) {
                        return window[movieName];
                    } else {
                        return document[movieName];
                    }
                };
               
                function request() {
                    var idspec = opensocial.newIdSpec({ "userId" : "OWNER" , "groupId" : "FRIENDS"});
                    var req = opensocial.newDataRequest();
                    var opt_params = {};      
                    opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
                    req.add(req.newFetchPersonRequest(opensocial.IdSpec.PersonId.OWNER), "get_owner");
                    req.add(req.newFetchPeopleRequest(idspec, opt_params), "get_friends");
                    req.send(response);
                };

                function response(dataResponse) {
                   
                    var owner = dataResponse.get('get_owner').getData();
                    var friends = dataResponse.get('get_friends').getData();
                   
                   
                    var ownerId = owner.getDisplayName();
                   
                    var myFriends = [];

                    friends.each(function(person) {
                        myFriends.push({name: person.getDisplayName()});
                    });
                    thisMovie("flashOpenSocialTest").responseData(ownerId, myFriends);
                };
               
                function init() {
                    gadgets.flash.embedFlash("http://localhost/OpenSocialTest-debug/OpenSocialTest.swf",
                        "divFlash",
                        "10",
                        {
                            id:"flashOpenSocialTest",
                            width: 200,
                            height: 300,
                            wmode: "transparent",
                            allowScriptAccess: "always"
                        }
                    );
                }

                gadgets.util.registerOnLoadHandler(init);
            </script>

            <div id="divFlash"></div>

     ]]>
   </Content>
 </Module>[/code]
코드중 주의해야할 것은...-_- <Require feature="flash" />가 없으면 안됨 ㄷㄷ 2시간동안 고생했음 ㄷㄷ
그리고, allowScriptAccess: "always"로 해야함 ㄷㄷ
아 또, 디폴트로는 20개만 가져오게 되어있는데요. 옵션을 줘서 100으로 바꿔주시면 100명가져올 수 있어요.
opt_params[opensocial.DataRequest.PeopleRequestFields.MAX] = 100;
옵션에 대한 자세한 내용은 aproxacs님 블로그에! http://www.aproxacs.com/203
플렉스코드
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
    width="200" height="300"
    applicationComplete="applicationCompleteHandler()">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function applicationCompleteHandler():void
            {
                Security.allowDomain("*");
                if (ExternalInterface.available)
                {
                    ExternalInterface.call("request");
                    ExternalInterface.addCallback("responseData", responseData);
                }
            }
           
            private function responseData(ownerId:String, friends:Array):void
            {
                list.dataProvider = friends;           
            }
        ]]>
    </mx:Script>
    <mx:Label text="일촌목록" />
    <mx:List id="list" width="100%" height="100%" labelField="name"/>
</mx:Application>[/code]
얘도 Security.allowDomain("*")로 해야함-_-
소스는 간단합니다. 애플리케이션 로딩이 완료되면 일촌목록을 요청하는 request함수를 호출하고, 호출이 완료된 response함수에서 해당 플래시에 responseData를 호출해 데이터를 받으면 됩니다.
강현구녀석.....여전히 일등이군-_-

음....UTF-8일 때에는 swf파일명 뒤에 ?paramname=value 이런식으로도 한글이 안 깨지는데요.
EUC-KR일 때에는 flashVars로 안넘기면 한글이 깨지네요. flashVars로 넘기면 안깨져요. 신기해요!

EUC-KR인 경우
한글깨짐 경우는 swf파일 뒤에 파라메터를 붙인 경우
[code]<object id="paramTest" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="300" height="120">
    <param name="movie" value="ParamTest.swf?nickName=머드초보" />
        <object type="application/x-shockwave-flash"
                data="ParamTest.swf?nickName=머드초보" width="300" height="120">
        </object>
</object>
[/code]
안 깨지게 하려면 flashVars를 이용
[code]<object id="paramTest" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        width="300" height="120">
    <param name="movie" value="ParamTest.swf" />
    <param name="flashVars" value="nickName=머드초보" />
        <object type="application/x-shockwave-flash"
                data="ParamTest.swf" width="300" height="120"
                flashVars="nickName=머드초보">
        </object>
</object>[/code]
그리고, flashVars를 이용해서 해야지 플래시가 캐시가 된다고 하네요.
nickName같은 것이 계속 바뀌는 것이라면 플래시를 서버에서 계속 요청하게 되는 것이라고 하네요.
그래서 flashVars라는 것이 있는 것 같음.

파라메터 넘길 때 utf-8인 경우에는 어떤식으로 해도 깨지지 않음. utf-8 짱-_-

Windows API정복 이후 간만에 1000페이지가 넘는 책을 구입했습니다. 지금 확인해보니 Windows API정복은 1500페이지 짜리군요. 사실 이런 책 하나쯤은 회사책상 위에 올려놔줘야 간지가 나죠......아 농담이구요-_-

ActionScript에 대해서 너무 모르고 flash계열에 입문을 해버려서-_- 저한테 좋은 책이 나왔네요. AIR IN ACTION의 역자이신 유윤선님과 ActionScript 3.0 CookBook역자이신 송호철님께서 번역을 해주셨네요^^ 둘 다 매우 유용하게 쓰고 좋아하는 책들인데^^ 두분이서 1000페이지를.....-_- 대....대단하십니다-_-

물론 2년전 책이 국내에는 지금 나오긴 했지만, ActionScript만을 심오하게 다룬 책은 국내에 많이 없었던 것이 사실이죠. 대부분 나와있는 Flash계열의 책은 Flex Framework의 사용법이나, Flash책에서 간간히 보이는 ActionScript가 다 인데, 이 책에는 Actionscript의 문법과 특징들을 쉽게 설명해 놓은 것 같습니다.

번역하시느라 너무 수고 많이 하셨어요~