이건뭐....프레임워크를 왜 쓴거지-_-;
소스코드만 더 길어졌네.
어쨌든 저의 삽질의 결정체를 공개할랍니다-_-; 나름 열심히 만든거라...ㅠㅠ
보시면 이것저것 신경을 많이 쓴걸(?) 볼 수 있을겁니다-_-;
타이머의 zerofill...-_-;
이걸 분석하면 Mate Flex Framework에서 제공하는 Injector에 대해서 이해하실 수 있을겁니다.

MudchoboPlayer.zip

소스파일입니다.

아래에 INSTALL NOW클릭하시면 설치가 될 겁니다.
설치가 안되신다면 http://www.adobe.com/go/getair/ 여기서 AIR를 다운로드하세요.

Alternative content

Get Adobe Flash player

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 지돌스타 2008.08.20 11:52  댓글주소  수정/삭제  댓글쓰기

    잘만드셨네요.
    잘봤습니다.

    • 머드초보 2008.08.21 08:31  댓글주소  수정/삭제

      앗 안녕하세요!
      mate framework를 연구하고 있다보니 이런걸 만들었네요^^
      방문해주셔서 감사합니다 ^^

  2. BlogIcon 꽃녀 2008.08.22 10:49  댓글주소  수정/삭제  댓글쓰기

    잘만드셨네용~^^
    프레임웍을 사용하셨다니..
    더 대단하십니다.ㅎ
    잘 깔아보았습니다.

    • 머드초보 2008.08.25 08:30  댓글주소  수정/삭제

      아...댓글이 늦었네요 ^^ 주말에 노느라-_-;
      프레임워크를 억지로 쓴거죠 ㅠ
      방문해주셔서 감사해요~ ^^

  3. BlogIcon 라면스프 2008.11.07 17:01  댓글주소  수정/삭제  댓글쓰기

    멋지세요 ^^
    설치해서 사용해 봤는데 좋네요
    소스 담아가서 열공하겠습니다.
    감사합니다.

    • 머드초보 2008.11.10 08:50  댓글주소  수정/삭제

      Mate Framework를 공부하려고 만든거라 ^^
      좀 더 만든다음에 다시 내놓겠습니다 ㅠㅠ

  4. 초보개발자 2009.10.18 18:53  댓글주소  수정/삭제  댓글쓰기

    이거 소스 실행을 이클립스로 할려고 하는데요
    MudchoboPlayer.mxml파일 run시키면 되는거 아닌가요?ㅠㅠ

 
Aptana로 javascript로 삽질중에-_-; 좀 쉴겸해서-_-;

AIR는 기존에 우리가 알던 html, ajax, javascript등을 이용해서 데스크탑 애플리케이션을 개발할 수 있습니다. 전에 다음openapi를 이용하고, prototype기반인 다음블로그검색을 만들었었습니다.

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

이 코드를 거의 그냥 이용해서 AIR애플리케이션으로 바꿀 수 있습니다.
우선 Aptana를 설치해야합니다.

http://mudchobo.tomeii.com/tt/241
여기에 Aptana설치 후기가 있습니다-_-;
기본으로 AIR프로젝트 만드는 건 안깔려있으니 따로 설치해야합니다. 글을 잘 읽어보시면 설치하기 쉽습니다^^

이제 프로젝트를 만들어봅시다.
File -> New - Project선택하면 Aptana Projects폴더에 -> Adobe AIR Project선택.
Project이름은 DaumBlogSearchAir라고 합시다-_-;
다음을 하면 뭔 옵션이 이래 많아-_-; XML파일을 사전에 설정할 수 있게 해놨는데 걍 디폴트로 해서 해봅시다.
마지막 다음으로 가면 javascript framework를 선택할 수 있습니다.
Prototype을 가볍게 체크해고 Finish를 누릅시다.

처음부터 뭔 쌤플로 자동으로 작성한게 많은지-_-;
DaumBlogSearchAir.html파일을 열어보면 코드가 많습니다. 가볍게 다 지워버리고-_-;
DaumBlogSearchAir.html
[code]<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Daum Blog Search</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript" src="lib/prototype/prototype.js"></script>
        <script type="text/javascript" src="js/DaumSearch.js"></script>
    </head>
    <body>
        <h1>Daum Blog Search!</h1>
        <form onsubmit="searchDaum(this.query.value); return false;">
            <fieldset>
                <label>Search for</label>
                <input type="text" name="query" /><input type="submit" value="검색" />
            </fieldset>
        </form>
        <div id="results"></div>
    </body>
</html>
[/code]
요렇게 작성합니다.
그럼 이제 우리가 작성할 것은 js폴더에 있는 DaumSearch.js파일 입니다.
작성해봅시다.
DaumSearch.js
[code]
function searchDaum(query){
    var searchPacket = {
        method: 'get',
        parameters: {
            q: query,
            result: '10',
            start: '1',
            output: 'json',
            apikey: '발급받은 apikey',
        },
        onSuccess: parseResponse
    }
    new Ajax.Request('http://apis.daum.net/search/blog', searchPacket);
}


function parseResponse(data){
    var children;
    var results = $("results");
   
    while (results.hasChildNodes()) {
        results.removeChild(results.lastChild);
    }
   
    var json = data.responseText.evalJSON();
   
    // 개수를 air에서 제공하는 trace로 찍어보자-_-;
    air.trace(json.channel.result);
   
    for (var i = 0; i < json.channel.result; i++) {
        var title = json.channel.item[i].title;
        var summary = json.channel.item[i].description;
        var url = json.channel.item[i].link;
       
        var link = new Element("a", {
            "href": url,
            "target": "_blank"
        }).update(title);
        var header = new Element("h2").insert(link);
        var para = new Element("p").update(summary);
       
        results.insert(header);
        results.insert(para);
    }
}
[/code]
간단합니다. 그냥 다음에 url요청해서 데이터를 받아서 parseResponse메소드가 파싱하죠.
그리고, airaliases.js파일을 선언하면 air객체를 사용할 수 있는데, 기존 Flex에서 제공하는 몇몇 기능을 사용할 수 있습니다. Socket도 있고, File관련된 것도 있군요. 이건 나중에 공부해야겠군요.
air.trace하면 로그를 남길 수 있습니다.
아직 Aptana에서 디버깅이 안되기 때문에-_-;(완전 최악-_-) trace를 열심히 찍어줘야할 겁니다-_-;

실행을 해봅시다.
Ctrl + F11누르면 실행됩니다.

사용자 삽입 이미지

음....근데 <b>가 나오네. 왜그러지-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.06.27 18:03  댓글주소  수정/삭제  댓글쓰기

    디버깅이 안되는군요.. 안습;

    • 머드초보 2008.06.30 22:11  댓글주소  수정/삭제

      검쉰님 반가워요~
      아네 ^^ 디버깅이 안돼요 ^^ 디버깅만 되도 뭔가 해보려고 하겠는데 에러도 잡기힘든 자바스크립트라 ^^

 

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

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

사용자 삽입 이미지

어쨌든 소리도 잘 나오고 잘 되네요 ^^

덤으로 플렉스 빌더도 깔았는데, 이건 이클립스가 있어야 되더군요. 그래서 같이 깔았는데 이것도 역시 잘 되는군요. ^^ 리눅스도 이제 서버용으로만이 아닌 데스크탑용으로 자리 잡을 듯 하군요 ^^

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.04.29 10:51  댓글주소  수정/삭제  댓글쓰기

    직접 만든 프로그램이 윈도우 맥 리눅스에서 돌아간다니!
    가슴 벅찹니다 ;)

  2. BlogIcon 조영운 2008.04.29 16:56  댓글주소  수정/삭제  댓글쓰기

    우분투에 플렉스 빌더를 설치해서 hello world를 만들어서 돌려봤는데, compiz하고 충돌이 나는군요...
    (웹으로 실행하면 이상이 없고, AIR로 실행하면 충돌)

    • 머드초보 2008.04.29 21:51  댓글주소  수정/삭제

      제가 방금 AIR로 만들어봤는데 빌더로 만든거 실행되던데요.
      compiz는 뭐죠? 제 리눅스에는 설치가 안되어있는건가-_-;
      암튼 전 잘 되네요 ^^

 

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플레이어만들면 더 멋있을 것 같은데-_-;

 
Posted by 머드초보

댓글을 달아 주세요

 

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

사용자 삽입 이미지

로고도 이쁘네요^^


우선 이클립스 기반이어서 이클립스 플러그인 형식으로도 설치를 할 수 있습니다.
그냥 설치하면 플렉스빌더처럼 StandAlone형태로 돼요.
http://www.aptana.com/studio/download
여기서 받으면 되구요.
다음 신공으로 설치하면 됩니.....아 안된다-_-;
선택 사항이 하나 나오는데요. 파일을 Aptana Studio랑 연결할꺼냐고 묻는데 연결하고 싶으면 다 선택하시고 연결하기싫으면 해제해야겠죠? ^^ 어쨌든 설치가 완료되고 실행해봅시다-_-;
무슨 경고창이 뜹니다-_-; FireFox를 깔라고 하네요-_-;
가볍게 깔아주든지 그냥 무시합시다-_-;
보면 이클립스랑 완전 똑같군요-_-;

프로젝트를 만들어봅시다.
File -> New -> Project -> .....아....아무것도 없군요.
AIR플러그인을 설치해야합니다.
처음에 나오는 Aptana Start Page에서 Plugins에서 중간쯤에 Adobe® AIR™가 보일껍니다.
Download and install클릭하면 Adobe AIR Support체크하고 설치하면 됩니다.

그럼다시 프로젝트를 만들어봅시다-_-;
File -> New -> Project -> AIR Project가 생겼습니다.
Project이름은 HelloAir -_-;
Next로 끝까지가면 Ajax Library를 선택할 수 있어요^^
저는 Ajax를 모르므로 ㅠㅠ 그냥 Finish를.....ㅠㅠ

왼쪽 아래에 Project를 보면 AIRAliases.js파일이 꼭 필요한데 알아서 집어넣어줍니다.
저거 혼자서 다하려면 AIR SDK에서 가져와서 추가해줘야해요.
위에 RUN을 해보면 애플리케이션이 뜰꺼에요 ^^
air객체를 통해서 air관련된 것을 접근해서 쓸 수 있어요!
air.trace("") 하면 trace도 찍을 수 있답니다-_-;

Aptana의 가장 큰 단점!
아직 디버깅이 안돼요-_-;

 
Posted by 머드초보

댓글을 달아 주세요

  1. BlogIcon 검쉰 2008.03.26 14:08  댓글주소  수정/삭제  댓글쓰기

    전 RoR용 툴 찾다가 봤는데 AIR 지원한다길래 신기했... ^^;

    • 머드초보 2008.03.27 08:27  댓글주소  수정/삭제

      검쉰님 반갑습니다 ^^ 또 오셨네요 ^^
      루비는 넷빈즈로....-_-;
      저도 루비를 배우고 싶은데 어떻게 시작을 해야할지 ^^

    • 머드초보 2008.04.02 08:34  댓글주소  수정/삭제

      아 구독중이군요 감사해요 ^^(내용도 별로 없는데-_-)
      우와 6만원어치면 3권정도? ^^
      저도 책을 구입하던지 해야겠네요 ^^

    • BlogIcon 검쉰 2008.04.02 10:06  댓글주소  수정/삭제

      사실 머드초보님 블로그 구독중이라 새글 올리시면 찾아옵니다. ㅋㅋ

      루비 배우고 싶어서 냅다 책 6만원어치 샀던 저는..
      현재 공부 안하고 있습니다. (반성;; )

    • BlogIcon 검쉰 2008.04.02 10:08  댓글주소  수정/삭제

      '프로그래밍 루비' 가 무려 3만9천원.;
      레일즈 책 한권은 2만8천.. ㅜㅜ

      공부해야지요 ;;;

    • 머드초보 2008.04.02 11:18  댓글주소  수정/삭제

      아하 그렇군요 ^^
      완전 비싸네-_-;
      그래도 배움을 위해서라면 ^^