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 머드초보
,
 

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

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

사용자 삽입 이미지

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

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

 
Posted by 머드초보
,
 

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 머드초보
,
 
어서 알송보다 더 좋은 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로 개발된 유틸리티들이 많이 나왔으면 하네요 ^^
 
Posted by 머드초보
,