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("チュートリアル1");
        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

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

でわでわ。。。

投稿者:

takunoji

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

コメントを残す