22 ツールチップ
この章では、ツールチップについて学習します。ツールチップは、UIコントロールの上にマウス・カーソルを置いたときに表示されるようこのコントロールに設定できるコントロールです。
Tooltipクラスは、通常はUIコントロールに関する追加情報を表示するために使用される一般的なUIコンポーネントを表します。 ツールチップは、setTooltipメソッドをコールすることによって任意のコントロールに設定できます。
ツールチップには、アクティブと表示中という2つの異なる状態があります。 ツールチップがアクティブな場合、マウスはコントロールの上に移動します。 ツールチップが表示中状態である場合、ツールチップは実際に表示されます。 表示されているツールチップはアクティブ状態でもあります。 通常、ツールチップがアクティブになった瞬間から実際に表示されるまでには若干遅延があります。
図22-1に、ツールチップが表示されたパスワード・フィールドを示します。
ツールチップの作成
前述の図に表示されているJavaFXアプリケーションで、ツールチップが表示されたパスワード・フィールドを作成している例22-1のコード・フラグメントについて検討します。
例22-1 パスワード・フィールドへのツールチップの追加
final PasswordField pf = new PasswordField();
final Tooltip tooltip = new Tooltip();
tooltip.setText(
"\nYour password must be\n" +
"at least 8 characters in length\n" +
);
pf.setTooltip(tooltip);
javafx.scene.controlパッケージの各UIコントロールには、ツールチップを追加するためのsetTooltipメソッドがあります。 テキストのキャプションは、Tooltipコンストラクタ内に定義するか、setTextメソッドを使用して定義できます。
TooltipクラスはLabeledクラスの拡張であるため、テキストのキャプションだけでなく、グラフィカル・アイコンも追加できます。 例22-2のコード・フラグメントでは、パスワード・フィールドのツールチップにアイコンを追加しています。
例22-2 ツールチップへのアイコンの追加
Image image = new Image(
getClass().getResourceAsStream("warn.png")
);
tooltip.setGraphic(new ImageView(image));
このコード・フラグメントをアプリケーションに追加し、コードをコンパイルして実行すると、図22-2に示すツールチップが表示されます。
ツールチップでは、追加情報や補助情報を含めるだけでなく、データを表すこともできます。
ツールチップでのアプリケーション・データの表示
図22-3のアプリケーションでは、ツールチップに表示された情報を使用して、ホテル滞在の費用合計を計算しています。
各チェック・ボックスには、ツールチップが付随しています。 各ツールチップには、特定の予約オプションの料金が表示されます。 ユーザーがチェック・ボックスを選択すると、対応する値が合計に追加されます。 選択したチェック・ボックスの選択を解除すると、対応する値が合計から差し引かれます。
例22-3に示すアプリケーションのソース・コードを確認してください。
例22-3 ツールチップを使用したホテル料金の計算
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.CheckBox;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class TooltipSample extends Application {
final static String[] rooms = new String[]{
"Accommodation (BB)",
"Half Board",
"Late Check-out",
"Extra Bed"
};
final static Integer[] rates = new Integer[]{
100, 20, 10, 30
};
final CheckBox[] cbs = new CheckBox[rooms.length];
final Label total = new Label("Total: $0");
Integer sum = 0;
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
Scene scene = new Scene(new Group());
stage.setTitle("Tooltip Sample");
stage.setWidth(330);
stage.setHeight(150);
total.setFont(new Font("Arial", 20));
for (int i = 0; i < rooms.length; i++) {
final CheckBox cb = cbs[i] = new CheckBox(rooms[i]);
final Integer rate = rates[i];
final Tooltip tooltip = new Tooltip("$" + rates[i].toString());
tooltip.setFont(new Font("Arial", 16));
cb.setTooltip(tooltip);
cb.selectedProperty().addListener(
(ObservableValue<? extends Boolean> ov, Boolean old_val,
Boolean new_val) -> {
if (cb.isSelected()) {
sum = sum + rate;
} else {
sum = sum - rate;
}
total.setText("Total: $" + sum.toString());
}
);
}
VBox vbox = new VBox();
vbox.getChildren().addAll(cbs);
vbox.setSpacing(5);
HBox root = new HBox();
root.getChildren().add(vbox);
root.getChildren().add(total);
root.setSpacing(40);
root.setPadding(new Insets(20, 10, 10, 20));
((Group) scene.getRoot()).getChildren().add(root);
stage.setScene(scene);
stage.show();
}
}
例22-3では、例22-4のコード行を使用してツールチップを作成し、これにテキストのキャプションを割り当てています。 オプション価格のInteger値がString値に変換されています。
CSSを適用してツールチップの視覚的な外観を変更することもできます。
関連APIドキュメント
