jacksparrow

昨年の
12 月、 JavaFX 1.0
リリースのお知らせ記事を書いて、サンプルプロジェクトの開き方から放置状態となってしまっていました・・・σ(^_^;)ｱｾ　そろそろ本腰入れて勉強しようと
重い腰を上げようと思い立ったので、今回は、 NetBeans 6.5 の JavaFX
プラグイン機能を使って、アプリケーションの作成方法など執筆して行きたいと思います。

NetBeans6.5 を起動し、"ファイル"→"新規プロジェクト"の順にクリックして、新規プロジェクト作成ウィンドウを表示します。



"カテゴリ"が表示されているペインにて、 "JavaFX" をドラッグして"次へ"をクリックします。



"Project Name" には、任意の名称を入力して"完了"をクリックします。（プロジェクト名の入力は省略可。）



デフォルトの状態で、"完了"をクリックした場合、"ソースパッケージ"には、プロジェクト名と同じパッケージが存在し、その配下に "Main.fx" と言うファイルが出現します。



早速 "Main.fx" を見てみます。以下のコードを参照ください。 :
package myfx;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

Stage {
　　title: "Application title"
　　width: 250
　　height: 80
　　scene: Scene {
　　　　content: Text {
　　　　　　font : Font {
　　　　　　　　size : 24
　　　　　　}
　　　　　　x: 10, y: 30
　　　　　　content: "Application content"
　　　　}
　　}
}

上記コードは、新規プロジェクト作成時に、デフォルトで自動生成されたコードです。上から "title" , "width" , "height" , "scene" と言う要素があり、 "scene" には、更にネストされた要素がありますね。まずはネストされていない要素から、説明したいと思います。

"titile" は読んで字のごとくで、 Window 左上に表示するタイトルになります。"width" はこのアプリケーションが表示する Window の幅、 "height" はその高さで、それぞれピクセル値で指定します。そして nest された要素を保管している "scene" と言う要素があります。この部分が、このアプリケーションの画面に表示する内容になります。

コード中、 "scene: Scene" と表記され、その下に "content: Text" と記述されてますね。これは、パネルの中に表示しるコンテンツが、テキストであると言う宣言をしています。

そしてこのテキストコンテンツの内容について、記述されています。 "font: Font" では、 nest された要素 "size"
によって、表示する文字のサイズを宣言しています。 "font" のすぐ下の "x: 10, y: 30" と記述されている部分、これは、このコンテンツの表示開始場所を表しています。テキスト全体の左上を指し、 "x" と "y" は、それぞれ世横方向、縦方向を、ピクセル値によって宣言しています。最後に "content:" 、これは、このアプリケーションが画面に表示するテキストコンテンツを宣言しています。

では動かしてみましょう。 "Main.fx" を右クリックして"ファイルを実行"をクリックし、アアプエリケーションを起動します。結果は以下のとおりです。



Window のタイトルには、"Application title" が、 Window の中には、 "Application content"
が表示されていますね。
ここで特筆すべきは、 Window の rendering には、今まで Swing などで表現できなかった構造の宣言を、 JavaFX
では実現していると言うこと。もしこれを Swing
等で実装しようとした場合、ものすごいコード量になることは、経験ある方ならもうお分かり頂けているものと思います。これが、 JavaFX
の最大の武器とも言えるのではないかと私は考えています。

Window 表示に関する宣言文は、あたかも JavaScript の json のような、構造表現で出来て、処理実装に関しては、 Java のコードがそのまま実装できると言うこと、これにより、コードの複雑性を排除し、 Java
でのリッチクライアントアプリケーションの、開発生産性が、大幅に向上したものと捉えれられますね。

では次に、テンプレートで生成された Main.fx ファイルに手を加えて言ってみましょう。まずは Window
幅と高さを、それぞれ２倍の大きさにします。



広くなった Window に、テキストボックスとボタンをつけてみましょう。まず最初に、コードの一部を以下のように書き換えます。

content: [
　　Text {
　　　　font: Font {
　　　　　　size: 24
　　　　}
　　　　x: 10,
　　　　y: 30
　　　　content: "Application content"
　　},

]※ content: を配列要素として宣言し、その中に宣言する各コンポーネントについても、配列に一要素と宣言するので {} の後ろに "," を追記します。

次に、テキストボックスとボタンを追加していきます。テキストボックスとボタンには、それぞれ、 Swing コンポーネントにある TextField と "Button" を使用します。 NetBeans のウィンドウ右側にあるパレットからソースエディターへ、今回使用するコンポーネントをそれぞれ、ドラッグアンドドロップします。まずは TextField を追加・・・



ドラッグアンドドロップで、展開されたコードは以下のとおり :

content: [
　　Text {
　　　　font: Font {
　　　　　　size: 24
　　　　}
　　　　x: 10,
　　　　y: 30
　　　　content: "Application content"
　　},
　　SwingTextField {
　　　　columns: 10
　　　　text: "TextField"
　　　　editable: true
　　}
]
ではここで、一旦実行してみましょう。



先ほど表示していた文字の上に、テキストボックスが重なってしまいました。何故これが起きたかと言うと、各コンポーネントの表示位置は、宣言した順序に依存することが無いことと、表示位置の指定をしなかった場合、デフォルトでの x , y それぞれの座標値は "0" になっているからです。この為、画面をデザインする際には、各コンポーネントが重ならないように、表示位置座標を指定してやる必要があります。以下のように、コードを修正します。 :

content: [
　　Text {
　　　　font: Font {
　　　　　　size: 24
　　　　}
　　　　x: 10,
　　　　y: 30
　　　　content: "Application content"
　　},
　　SwingTextField {
　　　　columns: 10
　　　　text: "TextField"
　　　　editable: true
　　　　translateX: 10
　　　　translateY: 70
　　}
]
実行結果は、以下のとおりです。



同じ様にして、今度はボタンコンポーネントへドラッグアンドドロップし、コードを展開します。展開され、表示位置のコード実装した例は、以下のとおり :

content: [
　　Text {
　　　　font: Font {
　　　　　　size: 24
　　　　}
　　　　x: 10,
　　　　y: 30
　　　　content: "Application content"
　　},
　　SwingTextField {
　　　　columns: 10
　　　　text: "TextField"
　　　　editable: true
　　　　translateX: 10
　　　　translateY: 70
　　},
　　SwingButton {
　　　　text: "Button"
　　　　translateX: 150
　　　　translateY: 70
　　　　action: function() {
　　　　
　　　　}
　　}
]
そして実行結果は以下のとおりです。



如何でしたでしょうか？ Swing で、アプリケーションを開発していた方々からすると、かなり楽にコードを記述できると言った印象を持たれた方、少なくないと思います。皆さんのアプリケーション開発にも、是非活用してみてください。

さて次回は、ボタンアクションなどによって、表示内容を変えたりする機能の実装をして行きたいと思います。