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ドキュメント