3 ボタン

ボタンの作成

JavaFXアプリケーションでButtonコントロールを作成するには、例 3-1に示すButtonクラスの3つのコンストラクタを使用します。

//A button with an empty text caption.
Button button1 = new Button();
//A button with the specified text caption.
Button button2 = new Button("Accept");
//A button with the specified text caption and icon.
Image imageOk = new Image(getClass().getResourceAsStream("ok.png"));
Button button3 = new Button("Accept", new ImageView(imageOk));

ButtonクラスはLabeledクラスを拡張するため、次のメソッドを使用して、アイコンまたはテキスト・キャプションのないボタンの内容を指定できます。

• setText(String text)メソッド - ボタンのテキスト・キャプションを指定します。

• setGraphic(Node graphic)メソッド - グラフィカル・アイコンを指定します

例3-2に、テキスト・キャプションのないアイコンのあるボタンを作成する方法を示します。

Image imageDecline = new Image(getClass().getResourceAsStream("not.png"));
Button button5 = new Button();
button5.setGraphic(new ImageView(imageDecline));

このコード・フラグメントは、アプリケーションに追加したときに図 3-2に示すボタンを作成します。

図3-2 アイコンのあるボタン

「図3-2 アイコンのあるボタン」の説明

例3-2および図3-2では、アイコンはImageViewオブジェクトです。ただし、javafx.scene.shapeパッケージにある形状など、他のグラフィカル・オブジェクトも使用できます。ボタンのテキストとグラフィカル・コンテンツを定義する場合は、setGraphicTextGapメソッドを使用してその間にギャップを設定できます。

Buttonクラスのデフォルトのスキンは、ボタンの次の表示状態を識別します。図3-3は、アイコンのあるボタンのデフォルトの状態を示します。

図3-3 ボタンの状態

「図3-3 ボタンの状態」の説明

アクションの割当て

各ボタンの主な機能は、クリックされたときにアクションを生成することです。ButtonクラスのsetOnActionメソッドを使用して、ユーザーがボタンをクリックしたときに何が起こるかを定義します。例3-3に、button2のアクションを定義するコード・フラグメントを示します。

button2.setOnAction((ActionEvent e) -> {
    label.setText("Accepted");
});

例3-3はActionEventの処理方法を示し、ユーザーがbutton2を押したときに、ラベルのテキスト・キャプションが「Accepted」になることを示します。

Buttonクラスを使用して、必要な数のイベント処理メソッドを設定し、特定の動作を実行したり、視覚的な効果を適用できます。

効果の適用

ButtonクラスはNodeクラスの拡張であるため、javafx.scene.effectパッケージのすべての効果を適用して、ボタンの視覚的な外観を向上します。例3-4では、onMouseEnteredイベントが発生したときにDropShadow効果をbutton3に適用します。

DropShadow shadow = new DropShadow();
//Adding the shadow when the mouse cursor is on
button3.addEventHandler(MouseEvent.MOUSE_ENTERED, (MouseEvent e) -> {
    button3.setEffect(shadow);
});
 
//Removing the shadow when the mouse cursor is off
button3.addEventHandler(MouseEvent.MOUSE_EXITED, (MouseEvent e) -> {
    button3.setEffect(null);
});

図3-4は、マウス・カーソルをあわせたときと外したときのbutton3の状態を示します。

図3-4 ドロップ・シャドウのあるボタン

「図3-4 ドロップ・シャドウのあるボタン」の説明

ボタンのスタイル設定

ボタンの視覚的な外観を拡張する次の手順では、Skinクラスで定義されているCSSスタイルを適用します。JavaFX 2アプリケーションのCSSの使用とHTMLのCSSの使用は、どちらも同じCSS仕様に基づいているために類似しています。

スタイルを個別のCSSファイルに定義し、getStyleClassメソッドを使用してこれをアプリケーションで有効にできます。このメソッドはNodeクラスから継承し、すべてのUIコントロールに使用できます。例3-5および図3-4は、このアプローチを示しています。

//Code added to the CSS file
.button1{
    -fx-font: 22 arial; 
    -fx-base: #b6e7c9;    
}
//Code in the ButtonSample.java file
button1.getStyleClass().add("button1");

-fx-fontプロパティはbutton1のフォント名とサイズを設定します。-fx-baseプロパティはボタンに適用されているデフォルトの色をオーバーライドします。その結果、button1は図3-5に示すように明るいグリーンで、テキストのサイズも大きくなります。

図3-5 CSSスタイルのボタン

「図3-5 CSSスタイルのボタン」の説明

関連APIドキュメント

• Button

• Labeled