머드초보의 블로그

열이아빠님 블로그를 구독하고 있는데요. 플렉스에서 좋은 프레임워크가 없을까 하는 생각에 갑자기 열이아빠님의 블로그에 포스팅한 '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만 추가해주면 끝납니다.
실행해봅시다.
암쏘쏘리 벗알러뷰다거짓말.......

제가 제일 좋아하는 HelloWorld시간이군요-_-;

우선 Adobe Air를 받아야 합니다.
Window용으로 가볍게 받아서 설치합니다. 다음신공으로!
http://labs.adobe.com/downloads/air.html

Adobe Flex Builder 3 Beta 2를 받아야합니다.
Adobe 아이디가 있어야 합니다.
http://labs.adobe.com/downloads/ 
여기서 Flex Builder 3 Beta 2를 선택합니다.

여기에 AIR SDK가 포함되어 있습니다.
물론 AIR SDK만 받아서 컴파일하는 식으로 해도 되는데
전 클릭세대라서-_-;

자 우선 무쟈게 무거운 Flex Builder 3 Beta 2를 설치합시다.
StandAlone이든 Plugin방식이든 어떤 것으로 설치해도 됩니다.

Flex Builder를 실행해봅시다.

File -> New -> Flex Project를 만듭시다.
Project name은 "AirHelloWorld" 로 합니다.
Application type은 AIR를 할꺼니깐 당근 Desktop application (runs in Adobe AIR)를 선택합니다.
Finish를 클릭해서 프로젝트를 만듭시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
 
</mx:WindowedApplication>
[/code]
기본적으로 저렇게 되어있네요. 이건 WindowedApplication이라는 컴포넌트를 사용하는군요.
저기에 HelloWorld를 찍어봅시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute"
title="Hello World">
<mx:Style>
Application
{
background-image:"";
background-color:"";
background-alpha:"0.5";
}
</mx:Style>
<mx:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/>
</mx:WindowedApplication>
[/code]
Label컴포넌트를 하나 추가해서 Hello AIR라고 찍었네요. Flex랑 문법이 같아요-_-;
Run As를 실행해서 Adobe AIR Application을 선택하고 OK를 누릅시다.
아...예전에 빡씨게 윈도우프로그래밍을 공부하던게 생각나네요-_-;
이건뭐 디게 쉬워졌네요. 기존 C/C++기반의 윈도우즈프로그래밍보다 강력하다고는 말 못하겠지만, 웹과 연동하거나 데이터를 다루는 부분은 더욱 코딩하기 쉬워질 것 같네요.
MFC프로그래밍 해보신 분들은 알껍니다-_-;

이거를 배포해보도록 합시다-_-; install프로그램까지 친절하게 만들어주는군요-_-;

이클립스에 Flex Navigator에서 AirHelloWorld를 클릭한 뒤 export를 합시다.
그러면 Flex폴더안에 Export Release Version이라는 게 있습니다. 고걸 선택합니다.
다 default로 하고 export하는 파일의 확장자는 air인데, 이거를 더블클릭하면 자동으로 설치가 됩니다.
(물론 AIR가 설치된 Desktop에서만 되겠지요 ^^)

다음으로 넘어가면 Digital Signature라고 해서 디지털서명같은데요. 잘모르겠습니다-_-;
그냥 Create로 하나생성해서 이름쓰고, 비번정하고, 한다음에 비밀번호를 씁시다 ^^
(저작권 보호 그런건가요?-_-;)

그다음 Finish를 클릭합니다. 그러면 air파일이 생성되었습니다.
이거를 설치해봅시다.
export한 파일을 찾아서 더블클릭합니다.
그러면 저렇게 뜨는데 install을 클릭해서 설치를 해봅시다.
desktop에 아이콘을 추가할 꺼냐고 묻네요.
설치후에 application을 실행할껀가도 묻는군요.
어디다 설치할지도 묻네요. Program Files로 되어있을텐데 저기다 설치하면 자동으로 폴더가 AirHelloWorld가 만들어지게 됩니다. 설치가 완료되면...
아까 플렉스에서 실행한 화면이 뜨네요-_-;

지울때에는 프로그램 지울 때 처럼 지우세요-_-;

이거 뭔가 새로운 세계에 온 듯 하네요-_-;

따라하기 출처 - Developing AIR Applications with Adobe Flex (adobe)

아직 저도 잘 모릅니다. 그래도 오늘 많이 삽질했으니 포스팅하겠습니다-_-;

플렉스를 이용한 환경을 다 만들었으면 플렉스를 해봐야겠죠!

FlexBuilder를 실행해봅시다.

익숙한 이클립스가 뜹니다! 덕분에 더 자신감을 가지게 해줍니다-_-; 자바개발자라면 누구나 써본 이클립스로 플렉스를 할 수 있다니!

File -> New -> Flex Project를 선택합니다.
3가지 종류가 나오는데 뭐 잘 모르니까 Basic를 선택합시다-_-;

넥스트를 눌러서 프로젝트 이름은 HelloWorld라고 찍읍시다. 정말 좋아하는 단어입니다.
Finish를 눌러서 프로젝트를 생성합니다.

HelloWorld.mxml 이라는 파일이 처음에 열려있네요.
mxml은 무슨 확장자냐! Machine-oriented extensible markup language 이라고 하더군요. 저도 잘모르겠습니다. 그런데 xml인거 같습니다 ^^ 태그 열고 닫고 하는게 xml과 같습니다.

이 프로젝트에서 ActionScript를 추가해봅시다.
File -> New -> ActionScript를 선택하고, HelloWorld폴더를 선택하고, 이름은 Greeter.as로 씁시다.

여기다가 코딩을 합시다.

[code]
package {
    public class Greeter {
        public static function sayHello():String {
            var greeting:String = "Hello World!";
            return greeting;
        }
    }
}
[/code]

내용을 보시면 package는 잘모르니 생깝시다. class를 정의 했는데 Greeter라는 클래스입니다. 이거의 멤버함수로 sayHello라는 것이 있습니다. 이건 리턴타입을 맨뒤에 써줍니다. 변수는 무조건 var로 선언하고, 타입은 그 뒤에 써줍니다. 안써주면 Object형이 됩니다.

클래스를 작성했으니 이 클래스를 mxml에서 사용해보도록 합시다.

[code]
<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"   
 layout="vertical" creationComplete="initApp()"> 
 <mx:Script> 
 <![CDATA[ 
  public function initApp():void { 
       mainTxt.text = Greeter.sayHello(); 
     } 
 ]]> 
 </mx:Script> 
 <mx:TextArea id="mainTxt" width="400" /> 
</mx:Application>
[/code]

script부분의 initApp()함수를 보면 mainTxt.text라는 곳에다가 Greeter클래스의 static함수인 sayHello를 호출해서 넣겠다는 표현으로 보이구요.
아래에는 TextArea를 만드는데 이것의 이름이 mainTxt입니다. 거기의 text를 적겠다는 것 같습니다.

대충 보면 html처럼 위에 script는 자바스크립트라고 생각되고, 아래는 html처럼 input태그가 들어가는 것처럼 생각해도 되려나-_-; 어쨌든 그런 구조인거 같습니다 ^^

위에 플레이버튼 같이 생긴거 run을 클릭하면(Ctrl + F11) 아래와 같은 화면이 뜰껍니다.


정확한 동작구조는 파악을 못했는데요-_-; 좀더 공부해봐야 할꺼같습니다 ^^