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();
}

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」で指定した色を表示。

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

投稿者:

takunoji

音響、イベント会場設営業界からIT業界へ転身。現在はJava屋としてサラリーマンをやっている。自称ガテン系プログラマー(笑) Javaプログラミングを布教したい、ラスパイとJavaの相性が良いことに気が付く。 Spring framework, Struts, Seaser, Hibernate, Playframework, JavaEE6, JavaEE7などの現場経験あり。 SQL, VBA, PL/SQL, コマンドプロント, Shellなどもやります。

コメントを残す