イントロダクション
以前記載した記事で「初めてでも大丈夫」などと記載していましたが、ちょっと「危ういな」と思いチュートリアルをやってみようとなりました。
今回はラジオボタンの表示をやります。
チュートリアル
ここのページを、戦国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();
}
https://youtu.be/wRvLmWYx-Fc
画面の上部にある「トグルボタン」が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」で指定した色を表示。
上記の様に実装しています。