Apollo改めAIRプログラミング入門（1）
AIRアプリはドラッグ＆ドロップでこんなことまで！

クラスメソッド
横田聡
2007/7/12

■ファイルをドロップしたときに何が起こるのか？

　次に、ファイルをドロップしたときの動作を説明します。ファイルをドロップしたとき、NativeDragEventのNATIVE_DRAG_DROPに該当するイベントが発生して、イベントリスナに登録されたonDropメソッドが呼び出されます。

　onDropメソッド内では、初めにドロップされたファイルを配列で取得します。これは複数のファイルをドラッグおよびドロップできるからです。

var dropfiles:Array = event.transferable.             dataForFormat(                 TransferableFormats.FILE_LIST_FORMAT) as Array;

　今回の例では、ファイルをドロップしていますので、ドロップされるデータのフォーマットにTransferableFormats.FILE_LIST_FORMATと指定しています。以下にファイル以外のデータをドロップさせた場合の設定例を書きます。

表2　TransferableFormatsクラスのプロパティ

プロパティ名 説明 BITMAP_FORMAT ビットマップデータ FILE_LIST_FORMAT ファイルリスト TEXT_FORMAT テキストデータ URL_FORMAT URL

　今回の例では、取得されたファイルリスト（dropfiles）から1つずつファイル（file）を取り出しています。次にfile.extensionによって、ファイルの拡張子がpng形式の画像か確認をして、そうであれば、そのファイルのパスからImageクラスのインスタンスを生成し、AIRアプリ内に追加と表示をしています。

for each (var file:File in dropfiles){                 if(file.extension == "png"){                     var i:Image = new Image();                     i.source = file.nativePath;                     this.addChild(i);                 }             }

　以下は画像をドロップした後の表示です。

画面3　ファイルをドロップした後の表示（複数ファイルを同時にドロップ可能）

　以上のように、とても簡単にAIRアプリの外からファイルをドラッグ＆ドロップできました。続きまして、AIRアプリの中から外にファイルをドラッグ＆ドロップする例です。

　ラベルをテキストファイルとしてドラッグアウトしてみる

　下記のサンプルは、AIRアプリ内のデータをデスクトップにドロップする例です。少々長めのソースコードですが、ブロックごとに分けて考えると、少ない命令でドラッグアウトを実現していることが分かります。

<?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"                         layout="vertical"                         applicationComplete="initApp()" >     <mx:Script>     <![CDATA[         import mx.controls.Label;         import mx.controls.Image;         import flash.filesystem.FileMode;         import flash.filesystem.FileStream;         import flash.filesystem.File;         import flash.desktop.TransferableFormats;         import flash.desktop.TransferableData;         import flash.desktop.DragManager;         private var dragIcon:BitmapData;         private function initApp():void{             hello.addEventListener(                 MouseEvent.MOUSE_DOWN,onMouseDown,false,0,true);             hello.addEventListener(                 MouseEvent.MOUSE_UP,onMouseUp,false,0,true);             loadIcon();         }         private function loadIcon():void{             var loader:Loader = new Loader();             loader.contentLoaderInfo.addEventListener(                 Event.COMPLETE,                 function ():void{                     dragIcon = Bitmap(loader.content).bitmapData;                 }             );             loader.load(new URLRequest("txt.png"));         }         private function onDragOutGo(event:MouseEvent):void{             trace("DragOutGo");             var transfer:TransferableData = new TransferableData();             transfer.addData([createTxtFile()],                 TransferableFormats.FILE_LIST_FORMAT);             DragManager.doDrag(hello,transfer,dragIcon,null,null);         }         private function onMouseUp(event:MouseEvent):void{             trace("mouseUp");             hello.removeEventListener(MouseEvent.ROLL_OUT,onDragOutGo);         }         private function onMouseDown(event:MouseEvent):void{             trace("mouseDown");             hello.addEventListener(MouseEvent.ROLL_OUT,                 onDragOutGo,false,0,true);         }         private function createTxtFile():File{             var file:File                 = File.createTempDirectory().resolve("hello.txt");             var fileStream:FileStream = new FileStream();             fileStream.open(file, FileMode.WRITE);             fileStream.writeUTFBytes(hello.text);             fileStream.close();             return file;         }     ]]>     </mx:Script>     <mx:Label id="hello" text="Hello AIR World" fontSize="25"/> </mx:WindowedApplication>

　FlexのApplicationタグと同じように、画面の初期化後の処理として、initAppメソッドが呼ばれています。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"                         layout="vertical"                         applicationComplete="initApp()" >

■デスクトップにファイルとしてドロップする文字列をラベルで表示　

　このLabelコンポーネントをドラッグしてデスクトップにファイルをドロップします。

<mx:Label id="hello" text="Hello AIR World" fontSize="25"/>

画面4　デスクトップにファイルとしてドロップする文字列をラベルで表示

2/3

INDEX
Apollo改めAIRプログラミング入門（1）
	Page1 Adobe AIRベータ版がリリースされた！ デスクトップとドラッグ＆ドロップでイロイロやりとりする 画像ファイルをAIRアプリにドラッグインしてみる
	Page2 ラベルをテキストファイルとしてドラッグアウトしてみる
	Page3 エクセルファイルとしてもドラッグアウトしてみる AIRはエンタープライズ業務でも役立つ！

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）