머드초보의 블로그

젠장 ^^
이클립스 플러그인으로 Flex Builder를 설치하면 BlazeDS를 사용하기 훨씬 쉬워집니다-_-;
저 아래에 있는 방법은 다 생까고-_-; 다시 해보도록 합시다.

우선 플렉스빌더3 이클립스 플러그인버전으로 받습니다.
플러그인 버전이 없어진 줄 알았는데 저기에 저렇게 써있군요.
Already have Eclipse installed? Download the Flex Builder Eclipse plugin instead.
저거 클릭하고 로그인하면 받을 수 있습니다.

이클립스에 설치를 하도록 합시다 ^^
설치를 하고 이클립스를 띄워 봅시다.
New -> Project -> Flex Project를 선택!
Project name은 HelloBlazeds라고 합시다.
Web Application을 선택하고, Server technology에서 Application server type은 J2EE로 합시다.
Next를 클릭하고 J2EE settings에서 Apache Tomcat v6.0을 설정(없으면 New해서 설정^^)하고
Flex WAR file을 blazeds.war(http://opensource.adobe.com/wiki/display/blazeds/Release+Builds에서 받을 수 있습니다)파일을 선택합니다. Finish를 클릭합니다.

저는 전에 이클립스랑 Flex Builder랑 따로 설치해서 따로 작업을 했는데 저렇게 하면 바로 eclipse에서도 tomcat테스트가 가능합니다 ㅠㅠ 난 왜이렇게 바보 같지-_-;

그러면 이제 짬뽕이 되어있습니다! 참고로 src폴더는 자바소스폴더구요.
flex_src폴더는 flex소스폴더겠죠? ^^

예제는 요 아래에 있는 예제 고대로 따라하시면 될껍니다 ^^
근데 다 소스넣고 실행할라그러면 이상하게 요런 에러가 떠요.
실패 메세지 : faultCode:Client.Error.MessageSend faultString:'Send failed' faultDetail:'Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 404: url: 'http://localhost:8080/WebContent/messagebroker/amf''

보니까 ContextRoot가 이상하게 WebContent로 되어있어요-_-;
바꿔줍시다. HelloBlazeds프로젝트이름에 마우스오른쪽을 대고 properties를 선택합니다.
Flex Server부분이 있습니다. WebContent로 되어있습니다.
HelloBlazeds로 바꿉시다. 그러고 나서 실행해봅시다.
이클립스에 등록된 tomcat에다가 프로젝트를 추가해야합니다. HelloBlazeds라는 프로젝트를 추가를 하고 서버를 실행합시다. 그러고나서 url을 요청합니다.
http://localhost:8080/HelloBlazeds/HelloBlazeds.swf
그러면 이제 될껍니다-_-;

ps1. 저거왜 WebContent로 되어있을까요? 제가 뭘 잘못 한걸까요?-_-;
ps2. BlazeDS를 사용하시려면 이클립스 플러그인으로 플렉스 빌더를 사용하시는게 건강에 좋습니다-_-;
ps3. 에이레네님이 번역한거 읽으러 가야지-_-;

어서 알송보다 더 좋은 AIR기반의 Desktop용 mp3플레이어가 나왔으면 좋겠어요!
AIR로 제작한다면 꽤나 멋진 플레이어가 나올 듯 한데 ^^

ADOBE사의 제품은 예전부터 참 좋아했었어요-_-;
Photoshop의 합성은 정말 충격적이었어요!
예전에 고등학교 친구녀석이 고등학교 때 소풍단체사진을 스캔을 떠서 친구 얼굴을 오려서 주유소습격사건 포스터에 합성했던 기억이 나요! 그 녀석 합성의 달인이였는데-_-;

그리고 Adobe Reader는 뷰어가 이렇게 이쁘게 보여질 수 있다는 것을 보여준 좋은 예였죠^^

게다가 인터넷 서핑하다가 안 볼 수가 없는 Flash!!! (사실 이건 Macromedia사꺼였지만^^)

그리고 깔끔한 제품의 로고들이 참 좋아요. 전혀 복잡해보이지 않는 로고! ^^



Fx만으로도 깔끔하면서도 멋진 로고를 연출해낸-_-; 나만 멋지게 보이는건가-_-;
어쨌든 좋아요 ^^

그런데 다른 것들은 대부분 Beta1, Beta2, Beta3, Release Candidate1, Release Candidate 2, 정식~ 이런순으로 가는데 이건뭐 Beta3에서 바로 출시해버리네요-_-;

이번에는 Desktop Application을 쉽게 제작할 수 있는 AIR도 포함되어 있어서 더욱 멋지네요.
웹 기술로 Desktop Application을 제작한다면 정말 손쉽게 웹에 관련된 것을 연동할 수 있고, 여러가지 장점들이 있겠죠 ^^ 하지만, 그에 비해서 단점도 좀 있는 듯 합니다. C/C++, JAVA보다 약간 제한적이겠죠. Action Script가 아무리 강력하다지만, 아직은 쟤네덜 보단 약한 것 같습니다. 그래서 ADOBE에서 Action Script 4를 낸다고 한 것을 열이아빠님 블로그에서 본 듯 하네요.

그리고 RIA시장에서는 MS가 가세를 했죠. SilverLights라는 놈을 내놨는데 이 놈은 정말 막강한 놈이라고 하네요. .NET 라이브러리를 서버단이 아닌 클라이언트단에서도 사용할 수 있게 하는.... ADOBE에게 빼앗긴 웹시장을 차지하려고 하는 움직임인 듯하네요.

예전에 MS에서 주최하는 실버라이트세미나를 갔었는데 아직 Flash보다는 약하지만, 점점 버전업을 하고 있는 듯 합니다. 샘플을 봤을 때에 참 놀라웠습니다. 게다가 WPF라고 하는 놈은 웹에서 사용할 수도 있는데 XBAP이라고 하더군요. 이놈은 3D가속까지 지원하는 미친놈이였습니다.

MS가 이번에 야후도 먹을라고 하고 웹시장을 예측하는 걸까요?-_-; 완전 다 먹으려고하네-_-;
어쨌든 이야기가 좀 샜습니다만, AIR로 개발된 유틸리티들이 많이 나왔으면 하네요 ^^

몰랐는데 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로 호출할꺼니까요 ^^

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