챠팅 부분을 해봅시다. 저도 이쪽은 잘몰라서 책에도 잘 안나와 있고 해서 가장 쉬운 차트로 했습니다-_-;

우선 예매한 연령별 현황을 보도록 합시다.

자바클래스 소스를 보도록합시다.









[code]
public double[] getAgestatus() {
  Connection con = null;
  Statement stmt = null;
  ResultSet rs = null;
 
  double status[] = new double[6];
  int age = 0, avg_age = 0, count=0;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   stmt = con.createStatement();
   String query =
     "SELECT Age FROM bs_Book,bs_Member WHERE bs_Book.ID = bs_Member.ID";
   rs = stmt.executeQuery(query);
   
   while(rs.next()) {
    age = rs.getInt("Age");
    avg_age += age;
    if(age < 20)   // 연령별로 예약수를 조사
     status[0]++;
    else if(age >= 20 && age < 30)
     status[1]++;
    else if(age >= 30 && age < 40)
     status[2]++;
    else if(age >= 40 && age < 50)
     status[3]++;
    else
     status[4]++;
    count++;
   }
   status[0] = (status[0] / (double)count) * 100; // 퍼센트로 계산
   status[1] = (status[1] / (double)count) * 100;
   status[2] = (status[2] / (double)count) * 100;
   status[3] = (status[3] / (double)count) * 100;
   status[4] = (status[4] / (double)count) * 100;
  } catch (SQLException e) {
   e.printStackTrace();
   return null;
  } finally {
   if (rs != null) try { rs.close(); } catch(SQLException ex) {}
   if (stmt != null) try { stmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
  return status;
 }
[/code]
이부분은 프로시저인지 뭔지로 할 수도 있는데 제가 할줄몰라서 클래스에 때려박았습니다-_-;
보시면 예약리스트와 멤버리스트를 조인해서 그 예약된 id의 나이만 출력하도록 합니다.
그래서 for문을 이용해서 20대인지 30대인지 등을 파악해서 status에 저장해서 그 배열을 리턴합니다.
그 status를 리턴하면 0에는 20대미만의 수, 1에는 20대의 수 등이 들어가겠죠.

플렉스로 가봅시다-_-;

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
   width="100%" height="100%"
 title="나이별 예매현황">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   [Bindable]
   public var agestatus:Array = new Array();
   
   public function UpdateAgestatus():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
    srv.getAgestatus();
   }
   private function resultHandler(event:ResultEvent):void {
    var array:Array = event.result as Array;
    agestatus = [
       {name: "20대미만", value: array[0]},
       {name: "20대", value: array[1]},
       {name: "30대", value: array[2]},
       {name: "40대", value: array[3]},
       {name: "50대이상", value: array[4]},
    ];
    parentApplication.viewstack.selectedChild = parentApplication.ViewAgeStatus;
   }
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 <mx:ColumnChart width="100%" height="100%" dataProvider="{agestatus}"
   showDataTips="true" >
        <mx:horizontalAxis>
         <mx:CategoryAxis dataProvider="{agestatus}" categoryField="name"/>
        </mx:horizontalAxis>
        <mx:verticalAxis>
         <mx:LinearAxis minimum="0" maximum="100" />
        </mx:verticalAxis>
        <mx:series>
         <mx:ColumnSeries dataProvider="{agestatus}"
           xField="name" yField="value" />
        </mx:series>
    </mx:ColumnChart>
</mx:Panel>

[/code]
RemoteObject를 이용해서 getAgestatus를 호출합니다. 리턴값은 배열로 받습니다.

var array:Array = event.result as Array; 이렇게 하면 배열로 받아올 수 있습니다.
뭐든지 다 잘받아오는 플렉스입니다-_-;

agestatus라는 Array에 name이라는 것에 20대미만 이런식으로 쓰고 value에는 받아온 해당 값을 넣습니다.

가장 보편적인 차트인 ColumnChart를 사용해봅시다. dataProvider는 방금전에 만든 agestatus로 하고 horizontalAxis는 가로에 나타낼 문자열을 말하는 듯합니다. 20대, 30대 이런것을 넣기위해 name속성을 적용합시다.

verticalAxis는 세로축 말하는 거 같은데 저도 잘모르겠습니다. 책보고 따라한거라 ^^
뭐 최소값과 최대값을 설정하는 거 같습니다 ^^
mx:series에 xField에는 name이고 yField는 value로 하는군요-_-; 뭐 저런식으로 하니까 되더군요-_-;

좀더 연구해봐야겠습니다 차팅은 ^^

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

댓글을 달아 주세요

  1. 황호순 2008.02.12 12:16  댓글주소  수정/삭제  댓글쓰기

    자바 클레스 이름은 뭐지여??

    플렉스에서 자바 클레스를 호출할때 이름을 어느 부분에 쓰는지즘 알수 있을까여?

    • BlogIcon 머드초보 2008.02.12 22:06  댓글주소  수정/삭제

      RemoteObject를 사용하기 위해서는 LCDS나 BlazeDS를 사용해야합니다.
      그리고 /WEB-INF/flex/remoting-config.xml파일에다가 Destination에 자바클래스를 정의를 해놓고 그 Destination을 불러서 메소드를 사용하면 됩니다.

      <destination id="booksystem">
      <properties>
      <source>flex.booksystem.BooksystemRO</source>
      </properties>
      </destination>

      <destination id="session">
      <properties>
      <source>flex.session.SessionRO</source>
      </properties>
      </destination>

      요런걸 정의해야합니다.
      그럼 저 클래스에 있는 메소드를 사용할 수 있습니다. ^^

 

이번엔 DataGrid를 이용해봅시다!-_-;

예약 리스트를 받아와야하기 때문에 더 쉽습니다-_-; 이 DataGrid라는 놈이 너무 강력해서-_-; 자바Bean이랑 매우 잘 맞아요!

자바측에서 List형태로 리턴하게 되면 DataGrid의 dataProvider가 알아서 다 해줍니다.
우선 자바측의 예약 취소하기 메소드를 보도록 합시다.





[code]
public int BookCancel(int[] seatnum) {
  Connection con = null;
  PreparedStatement pstmt = null;
  ResultSet rs = null;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   // 현재 요청된 변호레코드의 ID와 좌석번호, ID와 맞는 비번을 추출
   for (int i=0; i<seatnum.length; i++) {
    pstmt = con.prepareStatement("DELETE FROM bs_Book WHERE seatnum = ?");
    pstmt.setInt(1, seatnum[i]);
    pstmt.executeUpdate();
   
    pstmt = con.prepareStatement(
                "UPDATE bs_Seat SET isbooked='X' WHERE seatnum = ?");
    pstmt.setInt(1, seatnum[i]);
    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]
아 이거 배열로 처리하려고 했는데 DataGrid에서 다중선택을 할 줄 모르겠어요-_- 아는 사람 좀 가르쳐주세요!

어쨌든-_-; 한개만 넘겼다고 치고 해봅시다. 해당 좌석번호를 찾아서 bs_Book테이블에서 삭제를 하고 bs_Seat테이블에는 예약여부(isbooked)에 X로 바꿔주면 끝납니다.

이제 플렉스로 가봅시다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  width="100%" height="100%" title="예약취소하기">
 <mx:Script>
  <![CDATA[
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.remoting.RemoteObject;
   import mx.controls.Alert;
   
   private function bookCancel():void {
    var cancellist:Array = new Array();
    var srv:RemoteObject = new RemoteObject();
    var i:int;
    srv.destination = "booksystem";
   
    if (dg.selectedItem == null){
     Alert.show("좌석을 선택하세요!");
     return;
    }
    cancellist.push(int(dg.selectedItem.seatnum));
   
    srv.BookCancel(cancellist);
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   
   // Result Handler
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show("예약취소가 완료되었습니다.");
      parentApplication.viewstack.selectedChild = parentApplication.ViewHome;
      break;
    }
   }
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
   
   public function UpdateBookcancel():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", bookresultHandler);
    srv.addEventListener("fault", bookfaultHandler);
    srv.getBook(parentApplication.loginid);
   }
   private function bookresultHandler(event:ResultEvent):void {
    dg.dataProvider = event.result;
    parentApplication.viewstack.selectedChild=parentApplication.ViewBookCancel;
   }
   private function bookfaultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" />
 <mx:ControlBar horizontalAlign="center">
  <mx:Button label="예약취소하기" click="bookCancel()"/>
 </mx:ControlBar>
</mx:Panel>

[/code]
우선 UpdateBookcancel을 실행하게 되면 getBook함수를 호출하는데 이 함수는 예약리스트를 List객체에 받아오는 역할을 합니다.

dg.dataProvider = event.result; (dg는 DataGrid의 id)

이 결과를 그냥 dg.dataProvider에 처 넣으면 됩니다-_-; 그러면 알아서 테이블로 표시가 됩니다.

그리고 해당줄을 선택하고, 예약취소버튼을 누르면 bookCancel함수를 호출하는데 여기서 자바클래스에 있는 BookCancel함수를 호출하게 됩니다.

선택된 좌석은 dg.selectedItem.seatnum 이렇게 하면 알 수 있습니다.

예매시스템 소스파일입니다.
http://mudchobo.tomeii.com/tt/108

 
Posted by 머드초보

댓글을 달아 주세요

 

예약하기부분... 머리가 딸려서 좀 고생했습니다-_-;

아....mxml에서는 반복문 못 쓰는 건가요? 버튼을 90개 만들고 싶은데 다 적을 수도 없고 해서-_-;
as에서 구현을 했습니다 ^^

우선 예약하기부분의 자바클래스를 보도록 합시다.
아 우선 DB구조를 보도록 합시다.


사용자 삽입 이미지

bs는 Booksystem의 약자고요-_-;
bs_Book은 예약리스트입니다. 3개의 필드로 되어있는데요. booknum, id, seatnum으로 되어있구요.
bs_Seat은 seatnum, grade, isbooked로 되어있어요.

예약을 하게 되면 bs_Seat에서 isbooked를 O로 바꾸고 bs_Book에 그 해당 번호와 예약한 id를 저장합니다. booknum은 오토인크리스먼트입니다.

간단한건데 왜이렇게 복잡하게 설명해놨지-_-; 뭐 어쨌든--; 간단합니다-_-;

[code]
public int BookSeat(String id, int[] seatnum) {
  Connection con = null;
  PreparedStatement pstmt = null;

  try {
   String jdbcDriver = "jdbc:apache:commons:dbcp:/pool";
         con = DriverManager.getConnection(jdbcDriver);
   // 요청한 좌석이 예약된 좌석인지 확인을 위해 IsBooked를 추출
   
   for (int i=0; i<seatnum.length; i++) {
    pstmt = con.prepareStatement(
       "UPDATE bs_Seat SET isbooked='O' WHERE bs_Seat.seatnum = ?");
    pstmt.setInt(1, seatnum[i]);
    pstmt.executeUpdate();
    pstmt = con.prepareStatement(
       "INSERT INTO bs_Book (id, seatnum) " + "VALUES (?, ?)");
    pstmt.setString(1, id);
    pstmt.setInt(2, seatnum[i]);
    pstmt.executeUpdate();
   }
   return 1;
  } catch (SQLException e) {
   e.printStackTrace();
   return 0;
  } finally {
   if (pstmt != null) try { pstmt.close(); } catch(SQLException ex) {}
   if (con != null) try { con.close(); } catch(SQLException ex) {}
  }
 }
[/code]
int형배열로 받습니다. 다중선택으로 올 수 있기 때문에-_-; 받아서 for문으로 개수만큼 실행합니다. 우선 bs_Seat테이블에서 예약여부필드에서 예약이 됐다는 의미에서 O로 바꾼 뒤에 bs_Book테이블 예약리스트테이블에 해당 id와 좌석번호(seatnum)을 집어 넣습니다. 예약요청하는 수만큼 반복합니다.

플렉스로 가봅시다-_-;

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  width="100%" height="100%"
 creationComplete="CreateButton()" title="좌석 예약하기">
 <mx:Script>
  <![CDATA[
   import mx.containers.ControlBar;
   import mx.controls.Button;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.events.FaultEvent;
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.remoting.RemoteObject;
   
   public var seatlistAC:ArrayCollection;
   public var bookseatAC:ArrayCollection = new ArrayCollection();
   public var count:int = 0;
   
   // 처음 Panel이 생성될 때 실행되는 버튼생성함수
   public function CreateButton():void {
    var i:int;
    var j:int;
    var space:int;
   
    for (i = 0; i < 9; i++) {
     for (j = 0; j < 10; j++) {
      var btn:Button = new Button();
     
      if (i < 3) {
       btn.label = "R" + (i*10+j+1);
       space = 0;
      } else if (i < 6) {
       btn.label = "S" + (i*10+j+1);
       space = 30;
      } else {
       btn.label = "A" + (i*10+j+1);
       space = 60;
      }
      btn.id = String(i*10+j+1);
      btn.name = "btn" + String(i*10+j+1);
      btn.x = j * 50;
      btn.y = i * 30 + space + 10;
      btn.width = 35;
      btn.height = 20;
      btn.setStyle("fillColors", ["#000000","#000000"]);
      btn.addEventListener(MouseEvent.CLICK, btnclickEvent);
      addChild(btn);
     }
    }
   }
   
   // 버튼클릭시 이벤트
   private function btnclickEvent(e:Event):void {
    var btn:Button = Button(e.currentTarget);
    var i:int;
    for (i = 0; i < bookseatAC.length; i++){
     if (bookseatAC.getItemAt(i) == btn.id){
      bookseatAC.removeItemAt(i);
      btn.setStyle("fillColors", ["#000000","#000000"]);
      count--;
      return;
     }
    }
   
    if (count == 4) {
     Alert.show("더이상 선택할 수 없습니다.");
     return;
    }
    count++;
   
    bookseatAC.addItem(btn.id);
    btn.setStyle("fillColors", ["#ff0000","#ff0000"]);
   }
   
   // 예약하기버튼 클릭시 발생하는 이벤트
   private function bookseatEvent():void {
    if (count == 0) {
     Alert.show("좌석을 선택하세요!");
     return;
    }
    var bookseatlist:Array = [];
    var srv:RemoteObject = new RemoteObject();
    var i:int;
    srv.destination = "booksystem";
   
    for (i=0; i<bookseatAC.length; i++) {
     bookseatlist.push(int(bookseatAC.getItemAt(i)));
    }
    srv.BookSeat(parentApplication.loginid, bookseatlist);
   
    srv.addEventListener("result", resultHandler);
    srv.addEventListener("fault", faultHandler);
   }
   
   // 예약하기 버튼 클릭시 실행하는 RemoteObject에 대한 이벤트핸들러
   private function resultHandler(event:ResultEvent):void {
    var result:int = int(event.result);
   
    switch (result) {
     case 0 :
      Alert.show("DB오류입니다.");
      break;
     case 1 :
      Alert.show("예약에 성공했습니다.");
      bookseatAC.removeAll();
      parentApplication.viewstack.selectedChild = parentApplication.ViewHome;
      count = 0;
      break;
    }
   }  
   private function faultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
   
   // 예약여부확인 후 버튼업데이트
   public function UpdateBookseat():void {
    var srv:RemoteObject = new RemoteObject();
    srv.destination = "booksystem";
    srv.addEventListener("result", seatresultHandler);
    srv.addEventListener("fault", seatfaultHandler);
    srv.getSeat();
   }
   private function seatresultHandler(event:ResultEvent):void {
    var i:int;
    var btn:Button;
   
    seatlistAC = ArrayCollection(event.result);
       
    for (i = 0; i < seatlistAC.length; i++){
     btn = Button(this.getChildByName("btn" + String(i+1)));
     btn.setStyle("fillColors", ["#000000","#000000"]);
     if (seatlistAC[i].isbooked == "O") {
      btn.enabled = false;
     } else {
      btn.enabled = true;
     }
    }
    parentApplication.viewstack.selectedChild=parentApplication.ViewBookSeat;
   }
   private function seatfaultHandler(event:FaultEvent):void {
    mx.controls.Alert.show("실패 메세지: " + event.fault.message);
   }
  ]]>
 </mx:Script>
 
 <mx:ControlBar id="ctrbar" horizontalAlign="center">
  <mx:Button id="bookbtn" label="예약하기" click="bookseatEvent();"/>
 </mx:ControlBar>
</mx:Panel>
[/code]
아 길군요-_-; 우선 컴포넌트가 생성이 되면 CreateButton함수를 호출하게 되어있습니다. 이것이 패널에다가 90개의 버튼을 만들어주는 함수입니다. 각각 구별할 수 있게 id와 name을 주고 각 버튼마다 이벤트를 등록했습니다. 그리고 addChild라는 함수는 Panel에 자식으로 붙이겠다는 얘깁니다.

버튼이 생성되면 이미 예약되어있는 좌석은 비활성화 해야합니다. getSeat을 호출하면 좌석정보를 List객체에 담아오는데 이것을 ArrayCollection으로 받습니다.

seatlistAC = ArrayCollection(event.result); 이런식으로 받아오면 됩니다.

해당 되는 버튼은 enable = false로 해서 비활성화시킵니다.

버튼을 생성하고 그 해당 버튼을 클릭하게 되면 이벤트로 등록한 함수를 호출하게 되는데 btnclickEvent 이 함수를 호출하게 됩니다. 클릭할 때마다 ArrayCollection에다가 집어넣습니다-_-; 아..쓰면서 느낀건데 ArrayCollection할 필요 없을 꺼 같은데-_-; 그냥 Array로 해도 될 듯싶습니다. 아 삽질했습니다.

어쨌든 집어 넣어서 이미 클릭이 된거면 삭제를 시키고, 클릭이 안된거면 추가를 하게 되어있습니다.

그렇게 해서 예약하기 버튼을 클릭하면 bookseatEvent함수를 호출합니다. 이 함수를 호출하게 되면 자바클래스에 있는 BookSeat함수를 호출하게 됩니다-_-; 간단해요!

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

댓글을 달아 주세요

  1. kedem 2008.11.21 01:52  댓글주소  수정/삭제  댓글쓰기

    잘보고 많이 배워갑니다
    하나 궁금한게 있는데
    다른건 다 잘되는데 예약이 안되네요

    저는 오라클을 써서 시퀀스를 사용했는데
    이부분이 계속 오류가 뜨네요
    어떻게 해야 좋을까요

    pstmt = con.prepareStatement("INSERT INTO bs_Book VALUES (booknum_seq.NEXTVAL,?, ?)";);
    pstmt.setString(2, id);
    pstmt.setInt(3, seatnum[i]);
    pstmt.executeUpdate();

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

      음....
      저도 1년전에 짠거라....-_-;
      게다가 시퀀스를 안써봐서 ㅠ
      문법상은 문제가 없어보이네요.
      어떤 에러가 뜨나요?

  2. kedem 2008.11.21 18:22  댓글주소  수정/삭제  댓글쓰기

    해결했습니다.
    pstmt.setString(2, id);
    pstmt.setInt(3, seatnum[i]);

    이부분 2, 3이 아니라 1, 2네요
    어제는 밤새봐도 모르겠던데
    오늘은 그냥 보니깐 알겠네요ㅜㅜ

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

      헉 그렇군요 ㅠㅠ
      그런문제였군요 ㅠ
      해결하셨다니 다행이네요 ^^

  3. BlogIcon 양파링 2010.02.02 13:10  댓글주소  수정/삭제  댓글쓰기

    오라클이라 윗분처럼 insert문에서 걸리던데...열명이 부적합 하다고...ㅡ_ㅡ;
    예약이 되는데요~ 예약 리스트에는 아무것도 없고 db에는 자료는 잘 인서트 되는데 뭐가 문제인지
    ㅜ_ㅠ; 참 db구조 연관관계 해 놓은게 이해가 안가는데 ~ 자세히 설명좀 해주시면 감사할게요~

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

      아...이거 저도 간만에 보니까 이해가 안되네-_-
      아....bs_Book테이블이 예약정보가 들어간 테이블이네요^^
      Member테이블이 있고, Seat은 자리테이블이고
      자리아이디와 멤버아이디를 함께 book테이블에 저장을 해요^^
      열명이 부적합한 것은 db생성이나 쿼리를 잘 확인해보시면.....ㅠ

 
ViewStack에 대해서 알아봅시다.
화면 전환을 위해 이게 가장 많이 쓰인다더군요. 써보니 뭐 좋은 거 같습니다.

탭네이게이터나 아코디언?인가?뭔가 하는 것은 펼치고 접고 하는 식인 반면에 이건 메뉴바를 하나 두고 보이고 싶은 View를 클릭해서 열 수 있다는 차이점이 있습니다.



메인부분에 사용된 ViewStack을 보도록 합시다.






[code]
<mx:ViewStack id="viewstack" width="75%" height="100%" creationPolicy="all">
 
   <mx:Panel id="ViewHome" width="100%" height="100%"
     showEffect="WipeDown" hideEffect="WipeUp">
       <mx:TextArea width="100%" height="100%" borderColor="#ffffff"
         wordWrap="true" editable="false" enabled="true" fontSize="12"
          color="#666666" cornerRadius="5" x="10" y="10">
         <mx:text>예매시스템에 오신 것을 환영합니다.</mx:text>
       </mx:TextArea>
      </mx:Panel>
     
      <comp:BookSeat id="ViewBookSeat"
         showEffect="WipeDown" hideEffect="WipeUp" />
 
      <comp:BookCancel id="ViewBookCancel"
         showEffect="WipeDown" hideEffect="WipeUp" />
 
      <comp:BookList id="ViewBookList"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
      <comp:SeatList id="ViewSeatList"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
      <comp:AgeStatus id="ViewAgeStatus"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
      <comp:SexStatus id="ViewSexStatus"
         showEffect="WipeDown" hideEffect="WipeUp" />
     
    </mx:ViewStack>
[/code]

아....comp:BookSeat 이거는 커스텀 컴포넌트라고 해서 사용자가 직접 만든 컴포넌트를 말하는 겁니다.
즉 이미 있는 컨트롤들을 상속받아서 새로운 기능을 추가하는 그런것이죠.

앞에 comp는 무조건 저게 아니고 처음에 mx:application 선언시에 보시면 xmlns:comp="*" 라고 적어 놓으면 그 해당 폴더에 있는 모든 컴포넌트를 사용할 수 있다 라는 것이죠. 그리고 이름은 comp!

그다음 BookSeat, BookCancel 등은 이 컴포넌트 이름입니다. 처음 플렉스빌더에서
File -> New -> New MXML Component 라고 해서 이름을 쓰는데 즉 파일 이름이 컴포넌트 이름입니다 ^^

저기 6개들은 다 제가 만든 컴포넌트이며 다 Panel을 상속받았습니다.
Panel이라고 치고 해봅시다.

저렇게 ViewStack을 정해 놓으면 ViewStack에는 총 7개의 Panel이 들어가 있습니다. 우선적으로 처음에 쓴 놈부터 보여져서 ViewHome이 먼저 보여집니다.

그리고 viewstack.selectedChild 라는 변수에 ViewBookSeat이라고 넣어주면 ViewBookSeat에 해당하는 컴포넌트가 보여지게 됩니다.

즉 Button에 <mx:button .... click="viewstack.selectedChild = ViewBookSeat"> 요렇게 해주면 화면 전환이 된다는 것이죠 ^^

이 예매시스템은 성격상 마우스를 클릭했을 때 데이터를 먼저 업데이트 해야하기 때문에 업데이트를 하고나서 ViewStack을 바꾸는 식으로 했습니다 ^^

메인부분은 화면 전환하는 거 밖에 없군요-_-;

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

댓글을 달아 주세요

 

회원가입은 아이디, 비밀번호, 이름 등의 정보를 받아서
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 머드초보

댓글을 달아 주세요