ツールヒントの作成
UIComponent クラスを拡張したビジュアル Flex コンポーネントはすべて、toolTip プロパティをサポートします（UIComponent クラスは IToolTipManagerClient インターフェイスを実装しています）。このプロパティは、UIComponent クラスから継承されます。toolTip プロパティの値にテキストストリングを設定すると、そのコンポーネントの上にマウスポインタを重ねた場合に、設定しておいたテキストストリングが表示されます。次の例では、Button コントロールの toolTip プロパティにテキストを設定します。
<?xml version="1.0"?> <!-- tooltips/BasicToolTip.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/> </mx:Application>前の例で実行する SWF ファイルは以下のとおりです。
ツールヒントの値を ActionScript で設定するには、コンポーネントの toolTip プロパティを使用します。次の例では、新しい Button を作成し、Button コントロールの toolTip プロパティを設定します。
<?xml version="1.0"?>
<!-- tooltips/BasicToolTipActionScript.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
public function createNewButton(event:MouseEvent):void {
var myButton:Button = new Button();
myButton.label = "Create Another Button";
myButton.toolTip = "Click this new button to create another button.";
myButton.addEventListener(MouseEvent.CLICK, createNewButton);
addChild(myButton);
}
]]></mx:Script>
<mx:Button id="b1" label="Create Another Button" click="createNewButton(event);"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
コンテナの子にツールヒントを定義していない場合は、親のツールヒントが表示されます。例えば、ツールヒントを持つ Panel コンテナに Button コントロールを追加した場合、ユーザーが Panel コンテナの上にマウスポインタを移動すると、Panel のツールヒントテキストが表示されます。マウスポインタを Button コントロールの上に移動すると、Panel のツールヒントが引き続き表示されます。コンテナのツールヒントテキストをオーバーライドするには、子の toolTip プロパティの値を設定します。
次の例では、ツールヒントテキストの継承を示します。
<?xml version="1.0"?>
<!-- tooltips/ToolTipInheritance.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox toolTip="VBOX">
<mx:Button id="b1" label="Button 1" toolTip="BUTTON"/>
<mx:Button id="b2" label="Button 2"/>
</mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
マウスポインタを b1 ボタンの上に重ねると、ツールヒントに "BUTTON" と表示されます。マウスポインタを b2 ボタンの上か、VBox コンテナ上の b1 ボタン以外の場所に重ねた場合は、ツールヒントに "VBOX" と表示されます。
TabNavigator コンテナは、その子コンテナのツールヒントを使用します。TabNavigator コンテナの子ビューにツールヒントを追加した場合、そのビューのタブにマウスを重ねたときにツールヒントが表示されます。ビュー自体にマウスを重ねてもツールヒントは表示されません。TabNavigator コンテナにツールヒントを追加した場合、そのツールヒントがタブまたはビューにオーバーライドされない限り、タブまたはビューのいずれかにマウスを重ねるとツールヒントが表示されます。次のコントロールでも、これと同じようにツールヒントが動作します。
ツールヒントテキストのサイズに制限はありませんが、メッセージが長いと読みづらくなることがあります。ツールヒントテキストがツールヒントボックスの幅に到達すると、テキストが次の行に折り返されます。ツールヒントテキストに改行を追加することもできます。ActionScript では、改行のエスケープ文字（\n）を使用します。MXML タグの場合は、XML エンティティの を使用します。
次に、改行のエスケープ文字（\n）とエンティティ参照（ ）の使用例を示します。
<?xml version="1.0"?>
<!-- tooltips/ToolTipNewlines.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="doSomething(event)">
<mx:Script><![CDATA[
public function doSomething(event:Event):void {
// Use the \n to force a line break in ActionScript.
b1.toolTip = "Click this button \n to clear the form.";
}
]]></mx:Script>
<mx:Button id="b1" label="Clear" width="100"/>
<!-- Use to force a line break in MXML tags. -->
<mx:Button id="b2" label="Submit" width="100" toolTip="Click this button to submit the form."/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ツールヒントのテキストにスタイルを適用することもできます。ツールヒントのカスケーディングスタイルシート（CSS）タイプセレクタを使用して、アプリケーション内のすべてのツールヒントに対してスタイルを適用したり、その他の設定値を変更したりできます。以降のセクションでは、ツールヒントのテキストおよびボックスにスタイルを適用する方法について説明します。
ツールヒントのスタイルの設定
CSS のシンタックスまたは mx.styles.StyleManager クラスを使用して、ツールヒントテキストやツールヒントボックスの外観を変更できます。ツールヒントのスタイルに対して行った変更は、現在のアプリケーション内のすべてのツールヒントに適用されます。
ツールヒントのデフォルトスタイルは、framework.swc ファイル内の defaults.css ファイルの中のツールヒントタイプセレクタによって定義されています。<mx:Style> タグ内でタイプセレクタを使用して、ツールヒントのデフォルトスタイルをオーバーライドできます。次の例では、CSS シンタックスを使用して、ツールヒントタイプセレクタのスタイルを設定しています。
<?xml version="1.0"?>
<!-- tooltips/ToolTipStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
ToolTip {
fontFamily: "Arial";
fontSize: 19;
fontStyle: "italic";
color: #FF6699;
backgroundColor: #33CC99;
}
</mx:Style>
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
StyleManager クラスを使用してツールヒントのスタイルを設定するには、次の例に示すように、setStyle() メソッドを使用してツールヒントタイプセレクタにスタイルを適用します。
<?xml version="1.0"?>
<!-- tooltips/ToolTipStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="setToolTipStyle()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private function setToolTipStyle():void {
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize","19");
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontFamily","Arial");
StyleManager.getStyleDeclaration("ToolTip").setStyle("color","#FF6699");
StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#33CC99");
}
]]></mx:Script>
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ツールヒントでは、開発者がグローバルに設定した継承可能なスタイルが使用されます。例えば、StyleManager を使用して、ツールヒントの fontWeight をグローバルセレクタに設定できます。次に例を示します。
<?xml version="1.0"?>
<!-- tooltips/ToolTipGlobalStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="setToolTipStyle()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private function setToolTipStyle():void {
StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold");
}
]]></mx:Script>
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
Application オブジェクトに設定されたスタイルは通常、すべての UI オブジェクトに適用されます。ただし、ツールヒントには、Application オブジェクトに設定されたスタイルは継承されません。
グローバルセレクタに fontWeight プロパティを設定すると、ツールヒント以外の多くのコントロールのテキストにもその変更が反映されるため、グローバルセレクタを使用する際は注意が必要です。
ツールヒントでサポートされるスタイルの一覧については、『Adobe Flex リファレンスガイド』を参照してください。スタイルの使用の詳細については、スタイルとテーマの使用を参照してください。
ToolTip コントロールのスキンを交換して、ツールヒントにまったく新しい外観を与えることができます。そのためには、ToolTipBorder プログラムスキンを使用するか、グラフィカルスキンに交換します。ToolTip コントロールをプログラムスキンに交換する例については、ツールヒントのスキン交換を参照してください。
ツールヒントの幅の設定
ツールヒントボックスの幅は、mx.controls.ToolTip クラスの maxWidth プロパティを変更することによって設定できます。このプロパティは静的なので、このプロパティを設定すると、すべてのツールヒントボックスに対して設定されます。このプロパティは、ツールヒントのインスタンスに設定することはできません。
maxWidth プロパティには、新しいツールヒントボックスの最大幅をピクセル単位で指定します。例えば、次の行によりツールヒントボックスの最大幅が 100 ピクセルに変更されます。
<?xml version="1.0"?>
<!-- tooltips/SetMaxWidth.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
<mx:Script><![CDATA[
import mx.controls.ToolTip;
public function init():void {
ToolTip.maxWidth = 100;
}
public function createNewButton(event:MouseEvent):void {
var myButton:Button = new Button();
myButton.label = "Create Another Button";
myButton.toolTip = "Click this new button to create another button.";
myButton.addEventListener(MouseEvent.CLICK, createNewButton);
addChild(myButton);
}
]]></mx:Script>
<mx:Button id="b1"
label="Create Another Button"
click="createNewButton(event);"
toolTip="Click this button to create a new one."
/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
ツールヒントのテキストは、幅がこの値を超えないように複数行に折り返されます。ツールヒントボックスのテキスト幅が maxWidth プロパティよりも狭い場合は、テキストがちょうど収まるように、ツールヒントボックスの幅が調整されます。
maxWidth のデフォルト値は 300 です。maxWidth の値がアプリケーションの幅よりも大きい場合は、ツールヒントボックス内のテキストがクリッピングされます。
ツールヒントイベントの使用
ツールヒントは、ライフサイクルの間に多数のイベントをトリガします。これらのイベントのタイプは ToolTipEvent です。
ToolTipEvent オブジェクトには、type プロパティや target プロパティに加えて、ツールヒントを参照する toolTip プロパティがあります。ツールヒントを参照することで、text プロパティを使用してツールヒントテキストにアクセスできます。
<mx:Script> ブロック内で ToolTipEvent タイプのイベントを使用するには、mx.events.ToolTipEvent クラスを読み込む必要があります。
次の例は、TOOL_TIP_SHOW イベントに応答してサウンドを再生します。
<?xml version="1.0"?>
<!-- tooltips/ToolTipsWithSoundEffects.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
<mx:Script><![CDATA[
import mx.events.ToolTipEvent;
import flash.media.Sound;
[Embed(source="../assets/sound1.mp3")]
private var beepSound:Class;
private var myClip:Sound;
public function playSound():void {
myClip.play();
}
private function myListener(event:ToolTipEvent):void {
playSound();
}
private function init():void {
myLabel.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, myListener);
myClip = new beepSound();
}
]]></mx:Script>
<mx:Label id="myLabel" toolTip="ToolTip" text="Mouse Over Me"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
NavBar コントロールでのツールヒントの使用
NavBar と TabBar のサブクラス（ButtonBar、LinkBar、ToggleButtonBar など）は、データプロバイダでツールヒントをサポートします。データプロバイダ配列の中に、ナビゲーションアイテムの toolTip を指定する toolTip フィールドを含めることができます。
次の例では、ナビゲーションアイテムごとにツールヒントを作成しています。
<?xml version="1.0"?>
<!-- tooltips/NavItemToolTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ButtonBar>
<mx:Object label="OK" toolTip="OK tip"/>
<mx:Object label="Cancel" toolTip="Cancel tip"/>
</mx:ButtonBar>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
コンポーネントのデータプロバイダ内の子エレメントでツールヒントを使用できます。コンポーネントは、それらのツールヒントを認識し、表示します。次の例では、ツールヒントは LinkBar にまで反映されます。
<?xml version="1.0"?>
<!-- tooltips/DataProviderToolTips.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox>
<!-- Create a LinkBar control to navigate the ViewStack. -->
<mx:LinkBar dataProvider="{vs1}" borderStyle="solid"/>
<!-- Define the ViewStack and the three child containers. -->
<mx:ViewStack id="vs1" borderStyle="solid" width="100%" height="150">
<mx:Canvas id="search" label="Search" toolTip="Search Screen">
<mx:Label text="Search Screen"/>
</mx:Canvas>
<mx:Canvas id="custInfo" label="Customer"
toolTip="Customer Info Screen">
<mx:Label text="Customer Info"/>
</mx:Canvas>
<mx:Canvas id="accountInfo" label="Account"
toolTip="Account Info Screen">
<mx:Label text="Account Info"/>
</mx:Canvas>
</mx:ViewStack>
</mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
また、NavBar の toolTipField プロパティの値を、ツールヒントを提供するデータプロバイダのフィールドを指すように設定することもできます。次の例のデータプロバイダは、myToolTip フィールドでツールヒントを定義しています。
<?xml version="1.0"?>
<!-- tooltips/ToolTipFieldExample.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ButtonBar toolTipField="myToolTip">
<mx:Object label="OK" myToolTip="OK tip"/>
<mx:Object label="Cancel" myToolTip="Cancel tip"/>
</mx:ButtonBar>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。
このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート