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

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

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

- PR -

　次に、ファイルをドロップしたときの動作を説明します。ファイルをドロップしたとき、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　ファイルをドロップした後の表示（複数ファイルを同時にドロップ可能）
画面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　デスクトップにファイルとしてドロップする文字列をラベルで表示
画面4　デスクトップにファイルとしてドロップする文字列をラベルで表示

2/3

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

Apollo改めAIRプログラミング入門 バックナンバー


TechTargetジャパン

リッチクライアント & 帳票 フォーラム 新着記事

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

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH