[FLEX] LCDS(구 FDS)에서 Remote Object를 사용해서 자바빈즈를 가져와봅시다!

Remote Object
RemoteObject는 Flex데이터 서비를 설치한 WAS(ex.톰캣 등)에서 자바빈즈를 호출하여 그 결과를 Binary 형태의 AMF(Action Message Format)로 처리합니다.
우선 뭔지 잘 모르겠지만, 자바빈즈를 가져올 수 있는 듯하네요 ^^

우선 전에 포스팅한 환경설정을 다 했다면 톰캣폴더\webapps\flex\ 폴더가 생겼을 껍니다.

자 이제 flex builder2 를 켜봅시다.

File -> New -> Flex Project 합시다.
3번째의 Flex Data Services를 선택하고, 옵션은 Complile on the server when the page is viewed로 합시다.

넥스트를 하면 폴더지정하라고 나오는데요.
Root folder는 톰캣폴더\webapps\flex 로 지정하면 되구요.
Root URL은 톰캣은 8080을 써서 8080으로만 바꿔주면 되요. JRUN이 8700으로 쓰더군요. 톰캣도 뭐 바꾸면 바꿀 수 있죠 ^^ 디폴트가 8080이니 8080으로 써줍시다.
context root는 flex로 합니다.

프로젝트 이름은 RemoteTest로 합시다. Finish로 하면 프로젝트가 하나 만들어집니다^^

자 그러면 빈즈를 작성하기위해 이클립스를 실행합시다.

File -> New -> Project -> Dynamic Web Project로 선택해서 Member라는 이름으로 하고 Finish를 합시다.
Java Resousrces: src에 대고 마우스오른쪽버튼을 눌러서 pakage를 선택합니다.

패키지이름은 flex.member라고 합시다.
이 패키지 안에 자바파일을 두개 만들껍니다. 하나는 Beans파일이고 하나는 Service파일입니다.

우선 Beans파일입니다. MemberVO.java 라는 이름으로 만듭시다.

beans파일은 이클립스가 다 만들어줍니다. 저도 멋도모르고 다 쳤는데 바보같은 짓하지 말고--;

우선 멤버변수만 써줍니다.

package flex.member;
 
public class MemberVO {
    String id;
    String password;
    String name;
    int age;
    String sex;
    String tel;
}

위와 같이 써주고, Project Explorer에서 MemberVO.java에 오른쪽바우스버튼을 클릭하고 Source -> Generate getter and setter 클릭하시고, Select All하시고 OK만 누르면 자동으로 만들어집니다.

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;
 }
}

다음은 MemberService.java를 만들어봅시다.

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://db주소";
   con = DriverManager.getConnection(url,"db아이디", "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;
 }
}

DB를 구축해봅시다. MYSQL을 사용하도록 합시다.

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'),
('hermusseri', 'hermu', '김효진', 23, '여', '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');

저 SQL을 그대로 가져다가 써봅시다.

자 이제 만들어진 클래스파일들을 복사해야합니다. 어디로 복사하느냐! flex에 있는 곳에 복사해야합니다.
이클립스에서 작업한 Member프로젝트에서 class폴더를 통채로 복사를 해서
톰캣폴더\webapps\flex\WEB-INF\classes폴더랑 합체를 합니다!

이제 이것을 쓸 수 있게 remoting-config.xml파일을 수정해야합니다. 이파일은 톰캣폴더\webapps\flex\WEB-INF\flex\ 폴더에 있습니다.

<destination id="member">
  <properties>
   <source>flex.member.MemberService</source>
  </properties>
 </destination>

방금복사한 Service클래스를 소스로 id를 member로 지정해서 사용하겠다는 뜻으로 보입니다 ^^

자 이제 플렉스 프로그래밍 해봅시다!-_-;

맨처음 생성한 remotetest프로젝트에서 remotetest.mxml파일을 열어봅시다.
remote object를 사용하는 방법은 두가지 방법이 있는데 mxml태그를 사용할 수도 있고, action script를 사용할 수도 있습니다. action script로 해봅시다.

<?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>

이제 톰캣을 가동한다음에 ctrl + F11을 눌러서 실행해봅시다.

-출처 : http://mudchobo.tomeii.com