JavaFX チュートリアル〜今度こそ、初めてでも大丈夫5:ToggleButton〜

イントロダクション

以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。

今回はラジオボタンの表示をやります。

チュートリアル

ここのページを、戦国Xサラの要領でガンガン斬り伏せながらやっていきます。

<チュートリアル>

基本のコード(ちょっとダメなコード)

public class Lv4_ToggleButton extends Application {

	/**
	 * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品)
	 * のメソッドをオーバーライドする。
	 * {@link Application#launch(String...)}から呼び出される。
	 */
	@Override
	public void start(Stage primaryStage) throws Exception {
		// チュートリアルの乗っていない部分
		Group group = new Group();

		// トグルグループ
		ToggleGroup toggleGroup = new ToggleGroup();

		ToggleButton tb1 = new ToggleButton("Minor");
		tb1.setToggleGroup(toggleGroup);

		ToggleButton tb2 = new ToggleButton("Major");
		tb2.setToggleGroup(toggleGroup);

//		Image image = new Image(getClass().getResourceAsStream("icon.png"));
		ToggleButton tb3 = new ToggleButton ("Critical");
		tb3.setToggleGroup(toggleGroup);

//		// 横のレイアウト
//		HBox lineLayout = new HBox();
//		lineLayout.getChildren().addAll(tb1, tb2, tb3);
		
		// Groupを追加する
		group.getChildren().addAll(tb1, tb2, tb3);
		// チュートリアルでは省略されている
		Scene scene = new Scene(group, 300, 300);
		primaryStage.setScene(scene);
		primaryStage.setTitle("チュートリアル4");
		primaryStage.show();
	}

	/**
	 * メインメソッド。
	 * Apllicationクラスのlaunchメソッドを呼び出す。
	 * 
	 * @param args プログラム引数
	 */
	public static void main(String[] args) {
		launch(args);
	}
}

前回と同様に、打面な原因は表示結果にあります。

トグルボタンが重なっています。。。なので、下の様に「横のレイアウト」を追加します。

// 横のレイアウト
HBox lineLayout = new HBox();
lineLayout.getChildren().addAll(tb1, tb2, tb3);

// Groupを追加する
group.getChildren().addAll(lineLayout);

こんな感じで表示されます。「横のレイアウト」の存在意義が少し見えてきたかと思いますがいかがでしょうか?

そして、下の部分に色をつけた四角(Rect)を設定し、簡単なアクション(イベント処理)を追加します。

@Override
public void start(Stage primaryStage) throws Exception {
	// チュートリアルの乗っていない部分
	Group group = new Group();

	// トグルグループ
	ToggleGroup toggleGroup = new ToggleGroup();

	ToggleButton tb1 = new ToggleButton("Minor");
	tb1.setToggleGroup(toggleGroup);

	ToggleButton tb2 = new ToggleButton("Major");
	tb2.setToggleGroup(toggleGroup);

	ToggleButton tb3 = new ToggleButton ("Critical");
	tb3.setToggleGroup(toggleGroup);

	// ユーザーデータを追加
	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);
	// 横のレイアウト
	HBox lineLayout = new HBox();
	lineLayout.getChildren().addAll(tb1, tb2, tb3);
	// 縦のレイアウト
	VBox vbox = new VBox();
	vbox.getChildren().add(lineLayout);
	vbox.getChildren().add(rect);

	// トグルボタンのイベント処理
	toggleGroup.selectedToggleProperty().addListener(
			(ObservableValue<? extends Toggle> ov, Toggle oldToggle, Toggle newToggle) -> {
				System.out.println(lineLayout.getWidth());
				rect.setWidth(lineLayout.getWidth());
				if (newToggle == null) {
					System.out.println("null: ");
					rect.setFill(Color.WHITE);
				} else {
					System.out.println("!= null: ");
					rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData());
				}
	});
	// Groupを追加する
	group.getChildren().addAll(vbox);
	// チュートリアルでは省略されている
	Scene scene = new Scene(group, 300, 300);
	// ここでサイズを指定する
	vbox.setPrefWidth(scene.getWidth());
	rect.setWidth(scene.getWidth());
	rect.setHeight(scene.getHeight());
	primaryStage.setScene(scene);
	primaryStage.setTitle("チュートリアル4");
	primaryStage.show();
}

画面の上部にある「トグルボタン」が3つあります、

// トグルグループ
ToggleGroup toggleGroup = new ToggleGroup();

ToggleButton tb1 = new ToggleButton("Minor");
tb1.setToggleGroup(toggleGroup);

ToggleButton tb2 = new ToggleButton("Major");
tb2.setToggleGroup(toggleGroup);

ToggleButton tb3 = new ToggleButton ("Critical");
tb3.setToggleGroup(toggleGroup);

このボタンに「UserDdata」を設定して置き、

// ユーザーデータを追加
tb1.setUserData(Color.LIGHTGREEN);
tb2.setUserData(Color.LIGHTBLUE);
tb3.setUserData(Color.SALMON);

初期表示の四角(Rect)を表示します。(色は白なので表示結果がよく分かりません。。。すんません。。。)

// 四角の領域
Rectangle rect = new Rectangle();
rect.setHeight(50);
rect.setFill(Color.WHITE);
rect.setStroke(Color.DARKGRAY);
rect.setStrokeWidth(2);
rect.setArcHeight(10);
rect.setArcWidth(10);

トグルボタンが押下されたときに「UserData」を取得して何色の四角「Rect」に値設定しています。

// トグルボタンのイベント処理
toggleGroup.selectedToggleProperty().addListener(
		(ObservableValue<? extends Toggle> ov, Toggle oldToggle, Toggle newToggle) -> {
			System.out.println(lineLayout.getWidth());
			rect.setWidth(lineLayout.getWidth());
			if (newToggle == null) {
				System.out.println("null: ");
				rect.setFill(Color.WHITE);
			} else {
				System.out.println("!= null: ");
				rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData());
			}
});

ちょっと長いので分解して内容を記載します。トグルグループに選択時のイベントを追加します。〜Propertyで設定できる様です。

toggleGroup.selectedToggleProperty().addListener(

そして、イベントの処理内容を記載します。

(ObservableValue<? extends Toggle> ov, Toggle oldToggle, Toggle newToggle) -> { ... }

引数が3つあります。「ObservableValue<? extends Toggle>」と「Toggle1」「Toggle2」です、これを受けて(引数にして)以下のイベント処理を実装しています。

System.out.println(lineLayout.getWidth());
rect.setWidth(lineLayout.getWidth());
if (newToggle == null) {
	System.out.println("null: ");
	rect.setFill(Color.WHITE);
} else {
	System.out.println("!= null: ");
	rect.setFill((Color) toggleGroup.getSelectedToggle().getUserData());
}

新しいトグルが「Null」の場合は四角(Rect)の色を白、それ以外は「UserData」で指定した色を表示。

上記の様に実装しています。