머드초보의 블로그

플렉스로 만들기는 했지만, 뭐 모든 클라이언트 플랫폼에서 쉽게 만들 수 있습니다.

요아래에 있는 RESTful Web Service를 구축하셨다면 그것을 이용한 클라이언트가 필요할 것입니다.

게시판용 RESTful WebService만들기
http://mudchobo.tomeii.com/tt/345
http://mudchobo.tomeii.com/tt/346

그래서 구현해봤습니다.
우선 5가지 요청을 합니다.

1. 게시물 리스트를 받아오는 것(GET)
2. 게시물 1개의 데이터를 받아오는 것(GET)
3. 게시물 쓰기(POST)
4. 게시물 삭제(DELETE)
5. 게시물 수정(PUT)

핵심은 RESTful요청이 가능한 라이브러리입니다. 요아래를 참고하세요~

[Flex/AIR] RESTful WebService를 위한 Flex RestService Library!

이 라이브러리를 통해 RESTService요청을 합니다. (기존 Flex에 있는 HTTPService는 DELETE와 PUT이 안됩니다.)
[code]
<rest:RESTService id="boardService" method="GET"
        rootURL="http://localhost/BoardWS/resources/wsboards/" port="9080"
        result="resultBoardHandler(event)" fault="faultHandler(event)"/>
[/code]
이런식으로 요청하면 되겠죠? ^^

아래는 구현체 소스입니다.
허접해서 도움이 될지는 모르겠지만....-_-; 어쨌든 저의 삽질의 결정체니....-_-;

저 위에서 구현한 WebService를 띄워놓고, 이 클라이언트로 접속하면 잘 될겁니다.

우선 RESTFul로 구현된 WebService를 Flex에서 호출하기 위해서는 클라이언트에서 method방식이 GET, POST, DELETE, PUT을 지원을 해야합니다. 근데, 제가 RESTful WebService를 만들었는데요. 만들어놓고, 자체 GlassFish에서 제공하는 RESTful WebService Test로는 무쟈게 잘 돌아갔습니다.
근데, Flex에서 제공하는 HTTPService를 이용해서 method는 DELETE로 놓은다음에 http요청을 해봤습니다. 이게 왠걸......POST로 요청이 되는 듯해서 데이터를 가져오고 있습니다-_-; 지워야하는데!

그래서 검색을 해보니.......
http://verveguy.blogspot.com/2008/07/truth-about-flex-httpservice.html
저의 짧은 영어실력으로 보니.......

4/ All HTTP PUT and HTTP DELETE requests are turned into POST requests. This appears to be a browser limitation that the Flash player is stuck with.

라고 되어있군요. PUT과 DELETE는 POST로 요청이 된다고 하는 것 같습니다. 플래쉬플레이어가 브라우저 제한에 뭐 걸린 것으로 보인다고 말하는데요. 해석이 잘 안되네요-_-;

그래서! 검색해본 결과 REST요청을 위한 라이브러리를 누가 만들었더군요. 대단합니다 ^^ 어차피 HTTP요청도 해당 포트로 뭐 데이터를 주고 받는 것이다 보니, 이것을 소켓으로 구현을 했더군요.

http://lab.arc90.com/2008/03/restservice.php

기존 HTTPService랑 틀린 것이...얘는 소켓을 통해서 쏘기 때문에 포트를 지정해줘야합니다. 그리고 arc90에서 만든 ResultEvent랑 FaultEvent를 사용해야합니다.

서버측 코드를 보면
[code]
@DELETE
    public Response delete() {
        PersistenceService persistenceSvc = PersistenceService.getInstance();
        try {
            Wsboard entity = getEntity();
            if (entity.getPwd().equals(pwd))
            {
                persistenceSvc.beginTx();
                persistenceSvc.removeEntity(entity);
                persistenceSvc.commitTx();
               
                return Response.ok("success").build();
            }
        } finally {
            persistenceSvc.close();
        }
        return Response.ok("fail").build();
    }
[/code]
그냥 단순히 비밀번호가 같으면 지워서 응답을 success로 주고, 틀리면 fail로 줍니다.

이제 플렉스에서 봅시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="init()" xmlns:rest="com.arc90.rpc.rest.*">
   
    <mx:Script>
        <![CDATA[
            import com.arc90.rpc.events.FaultEvent;
            import com.arc90.rpc.events.ResultEvent;
            import mx.controls.Alert;
           
            private function init():void
            {       
                service.send();               
            }

            private function result(event:ResultEvent):void
            {
                Alert.show(event.result.toString());
            }   
           
            private function fault(event:FaultEvent):void
            {
                Alert.show(event.fault.toString());
            }       
        ]]>
    </mx:Script>
    <rest:RESTService id="service"
        port="9080" url="http://localhost/BoardWS/resources/wsboards/22/1"
        result="result(event)" fault="fault(event)" method="DELETE">
    </rest:RESTService>
   
</mx:WindowedApplication>
[/code]
포트를 port라고 해서 따로 지정해줍니다.
저 웹서비스가 {idx}/{pwd} 형식의 url을 요청합니다. DB에는 22번의 idx를 가지고 pwd가 1인 데이터가 있습니다. 저렇게 요청하면 지워집니다.

ps. 정말 적절하지 못한 웹서비스군-_-;

넷빈즈에서는 RESTful 웹서비스를 손쉽게 만들 수 있습니다.
RESTful은 기존에 사용하던 SOAP/WSDL-based의 WebService와 다르게 매우 간단하게 HTTP를 통해서 자원을 접근할 수 있습니다. 넷빈즈 웹서비스관련문서페이지에는 이렇게 써있군요.

• REST-based. REpresentational State Transfer is a new way to create and communicate with web services. In REST, resources have URIs and are manipulated through HTTP header operations. For more details, see RESTful Web Services.
• SOAP/WSDL-based. In traditional web service models, web service interfaces are exposed through WSDL documents (a type of XML), which have URLs. Subsequent message exchange is in SOAP, another type of XML document. For more details, see SOAP-based Web Services.

기존 SOAP/WSDL-based는 WSDL이라는 문서에 정의된 것을 바탕으로 데이터를 요청하고, 요청한 결과를 리턴받는 것 같았습니다. 그리고 데이터를 주고받기 위해서 SOAP이라는 프로토콜을 사용했습니다. 그 프로토콜에 의하면 무슨 봉투만들고, 정의된 표준에 의해서 리턴값을 만들어야 하는 점이 있었는데요.

이 RESTful방식은 자원이 uri를 가지고 있는데요. 그냥 http요청으로 해당 자원 uri를 요청하는데, method를 get, put, delete, post를 이용해 직관적으로 자원에 접근하는 듯 합니다. 아직 잘 모르겠네요-_-; DB랑 연동해서 삽질해보려니 힘들어서 우선 제가 제일 좋아하는 sayHello만 찍어봤습니다-_-;

참고자료
넷빈즈 웹서비스 관련문서페이지
http://www.netbeans.org/kb/61/websvc/intro-ws.html

1. 느리고 답답한 넷빈즈6.1이 필요합니다.

2. New Project -> Web -> Web Application, ProjectName은 HelloWS, Next!

3. Server는 GlashFish V2로 합니다. tomcat으로는 여기서도 아마 테스트를 지원하지 않을 듯 합니다. Finish!

4. HelloWS프로젝트 이름에 대고, 오른쪽버튼 New -> Other -> Web Services -> RESTful Web Services from Patterns선택, Sinleton선택 Next!

5. Resource Package는 자기가 원하는 대로! 저는 com.mudchobo.hello,
Resource Name은 Hello. 이것만 고치면 아래는 자동으로 고쳐집니다. Path부분이 해당 자원의 uri가 됩니다. Finish!
만들어진 소스코드를 보면 HelloResource라는 클래스가 생성되었습니다. @Path("hello")라는 어노테이션이 붙었는데요. HelloResource라는 자원은 /hello로 접근하는 자원이라는 것을 지정해주는 겁니다.
이 HelloResource에는 2가지 메소드가 자동으로 만들어졌습니다. GET과 PUT인데요.
우리가 만들것은 parameter로 name을 받아서 Hello! name 을 리턴하는 것을 만들껀데요. 그러면 GET메소드를 수정해야합니다.

[code]@GET
    @ProduceMime("application/xml")
    public String getXml(
            @QueryParam("name")
            @DefaultValue("NONE")
            String name) {
        return "<?xml version=\"1.0\" encoding=\"utf-8\"?><hello>Hello! " + name + "</hello>";
    }
[/code]
QueryParm어노테이션은 http요청 시 요청파라메터구요. 이건 name으로 받습니다. DefaultValue는 NONE로 했습니다.
보통 자원에 접근하는 주소는 아래와 같이 되더군요.
http://localhost:8080/HelloWS/resources/자원URI
hello자원은 http://localhost:8080/HelloWS/resources/hello이더군요.

저렇게 바꾸었으면 테스트를 할 수 있습니다. GlassFish가 테스트를 너무 잘 지원해줘서 참 좋습니다.

이제 다른 클라이언트에서 사용할 수 있습니다. Flex에서 요청하신다면...이건 SOAP WSDL방식이 아니기 때문에 <WebService>를 사용하는 것이 아니라 <HTTPService>를 사용해야합니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            private function click():void
            {
                service.send({name: inputName.text});
            }
           
            private function result(event:ResultEvent):void
            {
                 labelResult.text = event.result.hello;
            }
        ]]>
    </mx:Script>
    <mx:HTTPService id="service" method="GET"
        url="http://localhost:8080/HelloWS/resources/hello"
        result="result(event)" />
       
    <mx:TextInput id="inputName" />
    <mx:Button label="확인" click="click()"/>
    <mx:Label id="labelResult" />
   
</mx:WindowedApplication>
[/code]
해당 자원주소에 method를 지정해주고 파라메터로 name을 넘기면 됩니다.
그럼 리턴값은 xml로 받게 됩니다.

제가 잘 몰라서 그러는데, 잘못된 점 있으면 태클걸어주세요-_-; 아직도 잘 모르겠네-_-;
아졸려...-_-;

입을 옷이 없었는데 잘 됐습니다. 하지만.......반팔이군요-_-; 날씨가 추워졌는데-_-;

뭐 어쨌든, 갔다왔습니다. 평일인데도 많은 분들이 오셨더라구요. 저는 버스가 얼마나 걸리는지 몰라서 빨리나왔는데 버스가 의외로 빨리 도착하는 바람에 12시20분쯤 도착했습니다. 더욱 신기했던 것은.......교보타워 엘리베이터......완전 빠르네요-_-; 예전에 포스코 엘리베이터도 완전 빠르던데....엘리베이터가 빠른 게 부러운 이유는 우리회사 있는 엘리베이터는......거북이처럼 느리기 때문이죠. 점심시간에 재수없으면 10분걸려서 올라가야하는 일이 생기기도 하죠 ㅠ 얘기가 갑자기 삼천포로 빠졌습니다만-_-;

23층에 올라갔습니다. 와우 핸드폰줄입니다. 하나 더 달라고 하고 싶었지만, 소심해서-_-;


제가 1등인줄알고 혼잣말로 "1등인가......" 라고 하니 도우미분께서 "안에 몇 분 와계세요." 그러시더라구요. 아....6등입니다-_-; 설문지를 작성하면 티셔츠를 준다고 하더군요. 사실 강의평도 안하고 그냥 작성해서 내고 싶었습니다만, 끝까지 기다렸습니다.


사람들이 막 모이더니 어느새 자리가 꽉 찼더군요. 우와....자리가 없어서 뒤에 서서 보신 분들도 계시더라구요.

우선 영상을 보여줬는데요. Adobe AIR 주제를 가지고, 투어를 하며 사람들에게 홍보를 하는 영상을 보여줬는데 편집이 예술이고 영상미가 꽤 있어보였습니다. 역시 외국은 다르군요. 매우 멋졌습니다.

시작은 어도비사의 어떤 전무님이 말씀으로 시작하셨습니다. 이 분께서 하신 말씀은 최근에 나온 CS4를 자랑 하는 제품 자랑으로 시작했습니다. RIA기술로 구현한 프로젝트가 성공했다는 얘기를 한 듯 합니다 ^^

이제 마이크 챔버스랑 라이언스트어트의 강연이 시작되었습니다.
꽤나 준비를 많이 하신 것 같습니다. 강의 진행방식은 마이크와 라이언이 말을 하면, 통역하시는 분이 통역으로 얘기를 해줍니다. 예전에 JCO에서는 외국인 강연은......그냥 외국인 혼자서 얘기하는 강연을 들은 적이 있었습니다만, 이렇게 Adobe에서는 동시 통역을 준비해줬군요. 대단합니다 ^^

우선 이분들은 새로 나올 신기술에 대해서 소개를 해줬는데요. 저는 곧 나오는 것들인 줄 알았습니다만-_-; 2009월 하반기가 예정이라는 군요? 1년넘게 남았다는 얘기죠 ^^

암튼, 나중에 나올 기술등에 대해서 소개를 해줬는데요. Flash Player 10, AIR 1.5, Flex4를 얘기해줬습니다. 외국분들은 PPT를 잘 만드는 것 같아요. 딱 핵심 포인트만 포인트에 적어 놓는데, 파워포인트의 정석이죠. 외국 ppt를 보면 정말 잘 지키는 것 같아요. 국내에 글씨만 무성히 많은 PPT가 참 많은데, 그건 발표하는 동안, 발표자의 말을 들으라는 건지, 저걸 다 읽으라는 건지 그런 경우가 참 많았거든요. 또 자꾸 얘기가 샙니다만-_-;

암튼, 3D를 사용한 어플리케이션을 많이 보여주셨는데, 여기저기서 환호성이 터져나왔네요. 저도 신기했구요^^ z축을 이용해서 구현이 가능한 것 같아요. Flex Store라는 예제를 보여주셨는데, 핸드폰이 막 쓰리디로 정렬되면서 멋진 장면이 연출 되더군요. 저는 언제쯤 그런 걸 구현할까요-_-;

근데, 일본에서 발표하고 왔는지, 일본어로 된 데이터로 Flash Player10 Text 기능을 보여주더라구요. 일본에 역시 먼저 갔다왔군요. 일본에 대해서 참 부러운 건 JDK를 일본어를 공식 지원한다는것-_-; 그 외에도 Flex Builder를 보면 일본어를 공식 지원해요-_-; 우리나라도 공식 지원해줘요! MS는 한국어판 다 내는데 ^^ Adobe도 내주세욤!

AIR1.5부터는 리눅스를 공식 지원한다고 하는군요. 예전에 리눅스에서 AIR를 한 번 돌려봤는데 잘 돌아갔었습니다. 이제 대표적인 OS는 다 지원하는군요. 멋집니다. 이제 크로스플랫폼이라고 제대로 불리울 수 있겠군요^^

좀 있다 마이클 챔버스가 나왔습니다.
이 분이 얘기하신 것 중에...Vectors라는 자료형이 나왔습니다. 이거 왠지 java의 Vector인가...라는 생각이 들었습니다. Array랑 비슷한 것 같은데요. Vectors도 보니까 Array처럼 쓰지만, 이 놈은 하나의 자료형으로 사용할 수 있는 것 같습니다. 자바에서 제너릭(Generic)문법처럼 쓰더라구요.
[code]var v:Vectors.<Number>
[/code]
얼핏 보고 왔는데.....저런식으로 쓰는 것 같았어요. 우선 Array처럼 v[i] 형태로 사용하구요. 성능차이를 보여줬는데, Vectors가 훨씬 빨랐어요. 효율문제로 저걸 만들었나봐요. 저도 잘 모르겠네요^^

그리고, Flash Player10에서의 개발자들에게 편해진 점들을 소개해주셨는데요. 성능문제로 Drawing APIs에서 여러번 함수를 콜해야하는 것을 단 한번콜하게 하는 것, Local File Access로 전 버전보다 손쉽게 파일 읽고 쓸 수 있구요, 이번에 Pixel Bender라는 것을 지원하게 되었는데요. 아직 감은 안잡힙니다만, 포토샵의 필터같습니다.
이미지나, 동영상 등에 스캔라인 필터를 줄 수 있습니다. 사운드도 된다고 하네요. 코드를 보니, output, input 같은 게 존재하고, 언어는 왠지 as3랑 달라보였습니다만-_-; 나중에 김춘경님이 Pixel Bender에 대해서 발표준비를 하셨더라구요. 우와 이걸 어떻게 알고 준비하셨는지 대단합니다 ^^

아....그 다음 제가 관심을 가지고 있는 것이 Flex4인데, 이거에 대해서도 간략히 설명했는데요. FXG라는 것을 지원한다고 합니다. FXG는 xml기반의 그래픽 인터체인지 포맷인데요. 그래픽을 xml형태로 나타낼 수 있더라구요. MS의 XAML과 비슷한 듯 합니다-_-; 누가따라한거지-_-; 이것으로 디자이너와 개발자를 분리하겠다는 것 같습니다. MS세미나에서도 같은 얘기를 했었는데.....
Flex4에서 스킨입히는 게 더 손쉬워졌다고 하네요. 그리고, state가 향상되었다고 하는데, 예전에 state코드를 보면 매우 지저분하게 생성되는 경우가 많은데, 마이크가 직접 3와 4의 차이점을 보여줬는데, 매우 간결하게 state코드를 쓸 수 있는 것 같습니다.

http://www.tostring.org/에 대해서도 언급했는데요. 열이아빠님이 열심히 번역하신 게 보니까 이거더라구요^^ 열이아빠님 대단합니다 ^^

이제 라이언이 Thermo(써모)를 맛보기로 보여주시기 위해 나왔습니다. 이건 디자이너를 위한 툴이라고 설명을 하는군요. 정말 멋진 툴입니다. 디자이너들이 디자인 후 버튼으로 변경하면 버튼이 되버립니다. 아직 초기단계라서 언제 나올지는 미지수군요 ^^ 보여주면서도 에러가 발생했는지 잘 안되는 부분도 있는 듯 했습니다만-_-;

암튼, 이 외국에서 오신 이 두분의 멋진 발표 재미있었습니다. 신기술은 언제나 즐겁죠. 새로운 정보를 많이 알게 된 것 같아서 즐거웠습니다 ^^

커피랑 도넛타임이였습니다. 배가 고팠는데 참 잘 되었습니다-_-; 도넛을 한 개 먹으니.....배가 고파서 하나 더 먹으려고 했는데, 다 가져가버렸다는....ㅠㅠ

이제 발표자들이 발표할 시간입니다. 아까 마이크와 라이언 발표끝나고 간 사람들이 많더군요. 그 두분을 보려고 오신 분들이 꽤 된 것 같았습니다. 저는 끝까지 자리를.....(티셔츠를......-_-)

오창훈님이 AIR로 만드는 메쉬업 애플리케이션 이야기라는 주제로 발표하셨는데, 조금 뭔가 부족했습니다. 그냥 몇가지 메쉬업을 소개하고 끝난 것 같습니다.

그 다음 이희덕님이 AIR로 만든 모두의 브라우저라는 주제로 발표하셨습니다. 재미있게 발표하시는 것 같습니다. AIR로 크롬형태로 구현하려고 한 것 같습니다(크롬의 스피드는 AIR로 구현하기 힘들겠죠^^). 굉장히 인상깊었던 것은 RIA는 ???????다 라는 것의 빈칸을 핸드폰 문자로 보내면 그걸가지고 추첨을 하는 프로그램을 만들었더라구요^^ 대단합니다 ^^ 직접 준비해놓은 상품을 줬습니다 ^^ 준비를 많이 하신 것 같아요^^

마지막으로 김춘경님이 Pixel Bender소개와 사용이라는 주제로 발표하셨는데, 너무 내용이 어려웠습니다-_-; 뭔소리인지 하나도 몰르겠습니다. 암튼 FlashPlayer10의 새로 추가된 기능인 것 같구요. 마이크챔버스도 잠깐 언급했는데, Photoshop이나 Premiere에서 사용하는 필터기능 같습니다. 암튼 신기했습니다 ^^

오늘 보고 나서 느낀 점은 어서 내공을 쌓아야겠다는 생각이 드는군요. 저도 좋은 주제가 생기면 발표하고 싶습니다만-_-; 능력이 될런지-_-; 내년에 나올 신기술을 미리 볼 수 있어서 좋았구요. 다음에 3rd행사도 어서 빨리 했으면 좋겠네요 ^^

아래는 티셔츠입니다. 뒤에는 air주소가 적혀있네요 ^^.

이건뭐 설명이 필요없네요.
아까 전시간에 만든 WebService를 호출해봅시다.

전시간에 만들어 놓은 웹서비스
http://mudchobo.tomeii.com/tt/328

플렉스빌더를 실행합니다.
Air로 프로젝트를 하나 만듭니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical">
   
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
           
            private function callWebService():void
            {
                helloWebService.sayHello(input.text);
            }
           
            private function resultHandler(event:ResultEvent):void
            {
                Alert.show(event.result.toString());   
            }
           
            private function faultHandler(event:FaultEvent):void
            {
                Alert.show(event.fault.message);   
            }
        ]]>
    </mx:Script>
   
    <mx:WebService id="helloWebService"
        wsdl="http://localhost:9080/HelloWebApp/HelloService?WSDL"
        useProxy="false"
        result="resultHandler(event)"
        fault="faultHandler(event)" />
       
    <mx:TextInput id="input" enter="callWebService()"/>
    <mx:Button id="button" label="Button" click="callWebService()"/>
       
</mx:WindowedApplication>
[/code]
wsdl부분에서만 주소를 WSDL파일 주소로 써주세요.
그 외에는 RemoteObject나 HTTPService와 같이 같은 방식으로 해주면 돼요.

다음엔 RESTful이 뭔지 좀 알아봐야겠습니다.