회원가입은 아이디, 비밀번호, 이름 등의 정보를 받아서
RemoteObject를 통해 Join메소드를 호출하기만 하면 끝입니다 ^^

그냥 값만 넘겨주면 자바클래스에서 처리를 합니다.













[code]
public int Join(String id, String pwd, String name, int age, String sex, String tel)
{
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
 
  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);

   // 입력한 ID와 같은 ID를 추출(이미있는 id인지 확인위함)
   pstmt = con.prepareStatement("SELECT id FROM bs_Member WHERE id = ?");
   pstmt.setString(1, id);
   rs = pstmt.executeQuery();
   if (rs.next()) {
    return 2;
   } else {
    // 신규등록을 위해 INSERT문을 이용해 DB에 삽입
    pstmt = con.prepareStatement(
                "INSERT INTO bs_Member (id, pwd, name, age, sex, tel) " +
                "VALUES (?, ?, ?, ?, ?, ?)");
    pstmt.setString(1, id);
    pstmt.setString(2, pwd);
    pstmt.setString(3, name);
    pstmt.setInt(4, age);
    pstmt.setString(5, sex);
    pstmt.setString(6, tel);
    pstmt.executeUpdate();
    return 1;
   }
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
이미 있는 ID인지 확인을 위해 검사해서 ID가 있으면 2를 리턴, 없으면 DB에 삽입 후에 1을 리턴합니다.

FLEX로 가봅시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" xmlns:comp="*" backgroundColor="#c0c0c0" backgroundAlpha="0.7"
creationComplete="initWindow()">
 
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function initWindow():void {
    joinwindow.x = this.width / 2 - 150;
    joinwindow.y = this.height / 2 - 200;
   }
   
   private function RequestJoin():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    /*
     아이디 길이등의ㅣ 검사문-_-; 귀찮아서-_-;
    */
   
    if (sextext.text == "남" || sextext.text == "여"){
     srv.Join(
       idtext.text, pwtext.text,
       nametext.text, agetext.text, sextext.text, teltext.text);
    } else {
     Alert.show("남 또는 여 라고 입력하세요!");
     return;
    }
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show("가입에 성공했습니다.");
      idtext.text = "";
      pwtext.text = "";
      nametext.text = "";
      agetext.text = "";
      sextext.text = "";
      teltext.text = "";
      visible = false;
      break;
     case 2 :
      Alert.show("ID가 이미있습니다.");
      break;
    }
   }
   
   private function faultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:TitleWindow id="joinwindow" width="300" height="300"
layout="absolute" title="회원가입하기">
  <mx:Label x="72.5" y="35" text="ID "/>
  <mx:Label x="72.5" y="61" text="PW"/>
  <mx:Label x="70.5" y="87" text="이름"/>
  <mx:Label x="70.5" y="113" text="나이"/>
  <mx:Label x="70.5" y="139" text="성별"/>
  <mx:Label x="70.5" y="167" text="전화"/>
  <mx:TextInput id="idtext" x="103.5" y="33" width="112"/>
  <mx:TextInput id="pwtext" x="103.5" y="59" width="112"
displayAsPassword="true"/>
  <mx:TextInput id="nametext" x="103.5" y="85" width="112"/>
  <mx:TextInput id="agetext" x="103.5" y="111" width="112" restrict="0-9"/>
  <mx:TextInput id="sextext" x="103.5" y="137" width="112"/>
  <mx:TextInput id="teltext" x="103.5" y="165" width="112"/>
  <mx:Button x="79.5" y="193" label="가입신청" click="RequestJoin();"/>
  <mx:Button x="157.5" y="193" label="취소" click="visible=false"/>
 </mx:TitleWindow>
</mx:Canvas>

[/code]
가입신청버튼을 클릭하면 RequestJoin()을 호출합니다. 이것은 RemoteObject를 통해 Join메소드를 호출합니다. 그리고 리턴값에 따라 1이면 성공, 2이면 이미 id가 있다고 알려줍니다. 텍스트박스를 다 초기화하고 visible을 false로 바꿔 창을 다시 로그인창으로 바꿉니다.

아 그리고 agetext를 보면 restrict="0-9"라고 써 놓으면 저 필드에는 숫자밖에 입력이 안됩니다. 좋은 정보입니다 핫핫-_-;

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108
 
Posted by 머드초보

댓글을 달아 주세요

 

플렉스 세션에 대한 예제가 별로 없어서 찾기 힘들었는데 그냥 서블릿세션처럼 쓰면 되는 것이더군요-_-;

우선 플렉스세션을 만들어야하는데 서버측 프로그래밍할 때 그냥 FlexSession쓸라고하면 에러납니다. LCDS깔 때 있는 flex.war파일에 포함되어있는 jar파일을 서버측 프로그래밍 할 때 즉 컴파일할 때 필요합니다.

저는 작업할 때 Flex Builder2랑 Eclipse랑 두개 띄워놓고 작업합니다-_-;
자바 프로그래밍 하기 위해서 Eclipse에서 세션을 만들어봅시다.

우선 Dynamic Web Project로 프로젝트를 하나 만듭니다.

그리고 필요한 jar파일을 넣어야합니다. flex.war가 디플로이 되면 WEB-INF\LIB폴더에 JAR파일이 있는데 여기서 message관련된거 이클립스에서 만든 프로젝트 lib에다가 복사합니다(사실 잘 몰라서 다 복사했습니다-_-;)
flex-messaging.jar, flex-messaging-common.jar, flex-messaging-opt.jar, flex-messaging-req.jar ^^

[code]
package flex.session;

import flex.messaging.FlexSession;
import flex.messaging.FlexContext;

public class SessionRO {

 public void setSession(String id) {
  FlexSession session = FlexContext.getFlexSession();
  session.setAttribute("id", id);
  System.out.println("세션설정성공");
 }
 
 public String getSession() {
  FlexSession session = FlexContext.getFlexSession();
  String id = session.getAttribute("id").toString();
  System.out.println("세션가져오기성공");
  return id;
 }
 
 public void removeSession() {
  FlexSession session = FlexContext.getFlexSession();
  session.invalidate();
 }
}
[/code]
간단합니다. setSession은 세션을 설정(로그인시)하는 것이고, getSession은 세션을 가져오는 것이고(있으면!), removeSession은 세션을 삭제(로그아웃시)하는 것입니다.

근데 문제점은 이놈을 테스트하려면 {was}/webapp/flex/WEB-INF/classes/에 복사해놓고 mxml이나 as에서 밖에 테스트를 못합니다-_-; jsp에서 테스트를 하려니 안되더군요 ^^ 꽤 고생했습니다-_-;

아 그리고 DB구조는 이렇게 되어있습니다.
[code]
CREATE TABLE `bs_Member` (
  `id` varchar(20) NOT NULL,
  `pwd` varchar(20) default NULL,
  `name` varchar(20) default NULL,
  `age` int(10) unsigned default NULL,
  `sex` varchar(20) default NULL,
  `tel` varchar(20) default NULL,
  PRIMARY KEY  (`id`)
)
[/code]

로그인 메소드를 보도록 합시다.
[code]
public int Login(String id, String pw) {
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;
 
  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
        
   pstmt = con.prepareStatement("SELECT pwd FROM bs_Member WHERE id = binary(?)");
   pstmt.setString(1, id);
   rs = pstmt.executeQuery();
   rs.last();
   int rowCount = rs.getRow();
   rs.beforeFirst();

   if(rowCount != 0) {
    rs.next();
    if(pw.equals(rs.getString("pwd"))) {
     return 1;
    } else {
     return 2;
    }
   }
   else {
    return 3;
   }
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
bs_Member테이블에서 로그인한 id가 있는지 검사를 하고 id가 있으면 3를 리턴하고, 없으면 비밀번호가 같은지 검사하고 같으면 1을 리턴하고, 틀리면 2를 리턴합니다. 플렉스 as에서 1을 받으면 성공이라고 뿌리고 이런식으로 했습니다.

자 그러면 flex에서 보도록 합시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" xmlns:comp="*" backgroundColor="#c0c0c0"
backgroundAlpha="0.7" creationComplete="initWindow()">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function initWindow():void {
    loginwindow.x = this.width / 2 - 150;
    loginwindow.y = this.height / 2 - 150;
   }
   
   private function RequestLogin():void {
    var srv:RemoteObject = new RemoteObject();
    loginbtn.enabled = false;
    joinbtn.enabled = false;
    srv.destination = "booksystem";
   
    srv.Login(idtext.text, pwtext.text);
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "session";
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show(idtext.text + "님 환영합니다.");
      srv.addEventListener("result", sessionresultHandler);
      srv.addEventListener("fault", sessionfaultHandler);
      srv.setSession(idtext.text);
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
     case 2 :
      Alert.show("비밀번호가 틀립니다.");
      pwtext.text = "";
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
     case 3 :
      Alert.show("ID가 없습니다.");
      pwtext.text = "";
      loginbtn.enabled = true;
      joinbtn.enabled = true;
      break;
    }
   }
   private function faultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
    loginbtn.enabled = true;
    joinbtn.enabled = true;
   }
   
   private function sessionresultHandler(event:ResultEvent):void {
    parentApplication.loginid = idtext.text;
    parentApplication.infota.text = idtext.text + "님 방가방가!";
    idtext.text = "";
    pwtext.text = "";
    visible = false;
   }
   
   private function sessionfaultHandler(event:FaultEvent):void {
    Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 
 <mx:TitleWindow id="loginwindow" width="300" height="200" layout="absolute"
   title="M.C the MAX공연 예매 시스템에 오신 것을 환영합니다.">
  <mx:Label x="64.5" y="35" text="ID : "/>
  <mx:Label x="64.5" y="65" text="PW : "/>
  <mx:TextInput id="idtext" x="103.5" y="33" width="112"/>
  <mx:TextInput id="pwtext" x="103.5" y="63" width="112"
displayAsPassword="true" enter="RequestLogin();"/>
  <mx:Button id="loginbtn" x="64.5" y="93" label="로그인"
width="73" click="RequestLogin();"/>
  <mx:Button id="joinbtn" x="145.5" y="93" label="회원가입"
click="parentApplication.showJoin();"/>
 </mx:TitleWindow>
</mx:Canvas>
[/code]
id, pw를 입력하고 엔터 또는 로그인버튼을 클릭하게 되면 RemoteObject를 통해서 Login메소드를 호출하게 됩니다. 호출을 해서 성공적으로 리턴하면 resultHandler함수에 리턴값을 받아 그 리턴값에 따라 Alert을 해줍니다. 로그인을 성공해버리면 setSession을 통해 세션을 설정합니다.

이게 다군요-_-; 로그인을 성공하게 되면 자기자신은 visible을 false로 바꿔버립니다. 그래서 뒤에 있는 실제 메뉴를 건드릴 수 있게 했죠-_-; 아....진짜 이따구로도 가능하다는 것을 보여주는군요.

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108
 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 나야나 2008.01.31 09:58  댓글주소  수정/삭제  댓글쓰기

    FlexSession에 대해서 궁금했었는데, 이렇게 쓰는거였군요. 자바 잘하시나봐요 -_-)b

  2. yuria 2008.03.24 16:56  댓글주소  수정/삭제  댓글쓰기

    머드초보님의 블로그에서 정말 좋은정보 많이 배워갑니다..
    저는 아직까지 자바초보에 Flex초보라서 자세히는 모르지만 머드초보님 자바에서 쓰이는 왠만한 framework 다 다루실 줄 아는듯합니다.. 부러울 따름입니다..ㅜ.ㅜ 현업에 계시면 혹시 자체 framework도 개발해 보셨나요?.. 그럼 정말 왕부러움..^^

    • 머드초보 2008.03.25 08:45  댓글주소  수정/삭제

      제가 삽질한게 도움이 되셨다니 다행입니다 ㅠㅠ
      저는 현업에 있는데 Java나 Flex쪽이 아니라 unix c쪽을 하고있어요^^
      자체 framework는 꿈도 못꾸죠-_-;
      어쨌든 도움이 되셔서 제가 뿌듯하네요^^

  3. BlogIcon 고고마 2008.12.18 16:47  댓글주소  수정/삭제  댓글쓰기

    머드초보님 로그인 세션 처리 부분에서 질문이 있습니다.
    Session에 저장된 id를 다른 자바 클래스에서 가져와서 DB쿼리문에 넣고 싶은데
    일반 HTTPService방식과는 달라서 계속 오류가 나는 거 같습니다.
    클래스 간에 세션 id를 받을 수 있는 방법에 대해 조언 좀 부탁드릴께요

    • 머드초보 2008.12.19 11:38  댓글주소  수정/삭제

      클래스간 세션id를 받는 건 안해봐서 잘 모르겠네요.
      세션은 저도 그냥 저장하고, 가져오는 것 밖에 안해봤습니다 ㅠ
      죄송합니다 ㅠ

  4. flex 초보 2009.03.23 15:08  댓글주소  수정/삭제  댓글쓰기

    struts 를 이용하여 프로그램을 하고 있는데
    struts의 액션 폼에서
    FlexSession session = FlexContext.getFlexSession();
    session.setAttribute("id", "aaa";);
    이렇게 선언을 하였습니다.
    그런데 session이 널포인트가 뜨네요;;;;
    뭐가 잘못된걸 까요..??

    • 머드초보 2009.03.25 09:28  댓글주소  수정/삭제

      라이브러리 복사하셨나요?
      저도 오래전에 해본거라 기억이...ㅠ
      예전에 저렇게 하면 되어서 작성한 것 같은데 이상하네요 ㅠ

 

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

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

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

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

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

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

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

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




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




DB구조입니다.



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

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

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 불꽃남자 2008.06.25 16:46  댓글주소  수정/삭제  댓글쓰기

    좋은 예제네요.
    지나가다 한마디 남기고 갑니다.
    어떤 친구가 실무에서 RemoteObject가 쓰이지 않는다고 하셨는지요?
    실제 업무형 Flex 프로젝트할때 RemoteObject를 사용하지 않을 경우 아무도 퍼포먼스에 대한 책임을 질 수 없게 됩니다. LCDS가 비싸면 Open Source라도 사용하는 것이 바람직하고, 특히 예매 시스템과 같은 순간 트랜잭션이 많이 일어날 상황일 경우 무조건 RemoteObject를 사용하는게 좋습니다.
    참고로 저는 대한민국의 대부분 Flex 프로젝트에 관여해왔기 때문에,
    친구분의 얘기보다 제 말이 더 정확하다고 확신합니다.

    • 머드초보 2008.06.26 18:14  댓글주소  수정/삭제

      오....대한민국 Flex의 산 증인이시군요 ㅠㅠ
      반갑습니다 ^^ 좋은 의견 감사해요~ ^^
      저도 RemoteObject를 써야한다고 생각해요 ^^
      엄청 빠르다고 하더군요 ^^
      저 예제는 플렉스를 한참 인문할 때 작성한거라-_-;
      손볼곳이 100만개가 되보이는군요-_-;
      암튼 방문해주셔서 감사해요~ ^^

  2. 콩다방사장 2008.09.02 17:41  댓글주소  수정/삭제  댓글쓰기

    소스 다운받아서 햇는데여~자바 파일 먼가 하나 빠진건가요?
    sessionRO파일 messaging 에러가....

    • 머드초보 2008.09.02 23:26  댓글주소  수정/삭제

      혹시 Flex Builder3을 사용하시나요?
      그럼 하는 방식이 좀 틀린데요.
      Builder3에서 타입설정하는거에 J2EE로 해놓고
      프로젝트를 만드시면 JAR파일들이 있을겁니다.
      아마 그걸로 안만들어서 에러가 나는듯하네요.
      jar파일을 복사해서 할 수도 있구요.
      더 좋은 방법은 처음부터 J2EE로 프로젝트를 만들어서
      거기서 코딩을 하면 돼요.
      Flex Builder를 Standalone으로 설치하지마시고,
      Eclipse + Flex Builder3 Plugin을 추천합니다 ^^

  3. 남양알로에아가씨 2008.10.07 18:29  댓글주소  수정/삭제  댓글쓰기

    와~안그래도 php로 된 로그인 예제가 많아 java를 이용한 예제를 찾고 있었는데
    이렇게 저에게 딱 맞는 글을 찾게 되어, 진행중인 학습에 더욱 열의가 불타 오릅니다 ㅎㅎ
    감사합니다 ㅎ

    • 머드초보 2008.10.07 21:31  댓글주소  수정/삭제

      아넵 도움이 되셨으면 좋겠네요 ^^
      학구열은 언제나 타올라야 합니다!

  4. 천재성 2008.12.22 07:01  댓글주소  수정/삭제  댓글쓰기

    저기여~~ 제가 플렉스 이제 독학으로 배우는데요
    이 예제 실행하려고 하는데...
    자 윈도우 깔린 본체에서
    mysql를 설치 했는데

    님께서 올려주신 디비 자료하고~~ 어케 연동 시켜야 하는지 잘 모르곘어요 ㅜㅜ
    얼려주세요

    • 머드초보 2008.12.26 22:38  댓글주소  수정/삭제

      디비연동부분은 JAVA를 따로 공부하셔야합니다.
      이곳에서는 DB연동을 다루지 않았습니다.
      JDBC에 대해서 공부하시면 돼요 ^^

  5. 우아ㅠ 2009.01.12 11:08  댓글주소  수정/삭제  댓글쓰기

    난언제이렇게 만들죠??ㅠ

    공부열심히해야겟네요..ㅠ

    • 머드초보 2009.01.14 17:27  댓글주소  수정/삭제

      헉....이건 무려 오래전에 제작한..-_-;
      사실 보면 좋지 않은 코드가 많습니다-_-;(저도 공부하면서 알게된..ㅠ)
      방문해주셔서 감사해요~ ^^

  6. 왕초보 2009.02.06 19:31  댓글주소  수정/삭제  댓글쓰기

    flex를 공부중인 대학생입니다.
    DBCP설정하려고 webapps\blazeds\WEB-INF에 있는 web.xml을 봤는데
    아뿔사!
    <servlet>
    <servlet-name>MessageBrokerServlet</servlet-name>
    <display-name>MessageBrokerServlet</display-name>
    <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
    <init-param>
    <param-name>services.configuration.file</param-name>
    <param-value>/WEB-INF/flex/services-config.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
    </servlet>

    요런 내용이 있어서 이를 어찌 설정해야 되나 난감해 하고 있는 중입니다.
    JSP처럼 그냥
    <servlet>
    <servlet-name>DBCPInit</servlet-name>
    <servlet-class>flex.jdbcdriver.DBCPInit</servlet-class>
    <load-on-startup>1</load-on-startup>
    <init-param>
    <param-name>jdbcdriver</param-name>
    <param-value>com.mysql.jdbc.Driver</param-value>
    </init-param>
    </servlet>
    이런식으로 설정하면 되는 걸까요??
    답변 해주세요

    • 머드초보 2009.02.07 14:25  댓글주소  수정/삭제

      그건 MessageBrokerServlet이라고 해서 DBCP설정하는게 아닙니다.
      RemoteObject를 사용하기위한 서블릿이라고 보면 됩니다.
      위에 예제에서는 DB연동부분은 빠져있습니다.
      RemoteObject부터 공부하시면 될 듯 합니다^^
      BlazeDS나 LCDS로 할 수 있습니다^^

  7. 입문자 2009.04.09 17:26  댓글주소  수정/삭제  댓글쓰기

    이제 FLEX 입문한 JAVA 개발자 입니다.
    언제나 좋은 예제 감사합니다.
    간결한 설명과 좋은 예제 초보인 제가 보기에 정말 좋은것 같습니다.

    앞으로도 좋은 글 부탁드리며, 위 예제 돌렸는데 버튼의 label이 "R.","A.","S." 이런식으로 나오는데..
    소스는 건들지 않았습니다..;;;;
    Alert으로 찍어봐도 제대로 나오는데...뭐가 문제인지는 모르겠습니다..
    혹시 의심되는 부분이 있으면 답변 부탁 드립니다.

    • 머드초보 2009.04.09 23:31  댓글주소  수정/삭제

      안녕하세요~
      이거 정말 추억의 소스군요-_- 부끄럽습니다-_-
      우선 label의 글자가 짤리는 것 같은데요.
      브라우저 크기를 늘려보시면 나올 듯 합니다.
      아님 button에 마우스오버를 해도 글이 다 나올 듯 합니다....
      width를 고정으로 하지 않았기에, 퍼센트에 따라 버튼 크기가 지정되어 그런 듯 합니다^^

  8. 아직도초보 2009.11.08 20:12  댓글주소  수정/삭제  댓글쓰기

    좋은예제내요~ 저도 열심히 해보겠습니다 ㅎ

    • 머드초보 2009.11.09 16:19  댓글주소  수정/삭제

      헉...2년이 넘은 예제임 ㅠㅠ
      문제가 좀 많은 코드입니다 ㅠㅠ 주의해서 참조하세요 ^^

  9. Flex초급 2010.01.28 13:22  댓글주소  수정/삭제  댓글쓰기

    좋은 정보.. 너무 잘보고 갑니다~~

  10. Flex 쌩초보 2010.05.04 09:46  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다. 초급 프로그래머 인데 아직 기초도 없는 상태에서 프로젝트를 맡아서
    하다보니까 이것저것 헤매는 것들이 너무 많네요.
    ^^ 소스 분석해 보면서 실력을 늘려야 겠네요
    늘 행복하시고 환절기 감기 조심하세요 ^^

  11. Flex 쌩초보 2010.05.04 14:09  댓글주소  수정/삭제  댓글쓰기

    질문좀 할게요.

    지금 sesseion 부분에서 오류가 발생하는데

    실패 메세지: faultCode:InvokeFailed faultString:'[MessagingError message='Destination 'session' either does not exist or the destination has no channels defined (and the application does not define any default channels.)']' faultDetail:'Couldn't establish a connection to 'session''

    이런메세지가 뜨네요. remoting 쪽에다가
    <destination id="session">
    <properties>
    <source>flex.session.SessionRO</source>
    </properties>
    </destination>

    이렇게 처리 해줬는데 이게 제대로 인식이 안되는거 같습니다.
    혹시 추가 *.java가 필요한건가요?

    • 머드초보 2010.05.06 00:04  댓글주소  수정/삭제

      아뇨 추가 java는 필요없는데....
      아...게다가 너무 오래되어서(조만간 3년을 찍게 될 제 부끄러운 글이....-_-)
      저 메세지는 백방 설정이나 뭔가 빠진 게 있는 것 같습니다.
      저런 메세지를 저도 많이 봐왔는데, 결론은 destination이 존재하지 않는 것인데, 컴파일 옵션이 혹시 제대로 되어있는지?-_-

  12. 렉스초보 2011.12.01 17:16  댓글주소  수정/삭제  댓글쓰기

    flex + spring + ibaits + jsp + oracle + blazeds 이렇게 연동해서

    소스수정해서 해보고 있는데 어렵네요..ㅠ_ㅠ

    다른부분은 거진 다되는데 destination 설정해주는데에서 자꾸 헤매고 있네요 ㅎㅎ

    소스감사합니다^^ 열심히 더 수정해봐야겠네요 ㅠ

    • BlogIcon 머드초보 2011.12.01 21:38 신고  댓글주소  수정/삭제

      아....저도 참 오래전에 만든거라...-_- destination부분은 저도 예전에 삽질하면서 많이 헤맸던 부분이였던 것 같네요~ 원리만 이해하면 아마 잘 되실거에요~ 화이팅!

 

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 머드초보

댓글을 달아 주세요

  1. 눈풀렸스 2011.03.09 17:09  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 고맙습니다. 잘 보고 있습니다.

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

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

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) 아래와 같은 화면이 뜰껍니다.

사용자 삽입 이미지

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

댓글을 달아 주세요

  1. 황민혁 2008.10.03 14:20  댓글주소  수정/삭제  댓글쓰기

    지금 열심히 따라서 해보고 있습니다~
    감사해요~