머드초보의 블로그

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

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

오늘도 삽집을 하고 있는데요.

AIR에서는 File이라는 클래스를 사용할 수 있더군요.
File클래스를 자세히 보면 FileReference클래스를 상속받고 있어요.
기존에 Flash나 Flex Application에서는 보안상 문제로 파일을 Browse()를 통해서 선택이 되어도 전체경로는 나오지 않습니다. FileReference속성에는 name이라는 속성이 있는데 읽기 전용이며 Browse()통해 파일이 선택이 되면 name속성에는 파일 이름만 들어갑니다.
(어느 플래시카페를 보니까 자바스크립트로 가져오는 법을 올려놨더라구요^^)

하지만, File이라는 클래스는 nativePath라는 속성을 제공하는데 이건 전체경로까지 다나옵니다.
단, AIR에서만 됩니다-_-;

저도 전체 경로가 필요해서 찾고 있었는데 이렇더라구요 ^^
AIR에서는 FileReference를 사용하지 말고, File을 사용하세요.
그대로 상속받고 있기 때문에 다 사용할 수 있구요.
기능도 더 추가된 것 같은데-_-; 아...로컬에 있는 파일을 컨트롤 할 수 있을 껍니다 ^^

뭐 결론은 AIR에서는 File을 쓰고, Flex나 Flash에서는 FileReference(뭐 File클래스를 여기서 사용할 수 없습니다^^)를 사용해요 ^^

혹시 AIR로 뭔가 하려는 분중에 FileReference에서 전체경로를 찾고 계신 분이 있을 것 같아서 올려요^^

이제 소스를 보도록 합시다.

아....근데 다른 언어를 이용해서 업로더를 구현해보신 분 계신가요? 플렉스에서는 이상하게 제목을 한글로 입력해서 업로드를 해버리면 업로드가 안되더군요.
MD5함수를 수정하면 가능합니다. ^^
이 부분은 좀 더 삽질을 해봐야할 부분인 것 같군요.
우선 영어는 뭐 잘 되니까-_-;

[code]
<mx:Script>
  <![CDATA[
   import com.adobe.webapis.flickr.methodgroups.Upload;
   import mx.controls.Alert;
   import flash.net.navigateToURL;
   import com.adobe.webapis.flickr.AuthPerm;
   import com.adobe.webapis.flickr.events.FlickrResultEvent;
   import com.adobe.webapis.flickr.methodgroups.Auth;
   import com.adobe.webapis.flickr.FlickrService;
 
   public var apikey:String = "해당API키";
   public var secretkey:String = "해당비밀키";
   public var flickrService:FlickrService;
   public var frobResult:FlickrResultEvent;
   public var frob:String = new String();
   public var token:String = new String();
   public var fileRef:FileReference;
   
   public function Authentication():void {
    flickrService = new FlickrService(apikey);
    flickrService.secret = secretkey;
    flickrService.addEventListener(
        FlickrResultEvent.AUTH_GET_FROB, getFrobResponse);
    flickrService.auth.getFrob();
   }
   
   public function getFrobResponse(event:FlickrResultEvent):void {
    if (event.success) {
     frob = String(event.data.frob);
     var auth_url:String = flickrService.getLoginURL(frob, AuthPerm.WRITE);
     navigateToURL(new URLRequest(auth_url), "_blank");
     Alert.show( "인증하기위한 브라우저가 뜰꺼에요."
        + "로그인한다음에 OK버튼을 누르세요^^",
        "인증",
        Alert.OK | Alert.CANCEL,
        null,
        onCloseAuthWindow );
    }
   }
   
   private function onCloseAuthWindow( event:* ):void {
    if ( event.detail == Alert.OK ) {
     flickrService.addEventListener(
        FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse );
     flickrService.auth.getToken( frob );
    }
   }

   private function getTokenResponse( event:FlickrResultEvent ):void {
    if ( event.success ) {
     token = event.data.auth.token;
     flickrService.token = token;
    } else {
     Alert.show("인증에 실패했습니다.");
    }
   }
   
   public function findFile():void {
    if (token == "") {
     Alert.show("인증부터 하세요!");
     return;
    }
    fileRef = new FileReference();
   
    try {
        fileRef.addEventListener(Event.SELECT, selectHandler);
        fileRef.addEventListener(Event.COMPLETE, completeHandler);
        fileRef.addEventListener(
           DataEvent.UPLOAD_COMPLETE_DATA, onUploadCompleteData);
        var success:Boolean = fileRef.browse();
       } catch (error:Error) {
           trace("Unable to browse for files.");
       }
   }
   
   public function selectHandler(event:Event):void {
    var uploader:Upload = new Upload(flickrService);
    uploader.upload(fileRef);
   }
   
   public function checkTokenResponse(event:FlickrResultEvent):void {
    Alert.show(event.data.auth.token);
   }
   
   public function completeHandler(event:Event):void {
    trace("업로드 완료");
   }
   
   public function  onUploadCompleteData(event:DataEvent):void {
    Alert.show(event.data);
   }
  ]]>
 </mx:Script>
 
 <mx:Button label="인증" click="Authentication();"/>
 <mx:Button label="파일업로드" click="findFile();" />
[/code]

오.....간단합니다.
아... apikey secretkey 에는 각각 발급받은 키를 넣어주세요 ^^
인증이라는 버튼이 있는데 누르게 되면 Authentication이라는 메소드를 호출합니다.
FlickrService라는 클래스가 있는데 apikey를 인자로 받아서 생성합니다.
그러면 이놈으로 인증이 필요없는 API를 다 호출할 수 있습니다 ^^
flickrService.auth.getFrob(); 이런식으로 Frob을 얻어오고!
navigateToURL로 브라우저를 띄워서 인증url로 이동을 시킨 후 로그인을 하게 되면
flickrService.auth.getToken( frob ); 으로 인해 토큰을 가져오게 됩니다.
토큰만 가져오면 다 끝납니다-_-; 이걸로 권한에 관한 건 다할 수 있어요 ^^

이거뭐 플렉스로 해도 될 것 같아요. 안해봤는데 될 것 같아요-_-;

파일업로드 버튼을 클릭하면 파일선택창이 뜨는데 이미지사진 아무거나 선택해서 업로드하면 돼요 ^^
(참고로 이미지파일도 한글이면 안돼요. 영어로 바꿔서 선택하세요 ^^)
FileReference 요놈도 설명해야하는 나중에-_-;
되는 거 증명동영샷~-_-; (실은....좀 심심해서-_-)