JavaFX はじめました! FXML 編

JavaFX NetBeans

今日は 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 タグ: ,

« »

Leave a Reply

* が付いている項目は、必須項目です!

次の HTML タグと属性を利用できます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*

Trackback URL