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


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

■LabelコンポーネントにMouseEventを登録　

- PR -

　initAppメソッドでは、helloとID名の付いたLabelコンポーネントにイベント登録をしています。MouseEventクラスのMOUSE_DOWNイベントは、AIRアプリ内でマウスが押されたときに発生するイベントです。Label上でマウスが押されると、イベントリスナによって、onMouseDownメソッドが呼び出されます。

　また、同じように、MouseEventクラスのMOUSE_UPイベントによって、Label上でマウスが離されると、onMouseUpメソッドが呼び出されます。

            hello.addEventListener(
                MouseEvent.MOUSE_DOWN,onMouseDown,false,0,true);
            hello.addEventListener(
                MouseEvent.MOUSE_UP,onMouseUp,false,0,true);

■【実況中継】ラベルをテキストファイルとしてドラッグアウト！　

　次に、Labelをドラッグ中に表示されるアイコン画像を読み込むために、loadIconメソッドを呼び出しています。アイコンデータは、pngファイルを読み込み、ビットマップデータとして取り出した後、dragIconプロパティに格納しています。

　Label上でマウスを押しながら、マウスをAIRアプリの外に移動します。

画面5　ラベルをテキストファイルとしてドラッグアウト（その1）
画面5　ラベルをテキストファイルとしてドラッグアウト（その1）

　デスクトップ上まで持っていくと、ファイルをドロップできます。

画面6　ラベルをテキストファイルとしてドラッグアウト（その2）
画面6　ラベルをテキストファイルとしてドラッグアウト（その2）

　そして、ドロップした場所に新たにテキストファイルが置かれます。すごい！

画面7　ラベルをテキストファイルとしてドラッグアウト（その3）
画面7　ラベルをテキストファイルとしてドラッグアウト（その3）

■ソースコードはどうなっているか？　

　それでは、ソースコードの解説です。

　Label上でマウスが押された際に発生するイベントによって呼び出されるonMouseDownメソッドでは、新たにイベントを登録しています。MouseEventクラスのROLL_OUTイベントは、マウスを押しながら自身のコンポーネント外にドラッグされた際に発生します。このイベントに合わせて、AIRアプリの外にドラッグされた際の動作を指定します。

        private function onMouseDown(event:MouseEvent):void{
            trace("mouseDown");
            hello.addEventListener(MouseEvent.ROLL_OUT,
                onDragOutGo,false,0,true);
        }

　onDragOutGoメソッドでは、AIRアプリとデスクトップ間でやりとりするデータの入れ物である、TransferableDataをインスタンス化し、addDataメソッドで詰め込むデータを追加しています。

        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);
        }

　addDataメソッドでは、第1引数にファイルの配列を指定し、第2引数にファイルの配列であることを明示しています。そして、DragManagerクラスのdoDragメソッドによって、AIRアプリ外へのドラッグを始めます。

　ドラッグを始めて、デスクトップ上でドロップすると、ドロップした場所にテキストファイルが生成されます。また、マウスが離されるのでMOUSE_UPイベントにより、onMouseUpメソッドが呼び出され、ROLL_OUTイベントに対応する処理のリスナーを削除をしています。

            hello.removeEventListener(MouseEvent.ROLL_OUT,onDragOutGo);

　ドロップした際にデスクトップ上に保存するファイルは、createTxtFileメソッド内で定義されています。処理内容は、作業フォルダ内に新規にファイルを作成して、Label内の文字列を格納しています。

        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;
        }

　エクセルファイルとしてもドラッグアウトしてみる

　この部分で、エクセルやワードや画像などを作成してあげれば、さまざまな形式のデータをAIRアプリ外にドロップ可能です。例えば、作成するファイルの拡張子をエクセルに変えてみましょう。

            var file:File
                = File.createTempDirectory().resolve("hello.xls");

　以下は、実行結果です。

画面8　ラベルをエクセルファイルとしてドラッグアウト
画面8　ラベルをエクセルファイルとしてドラッグアウト

　今回の例では、拡張子のみエクセル形式にしていますが、実際のところは、ファイルの中身もエクセル形式にする必要があります。

　AIRはエンタープライズ業務でも役立つ！

　以上のように、AIRのドラッグ＆ドロップAPIを用いることによって、いままでできなかった直感的な操作を実現できます。

　今回は紹介できませんでしたが、テキストファイル以外にも、エクセルやワード内にFlexのチャートデータを張り付けたりすることもできます。AIRアプリは、コンシューマ向けアプリのプラットフォームとして注目を浴びがちですが、エンタープライズの業務にも用途がたくさんありそうです。

　なお、今回のサンプルのソースはこちらよりダウンロードできます。

■＠IT関連記事


Apolloプログラミング入門

先週パブリックアルファ版が公開されたApollo。パイロットユーザーだった著者がいち早くデスクトップアプリケーションの作成方法をお伝えしよう

最終更新 2007/6/7
AIRとGearsの連携で注目のオフラインWebアプリ集
連載：Flash観測所（4）　Apolloが正式名AIRとなってGoogle Gearsと連携できるようになり、オフラインWebアプリがいま注目だ。Flashでも面白いものがあるので紹介しよう
「リッチクライアント ＆ 帳票」フ ォーラム 2007/7/3

現場で使えるFlex実践テクニック

本連載では、Flex開発で基本となる特徴的な機能から一歩進んで、実開発の現場でよく使われるテクニックについて、より実践的に解説します

最終更新 2007/12/14

プロフィール：横田　聡（よこた　さとし）
クラスメソッド株式会社　 代表取締役
業務向けアプリのRIA化を推進している会社です。業務ポータル/ビジネスインテリジェンス/顧客管理/営業支援のシステムなどワンストップで作っています。 最近は、業務向けモバイルアプリ開発や特定ユーザー向けアプリ開発なども行なっています。主にApollo／Flex／Java／C#／Flash／JavaScriptを使って仕事をしています。社員募集中です。会社ブログ（さとしログ）と個人ブログ（FlexCoder）も更新中。

3/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