5 トグル・ボタン
この章では、JavaFX APIで使用可能なもう1つのボタン・タイプであるToggleButtonクラスについて学習します。
複数のトグル・ボタンをグループにまとめることができますが、そのグループでは一度に選択できるボタンは1つのみであるか、または選択が不要です。図5-1に、3つのトグル・ボタンをグループにまとめたアプリケーションの画面キャプチャを示します。このアプリケーションでは、選択したトグル・ボタンに応じた特定の色で四角形が塗りつぶされます。
トグル・ボタンの作成
アプリケーション内にトグル・ボタンを作成するには、例5-1に示すように、ToggleButtonクラスの3つのコンストラクタのいずれかを使用します。
例5-1 トグル・ボタンの作成
//A toggle button without any caption or icon
ToggleButton tb1 = new ToggleButton();
//A toggle button with a text caption
ToggleButton tb2 = new ToggleButton("Press me");
//A toggle button with a text caption and an icon
Image image = new Image(getClass().getResourceAsStream("icon.png"));
ToggleButton tb3 = new ToggleButton ("Press me", new ImageView(image));
ToggleButtonクラスはLabeledクラスの拡張であり、テキスト・キャプション、イメージ、またはイメージとテキストの両方を指定できます。LabeledクラスのsetTextメソッドおよびsetGraphicメソッドを使用すると、テキスト・コンテンツとグラフィック・コンテンツをトグル・ボタンに指定できます。
コード内でトグル・ボタンを定義したら、これらをグループにまとめ、特定の動作を設定できます。
グループへのトグル・ボタンの追加
ToggleButtonクラスの実装はRadioButtonクラスの実装と非常に似ています。ただし、ラジオ・ボタンとは異なり、トグル・グループ内のトグル・ボタンでは、グループ内のボタンを強制的に1つ以上選択する必要はありません。つまり、選択されているトグル・ボタンをクリックするとその選択が解除されますが、グループ内で選択されているラジオ・ボタンをクリックしても何も起こりません。
例5-2のコード・フラグメントを確認してください。
例5-2 グループへのトグル・ボタンの組込み
final ToggleGroup group = new ToggleGroup();
ToggleButton tb1 = new ToggleButton("Minor");
tb1.setToggleGroup(group);
tb1.setSelected(true);
ToggleButton tb2 = new ToggleButton("Major");
tb2.setToggleGroup(group);
ToggleButton tb3 = new ToggleButton("Critical");
tb3.setToggleGroup(group);
例5-2では、3つのトグル・ボタンを作成し、それをトグル・グループに追加します。setSelectedメソッドがtb1トグル・ボタンにコールされるため、アプリケーションの起動時にはこれが選択されます。ただし、図5-2に示すように、「Minor」トグル・ボタンの選択を解除し、開始時にグループ内のトグル・ボタンが選択されないようにもできます。
通常、グループ内のトグル・ボタンを使用して、それぞれのボタンに特定の動作を割り当てます。次の項では、これらのトグル・ボタンを使用して四角形の色を変更する方法について説明します。
動作の設定
NodeクラスからToggleButtonクラスに継承されたsetUserDataメソッドによって、選択したオプションに特定の値を関連付けることができます。例5-3では、ユーザー・データが四角形を塗りつぶす色を示しています。
例5-3 トグル・ボタンのユーザー・データの設定
tb1.setUserData(Color.LIGHTGREEN);
tb2.setUserData(Color.LIGHTBLUE);
tb3.setUserData(Color.SALMON);
Rectangle rect = new Rectangle();
rect.setHeight(50);
rect.setFill(Color.WHITE);
rect.setStroke(Color.DARKGRAY);
rect.setStrokeWidth(2);
rect.setArcHeight(10);
rect.setArcWidth(10);
final ToggleGroup group = new ToggleGroup();
group.selectedToggleProperty().addListener
(ObservableValue<? extends Toggle> ov,
Toggle toggle, Toggle new_toggle) -> {
if (new_toggle == null)
rect.setFill(Color.WHITE);
else
rect.setFill((Color) group.getSelectedToggle().getUserData());
});
rect.setWidth(hbox.getWidth());
ChangeListener<Toggle>オブジェクトがグループ内で選択したトグルをチェックします。どのトグル・ボタンも選択されていない場合、四角形は白で塗りつぶされます。トグル・ボタンのいずれかが選択されると、getSelectedToggleメソッドとgetUserDataメソッドが連続コールされ、四角形を塗りつぶす色が返されます。
たとえば、ユーザーがtb2トグル・ボタンを選択すると、setSelectedToggle().getUserData()呼出しによってColor.LIGHTBLUEが返されます。この結果を図5-3に示します。
アプリケーションの完全なコードを調査するには、ToggleButtonSample.javaファイルを参照してください。
トグル・ボタンのスタイル設定
このアプリケーションは、CSSスタイルをトグル・ボタンに適用して拡張できます。JavaFXアプリケーションのCSSの使用とHTMLのCSSの使用は、どちらも同じCSS規格に基づいているために類似しています。
例5-4に示すように、最初にControlStyle.cssファイルでトグル・ボタンのスタイルを宣言します。
例5-4 トグル・ボタンの代替色の宣言
.toggle-button1{
-fx-base: lightgreen;
}
.toggle-button2{
-fx-base: lightblue;
}
.toggle-button3{
-fx-base: salmon;
}
次に、このスタイルをToggleButtonSampleアプリケーションで有効にします。例5-5でこの実装方法を確認します。
例5-5 トグル・ボタンへのCSSスタイルの適用
scene.getStylesheets().add("togglebuttonsample/ControlStyle.css");
tb1.getStyleClass().add("toggle-button1");
tb2.getStyleClass().add("toggle-button2");
tb3.getStyleClass().add("toggle-button3");
これらの行をアプリケーション・コードに追加すると、図5-4に示すように、トグル・ボタンの外観が変化します。
ToggleButtonクラスの他のCSSプロパティ、またはJavaFX APIで可能なアニメーション、変換、および視覚効果などを試すことができます。
関連APIドキュメント
