머드초보의 블로그

http://labs.adobe.com/ 여기에 가면 어도비에서 어떤 것을 삽질하고 있는지 한눈에 알 수 있죠.
지금 삽질한 것 리스트 중에 Adobe AIR for Linux라는것이 있는데 Linux에서도 AIR를 가능하게 하는 것이죠.
AIR는 원래 2개의 OS만 지원을 합니다. OSX랑 WINDOWS죠.

근데 리눅스에서도 지원이 되게 삽질하려는가봅니다.
그래서 이번에 우분투를 새로 설치를 해봐서 거기다가 AIR 런타임을 한번 설치해봤습니다.
설치를 하고 제가 만든 MP3플레이어를 실행했는데 너무 잘 돌아가는군요.

AIR로 사운드 재생이 가능한 것을 알았습니다-_-;
초초초초초간단한 MP3플레이어를 만들어봤습니다.
사운드 컨트롤하기 참 쉽게 되어있군요.

아래는 대략 소스입니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute" width="400" height="300" viewSourceURL="srcview/index.html">

 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   
   private var file:File = new File();
   private var req:URLRequest;
   private var sound:Sound;
   private var channel:SoundChannel;
   private var pausePosition:int;
   
   public function findFile():void {
    try {
     file.addEventListener(Event.SELECT, selectFileHandler);
     file.browse();
    } catch (error:Error) {
     Alert.show("파일열기 실패했습니다.");    
    }
   }
   
   public function selectFileHandler(event:Event):void {
    if (channel != null) {
     channel.stop();
    }
    sound = new Sound();
    sound.addEventListener(Event.COMPLETE, onSoundLoaded);
    sound.addEventListener(ProgressEvent.PROGRESS, onLoadProgress);
    sound.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
   
    pausePosition = 0;
    textFileName.text = event.currentTarget.nativePath;
    sound.load(new URLRequest(event.currentTarget.nativePath));
    btnPlay.enabled = true;
   }
   
   public function onLoadProgress(event:ProgressEvent):void {
       var loadedPct:Number = Math.round(100 * (event.bytesLoaded / event.bytesTotal));
       trace("The sound is " + loadedPct + "% loaded.");
     fileLoadingPB.setProgress(loadedPct, 100);  
   }
   
   public function onSoundLoaded(event:Event):void {
    var localSound:Sound = event.target as Sound;
    textArtist.text = localSound.id3.artist;
    textSongName.text = localSound.id3.songName;
   }
   
   public function onIOError(event:IOErrorEvent):void {
    Alert.show("The sound could not be loaded: " + event.text);
       trace("The sound could not be loaded: " + event.text);
   }
   
   public function btnPlayClickHandler(event:Event):void {
    btnPlay.enabled = false;
    btnStop.enabled = true;
    channel = sound.play(pausePosition);
    addEventListener(Event.ENTER_FRAME, onEnterFrame);
    channel.addEventListener(Event.SOUND_COMPLETE, onPlaybackComplete);  
   }
   
   private function onEnterFrame(event:Event):void {
    var estimatedLength:int =
           Math.ceil(sound.length / (sound.bytesLoaded / sound.bytesTotal));
       var playbackPercent:uint =
           Math.round(100 * (channel.position / estimatedLength));
          playPB.setProgress(playbackPercent, 100);
       trace("Sound playback is " + playbackPercent + "% complete.");
   }
   
   private function onPlaybackComplete(event:Event):void {
    btnPlay.enabled = false;
    btnStop.enabled = false;
    trace("The sound has finished playing.");
       removeEventListener(Event.ENTER_FRAME, onEnterFrame);
   }
   
   public function btnStopClickHandler(event:Event):void {
    btnPlay.enabled = true;
    btnStop.enabled = false;
    pausePosition = channel.position;
    channel.stop();
   }
   
  ]]>
 </mx:Script>
 <mx:ProgressBar id="fileLoadingPB" x="125.5" y="160" mode="manual"/>
 <mx:ProgressBar id="playPB" x="125.5" y="196" mode="manual" label="PLAYING %1%"/>
 <mx:Label x="72.5" y="196" text="재생바" height="28" width="45" textAlign="right"/>
 <mx:Label x="72.5" y="160" text="파일읽기" height="28" textAlign="right"/>
 <mx:Label x="82.5" y="35" text="제목 :" width="44" textAlign="right"/>
 <mx:Label x="82.5" y="61" text="가수명 :" textAlign="right"/>
 <mx:Label x="82.5" y="87" text="파일명 :" textAlign="right"/>
 <mx:Button id="btnPlay" x="91.5" y="248" label="플레이" click="btnPlayClickHandler(event);" enabled="false"/>
 <mx:Button id="btnStop" x="158.5" y="248" label="일시정지" click="btnStopClickHandler(event);" enabled="false"/>
 <mx:Button x="236.5" y="248" label="파일열기" click="findFile();"/>
 <mx:Text id="textSongName" x="134.5" y="35" text="KHJ 바보" width="191"/>
 <mx:Text id="textArtist" x="134.5" y="61" text="KHJ 돼지" width="191"/>
 <mx:Text id="textFileName" x="134.5" y="87" text="KHJ 멍충이" width="191"/>
 
</mx:WindowedApplication>
[/code]
소스를 보면 그리 어렵지 않습니다.
Sound라는 클래스가 있습니다.
사운드객체를 하나 선언하고, 파일명으로 URLRequest를 이용해 객체를 생성해서 그걸 Sound객체의 load메소드를 통해서 로드를 한 다음에, play만 해주면됩니다.

게다가 이것저것 자체적으로 지원해주는게 많습니다. 일시정지를 할 수 있게 stop을 하기전에 channal이라는 클래스를 통해 현재 position을 얻어오면 stop한다음에 그 포지션으로부터 다시 시작할 수 있습니다.

재생완료시 이벤트를 추가할 수 있고, 파일이 로드될 때 이벤트 등의 이벤트를 지원하는군요.

PS. AIR로 MP3플레이어만들면 더 멋있을 것 같은데-_-;

http://mudchobo.tomeii.com/tt/318

새로운 버전에서 방식이 바뀌었습니다.

여기위에것을 보고 하세요 ^^

우연히 지돌스타님 블로그를 구독하다가 좋은 정보가 있어서 보고 있었습니다.
Flex에서 db와 연동하는 좋은 드라이버가 있다는 정보입니다.
http://blog.jidolstar.com/312


그래서 제가 삽질해봤습니다-_-;

보통 DB랑 연동하려면 JAVA, PHP, ASP 등 다른 언어와 연동이 필요합니다.
근데 이 asSQL이라는 것을 이용하면 그냥 Flex단에서 DB와 연결해줍니다.
우선 asSQL을 받아봅시다.
http://code.google.com/p/assql/
여기서 오른쪽에 보면 2.0.1버전용과 3.0.0버전용이 있습니다.
저는 Flex3으로 할 것이기에 3.0.0을 받아보도록 하겠습니다. assql_Beta2_Flex3.0.0.swc
DB에는 이런 테이블과 이런 데이터가 있다고 합시다.

[code]
CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `description` varchar(255) default NULL,
  `price` decimal(15,2) default NULL,
  PRIMARY KEY  (`id`),
  KEY `products_description` (`description`)
) ENGINE=MyISAM DEFAULT CHARSET=euckr;

INSERT INTO `products` (`id`, `description`, `price`) VALUES
(1, 'Lamp', 469.80),
(2, 'Table', 3502.62),
(3, 'Chair', 1061.12);
[/code]
그럼 플렉스 빌더를 실행합니다.
File -> New -> Flex Project 선택합니다. Project name은 FlexMysqlTest 라고 합시다.
Web application선택하고, Application server type은 None으로 하고 Finish 선택!

libs폴더가 있는데요. 아까 받은 assql_Beta2_Flex3.0.0.swc 파일을 libs폴더에 복사합니다.

[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 creationComplete="init();" width="400" height="400">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import com.maclema.mysql.events.MySqlErrorEvent;
   import com.maclema.mysql.events.MySqlEvent;
   import mx.collections.ArrayCollection;
   import com.maclema.mysql.ResultSet;
   import com.maclema.mysql.Statement;
   import com.maclema.mysql.Connection;
 
   [Bindable]  
   private var ac:ArrayCollection;
   private var con:Connection;
   private var st:Statement;
     
   private function init():void {
    con = new Connection("DB주소", 3306,
      "DB아이디", "DB비밀번호", "DB이름");
    con.addEventListener(Event.CONNECT, onConnect);
    con.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);
    con.connect();
   }
   
   private function onConnect(e:Event):void {
        st = con.createStatement();
        st.addEventListener(MySqlEvent.RESULT, onResult);
        st.addEventListener(MySqlEvent.RESPONSE, onResponse);
        st.addEventListener(MySqlErrorEvent.SQL_ERROR, onError);
 
    st.executeQuery("SELECT id, description, price FROM products");
   }
   
   private function onResult(event:MySqlEvent):void {
    //FOR SELECT
    var resultset:ResultSet = event.resultSet;
    ac = resultset.getRows();
   }
   
   private function onResponse(event:MySqlEvent):void {
    //FOR INSERT, UPDATE, etc.
   }
   
   private function onError(event:MySqlErrorEvent):void {
    Alert.show(event.text);
   }
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{ac}"/>
 
</mx:Application>
[/code]
소켓을 이용해서 하는거라 connect를 호출하고 연결한 뒤 소켓으로 막 보내는 것 같아요.
어쨌든 저렇게 하면 되네요. 참 쉽죠?(밥로스 버전-_-)

INSERT, UPDATE 와 SELECT는 이벤트가 서로 틀립니다.
INSERT,UPDATE는 RESPONSE고, SELECT는 RESULT네요 ^^

이런 IDE도 있군요.
지원하는게 좀 특이하군요.
Ruby on Rails, Adobe^® AIR™, Apple iPhone(아이폰!!!), PHP(EditPlus면 만사오케이인데^^)를 지원합니다.

로고도 이쁘네요^^

우선 service-config.xml파일을 수정해야합니다.
<factories>
  <factory id="springfactory" class="flex.messaging.factory.SpringFactory" />
</factories>
를 추가합니다.

그 다음 remote-config.xml파일을 수정해야합니다.
<destination id="productmanager">
 <properties>
  <factory>springfactory</factory>
  <source>productManager</source>
 </properties>
</destination>
자세히 보시면 factory는 위에 service-config.xml파일에 정의한 놈이고, source는 bean이름입니다.
즉 applicationContext.xml파일에 정의한 그 bean이름을 저기에 적어 놓으면 됩니다.
그러면 그 bean을 flex로 가져와서 쓸 수 있습니다.

아 그리고 프로젝트에서 이상하게 contextroot가 WebContent로 되어있는데 프로젝트이름으로 고쳐줍시다-_-;
프로젝트 이름에 대고 마우스오른쪽버튼(alt+enter) properties를 선택, Flex Server부분 클릭.
context root를 프로젝트이름(SpringAndBlazeds)으로 바꿔줍시다.

자 그러면 flex_src에 있는 SpringAndBlazeds.mxml을 수정해봅시다.
SpringAndBlazeds.mxml
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 applicationComplete="init();">
 
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;
   import mx.rpc.remoting.RemoteObject;
   
   private function init():void {
    var remoteObject:RemoteObject = new RemoteObject();
    remoteObject.destination = "productmanager";
    remoteObject.addEventListener(ResultEvent.RESULT, resultHandler);
    remoteObject.addEventListener(FaultEvent.FAULT, faultHandler);
    remoteObject.getProducts();
   }
   
   private function resultHandler(event:ResultEvent):void{       
       dg.dataProvider = event.result;  
      }     
  
      private function faultHandler(event:FaultEvent):void{       
       Alert.show("실패 메세지 : " + event.fault.message);  
      } 
  ]]>
 </mx:Script>
 
 <mx:DataGrid id="dg" width="100%" height="100%" />
</mx:Application>
[/code]
간단하게 Manager에 있는 getProducts를 호출해서 DataGrid에 넣는 코드입니다.

자 이제 실행해봅시다-_-;
이클립스 오른쪽아래에 server에다가 SpringAndBlazeds프로젝트를 추가합니다.
서버에 대고, 오른쪽버튼누르면, Add and Remove Project클릭해서 추가하면 됩니다.
서버를 가동합니다.
Run Flex Application을 실행해봅시다!-_-;