はじめまして､こんにちは｡
プロダクト&サービス事業部の白石です｡
近々新バージョンのニュースリリースをおこなう予定の弊社製品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> |
この二つのファイルを作成したら後は実行するだけです｡
どうでしたか?
凄く簡単でしたよね?
簡単に動作を説明すると､
- taroにカーソルを合わせる
- toolTipプロパティで設定した" "という文字列でツールチップを作成
- ツールチップが作成される際に投げられるtoolTipCreateイベント処理開始
- イベントにPersonToolTipコンポーネントを渡す
- カスタムツールチップ表示
といった具合に処理されています｡
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のような形で紹介出来そうなことも発見しました｡
また次の機会にでも､
ちょっとした工夫を紹介出来たらと思います｡
使用したソフトウェア
| バージョン | |
|---|---|
| Adobe AIR | 1.5 |
| Adobe Flex SDK | 3.2.0 |
6月 8th, 2009 at 13:26
[...] リッチなAdobe AIR/Flexのツールチップをよりリッチに (1) [...]
6月 26th, 2009 at 10:54
[...] リッチなAdobe AIR/Flexのツールチップをよりリッチに カテゴリー [...]
10月 21st, 2009 at 19:06
[...] リッチなAdobe AIR/Flexのツールチップをよりリッチに [...]