머드초보의 블로그

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

아....근데 다른 언어를 이용해서 업로더를 구현해보신 분 계신가요? 플렉스에서는 이상하게 제목을 한글로 입력해서 업로드를 해버리면 업로드가 안되더군요.
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 요놈도 설명해야하는 나중에-_-;
되는 거 증명동영샷~-_-; (실은....좀 심심해서-_-)

오....삽질 끝에 해냈습니다--;
라이브러리 다 제공하는데 삽질했습니다-_-;
제목, 내용, 태그, 등등 입력하는 것 따윈 없습니다--;
오로지 이미만 선택해서 업로드해줍니다 ^^
테스트환경은 Flex Builder 3 Beta 3에서 했습니다.

우선 Flickr Open API를 사용하기 위해서는 KEY를 발급받아야 돼요 ^^
http://www.flickr.com/services/api/keys/apply/
여기를 들어가서 로그인 하시고 키를 신청하면 됩니다.
키 하고 비밀 2개를 발급받게 됩니다. 잘 기억해두세요 ^^


http://code.google.com/p/as3flickrlib/
여기가면 as3용 플리커라이브러리가 있습니다.
근데 이거 쓰면 업로드메소드가 주석처리 되어있더군요.
저 라이브러리가 릴리즈되었을 때에는 FlashPlayer가 8.5였던 것 같은데 그때는 업로드가 안되었던 것 같습니다.
9.0되면서 업로드가 되는 것 같습니다.
업로드부분을 조금 수정했습니다.

invalid-file

한글파일명도 돼요 ^^

머리나쁘면 평생고생한다더니 그말이 맞습니다!
이거 소스코드 한줄만 고치면 되는 것을 저는 그것도 모르고 계속 샘플분석했어요--;
AIR프로젝트를 만들게 되면 xml이 자동으로 만들어지게 되는데 저는 그건 제가 관리하는게 아니라고 생각했는데 아니더군요. 안에 보면 셋팅할 수 있는게 몇개 있더군요 ^^

우선 기존 윈도우틀을 없애봅시다.

File -> New -> Flex Project를 선택하시고, ProjectName은 NoneWindowApp라고 하고
Application Type은 Desktop application을 선택하시고 Finish를 선택합니다.

프로젝트이름-app.xml파일이 있을 껍니다. 이거를 보게 되면 xml로 되어있는데요.
<initialWindow>
      ...
    <systemChrome>none</systemChrome>
이놈이 주석처리 되어있는데 none을 바꿔주고 주석을 풀어봅시다!

그리고 프로젝트이름.mxml파일을 열어서 vbox에 button을 하나 추가해봅시다.
[code]<mx:VBox>
  <mx:Button label="버튼" />
</mx:VBox>
[/code]
한번 실행해봅시다.

아.....사라졌군요. 근데 닫을 수가 없군요-_-; 닫기, 최대화, 최소화 를 구현해봅시다 ^^
이 예제는 AIR개발자문서에서 제공하는 예제입니다.
[code]<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 <mx:Script>
  <![CDATA[
   public function minimizeWindow():void
   {
    this.stage.nativeWindow.minimize();
   }

   public function maximizeWindow():void
   {
    this.stage.nativeWindow.maximize();
   }
   
   public function restoreWindow():void
   {
    this.stage.nativeWindow.restore();
   }
   
   public function closeWindow():void
   {
    this.stage.nativeWindow.close();
   }
  ]]>
 </mx:Script>
 <mx:VBox>
  <mx:Button label="Minimize" click="minimizeWindow()"/>
  <mx:Button label="Restore" click="restoreWindow()"/>
  <mx:Button label="Maximize" click="maximizeWindow()"/>
  <mx:Button label="Close" click="closeWindow()"/>
 </mx:VBox>

</mx:Application>
[/code]
stage라는 놈이 최상위에 있느 놈 같은데 거기에서 nativeWindow라 하면 그 자신의 윈도우를 말하는건가요?-_-;
아....잘모르겠네. 어쨌든 저 nativeWindow라는 객체가 그 해당윈도우를 말하는 것 같습니다.
그 객체의 close, maxmize, minimize등의 메소드를 실행하니 해당윈도우가 작동을 하니 ^^

음 뭔가 해보려고 하는데 잘 안되네요-_-;
원하는 모양은 아니지만 시스템트레이에 아이콘 띄우는 것 까지 성공했습니다--;
우선 저는 윈도우를 없애고 싶은데 이게 은근히 어렵네요-_-;

FLEX3 Beta 3에서 테스트했습니다. Beta2에서는 안됩니다.
방식이 조금 업그레이드되었어요. Beta2에서는 Shall어쩌구를 썼는데 바뀌었네요.
AIR예제니까 프로젝트 만들 때 Desktop Application으로 만들어야겠죠? ^^

예제입니다.
[code]
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
 applicationComplete="init();">

 <mx:Script>
  <![CDATA[
   public function init():void {
   
    var icon:Loader = new Loader();
    var iconMenu:NativeMenu = new NativeMenu();
    var visibleCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Visible"));
    var exitCommand:NativeMenuItem = iconMenu.addItem(new NativeMenuItem("Exit"));
   
    visibleCommand.addEventListener(Event.SELECT,
     function(event:Event):void {
      stage.nativeWindow.visible = true;
     }
    );
   
    exitCommand.addEventListener(Event.SELECT,
     function(event:Event):void {
      NativeApplication.nativeApplication.icon.bitmaps = [];
      NativeApplication.nativeApplication.exit();
     }
    );
     
    if (NativeApplication.supportsSystemTrayIcon) {
     NativeApplication.nativeApplication.autoExit = false;
     icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete);
     icon.load(new URLRequest("icons/AIRApp_16.png"));
     var systray:SystemTrayIcon = NativeApplication.nativeApplication.icon as SystemTrayIcon;
     systray.tooltip = "AIR application";
     systray.menu = iconMenu;
    }
 
    if (NativeApplication.supportsDockIcon){
     icon.contentLoaderInfo.addEventListener(Event.COMPLETE,iconLoadComplete);
     icon.load(new URLRequest("icons/AIRApp_128.png"));
     var dock:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
     dock.menu = iconMenu;
    }
   }
   
   private function iconLoadComplete(event:Event):void {
    NativeApplication.nativeApplication.icon.bitmaps =
     [event.target.content.bitmapData];
   }
   
   public function hide():void {
    stage.nativeWindow.visible = false;
   }
  ]]>
 </mx:Script>
 <mx:Button label="창숨기기버튼" click="hide();"/>
 
</mx:WindowedApplication>
[/code]
air 개발자문서를 보고 약간 변형에서 작성해봤습니다.
참숨기기버튼을 클릭하면 창이사라지구요. 트레이아이콘에서 오른쪽버튼을 눌러서
visible을 클릭하면 다시 생기게 만들었습니다. exit누르면 종료하게 하구요.

NativeMenuItem 클래스로 메뉴를 추가하구요.
그 객체에 addEventListener해서 Event.SELECT를 해서 함수를 지정해주면 선택된 메뉴에 대해서 지정된 함수를 호출하는 겁니다.

NativeApplication.supportsSystemTrayIcon 이거는 시스템트레이아이콘을 지원하는 놈이냐? 라고 물어보는겁니다. 윈도우는 당연히 지원하겠지요 ^^
만약 운영체제가 맥os라면 NativeApplication.supportsDockIcon라고 물어봤을 때 지원하는 것 같습니다.

크로스플랫폼(맞나-_-)형태로 제작이 되어있네요. 크로스운영체제!! 어디든 가능하게 ^^

샘플실행할 때 icons경로 밑에 AIRApp_128.png파일과 AIRApp_16.png파일이 있어야겠죠?^^