カテゴリー: Tutorial JavaFX

JavaFXのチュートリアルをやります。OracleDocs

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を２つ作成し、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++環境〜EclipseにCDTをインストール〜
  3. Setup OpenGL with Java〜JOGLを使う準備 for Eclipse〜
  4. Eclipse Meven 開発手順〜プロジェクトの作成〜
  5. Java OpenCV 環境セットアップ(on Mac)
  6. Eclipse SceneBuilderを追加する
  7. JavaFX SceneBuilder 〜EclipseとSceneBuilder連携~

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 Git〜Gitリポジトリからクローン〜

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

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

// トグルグループ
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) -> { ... }

引数が３つあります。「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("チュートリアル１");
        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();
}

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

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

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

    /* トグル・グループの追加
     * トグルが設定されているラジオボタンは
     * １つのグループとして扱われる
     */
    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. 横のレイアウトに縦のレウアウトを追加

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

でわでわ。。。

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

イントロダクション

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

今回は、ボタンの表示をやります。

チュートリアル

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

＜チュートリアル＞

JavaFXを使用して作成した画面の再生リストです。サンプル動画が複数あるので、参考にどうぞ。

基本のコード

public class Lv2_Button extends Application {

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

        // Fontを使用する方法
        Label label1 = new Label();
        label1.setFont(new Font("Aeial", 30));
        label1.setText("Text1");
        label1.setTranslateX(60);
        label1.setTranslateY(60);

        // 回転させる
        label1.setRotate(-45.0);

        // ボタンを追加する
        Button btn = new Button();

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

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

このコードの実行結果

ちょっとわかりずらいけど、左端にボタンがあります。ボタンかどうかも怪しい感じです。ボタンだとわかるようにします。下の様にコードを修正します。

// ボタンを追加する
Button btn = new Button("ボタン");

ボタンが表示されました。しかし位置が悪い。。。

ソースを以下の様に追加修正します。

// ボタンを追加する
Button btn = new Button("ボタン");
btn.setLayoutX(100.0);
btn.setLayoutY(120.0);

やっぱりなんか微妙だけどまぁよし！ボタンを作成した(new Button())の行の下にあるコードは、Labelクラスでも使用したメソッドと同じ名前です。「setLayout?()」？の部分に「X」「Y」が入りそれぞれの位置を指定します。

アイコンの追加

さらにコードを修正します。

// イメージファイルの読み込み
Image img = new Image(
    this.getClass().getResourceAsStream("check.png"));
btn.setGraphic(new ImageView(img));

コードが長くなってしまった場合は、上の様にインデントをつけて(コードの開始位置をずらして)次の行にコードを書きます。そして、Imageクラスのインスタンス化(new Image())の部分はこのクラスのあるディレクトリ(フォルダ)と同じ場所にあるcheck.pngファイルを読み込んでいます。起動しているのは「Lv2_Button」クラスです。

そして、ボタンにイメージを追加しています。btn.setGraphic(new ImageView(img));これはImageViewクラスはNodeクラスを継承している(親子関係があるけど、Imageクラスにはないのでbtn.setGraphic(Node);の形位に遭わないためこの様に処理をしています。詳しくはJavaDocを参照されたし。。。

追伸：ButtonクラスはNodeクラスを継承しているので「setGraphic()」はNodeクラスのメソッドですがButtonクラスでも使用できます。この部分はおいおい理解していきましょう。

そして実行結果、よくみるとアイコンに余計な部分も入っています。元になるcheck.pngファイルをちゃんと加工していないのでこの様になります。

アクションの割り当て

アクション→ボタンを押下した時の処理を実装します。追加するコードは以下の様になります。

// アクションの追加
btn.setOnAction(event -> {
    label1.setRotate(label1.getRotate() + 15.0);
});

https://youtu.be/wa1vSVXjn5k

チュートリアルにはスタイルの指定もありましたが、ちょいと飛ばしてしまおうと思います。。。

でわでわ。。。

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

イントロダクション

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

初心者向けというのもあり、以下の手順で進めやすいように作ったつもりです。

  1. 基本のコードを写経(書き写すこと)する
  2. 写経したコードを動かす
  3. XXXを修正してXXXする
  4. 起動確認
  5. ソースの意味を理解

こんな感じで進めると分かりやすいと思います。

前回はラベルを表示しました。そして今回もラベルを表示します。ただし

回転したり大きくしたりします

チュートリアル

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

＜Oracleのチュートリアル＞

基本のコード

public class Lv1_Label2 extends Application {
    /**
    * このメソッドは、Applicationクラス(JavaFXのフレームワーク部品)
    * のメソッドをオーバーライドする。
    * {@link Application#launch(String...)}から呼び出される。
    */
    @Override
    public void start(Stage primaryStage) throws Exception {
        // チュートリアルには省略されている部分
        Group group = new Group();
        // この部分がチュートリアルに記載されている。
        // Fontを使用する方法
        Label label1 = new Label();
        label1.setFont(new Font("Aeial", 30));
        label1.setText("Text1");
        group.getChildren().add(label1);
        // チュートリアルでは省略されている
        Scene scene = new Scene(group, 300, 300);
        primaryStage.setScene(scene);
        primaryStage.setTitle("チュートリアル１");
        primaryStage.show();
    }
    /**
    * メインメソッド。
    * Apllicationクラスのlaunchメソッドを呼び出す。
    *
    * @param args プログラム引数
    */
    public static void main(String[] args) {
        launch(args);
    }
}

これだけで起動すると下のように表示されます。

そして上のコードに３行追加します。

// 位置を指定する
label1.setTranslateX(60);
label1.setTranslateY(60);
// 回転させる
label1.setRotate(45.0);

すると下のように表示されます。

setTranslateX(表示するX座標)とsetTranslateY(表示するY座標)を指定することでテキストの表示する位置を変更します。

表示する画面の左上の端が(0, 0)になります。なのでテキストの中心位置が(60, 60) かつ、角度が４５度下に下がった状態で画面上に表示されています。

試しに「45」を「-45」に変更してみます。

上のようになりました。そのほかにもいじってみると表示結果が変わります。

大きくする

基本のコードに下の行を追加します。

label1.setScaleX(1.5);
label1.setScaleY(1.5);

実行結果はこんな感じです。

ラベルが見切れてしまいました。なので下のコードでテキストの位置をずらします。

label1.setLayoutX(20.0); // Xを20右に移動
label1.setLayoutY(30.0); // Yを３０下に下げる

とりあえず今回は、ここで終わりにします。

でわでわ。。。

[＜＜＜前回](https://zenryokuservice.com/wp/2019/03/03/javafx-%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%80%9c%e4%bb%8a%e5%ba%a6%e3%81%93%e3%81%9d%e3%80%81%e5%88%9d%e3%82%81%e3%81%a6%e3%81%a7%e3%82%82%e5%a4%a7%e4%b8%88%e5%a4%ab/)　[次回＞＞＞](https://zenryokuservice.com/wp/2019/03/05/javafx-%e3%83%81%e3%83%a5%e3%83%bc%e3%83%88%e3%83%aa%e3%82%a2%e3%83%ab%e3%80%9c%e4%bb%8a%e5%ba%a6%e3%81%93%e3%81%9d%e3%80%81%e5%88%9d%e3%82%81%e3%81%a6%e3%81%a7%e3%82%82%e5%a4%a7%e4%b8%88%e5%a4%ab3/)