머드초보의 블로그

초간단시리즈-_-;
스프링에 있는 bean을 플렉스에서 가져다가 쓸 수 있어요!
멋져요!-_-;

우선 준비물! 저의 테스트 환경입니다.
Eclipse IDE for Java EE Developers  : http://www.eclipse.org/downloads/
Flex Builder 3 Eclipse Plug-in(로그인후받을 수 있음) :
http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse
JDK 6 update 5 : http://java.sun.com/javase/downloads/index.jsp
Apache Tomcat 6.0.16 : http://tomcat.apache.org/download-60.cgi
Spring Framework 2.5.2 : http://www.springframework.org/download
BlazeDS : http://opensource.adobe.com/wiki/display/blazeds/Downloads
Spring과 BlazeDS연동라이브러리 : blazeds-spring-beta1.jar 현재 beta1이군요.
http://www.igenko.org/archiva/repository/igenko/com/adobe/flex/blazeds-spring/
JDK6을 먼저 설치를 합니다.
이클립스는 받아서 그냥 압축을 풀어버립시다.
그리고, 플렉스빌더3 이클립스 플러그인을 설치 합니다.
톰캣은 ZIP버전이면 그냥 압축을 풀어놓고 JAVA_HOME을 잡아줍시다-_-;
스프링프레임워크는 lib파일을 가져다 쓸것이니 아무대나 압축을 풀어놓읍시다.

셋팅이 완료가 되었으면 이클립스를 띄웁시다.
File -> New -> Project선택, Flex Project선택 후 Next
Project이름은 SpringAndBlazeds라고 지어봅시다-_-;
Application Type은 Web Application이라고 하고, Application server type은 J2EE로 선택합니다.
넥스트를 하고 Target runtime에서 Tomcat을 설정해야합니다.
New한다음에 Apache폴더에 Tomcat 6.0을 선택하고, 해당 톰캣의 경로를 지정합니다.
Finish를 클릭하고, flex WAR파일을 선택하라고 하는데 받아놓은 blazeds.war파일을 선택하면 됩니다.
Finish를 클릭하면 끝납니다-_-; 셋팅이 완료가 되었어요!

이제 스프링IDE를 설치해봅시다.
이클립스메뉴에서 Help -> Software Updates -> Find And Install 선택
Search for new features to install를 선택 후 Next
New Remote Site선택 Name은 Spring IDE, url은 http://springide.org/updatesite/ 라고 씁니다.
추가한 것만 체크된 상태에서 Finish클릭!
Search Result에서 Spring IDE선택.
그러면 몇개는 설치 못하는데 설치 못하는 것은 체크해제를 시켜요-_-;
Dependencies에서 Spring IDE Dependencies 체크해제
Integration에서 Spring IDE AJDT Intergration 체크해제
AspectJ Development Tools도 설치하려면 하세요(전 사용할 줄 몰라요^^)
Next -> agree -> finish하면 설치가 됩니다.
설치가 다 되면 이클립스ide를 restart하라고 나와서 리스타트하면 돼요^^

그리고 우리가 만든 프로젝트에  마우스 오른쪽버튼을 클릭해서
Spring Tools -> Add Spring Project Nature선택 하면 완료됩니다.

필요한 라이브러리를 복사해봅시다.
dist/spring.jar : 스프링프레임워크를 쓰기 위해 꼭 필요한 놈.
dist/module/spring-test.jar : 스프링테스트 할 때 필요한 놈.
lib/jakarta-commons/commons-logging.jar : 로그찍을 때 필요한 놈.
lib/ibatis/ibatis-2.3.0.677.jar : ibatis쓸 때 필요한 놈.
lib/cglib/cglib-nodep-2.1_3.jar : Junit으로 테스트 할 때 필요한데, JUnit테스트를 할 때에는 Interface가 구현이 안되어있어서(aop를 사용하려면 interface가 구현이 되어있어야 한다고 하더군요) 필요한 놈.
lib/aspectj/aspectjweaver.jar : aop때문에 필요한 놈 같은데-_-;
lib/junit/junit-4.4.jar : JUnit을 사용하기 위해 필요한 놈.
mysql-connector-java-5.1.5-bin.jar : mysql Connector. db가 다른거면 다른 Connector가 있으면 돼요!
blazeds-spring-beta1.jar : 위에서 설명한 spring과 blazeDS와 연동할 때 필요한 놈.

셋팅은 여기까지-_-;

젠장 ^^
이클립스 플러그인으로 Flex Builder를 설치하면 BlazeDS를 사용하기 훨씬 쉬워집니다-_-;
저 아래에 있는 방법은 다 생까고-_-; 다시 해보도록 합시다.

우선 플렉스빌더3 이클립스 플러그인버전으로 받습니다.
플러그인 버전이 없어진 줄 알았는데 저기에 저렇게 써있군요.
Already have Eclipse installed? Download the Flex Builder Eclipse plugin instead.
저거 클릭하고 로그인하면 받을 수 있습니다.

이클립스에 설치를 하도록 합시다 ^^
설치를 하고 이클립스를 띄워 봅시다.
New -> Project -> Flex Project를 선택!
Project name은 HelloBlazeds라고 합시다.
Web Application을 선택하고, Server technology에서 Application server type은 J2EE로 합시다.
Next를 클릭하고 J2EE settings에서 Apache Tomcat v6.0을 설정(없으면 New해서 설정^^)하고
Flex WAR file을 blazeds.war(http://opensource.adobe.com/wiki/display/blazeds/Release+Builds에서 받을 수 있습니다)파일을 선택합니다. Finish를 클릭합니다.

저는 전에 이클립스랑 Flex Builder랑 따로 설치해서 따로 작업을 했는데 저렇게 하면 바로 eclipse에서도 tomcat테스트가 가능합니다 ㅠㅠ 난 왜이렇게 바보 같지-_-;

그러면 이제 짬뽕이 되어있습니다! 참고로 src폴더는 자바소스폴더구요.
flex_src폴더는 flex소스폴더겠죠? ^^

예제는 요 아래에 있는 예제 고대로 따라하시면 될껍니다 ^^
근데 다 소스넣고 실행할라그러면 이상하게 요런 에러가 떠요.
실패 메세지 : faultCode:Client.Error.MessageSend faultString:'Send failed' faultDetail:'Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 404: url: 'http://localhost:8080/WebContent/messagebroker/amf''

보니까 ContextRoot가 이상하게 WebContent로 되어있어요-_-;
바꿔줍시다. HelloBlazeds프로젝트이름에 마우스오른쪽을 대고 properties를 선택합니다.
Flex Server부분이 있습니다. WebContent로 되어있습니다.
HelloBlazeds로 바꿉시다. 그러고 나서 실행해봅시다.
이클립스에 등록된 tomcat에다가 프로젝트를 추가해야합니다. HelloBlazeds라는 프로젝트를 추가를 하고 서버를 실행합시다. 그러고나서 url을 요청합니다.
http://localhost:8080/HelloBlazeds/HelloBlazeds.swf
그러면 이제 될껍니다-_-;

ps1. 저거왜 WebContent로 되어있을까요? 제가 뭘 잘못 한걸까요?-_-;
ps2. BlazeDS를 사용하시려면 이클립스 플러그인으로 플렉스 빌더를 사용하시는게 건강에 좋습니다-_-;
ps3. 에이레네님이 번역한거 읽으러 가야지-_-;

우선 MySQL에 DB가 있어야겠죠?
[code]
CREATE TABLE `Member_List` (
  `ID` varchar(10) NOT NULL,
  `Password` varchar(10) NOT NULL,
  `Name` varchar(10) NOT NULL,
  `Age` int(2) NOT NULL,
  `Sex` varchar(2) NOT NULL,
  `Tel` varchar(12) NOT NULL,
  PRIMARY KEY  (`ID`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr COMMENT='회원 멤버 리스트입니다.';

INSERT INTO `Member_List` (`ID`, `Password`, `Name`, `Age`, `Sex`, `Tel`) VALUES
('mudchobo', '1234', '성종천', 25, '남', '01000000000'),
('k1011606', '1234', '강현욱', 24, '남', '01000000000'),
('shs8326', '1234', '성현식', 58, '남', '01000000000'),
('jor0737', '1234', '조옥렬', 49, '여', '01000000000'),
('boazzang', 'boalove', '보아짱', 30, '여', '0100000000'),
('webserv', 'babo', '웹서비스', 45, '남', '01000000000'),
('child', 'ggoma', '꼬마', 15, '여', '01000000000'),
('mudcosdf', '1234', '성종텬', 99, '남', '01000000000');
[/code]
자바클래스를 작성해봅시다.

그리고 blazeds프로젝트에 WebContent/WEB-INF/lib에 mysqlconnector넣는거 잊지마세요 ^^

blazeds프로젝트 아래 Java Resources: src부분에서 패키지를 만듭시다.
flex.member라는 패키지를 만들고, MemberVo라는 클래스를 생성해봅시다.
[code]
package flex.member;

public class MemberVo {
 String id;
 String password;
 String name;
 int age;
 String sex;
 String tel;
 
 public String getId() {
  return id;
 }
 public void setId(String id) {
  this.id = id;
 }
 public String getPassword() {
  return password;
 }
 public void setPassword(String password) {
  this.password = password;
 }
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public int getAge() {
  return age;
 }
 public void setAge(int age) {
  this.age = age;
 }
 public String getSex() {
  return sex;
 }
 public void setSex(String sex) {
  this.sex = sex;
 }
 public String getTel() {
  return tel;
 }
 public void setTel(String tel) {
  this.tel = tel;
 }
}
[/code]
위와 같은 bean을 만듭시다.

그리고 DB와 연동하는 놈인 MemberService라는 클래스를 만들어봅시다.
[code]
package flex.member;

import java.util.ArrayList;
import java.util.List;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import flex.member.MemberVo;
public class MemberService {
 public List<MemberVo> getElements() throws SQLException {
  long startTime = System.currentTimeMillis();
  try {
   Class.forName("com.mysql.jdbc.Driver");
  } catch (ClassNotFoundException e) {
  }
  Connection con = null;
  List<MemberVo> list = new ArrayList<MemberVo>();
  String sql = "SELECT * FROM Member_List";
  try {
   String url = "jdbc:mysql://MYSQL디비주소/db이름";
   con = DriverManager.getConnection(url, "db계정id", "db계정비밀번호");
   PreparedStatement stmt = con.prepareStatement(sql);
   ResultSet rs = stmt.executeQuery();
   while (rs.next()) {
    MemberVo mb = new MemberVo();
    mb.setId(rs.getString("Id"));
    mb.setPassword(rs.getString("Password"));
    mb.setName(rs.getString("Name"));
    mb.setAge(rs.getInt("Age"));
    mb.setSex(rs.getString("Sex"));
    mb.setTel(rs.getString("Tel"));
    list.add(mb);
   }
  } catch (SQLException e) {
   e.printStackTrace();
  } finally {
   try {
    con.close();
   } catch (Exception ignored) {
   }
  }
  System.out.println("Service execution time: "
    + (System.currentTimeMillis() - startTime));
  return list;
 }
}
[/code]
다 만들었으면 config를 수정해야해요.
blazeds프로젝트아래 WebContent/WEB-INF/flex/remoting-config.xml를 열어봅시다. service태그 안에 추가합시다.
[code]
<destination id="member"> 
  <properties>  
   <source>flex.member.MemberService</source> 
  </properties>
 </destination>
[/code]
이제 다 완성되었어요. export를 해야죠. Overwrite existing file에 체크를 하고, 톰캣디렉토리/webapp/blazeds.war를 선택합니다.
Finish를 클릭하고 톰캣을 가동시켜줍시다.

이제 Flex Builder로 갑시다. 여기서 이제 저 MemberService클래스에 있는 getElements()메소드를 불러올꺼에요.
New Project에서 Flex Project를 선택합니다.
Project name은 BlazedsTest라고 하고 Web application선택, Application server type은 J2EE로 선택하고 다음!
Server location에서 User default ~~~ 어쩌구 체크해제하구 blazeds로 설정합시다.
Root folder는 톰캣디렉토리/webapps/blazeds를 선택
Root URL은 http://localhost:8080/blazeds/
Context root는 blazeds
Validate Configuration클릭해서 제대로 되면 돼요(톰캣이 가동되어 있어야 돼요 ^^)
가볍게 Finish를 눌러줍시다 ^^

BlazedsTest.mxml에 이렇게 작성합시다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script> 
  <![CDATA[  
   import mx.rpc.events.ResultEvent;  
   import mx.rpc.events.FaultEvent;  
   import mx.rpc.remoting.RemoteObject;  
   import mx.controls.Alert;     
   private var startTime:Number;      
   private function resultHandler(event:ResultEvent):void{       
    dg.dataProvider = event.result;  
   }     
   
   private function faultHandler(event:FaultEvent):void{       
    mx.controls.Alert.show("실패 메세지 : " + event.fault.message);  
   }     
   
   private function retrieve():void  {  
    var srv:mx.rpc.remoting.RemoteObject = new RemoteObject();  
    srv.destination = "member";      
    startTime = new Date().time;  
    srv.getElements();       
    srv.addEventListener("result",resultHandler);  
    srv.addEventListener("fault",faultHandler);  
   }    
   
   private function logResult():void  {  
    if (startTime > 0)   {   
     log.text = "" + (new Date().time - startTime) + " milliseconds"; 
    } 
   }   
  ]]>
 </mx:Script>  
 
 <mx:Panel title="AS를 이용한 RemoteObject예" width="100%" height="100%"> 
  <mx:DataGrid id="dg" width="100%" height="100%"                 
      updateComplete="logResult()"/>  
  <mx:ControlBar>   
   <mx:Button label="데이터 가져오기" click="retrieve()"/>  
   <mx:Label id="log"/>  
  </mx:ControlBar>
 </mx:Panel>
</mx:Application>
[/code]
그런다음 실행하면 아래와 같은 창이 뜨고 Button클릭하면 끝입니다.

이렇게 하는게 맞나-_-; 아닌것같아요. 너무 복잡해요-_-; 더 쉬운방법이 있을것같은데...-_-;

BlazeDS는 기존에 FDS(LCDS)에서 Remoting, Messaging기능만 빼서 오픈소스화한 프로젝트랍니다.
RemoteObject를 그니까 LCDS를 사지않고도 사용할 수 있다는 거란얘기죠-_-;
어쨌든 간단한 예제로 해봅시다.

http://opensource.adobe.com/wiki/display/blazeds/Downloads
이곳에서 BlazeDS를 받도록 합시다.
압축을 적당한 곳에다가 풀어놓습니다.

여기 안에 톰캣이 있긴 있는데 이걸로 이클립스에 서버를 추가하려니 안되더라구요. 그래서 톰캣을 새로 받아서 lib만 추가하는 식으로 하니까 되더군요 ^^
톰캣을 받습니다. http://tomcat.apache.org/ 6.0으로 받습니다. zip파일로 받습니다.
적당한 곳에 풀어버립시다.
그리고 BlazeDS디렉토리/tomcat/lib/blazeds/에 있는 jar파일 2개를
톰캣홈디렉토리/lib폴더에다가 jar파일을 복사해야해요.(flex-tomcat-common.jar, flex-tomcat-server.jar)
이거 복사하는 것도 안해줘도 됩니다 ㅠ

그리고 blazeds.war, blazeds-console.war, blazeds-samples.war 파일을 톰캣디렉토리/webapps/ 에다가 복사를 합니다.
톰캣디렉토리/bin/startup.bat 를 실행해서 구동되는지 확인합니다. 구동되면 된 겁니다 ^^

이제 Flex Builder 3 beta 3이 필요합니다.
참고로 standalone모드로 설치를 해야합니다.
베타 때 문제가 있었던 것 같은데 개발할 때에는 플러그인으로 빌더를 설치하는게 정신건강에 좋습니다.

플러그인으로 설치를 하면 자꾸 Builder가 죽어버리네요-_-;
그래서 그냥 Builder, Eclipse 따로따로 사용해서 했습니다.

Eclipse(WTP)를 실행해봅시다.

BlazeDS디렉토리/blazeds.war파일이 있는데 이것을 이클립스에서 Import시켜봅시다.
File -> Import -> WAR file선택합시다.
WAR file은 blazeds.war선택.
Target runtime은 New해서 새로 추가해줍시다.
우리가 설치한 톰캣을 추가해봅시다.
Apache Tomcat v6.0을 선택하고, 디렉토리는 설치한 톰캣디렉토리를 지정해줍시다.
Finish를 클릭해서 완료합니다. war파일을 불러왔네요. 이제 간단히 DB연동을 해서 데이터를 가져오는 메소드를 만들어 봅시다.
이 메소드를 이제 Flex에서 RemoteObject로 호출할꺼니까요 ^^

소스설명은 다음이시간에-_-;

이제 소스를 보도록 합시다.

아....근데 다른 언어를 이용해서 업로더를 구현해보신 분 계신가요? 플렉스에서는 이상하게 제목을 한글로 입력해서 업로드를 해버리면 업로드가 안되더군요.
MD5함수를 수정하면 가능합니다. ^^
이 부분은 좀 더 삽질을 해봐야할 부분인 것 같군요.
우선 영어는 뭐 잘 되니까-_-;

[code]
<mx:Script>
  <![CDATA[
   import com.adobe.webapis.flickr.methodgroups.Upload;
   import mx.controls.Alert;
   import flash.net.navigateToURL;
   import com.adobe.webapis.flickr.AuthPerm;
   import com.adobe.webapis.flickr.events.FlickrResultEvent;
   import com.adobe.webapis.flickr.methodgroups.Auth;
   import com.adobe.webapis.flickr.FlickrService;
 
   public var apikey:String = "해당API키";
   public var secretkey:String = "해당비밀키";
   public var flickrService:FlickrService;
   public var frobResult:FlickrResultEvent;
   public var frob:String = new String();
   public var token:String = new String();
   public var fileRef:FileReference;
   
   public function Authentication():void {
    flickrService = new FlickrService(apikey);
    flickrService.secret = secretkey;
    flickrService.addEventListener(
        FlickrResultEvent.AUTH_GET_FROB, getFrobResponse);
    flickrService.auth.getFrob();
   }
   
   public function getFrobResponse(event:FlickrResultEvent):void {
    if (event.success) {
     frob = String(event.data.frob);
     var auth_url:String = flickrService.getLoginURL(frob, AuthPerm.WRITE);
     navigateToURL(new URLRequest(auth_url), "_blank");
     Alert.show( "인증하기위한 브라우저가 뜰꺼에요."
        + "로그인한다음에 OK버튼을 누르세요^^",
        "인증",
        Alert.OK | Alert.CANCEL,
        null,
        onCloseAuthWindow );
    }
   }
   
   private function onCloseAuthWindow( event:* ):void {
    if ( event.detail == Alert.OK ) {
     flickrService.addEventListener(
        FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse );
     flickrService.auth.getToken( frob );
    }
   }

   private function getTokenResponse( event:FlickrResultEvent ):void {
    if ( event.success ) {
     token = event.data.auth.token;
     flickrService.token = token;
    } else {
     Alert.show("인증에 실패했습니다.");
    }
   }
   
   public function findFile():void {
    if (token == "") {
     Alert.show("인증부터 하세요!");
     return;
    }
    fileRef = new FileReference();
   
    try {
        fileRef.addEventListener(Event.SELECT, selectHandler);
        fileRef.addEventListener(Event.COMPLETE, completeHandler);
        fileRef.addEventListener(
           DataEvent.UPLOAD_COMPLETE_DATA, onUploadCompleteData);
        var success:Boolean = fileRef.browse();
       } catch (error:Error) {
           trace("Unable to browse for files.");
       }
   }
   
   public function selectHandler(event:Event):void {
    var uploader:Upload = new Upload(flickrService);
    uploader.upload(fileRef);
   }
   
   public function checkTokenResponse(event:FlickrResultEvent):void {
    Alert.show(event.data.auth.token);
   }
   
   public function completeHandler(event:Event):void {
    trace("업로드 완료");
   }
   
   public function  onUploadCompleteData(event:DataEvent):void {
    Alert.show(event.data);
   }
  ]]>
 </mx:Script>
 
 <mx:Button label="인증" click="Authentication();"/>
 <mx:Button label="파일업로드" click="findFile();" />
[/code]

오.....간단합니다.
아... apikey secretkey 에는 각각 발급받은 키를 넣어주세요 ^^
인증이라는 버튼이 있는데 누르게 되면 Authentication이라는 메소드를 호출합니다.
FlickrService라는 클래스가 있는데 apikey를 인자로 받아서 생성합니다.
그러면 이놈으로 인증이 필요없는 API를 다 호출할 수 있습니다 ^^
flickrService.auth.getFrob(); 이런식으로 Frob을 얻어오고!
navigateToURL로 브라우저를 띄워서 인증url로 이동을 시킨 후 로그인을 하게 되면
flickrService.auth.getToken( frob ); 으로 인해 토큰을 가져오게 됩니다.
토큰만 가져오면 다 끝납니다-_-; 이걸로 권한에 관한 건 다할 수 있어요 ^^

이거뭐 플렉스로 해도 될 것 같아요. 안해봤는데 될 것 같아요-_-;

파일업로드 버튼을 클릭하면 파일선택창이 뜨는데 이미지사진 아무거나 선택해서 업로드하면 돼요 ^^
(참고로 이미지파일도 한글이면 안돼요. 영어로 바꿔서 선택하세요 ^^)
FileReference 요놈도 설명해야하는 나중에-_-;
되는 거 증명동영샷~-_-; (실은....좀 심심해서-_-)