近々新バージョンのニュースリリースをおこなう予定の弊社製品easyFiLEXですが､
僕自身も開発者として本プロジェクトに参加していました｡

今回バージョンアップとなるeasyFiLEXの注目の機能として､
Adobe AIR上で動作するデスクトップアプリからファイルの送信が可能になったことが第一に挙げられます｡

そんな目玉機能の一部を任され､
初めてのデスクトップアプリ､
初めてのAdobe AIR/Flex､
さらに初めてのActionScriptと何から何まで初めてづくしの開発となりました｡

そんな初めてだらけの中で試行錯誤しつつ､
｢これは知ってると便利!!｣と思ったことを紹介しようと思います｡

カスタムツールチップの作成

今回紹介するのはAdobe AIR/Flexのツールチップについてです｡
Adobe Flex リファレンスガイドではツールヒントと呼んでいますが本記事ではツールチップと呼ぶことにします｡

ツールチップそのものをただ使うだけであれば､

1

<mx:Label text="This is Label" toolTip="mx.controls.Label" />

のようにtoolTipプロパティを設定するだけの極々簡単なものです｡

このツールチップは設定した文字列を､
カーソルが重なった時にポップアップして表示するだけのものですが､
以下のように少し複雑なツールチップを表示することも出来ます｡

なんだか少し良い感じに見えますよね。

では､このツールチップをどうやって実装するのか説明したいと思います｡

まずはmx.core.IToolTipインターフェイスをインプリメントしたコンポーネントを作成します｡

PersonToolTip.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="80"
	alpha=".8" implements="mx.core.IToolTip"
	borderStyle="solid" dropShadowEnabled="true"
	backgroundColor="#FCFCCB">
	<mx:Script>
		<![CDATA[
			import mx.controls.Text;
			[Bindable]
			public var person:Object;
 
			public function get text():String { 
				return null; 
			} 
 
			public function set text(value:String):void {
			}
		]]>
	</mx:Script>	
	<mx:Form paddingTop="5" paddingRight="5" paddingBottom="5" paddingLeft="5">
		<mx:FormItem label="name : ">
			<mx:Label text="{person.name}" />
		</mx:FormItem>
		<mx:FormItem label="age : ">
			<mx:Label text="{person.age}" />
		</mx:FormItem>
		<mx:FormItem label="address : ">
			<mx:Label text="{person.address}" />
		</mx:FormItem>
	</mx:Form>
</mx:HBox>

mx.core.IToolTipをインプリメントしたコンポーネントを作成したら､
そのコンポーネントを使うアプリケーションを作成します｡

Person.mxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="300" height="200">
	<mx:Script>
		<![CDATA[
			import mx.events.ToolTipEvent;
 
			private function toolTipCreateEventHandle(event:ToolTipEvent) : void {
				var toolTip:PersonToolTip = new PersonToolTip();
				toolTip.person = personModel;
				event.toolTip = toolTip;
			}
		]]>
	</mx:Script>
 
	<mx:Model id="personModel">
		<person>
			<name>taro</name>
			<age>20</age>
			<address>Osaka</address>
		</person>
	</mx:Model>
	<mx:Panel title="Person" height="75%" width="75%" paddingTop="10" paddingLeft="10">
		<mx:Label text="{personModel.name}"
			toolTip=" " toolTipCreate="toolTipCreateEventHandle(event)" />
	</mx:Panel>
</mx:WindowedApplication>

この二つのファイルを作成したら後は実行するだけです｡

どうでしたか?
凄く簡単でしたよね?

簡単に動作を説明すると､

1. taroにカーソルを合わせる
2. toolTipプロパティで設定した" "という文字列でツールチップを作成
3. ツールチップが作成される際に投げられるtoolTipCreateイベント処理開始
4. イベントにPersonToolTipコンポーネントを渡す
5. カスタムツールチップ表示

といった具合に処理されています｡

toolTipプロパティに""ではなくて､" "(空白文字)を渡している点に注意してください｡

toolTipプロパティが""では､空文字となるためツールチップが作成されません｡
つまり､toolTipCreateイベントが投げられないのでカスタムツールチップに差し替えることが出来ないのです｡
逆に言ってしまえばtoolTipCreateイベントが投げられれば良いので､"hoge"でも"foo"でも"bar"でも構いません｡

ところで､toolTipCreateイベントの処理の中で
イベント自身であるmx.events.ToolTipEventクラスのtoolTipプロパティにPersonToolTipコンポーネントを渡すだけでツールチップが差し替えられるのは何故なのでしょうか?

mx.core.UIComponentクラス のtoolTipCreateイベントのリファレンスガイドには以下のように書いてあります｡

独自の IToolTip オブジェクトを作成し、それに対する参照をイベントオブジェクトの toolTip プロパティに格納し、これを toolTipCreate ハンドラに渡すと、ToolTipManager によってそのカスタムツールヒントが表示されます。

上記の機能を利用してツールチップをカスタムツールチップに差し替えているわけです｡

ComboBoxとカスタムツールチップを組み合わせてみる

このカスタムツールチップは何かと使えそうなので､
mx.controls.ComboBoxコントロールにこのカスタムツールチップを使用する方法を考えてみました｡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	width="300" height="200" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.ToolTipEvent;
 
			[Bindable]
			public var persons:ArrayCollection = new ArrayCollection(
				[ {name:"taro", age:20, address:"Osaka"},
				  {name:"hanako", age:18, address:"Tokyo"},
				  {name:"ichiro", age:24, address:"Hukuoka"}
				]);
 
			private function toolTipCreateEventHandle(event:ToolTipEvent) : void {
				var toolTip:PersonToolTip = new PersonToolTip();
				toolTip.person = personsComboBox.selectedItem;
				event.toolTip = toolTip;
			}
		]]>
	</mx:Script>
 
	<mx:Panel title="Persons" height="75%" width="75%" paddingTop="10" paddingLeft="10">
		<mx:ComboBox id="personsComboBox" dataProvider="{persons}" labelField="name"
			toolTip=" " toolTipCreate="toolTipCreateEventHandle(event)" />
	</mx:Panel>
</mx:WindowedApplication>

ただ､これだとComboBox自身のツールチップは表示されるのですが､
ドロップダウンリストでのツールチップが有効にならないのでイマイチ使い勝手はよくありません｡

どうにか実現出来ないかと､

• dropdown.showDataTipsプロパティにtrueを設定
• Listを継承しイベントリスナーにToolTipEvent.TOOL_TIP_CREATEイベントを追加したクラスを作成してdropdownFactoryプロパティに設定
• ItemRollOver､ItemRollOutイベントを駆使

と色々と試行錯誤してみたのですが､どれも上手くいってません｡
上手く実現出来た方がいれば是非教えてください｡

ToolTipManagerクラスにIToolTipインターフェイスの実装クラスを渡したら､
そのままツールチップとして表示してくれるメソッドが用意されていれば簡単だったのですが･･･

まとめ

結局､ComboBoxとの夢の共演は果たせなかったのですが､
このカスタムツールチップは色々な所で使える便利な機能だと思います。

最初から便利なコンポーネントが用意されているAIR/Flex環境ですが､
少しだけ工夫をすることで更に便利なものにすることが出来てしまいます。

今回は紹介出来ませんでしたが､
まだ他にもちょっとしたTipsのような形で紹介出来そうなことも発見しました｡

また次の機会にでも､
ちょっとした工夫を紹介出来たらと思います｡

使用したソフトウェア

参考ドキュメント

• Flex 3 開発ガイド ツールヒントマネージャの使用
• Personalise your information bubbles (ToolTip)

あわせて読みたい

• AIR/Flex でファイルアップロード
• AIR/Flex でドラッグ アンド ドロップ

初めての本格的な投稿なのですが、
今回はAdobe AIR/Flexでのドラッグ アンド ドロップについて書こうと思います。

弊社製品にeasyFiLEXというものがあるのですが、
そこで、ドラッグ アンド ドロップがしたいんだ！ という強い要望があり、
Adobe AIR/Flexの技術を利用して実現しました。
いまどきだと、Ajaxでも実現できるのですが、今回はFlexを採用しました。

AIRとFlexそしてブラウザの関係ですが、AIRはローカルマシン上の環境、
FlexはAIR上、もしくはWebブラウザ上のFlash Player(Plugin)で動作します。

Webブラウザ上 →　Flex
AIR 　→　Flex

AIRの上ではFlexではない、通常のHTMLとJavaScriptでも動作します。
Flexを利用すると、Webブラウザ上でもローカルマシン上のAIRでも、
同じ技術でリッチなインタフェースを実現でき、
さらに、最初からドラッグ アンド ドロップがサポートされています。

Flexでは、Flexコンポーネント間のドラッグ アンド ドロップが簡単に実現できます。
しかしeasyFiLEXは、ローカルマシン上にあるファイルをWebアプリであるeasyFiLEXにアップロードして、
他の人とファイルをやり取りする仕組みのアプリケーションです。
ですので、実現したかったのは、ローカルマシンにある(例えばデスクトップにある)ファイルを
ドラッグしてブラウザ上に持って行き、ドロップすると、そのファイルがアップロードされる、
という操作を実現したかったのです。

しかし、ブラウザ上のFlexでは、コンポーネント間のドラッグアンドドロップは簡単にできますが、
ローカルマシン上のオブジェクトからFlexコンポーネント、または逆、といった環境の場合実現できないことがわかりました。
（もしできるのであればぜひ教えてください！ ActiveXであれば実現できるようです）

そこで、AIRの出番です。
ブラウザ上のFlexでは(おそらく)セキュリティ上の関係で、
ローカルマシン上にあるファイルにはアクセスできない仕様になっていると思われますが、
AIRはローカルマシンにインストールして利用するため、この制限がゆるくなっています。
なので、AIR上のFlexでは、Flexコンポーネントとローカルマシン上のオブジェクトの間でドラッグアンドドロップが可能です。

せっかくなので、ドラッグ アンド ドロップを実現するコードを紹介したいと思います。

※対象バージョン/環境
Adobe AIR 1.5.1 SDK
Adobe Flex 3.3.0 SDK

コード全体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
  applicationComplete="init()">
  <mx:Script>
    <![CDATA[
 
    private function init () : void {
      this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);
      this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);
    }
 
    private function onDragEnter (event:flash.events.NativeDragEvent):void {
      if (event.target is InteractiveObject) {
        flash.desktop.NativeDragManager.acceptDragDrop(InteractiveObject(event.target));
      }
    }
 
    private function onDragDrop (event:flash.events.NativeDragEvent):void {
      if(event.clipboard.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)){
        var list:Array = event.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
        for each (var file:flash.filesystem.File in list) {
          trace(file.nativePath);
        }
      }
    }
 
    ]]>
  </mx:Script>
  <mx:Panel width="100%" height="100%" layout="absolute">
  </mx:Panel>
</mx:WindowedApplication>

イベントリスナーの設定

1
2

this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_ENTER, onDragEnter);
this.addEventListener(flash.events.NativeDragEvent.NATIVE_DRAG_DROP, onDragDrop);

まず、2つのイベントリスナーを設定します。
flash.events.NativeDragEvent.NATIVE_DRAG_ENTER が、ドラッグしてきてオブジェクトの境界内に入った時
flash.events.NativeDragEvent.NATIVE_DRAG_DROP が、ドラッグしてきたアイテムをオブジェクトの上で離した時
の2つです。
AIR上とWeb上でまず違うのがここです。
そもそも、flash.events.NativeDragEventのイベントがAIRでしか発生しません。

私はここではまりました。
私はFlex Builderを使っているのですが、Flex Builderのデバッグモードで動作させた場合、
このイベントが発生しません。
一度リリースビルドを行い、インストールするとイベントが発生しました。

flash.events.NativeDragEvent.NATIVE_DRAG_ENTERイベント

このイベントは、ドラッグしてきてオブジェクトの境界内に入った時に発生します。
この際、ドラッグしてきてOKです、とシステムに知らさなければいけません。

1

flash.desktop.NativeDragManager.acceptDragDrop(obj:InteractiveObject);

を呼ぶことにより、ドラッグを受け付けることになります。
このメソッドを呼ぶと、マウスポインタが「＋」マークのついたポインタに変わります。

flash.events.NativeDragEvent.NATIVE_DRAG_DROPイベント

このイベントは、実際にドロップされたときに発生します。
先の、NativeDragManager.acceptDragDrop()が事前に呼ばれていないと発生しません。

ドロップされたオブジェクトは、

1

flash.events.NativeDragEvent.clipboard.getData();

で取得できます。
そのオブジェクトは、flash.desktop.Clipboardというクラスを経由して様々な情報を取得できます。
今回は、ローカルのファイル情報を取得しましたが、テキストデータやイメージデータ等も取得できます。

以上が、AIR/FlexでFlexコンポーネントとローカルマシン上のオブジェクトの間のドラッグ アンド ドロップを実現する方法です。
詳細はAIR/Flexのドキュメントにも詳しく書かれていますが、もひとつわかりにくい気もします。

それでは！

あわせて読みたい

• AIR/Flex でファイルアップロード
• リッチなAdobe AIR/Flexのツールチップをよりリッチに