Eclipse Android〜Gluonでアプリを作る8:アニメーションの基本(遷移)〜

イントロダクション

今回からアニメーションの学習に入ります。参考にするサイトはこちらです。

https://docs.oracle.com/javase/jp/8/javafx/visual-effects-tutorial/basics.htm

今までのJavaFXをやってきたなら、楽勝だと思います。ちょっとわかりづらいのが、Durationクラスと、FadeTransitionクラスだと思います。リンク先のJavaDocにもあるように、Durationで時間(間隔)を指定してFadeTransitionでフェードさせています。「百聞は一見に〜」ということで。。。こんな感じです。

<ソース>

@Override
public void start(Stage primaryStage) throws Exception {
    Group gp = new Group();
    // チュートリアルにあるコード
    final Rectangle rect1 = new Rectangle(10, 10, 100, 100);
    rect1.setArcHeight(20);
    rect1.setArcWidth(20);
    rect1.setFill(Color.RED);
    FadeTransition ft = new FadeTransition(Duration.millis(3000), rect1);
    ft.setFromValue(1.0);
    ft.setToValue(0.1);
    ft.setCycleCount(Timeline.INDEFINITE);
    ft.setAutoReverse(true);
    ft.play();

    // シーンをステージに登録
    gp.getChildren().addAll(rect1);
    Scene scene = new Scene(gp, 450, 450);
    primaryStage.setScene(scene);
    primaryStage.setTitle("Animation Basic1");
    primaryStage.show();
}

特に調べる必要はないと思ったので今回はここまでにします。

でわでわ。。。

[rakuten ids="excellentimports:13167241"]

関連ページ

  1. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫:Label〜
  2. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫2:Label〜
  3. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫3:Button〜
  4. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫4:RadioButton〜
  5. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫5:ToggleButton〜
  6. JavaFX チュートリアル〜今度こそ、初めてでも大丈夫6:CheckBox〜
  7. Eclipse Android〜Gluonでアプリを作る6: アニメーションを作る準備〜
  8. Eclipse Android〜Gluonでアプリを作る7: 木琴アプリの解析〜



Eclipse Android〜Gluonでアプリを作る6: アニメーションを作る準備〜

イントロダクション

前回までは、とりあえず動くところまで作りました。概要は以下の通りです。

  1. ゲームのタイトル表示
  2. ゲームの開始画面表示
  3. 「じゃんけん」の開始ボタン押下後の処理

「3」の部分で開始ボタンを押下後にイメージを表示して終了している状態で前回の作業を終わりました。

ここからは、プログラムでのアニメーション作成方法に注目します。

アニメーション作成の前に

参考にするサイトはこちらです。Oracleのチュートリアルになります。

  1. 変換の概要:transformations.zipリンクよりサンプルコードをダウンロードできます。
  2. このzipファイルをダウンロード、展開して(Eclipse上では)下のようにファイルを配置します。
    展開後のファイル →
    Eclipseに配置 → 
  3. とりあえず、プログラムを実行してみます。

おー素晴らしい!やはり操作して音が出ると違います。

本題

このコードを解析して中身を理解します。以前3次元表現(描画)に挑戦したけどうまくいかなかったので、自分自身ここで問題を解決したいと思っています。

1 変換の概要

サンプル・ソースコード(Gitにアップロードしています)をダウンロードできます。そして「以下の変換について記載してますよ」ということが書いてありました。

  1. 平行移動
  2. 回転
  3. スケーリング
  4. 変形

そして、次のトピックへ進む前にサンプルコードの内容を(大雑把に)理解します。

【前提】

  1. JavaFXを起動する部分(Applicationクラスの継承とMainメソッドの実装)は割愛します。よくわからない場合はここのページを読み返してみてください(それでもわからない場合は実行してみてください)
  2. サンプルソースは、ダウンンロードするソースが1ファイルで良いようにまとめてあります。1クラス1ファイルになっていないので注意が必要です。
    (注)クラスの中に作成するクラス(インナークラス)に「Camクラス」「Cubeクラス」を実装しています。

ソース解析

実際のソースは、結構長いのでこちらを参照してください。(サンプルソースのリンクも同じ場所を参照しています)

まずはクラス構成から見ていきます。

1. インナークラス

大元のクラスは「Xylophone」クラスです、そしてこのクラスにインナークラスが下のようなクラスが2つあります。

  1. Camクラス 
  2. Cubeクラス 

「class」の左側に「public」がついているものと、ついていないものがありますが、これはフィールド変数と同様に

「class Cam」はパッケージ内でのみ使用、参照が可能なアクセス修飾子(何もない)状態を示します。

「public class Cube」はクラスの外部からも、全ての場所から参照することができます。(Xylophone.Cubeのような形で参照する)

しかし、インナークラスは「1クラス1ファイル」の作り方からは逸脱するのであまり使用しません。使用するのは以下のような場合のみです。

対象のクラスからのみ使用される(CubeがXylophneクラスからのみ使用される)

  1. start()メソッドを見る

JavaFXアプリケーションの場合は必ず「Application」クラスを継承したクラスを実装します。そしてこのクラスには「start()」メソッドを実装する(実装することを強制している)ので必ず実装します。

つまり、必ず動くメソッドということです。見ていきます。

フィールド変数に「Cam」クラスが2つあります。

このクラスは、位置と回転を制御するための仕組みがついています。

class Cam extends Group {
    Translate t  = new Translate();
    Translate p  = new Translate();
    Translate ip = new Translate();
    Rotate rx = new Rotate();
    { rx.setAxis(Rotate.X_AXIS); }
    Rotate ry = new Rotate();
    { ry.setAxis(Rotate.Y_AXIS); }
    Rotate rz = new Rotate();
    { rz.setAxis(Rotate.Z_AXIS); }
    Scale s = new Scale();
    public Cam() { super(); getTransforms().addAll(t, p, rx, rz, ry, s, ip); }
}

「Transrate」クラスは位置を管理するため、「Rotate」クラスは回転を管理するためのクラスです。

そして、赤い字で記載した部分に関してフィールド変数と同様に処理を実装するためのスコープ("{", "}")です。これを外すとエラーになります。

本来はメソッドを作成する方が良いのでしょうが、これ以外に処理がないのでここに作成したようです。

そして、ポイントは「Group」クラスを継承しているというところです。

つまり「Group」クラスを拡張しているので細かい処理は全て親クラス(Group)に実装してあるものを使用します。必要に応じてメソッドをオーバーライド、追加の実装を行います。

とりあえずは、キリが良いので今回はここまでにします。

でわでわ。。。

[rakuten ids="book:17734116"]



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

イントロダクション

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

今回はチェックボックスの表示をやります。

チュートリアル

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

<作成した動画>

<チュートリアル>

基本のコード

/**
 * OracleのJavaFXチュートリアル。
 * ToggleButton表示します。
 * JavaDocです。このクラスは「@see」に記載しているサイトの
 * チュートリアルをやります。このクラスではLabelクラスの使用法を実行します。
 * 
 * @author takunoji
 * @see https://docs.oracle.com/javase/jp/8/javafx/user-interface-tutorial/checkbox.htm#CHDFEJCD
 * 2019/03/14
 */
public class Lv5_CheckBox extends Application {

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

        /* チュートリアルにあるコード */
        //A checkbox without a caption
        CheckBox cb1 = new CheckBox();
        //A checkbox with a string caption
        CheckBox cb2 = new CheckBox("Second");

        cb1.setText("First");
        cb1.setSelected(true);

        // Groupにチェックボックスを追加する
        group.getChildren().addAll(cb1, cb2);
        // チュートリアルでは省略されている
        virtical.getChildren().addAll(cb1, cb2);
        // チェックボックスの表示領域
        horizonal.getChildren().add(virtical);
        // イメージの表示領域
        Label iconSpace = new Label("Icon Space");
        iconSpace.setBackground(new Background(new BackgroundFill(Color.BLACK, new CornerRadii(5), Insets.EMPTY)));
        horizonal.getChildren().add(iconSpace);
        group.getChildren().add(horizonal);

        // 毎度おなじみのコード(この部分はだいたい同じになる)
        Scene scene = new Scene(group, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.setTitle("チュートリアル6");
        primaryStage.show();
    }

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

<実行結果>

この基本のコードを基準にします。

このコードは単純にチェックボックスと、イメージを表示するための背景ラベルを表示します。処理を説明すると以下のようになります。

  1. Groupを使用して最終的に表示するコンテナを作成します。
  2. VBoxで縦、HBoxで横のレイアウト用コンテナを作成。
  3. CheckBoxを2つ作成し、FirstとSecondと名前をつけます。
  4. Firstのチェックボックスに選択済みフラグをTrueに設定します。

そして作成したコンポーネント(画面の部品)をGroup(コンテナ)へ追加して表示しています。

 

そして最終的にできたコードです。

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

    /* チュートリアルにあるコード */
    //A checkbox without a caption
    CheckBox cb1 = new CheckBox();
    //A checkbox with a string caption
    CheckBox cb2 = new CheckBox("Second");

    cb1.setText("First");
    cb1.setSelected(true);

    // CheckBoxの動きの設定
    final String[] names = new String[]{"ore", "min", "twit"};
    final Image[] images = new Image[names.length];
    final ImageView[] icons = new ImageView[names.length];
    final CheckBox[] cbs = new CheckBox[names.length];

    // イメージ用のグループ
    Group gp = new Group();
    for (int i = 0; i < names.length; i++) {
        final Image image = images[i] =
            new Image("/" + names[i] + ".png");
        final ImageView icon = icons[i] = new ImageView();
        gp.getChildren().add(icon);
        final CheckBox cb = cbs[i] = new CheckBox(names[i]);
        cb.selectedProperty().addListener(
            (ObservableValue<? extends Boolean> ov,
                Boolean old_val, Boolean new_val) -> {
                    icon.setImage(new_val ? image : null);
        });
        virtical.getChildren().add(cb);
    }
    // Groupを追加する
//      group.getChildren().addAll(cb1, cb2);
    // チュートリアルでは省略されている
    virtical.getChildren().addAll(cb1, cb2);
    // チェックボックスの表示領域
    horizonal.getChildren().add(virtical);
    // イメージの表示領域
    Label iconSpace = new Label("Icon Space");
    iconSpace.setBackground(new Background(new BackgroundFill(Color.BLACK, new CornerRadii(5), Insets.EMPTY)));
    horizonal.getChildren().add(gp);
    group.getChildren().add(horizonal);

    // 毎度おなじみのコード(この部分はだいたい同じになる)
    Scene scene = new Scene(group, 300, 300);
    primaryStage.setScene(scene);
    primaryStage.setTitle("チュートリアル6");
    primaryStage.show();
}

チュートリアルに乗っている部分をコピーしています。

実行結果は以下のようになります。

イベント処理を追加するときは「〜Property」を使用するようですね(笑)

余談

JavaFXを使用するのに、便利なツールがあります。
その名も「SceneBuilder」インストール方法はこちらに記載しましています。

そして、こんな感じの使い勝手です。

できたもの

この記事を書いている時に作成しようとしていたものです。
Guluonというフレームワーク?を使用して作成しました。余計な音が入っています。



JavaFX関連ページ

  1. JavaFX SceneBuilder 〜EclipseとSceneBuilder連携~
  2. JavaFX SceneBuilder〜ボタンにメソッドを割り当てるワンポイント〜
  3. Java プロコンゲーム 〜見た目の作成(SceneBuilderの使用)〜

関連ページ一覧

Eclipse セットアップ

  1. Java Install Eclipse〜開発ツールのインストール〜
  2. TensorFlow C++環境〜EclipseCDTをインストール〜
  3. Setup OpenGL with JavaJOGLを使う準備 for Eclipse
  4. Eclipse Meven 開発手順〜プロジェクトの作成〜
  5. Java OpenCV 環境セットアップ(on Mac)
  6. Eclipse SceneBuilderを追加する
  7. JavaFX SceneBuilder EclipseSceneBuilder連携~

Java Basic一覧

  1. Java Basic Level 1 〜Hello Java〜
  2. Java Basic Level2 〜Arithmetic Calculate〜
  3. Java Basic Level3 〜About String class〜
  4. Java Basic Level 4〜Boolean〜
  5. Java Basic Level 5〜If Statement〜
  6. Java Basic Summary from Level1 to 5
  7. Java Basic Level 6 〜Traning of If statement〜
  8. Java Basic Level8 〜How to use for statement〜
  9. Java Basic Level 8.5 〜Array〜
  10. Java Basic Level 9〜Training of for statement〜
  11. Java Basic Level 10 〜While statement 〜
  12. Java Basic Swing〜オブジェクト指向〜
  13. Java Basic Swing Level 2〜オブジェクト指向2〜
  14. サンプル実装〜コンソールゲーム〜
  15. Java Basic インターフェース・抽象クラスの作り方
  16. Java Basic クラスとは〜Step2_1〜
  17. Java Basic JUnit 〜テストスイートの作り方〜

Git関連

  1. Java Git clone in Eclipse 〜サンプルの取得〜
  2. Eclipse Gitリポジトリの取得 GitからソースをPullしよう〜
  3. IntelliJ IDEA GitGitリポジトリからクローン〜

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

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

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

イントロダクション

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

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

チュートリアル

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

<チュートリアル>

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

public class Lv3_RadioButton extends Application {

    /**
     * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品)
     * のメソッドをオーバーライドする。
     * {@link Application#launch(String...)}から呼び出される。
     */
    @Override
    public void start(Stage primaryStage) throws Exception {
        // チュートリアルには省略されている部分
        Group group = new Group();
        // この部分がチュートリアルに記載されている。
        //A radio button with an empty string for its label
        RadioButton rb1 = new RadioButton();
        //Setting a text label
        rb1.setText("Home");
        //A radio button with the specified label
        RadioButton rb2 = new RadioButton("Calendar");

        // 上のコンポーネント(Labelとか、イメージとか)
        group.getChildren().addAll(rb1, rb2);
        // チュートリアルでは省略されている
        Scene scene = new Scene(group, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.setTitle("チュートリアル1");
        primaryStage.show();
    }

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

今回は、ちょっとダメなコードを基本にしていきます。なんでダメなのかは実行結果を見れば一目瞭然。。。

コンポーネントが重なってしまい、意味がわかりません。

ここで、start()メソッドの初めの部分で「Group group = new Group();」というコードがありますが、この部品をGroupからVBoxへ変更します。

Groupはレイアウトクラスですが、VBoxの親の親。。。とちょっと遠い親戚な関係です。下のJavaDocをみてください。

こんな感じでクラスの系譜がちょっと違うのです。コンポーネントを配置するコンテナクラスという意味で「レイアウトクラス」という文言を使いましたが、とりあえずは「VBoxも Groupもコンポーネントを保持するんだな」と理解してくれればOK!

そして、以下の様にVBoxをGroupの代わりに使用してみると。。。

こんな感じで表示されます。

そしてコードはこんな感じになりました。これもイマイチ。。。Gitからダウンロード

public void start(Stage primaryStage) throws Exception {
    // チュートリアルには省略されている部分
    VBox group = new VBox(20b);
    // この部分がチュートリアルに記載されている。

    //A radio button with an empty string for its label
    RadioButton rb1 = new RadioButton();
    //Setting a text label
    rb1.setText("Home");
    rb1.setSelected(true);
    group.getChildren().add(rb1);

    //A radio button with the specified label
    RadioButton rb2 = new RadioButton("Calendar");
    rb2.setToggleGroup(togle);
    group.getChildren().add(rb2);

    RadioButton rb = new RadioButton("Agree");
    group.getChildren().add(rb);

    // 上のコンポーネント(Labelとか、イメージとか)
    group.getChildren().addAll(rb1, rb2, rb);
    // チュートリアルでは省略されている
    Scene scene = new Scene(group, 300, 300);
    primaryStage.setScene(scene);
    primaryStage.setTitle("チュートリアル3");
    primaryStage.show();
}

これで、3つあるラジオボタンの1つを選択するとそれのみを選択する様になります。選択することができます。表示結果は下の様になります、

これでは味気ないので次の様な機能を実装しようと思います。

  1. 初期表示時には「家の画像」を表示する
  2. ラジオボタンで選択すると選択した画像を表示する

それぞれ、Home, Calender, Agreeで以下の様な画像です。

Home
Calender
Agree

ちょっとややこしくなってしまいました。。。

<ソースコード>

@Override
public void start(Stage primaryStage) throws Exception {
    // チュートリアルには省略されているものから変更
    // 横のレイアウト
    HBox lineLayout = new HBox();
    // 縦のレイアウト
    VBox group = new VBox(20d);
    // 横のレイアウトに追加
    lineLayout.getChildren().add(group);

    /* トグル・グループの追加
     * トグルが設定されているラジオボタンは
     * 1つのグループとして扱われる
     */
    final ToggleGroup togle = new ToggleGroup();
    //A radio button with an empty string for its label
    RadioButton rb1 = new RadioButton();
    //Setting a text label
    rb1.setText("Home");
    rb1.setToggleGroup(togle);
    rb1.setSelected(true);
    // イベント用UserData
    rb1.setUserData("home");
    // 縦のレイアウトに追加
    group.getChildren().add(rb1);
    //A radio button with the specified label
    RadioButton rb2 = new RadioButton("Calendar");
    rb2.setToggleGroup(togle);
    // イベント用UserData
    rb2.setUserData("calendar");
    // 縦のレイアウトに追加
    group.getChildren().add(rb2);

    RadioButton rb = new RadioButton("Agree");
    // イベント用UserData
    rb.setUserData("contacts");
    // サイズを合わせる
    rb.setToggleGroup(togle);
    // 縦のレイアウトに追加
    group.getChildren().add(rb);

    // 横のレイアウトに追加
    ImageView imageView = new ImageView();
    lineLayout.getChildren().add(imageView);
    final Map<String, Image> imageMap = createImageMap(imageView);

    // イベント処理
    togle.selectedToggleProperty().addListener(
            (ObservableValue<? extends Toggle> ov, Toggle old_toggle, Toggle new_toggle) ->{
                if (togle.getSelectedToggle() != null) {
                    String userData = togle.getSelectedToggle().getUserData().toString();
                    imageView.setImage(imageMap.get(userData));
                }
            });
    // 上のコンポーネント(Labelとか、イメージとか)
    // チュートリアルでは省略されている
    Scene scene = new Scene(lineLayout, 1000, 300);
    primaryStage.setScene(scene);
    primaryStage.setTitle("チュートリアル3");
    primaryStage.show();
}

実行結果

上から順番に、

// 横のレイアウト
HBox lineLayout = new HBox();
// 縦のレイアウト
VBox group = new VBox(20d);
// 横のレイアウトに追加
lineLayout.getChildren().add(group);
  1. 横と縦のレイアウトを用意する。
  2. 縦のレイアウトは20d(double型の20)分の間隔をあけてやる。
  3. 横のレイアウトに縦のレウアウトを追加

イメージは下の様な感じです。

でわでわ。。。