젠장... Flash Player 10에서 생기는 버그를 발견했습니다.
TextInput에서 enter이벤트에 자신의 TextInput의 초기화하는 코드가 있으면 초기화가 안됩니다 ㅠ 9버전으로 컴파일하면 되는데, 10으로 컴파일하니 안되네요 ㅠ 몇시간 잡아먹었어요 ㅠ 하소연은 여기까지....-_-

우선 Stratus라는 기술은 Flash간에 통신을 가능하게 해주는 기술인 듯합니다.
자세한 내용은 아래에......-_-(영어는 잘 못하니....)
http://labs.adobe.com/technologies/stratus/

Adobe RIA공식사이트에서 오창훈님께서 올리신 기술문서 "플래시 플랫폼으로 만들어 보는 P2P 채팅 애플리케이션"를 보고 휠받아서 한번 만들어봤습니다. 채팅이 가능하다면, 오목게임도 가능할꺼라는 생각에.....-_- 참 쓸데없는거 잘만든다-_-

http://mudchobo.tomeii.com/flexomok/
위 사이트에 접속하면 서버랑 클라이언트를 고를 수 있어요.
닉네임을 입력하세요 한명은 서버를 한명은 클라이언트를 해야해요.

서버측
서버를 클릭하고, 생성되는 ID를 클라이언트에게 알려주세요.
클라이언트측
클라이언트를 클릭하고, 서버측의 ID를 입력해서 접속하세요~

오목판이 나오면 접속 성공~ 같이 오목을 즐기면 돼요-_-
사용자 삽입 이미지
소스는 여기에 있어요.
http://my-svn.assembla.com/svn/omok/
Mate Flex Framework를 사용했고(이걸 사용해야 스피드한 개발이.....-_-), 소스도 개판이라 보시는데에는 매우 힘드실겁니다. 저도 참 만든게 신기하군요-_-

참고자료

플래시 플랫폼으로 만들어 보는 P2P 채팅 애플리케이션(로그인 후 볼 수 있습니다)
http://www.adoberia.co.kr/iwt/board/board.php?tn=pds_tech&id=244&mode=view

플래시 P2P RTMFP에 대해(예제 파일 첨부)
http://lovedev.tistory.com/entry/%ED%94%8C%EB%9E%98%EC%8B%9C-P2P-RTMFP%EC%97%90-%EB%8C%80%ED%95%B4


PS1. 버그가 조낸 많습니다. 한명이 나가도 뭔가 반응이 없습니다-_- 채팅에서 글을 쓰고 엔터를 쳐도 TextInput에서 지워지지 않습니다. 하지만, 그냥 한게임 즐기기에는 충분합니다 -_-b
PS2. 구글에서 Stratus를 치시면.....이미지검색에 여자 프로레슬러 트리쉬 스트레터스가 나옵니다-_-; 그냥 그렇다구요-_-
 
Posted by 머드초보

댓글을 달아 주세요

 
이건뭐....프레임워크를 왜 쓴거지-_-;
소스코드만 더 길어졌네.
어쨌든 저의 삽질의 결정체를 공개할랍니다-_-; 나름 열심히 만든거라...ㅠㅠ
보시면 이것저것 신경을 많이 쓴걸(?) 볼 수 있을겁니다-_-;
타이머의 zerofill...-_-;
이걸 분석하면 Mate Flex Framework에서 제공하는 Injector에 대해서 이해하실 수 있을겁니다.

invalid-file

소스파일입니다.

아래에 INSTALL NOW클릭하시면 설치가 될 겁니다.
설치가 안되신다면 http://www.adobe.com/go/getair/ 여기서 AIR를 다운로드하세요.

Alternative content

Get Adobe Flash player

 
Posted by 머드초보

댓글을 달아 주세요

 
열이아빠님 블로그를 구독하고 있는데요. 플렉스에서 좋은 프레임워크가 없을까 하는 생각에 갑자기 열이아빠님의 블로그에 포스팅한 '10 가지 플렉스 디버깅 도구 및 프레임워크'가 생각이 났습니다.
여기서 나온게 Mate Framework라는 것인데, 발음은 메이트가 아닌 마떼라고 발음하는 것이라고 열이아빠님께서 말씀하셨습니다. 조또마떼! 일본애니메이션보면 디게 많이 나오는데...잠만 기댕겨?라는 뜻인듯?-_-;
Mate Flex Framework 공식홈페이지 http://mate.asfusion.com/
Mate Flex Framework 공식홈페이지에 가보면,
Mate is a tag-based, event-driven Flex framework.
라고 되어있습니다. tag기반에 event driven 플렉스 프레임워크라는 겁니다.
개발 방식도 우선 Service와 Event를 정의한 EventMap, 그리고, View로 나눠져 있습니다. MVC랑 비슷한 것 같은데, View에서 이벤트가 발생하면 이벤트를 정의해놓은 EventMap에서 찾아서 Event를 발생하죠. 이 EventMap에서는 해당 Service를 호출하는 등의 구조로 되어있어요. 제가 설명하는게 맞는지는 모르겠지만, 대충 저런 구조인 듯하네요. '서비스는 WAS없이도 돌아간다라고 생각하고 짜야된다가 현재의 결론입니다'라고 허광남씨가 말했던 것 처럼 여기서도 Service는 다른 것에 영향없이 돌아가야하는 겁니다.
이 Service는 BlazeDS를 이용한 RemoteObject가 될 수 있고, HTTPService를 이용한 서비스가 될 수 있고, WebService가 될 수 있습니다. 물론, Flex에서 만든 어떤 Method가 될 수도 있습니다.

그러면 해당 서비스를 EventMap에 정의를 해놓고, View에서는 Event를 발생시키기만 하면 되는 겁니다.
백날 말로 하는 것보다 코드로 보는게 빠릅니다-_-;

New -> Project -> Flex Project 를 선택!
Project Name은 HelloMate라고 하고, Web application을 선택하고, Application Server는 NONE으로 Finish고고싱!
Mate Flex Framework공식 홈페이지에 가면 downloads를 클릭하면, swc파일이 있는데요. 이것을 libs폴더에 복사합니다.

우선 패키지를 만들어봅시다.
src에 New -> Folder를 선택해서 events, maps, services, views를 만듭니다.
우선 events에 Event클래스를 하나 만들어봅시다.
New -> ActionScript Class선택 후 Name은 HelloEvent로 하고, Superclass는 flash.events.Event를 선택!
events/HelloEvent.as
[code]
package events
{
    import flash.events.Event;

    public class HelloEvent extends Event
    {
        /* Constants */
        public static const SAY:String = "sayHelloEvent";
       
        /* Properties */
        public var name:String;
       
        public function HelloEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}
[/code]
SAY라는 상수를 하나 만들어서 sayHelloEvent라고 합시다. 이 이름을 통해 이벤트를 구분합니다.
Properties는 event를 발생할 때 properties값을 지정해서 EventMap에 정의한 메소드에 파라메터로 넣기 위해서 사용합니다.

이제 service를 만들어봅시다.
New -> ActionScript Class선택 후 name은 HelloService라고 합시다.
services/HelloService.as
[code]
package services
{
    public class HelloService
    {
        public function sayHello(name:String):String
        {
            return "Hello! " + name + ", I'm so sorry but I love dagujitmal";
        }
    }
}
[/code]
단순히 name을 파라메터로 받아서 Hello!를 붙여줘서 리턴해주는 메소드입니다.

이제 view를 만들어봅시다.
New -> File -> MXML Component선택! Filename은 HelloBox로 하고, Based on은 조낸 귀찮으니까 VBox로 하고, 사이즈도 그냥 그대로 갑시다-_-;
views/HelloBox.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:mate="http://mate.asfusion.com/"
    width="400" height="300"
    horizontalAlign="center"
    verticalAlign="middle">
    <mx:Script>
        <![CDATA[
            import events.HelloEvent;
           
            private function sayHello():void
            {
                helloDispatcher.generateEvent();
            }
           
            private function helloResult(result:String):void
            {
                myLabel.text = result;
            }
        ]]>
    </mx:Script>
   
    <!-- Dispatcher -->
    <mate:Dispatcher id="helloDispatcher" generator="{HelloEvent}" type="{HelloEvent.SAY}">
        <mate:ResponseHandler  type="helloResultResponse" response="helloResult(event.helloResult)" />
        <mate:eventProperties>
            <mate:EventProperties name="{input.text}" />
        </mate:eventProperties>
    </mate:Dispatcher>
   
    <mx:TextInput id="input" enter="sayHello();"/>
    <mx:Button id="button" label="hello" click="sayHello();"/>
    <mx:Label id="myLabel" text="이름을 입력하세요" width="295"/>
</mx:VBox>
[/code]
mate에서 제공하는 Dispatcher기능을 쓰기 위해 네임스페이스를 지정해줍니다.
그리고, <mate:Dispatcher />태그가 있는데요. 여기서 자세히 보면, HelloEvent를 발생하고, 이벤트 종류는 HelloEvent.SAY인 것이죠. 이 이름은 단순 EventMap에 있는 것이랑 매핑하기위해서 쓰인 것 같구요.
이 이벤트를 발생할 때 Properties값은 input에 있는 text값을 넘깁니다. 방금 위에서 HelloEvent를 정의할 때 Properties값 name을 선언했는데, 저렇게 EventProperties에 지정을 해주면 저 값을 물고 들어갑니다.
그다음 그 응답값을 받을 ResponseHandler를 정의해주는데, helloResultResponse는 EventMap에 있는 것이랑 매핑하기 위한 이름이구요, response는 실제 메소드를 호출해줍니다. event.helloResult값은 EventMap에서 정의한 Properties값이구요. 여기서 설명하는 것보다 EventMap을 실제로 보면 이해가 훨씬 빠릅니다.

New -> MXML Component를 선택, Filename은 MainEventMap 그냥 Finish.
<mx:Canvas를 EventMap으로 고칩니다.
maps/MainEventMap.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="http://mate.asfusion.com/">
    <mx:Script>
        <![CDATA[
            import services.HelloService;
            import events.HelloEvent;
        ]]>
    </mx:Script>
   
    <EventHandlers type="{HelloEvent.SAY}">
        <MethodInvoker generator="{HelloService}" method="sayHello" arguments="{event.name}" />
        <ResponseAnnouncer type="helloResultResponse">
            <Properties helloResult="{lastReturn}" />
        </ResponseAnnouncer>
    </EventHandlers>
   
</EventMap>
[/code]
EventHandlers를 정의해줬는데 여기서 type은 아까 dispatcher에서 정의한 type과 같은 HelloEvent.SAY가 되겠죠. 그다음 MethodInvoker는 메소드를 호출하는 태그입니다. 위에서 언급했듯이 메소드 말고, RemoteObject나 HTTPService, WebService도 다 됩니다.
generator는 클래스를 적어주고, method에 메소드 이름을 적습니다. arguments에는 파라메터값인데 event.name은 해당 event에서 받은 name을 말하는겁니다. 우리가 Dispatcher에 정의한 name에 input.text값을 넣었으니 그게 들어가는 겁니다. 그다으메 ResponseAnnouncer는 응답을 정의하는 건데, 그 type이 아까 위에서 정의한 그 타입과 일치해야합니다. Properties의 helloResult도 위에 Dispatcher에서 정의한 것과 동일한 이름이여야겠죠. 그러면 저 Properties에 값이 들어가는데 여기서 보면 lastReturn이라고 써있는데, 위에 메소드에서 리턴한 값을 말하는 겁니다.
저렇게 해주면 끝납니다.

이제 마지막으로 main을 작성해봅시다.
HelloMate.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    xmlns:view="views.*"
    xmlns:maps="maps.*">
   
    <!-- Event Maps -->
    <maps:MainEventMap />
   
    <!-- views -->
    <view:HelloBox />
   
</mx:Application>
[/code]
EventMap을 추가하고, View만 추가해주면 끝납니다.
실행해봅시다.
사용자 삽입 이미지
암쏘쏘리 벗알러뷰다거짓말.......
 
Posted by 머드초보

댓글을 달아 주세요