머드초보의 블로그

몰랐는데 AIR에서도 되네요-_-;

우선 http://mudchobo.tomeii.com/tt/211 이거랑
http://mudchobo.tomeii.com/tt/214 이거를 참조하셔서 새로운 blazeds.war를 만들어서 톰캣에 띄워야합니다.

New Project로 만들고, ProjectName을 AirBlazedsTest라고 합시다.
Desktop application을 선택하고 J2EE를 선택하고, 넥스트를 누릅니다 ^^

Server location은 위에 따라했다면 그대로 되어 있을꺼에요^^
Finish를 클릭해줍시다.

AIR에서는 좀 다르게 몇줄을 더 추가해야하는데요.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
   layout="absolute">
 <mx:Script> 
  <![CDATA[
   import mx.messaging.ChannelSet;
   import mx.messaging.channels.AMFChannel;  
   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 amfChannel:AMFChannel = new AMFChannel(
     "my-amf", "http://localhost:8080/blazeds/messagebroker/amf");
    var channelSet:ChannelSet = new ChannelSet();
    channelSet.addChannel(amfChannel);
   
    var srv:mx.rpc.remoting.RemoteObject = new RemoteObject();  
    srv.channelSet = channelSet;
    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:WindowedApplication>
[/code]



AIR에서도 돼요-_-; 레몬펜그은부분만 추가를 해주시면 돼요 ^^

우선 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로 호출할꺼니까요 ^^

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

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

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

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

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

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

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

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

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

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

DB구조입니다.



나중에 삽질한 거 설명하면서 차근차근 올려보도록 하겠습니다-_-;