JavaFX はじめました! FXML 編

今日は FXML を使って JavaFX でお約束の Hello World を創っていきます。

JavaFX Scene Builder を使えば Android アプリをつくるようにできるらしいのですが

私は JavaFX Scene Builder を一度も使ったことないし、設定項目の多いプロパティもよく解らないので適当にやってみます。(ヲヒ

メニューバーから[ファイル]-[新規プロジェクト]を選択します。

そして今度はプロジェクトの項目は JavaFX FXML Application を選択し、[ 次> ] ボタンを押します。

1

 

FXML を使うので FXML 名を記入します。

そして [ 終了 ] ボタンを押します。

2

 

NetBeans IDE によって下図のようにプロジェクトが作成されます。

Hello.fxml

HelloController.java

HelloWorld4FXML.java

が作成されているのが確認できます。

3

 

HelloWorld4FXML.java

4

 

HelloController.java

5

 

Hello.fxml

6

 

それではこのまま動かしてみましょう。

7

 

Click Me! と書かれたボタンを押すと Hello World! とラベルに表示されます。

それと標準出力にも You clicked me! と出力されます。

8

 

GUI の設計は FXML でイベントコントロールは HelloController.java (コントロールクラス)で行ってますね。

さて、NetBeans IDE が自動生成してくれたコードを動かすだけでは面白くないので少し変更してみます。

GUI を少し変更したいので JavaFX Scene Builder を起動します。

Hello.fxml ファイルをダブルクリックするか、右クリックからのコンテキストメニューで [ 開く ] を選択します。

9

 

JavaFX Scene Builder が現在のプロジェクトの情報をもとに起動します。

10

 

右側にあるインスペクタで選択されたコンポーネントのプロパティを設定できるようです。

設定項目多すぎて解りません。(>_<。)

Java SE 8 がリリースされたら JavaFX のリファレンス本が出版されるだろうから詳細はそれ待ちってことにしよう。

今は直感的操作にたよります。

11

 

とりあえず、グリグリしてこんな具合にしてみました。(センスないなぁ・・・

11a

 

Hello.fxml はこのようになりました。

何やら赤いバッジがついてますが気にしない(ヲヒ

12

 

HelloController.java を次のように変更してボタンを押すたびに表示を変更するようにしてみました。

13

 

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

14

15

16

 

標準出力にも期待通りの出力がされました。

今回初めて JavaFX Scene Builder を使ったのですが複雑なハイテク技術満載の日本製家電製品を使いこなせない一般ユーザーの気持ちに似たものを感じました。

それぞれのコンポーネントのプロパティやエフェクト等を知らないと使いこなせないです!

やっぱり地道に情報収集して少しずつしっかり覚えていかなければいけないようです。

私の場合、ゆっくり楽しみながらがモットーなので面白くないと思った時点でストップして気が向いたら再開すればいいだけのことなので気楽です。

おそらく Java SE 8 がリリースされたらそれらの書籍とともに JavaFX の書籍も出版されるだろうし、

JavaFX Scene Builder を使って開発するのがスタンダードになるだろうからそれまでに予備知識として少しでも慣れておくことを目的としよう!(後ろ向き発言

cludia_2013_07_27_001

Hatena タグ: ,

JavaFX はじめました!

冷やし中華はじめました!

JavaFX はじめました!

と言っても Java SE 8 のコアライブラリとしての JavaFX 8 の日本語の情報がまだあまり見当たらないのでボチボチとはじめます。

とりあえずは JavaFX 2.x あたりの情報を参考にしていくことになります。

まず、JavaFX とは?

どす黒い黒歴史そのものです。

始まりから現在に至るまで無かったことにとか、まるっきり別物のような変貌を遂げてきた歴史があります。

まぁ、これは仕方の無いことと言えばそれまでなんでしょうが・・・

ここへきて、今までの悪行を水に流してもらおうと Java SE 8 のコアライブラリにしてしまえってのは流石ですね。

つまり、Java SE 8 からは安心して使えるよって解釈していいんだよね、きっと!

そういうことでボチボチとゆっくり慣れることにしようと思います。

それでは早速はじめることにしましょう。(^_^)

開発環境は

JDK™ 8 Early Access Releases

NetBeans IDE 開発版

Scene Builder 1.1 Developer Preview

を使っていきます。

それぞれが開発版という不安定なものを使うけど、Java SE 8 のリリースまでには半年以上もあるからトラブルも笑って楽しみましょう。(^_^;)

上記の開発環境のインストールが完了したら、NetBeans IDE の [ ツール ] → [ オプション ] メニューから Java を選択して JavaFX Scene Builder を統合させます。

 

a1

 

これで快適な GUI 設計が可能になるはずです。(まだ一度も試してませんけど・・。(^_^;)

今回は、JavaFX Scene Builder は使う予定はないので追々試してみたいと思います。

それでは、お約束の Hello World! を創りましょう!

メニューバーから[ファイル]-[新規プロジェクト]を選択します。

 

1

 

新規プロジェクトウィンドウが表示されるので、カテゴリ[JavaFX]、プロジェクト[JavaFXアプリケーション]を選択し [ 次 > ] ボタンをクリックします。

 

2

 

新規 JavaFX アプリケーションウィンドウが表示されますので下図を参考に必要項目を記入して [ 終了 ] ボタンを押してください。

 

3

 

NetBeans IDE がとても親切なコードで迎えてくれます。

これがウザいと思うなら、先ほどの新規 JavaFX アプリケーションウィンドウの アプリケーション・クラスの作成のチェックを外せば OK です。

 

4

 

このまま実行してみましょう。

真ん中にボタンが一つあるだけアプリが立ち上がりました。

 

5

 

押してみます。

 

8

 

標準出力に、Hello World! って出力されてます。

Swing とはイベント処理が少し違うようですが同じようなものですね。(矛盾した表現 (^_^;)

Java SE 8 では Lambda 式を使うことができます。

NetBeans IDE は、Lambda 式が使えるよって親切に教えてくれます。

せっかくだから素直に変更させていただきました。

 

9

 

すっきりしましたね。

でも、型も省略してほしかったよ。

 

10

 

仕方ないので手動で変更w

 

11

 

これが未来の Java のコードなんですね。

肝心のコードの説明は面倒なのと、まだ良く理解できてないのでパスということで・・・(>_<)

だいたいのことは解るけど、JavaFX を始めるにあたり参考にしているサイトの情報も古くなりつつあるので・・・

Java SE 8 がリリースされて、情報が安定してから学習し直せばいいやってのりでやってます。

ここまでは NetBeans IDE が創ってくれたコードなのでそれだけでは面白くないのでラベルの表示とボタンのイベント処理を変更してみました。

ソースコードは下記のように変更しました。

間違い等あるかもしれませんが、その時は優しくそって教えてくださいませ!


package jp.yucchi.hello.world;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author Yucchi
 */
public class HelloWorld extends Application {

    private int cnt;

    @Override
    public void start(Stage primaryStage) {

        StackPane root = new StackPane();
        VBox vbox = new VBox();
        root.getChildren().add(vbox);

        StackPane topPane = new StackPane();
        vbox.getChildren().add(topPane);
        Label label = new Label("JavaFX より愛をこめて!");
        topPane.getChildren().add(label);

        StackPane bottomPane = new StackPane();
        vbox.getChildren().add(bottomPane);
        Button btn = new Button();
        btn.setText("Say 'Hello World'");
        bottomPane.getChildren().add(btn);

        btn.setOnAction(event -> {
            cnt++;
            if ((cnt & 1) == 0) {
                label.setText("はろ~ わーるど! " + cnt);
            } else {
                label.setText("Hello, World! " + cnt);
            }
        });

        Scene scene = new Scene(root, 300, 250);

        primaryStage.setOpacity(0.7);
        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}


 

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

 

12

 

13

 

14

 

ウィンドウが薄くなっているのは何かの間違いでなく、

primaryStage.setOpacity(0.7);

と設定しているからです。

ラベルのテキスト文字の表示をボタンが押されるたびに変更とカウントをしました。

レイアウトが酷いとツッコミがあると思うけどこれは超面倒なコードを書くのが嫌なのでわざとです。

この問題を解決するのには、JavaFX Scene Builder を使えば従来の Swing アプリケーションを

NetBeans IDE で開発するようにポトペタと楽に実際の配置を眼で確認しながら構築できるようになるはずです。

今回は初めての JavaFX ということでちゃんと動いてめでたし、めでたし!

 

cludia_2013_07_26_001

Hatena タグ: ,