아....친구한테 RemoteObject를 했다고하니까 욕먹었습니다-_-; 실무에서 쓰이지 않는다고 하더군요. 이 LCDS라는게 좀 비싸서 ^^

그리고 객체지향적인 AS3.0의 특성을 살리지 않고, 멋대로지향적으로 설계를 했습니다-_-; 다시 객체지향적으로 변경해서 해보도록 하겠습니다-_-;

뭐 그래도 삽질했으니까 올립니다. 보고 플렉스를 공부하시는 분들 도움이 되셨으면 좋겠어요(아마 도움이 안될껍니다-_-;)
이따구로도 플렉스를 할 수 있다는 것을 보여준 참 좋은 예인거 같습니다-_-;

프로그램은 간단합니다.
로그인, 회원가입으로 아이디를 생성하고, 예약하고 싶은 좌석을 선택해서 예약하면 예약되고-_-;
예약한 좌석 리스트를 보고 예약취소하고 싶으면 선택해서 취소해버리면 됩니다-_-;

덤으로 차팅도 두개 넣었구요. 로그인 로그아웃 등의 flexSession을 이용해서 제작했습니다.

웹에다가 올리려고 했는데 서버가 다운됐어요-_-; 친구한테 욕먹게 생겼어요-_-;
친구한테 물어보고 되면 올려볼께요-_-; 뭐 보고싶은 사람도 없겠지만-_-;

아 올렸어요-_-; 예제사이트입니다-_-;
http://mudchobo.tomeii.com/flex/Booksystem/Booksystem.swf

소스는 플렉스꺼랑 자바클래스꺼랑 두개가 있습니다!
이게 플렉스꺼 mxml파일들입니다.




이게 자바클래스입니다 ^^




DB구조입니다.



나중에 삽질한 거 설명하면서 차근차근 올려보도록 하겠습니다-_-;
사용자 삽입 이미지
사용자 삽입 이미지

사용자 삽입 이미지
사용자 삽입 이미지

 
Posted by 머드초보
,
 

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

우선 멤버변수만 써줍니다.
[code]
package flex.member;

public class MemberVO {
    String id;
    String password;
    String name;
    int age;
    String sex;
    String tel;
}
[/code]

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

[code]
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]

다음은 MemberService.java를 만들어봅시다.
[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://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;
 }
}
[/code]

DB를 구축해봅시다. MYSQL을 사용하도록 합시다.
[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'),
('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');
[/code]

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

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

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

[code]
<destination id="member">
  <properties>
   <source>flex.member.MemberService</source>
  </properties>
 </destination>
[/code]
방금복사한 Service클래스를 소스로 id를 member로 지정해서 사용하겠다는 뜻으로 보입니다 ^^

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

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

[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]

이제 톰캣을 가동한다음에 ctrl + F11을 눌러서 실행해봅시다.
사용자 삽입 이미지


 
Posted by 머드초보
,