FX

はじめての JavaFX アプリケーションの作成

この節では、アプリケーション開発者が JavaFX 1.2 テクノロジ用 NetBeans IDE 6.5.1 を使用して JavaFX アプリケーションをはじめて作成する方法について説明します。JavaFX 1.2 Production Suite の使用を開始する Web デザイナは、「Production Suite 入門」の記事を参照してください。

この節では、テキストが表示される単純な球を作成します。この球は、指定した時間間隔で不透明度が変化します。また、球をマウスでドラッグすることもできます。次の図にこのアプリケーションを示します。

1. JavaFX 1.2 ソフトウェア用 NetBeans IDE 6.5.1 がシステムにすでにインストールされていることを確認します。必要に応じて、「ダウンロードする必要があるもの」ページをふたたび参照します。
   
   
2. NetBeans IDE を起動します。
   
   
3. JavaFX Script アプリケーションプロジェクトを作成します。
   
   
   1. 「File」>「New Project」(Ctrl-Shift-N) を選択します。
      
      
   2. 新規プロジェクトウィザードで、「Categories」ペインの「JavaFX」と「Projects」ペインの「JavaFX Script Application」を選択します。「Next」をクリックします。
      
      
   3. 図 1 に示すように「Name and Location」ページで、「Project Name」に FirstJavaFXSphere と入力し、「Project Location」テキストフィールドで目的のプロジェクトファイルの場所を指定し、その他のすべてのデフォルト値を変更せずにそのままにしておきます。
      
      

      図 1: プロジェクトの名前と場所が指定された新規プロジェクトウィザード。

   4. 「Finish」をクリックします。
      
      図 2 に示すように、FirstJavaFXSphere プロジェクトが「Projects」ウィンドウと「Files」ウィンドウの両方で開き、Main.fx ファイルがソースエディタで開きます。
      
      

      図 2: 「Projects」ウィンドウで開かれた FirstJavaFXSphere プロジェクトとソースエディタで開かれた Main.fx ファイル。

      デフォルトでは、JavaFX Script コードは Main.fx ファイル内に含まれます。このコードには、いくつかのインポート文およびオブジェクトリテラル (Stage など) が含まれます。これらのオブジェクトリテラルは JavaFX アプリケーション内の主要概念を表します。次の表にオブジェクトリテラルを示します。
      
      

      表 1: デフォルトで作成されるオブジェクトリテラル

      オブジェクトリテラル	説明
      Stage	表示可能なすべての JavaFX オブジェクトを表示するために必要な最上位のコンテナウィンドウ。デフォルトのインスタンス変数である title、width、および height は、ウィンドウの上部枠内に表示されるテキストとウィンドウの高さおよび幅を定義します。scene 変数は、JavaFX オブジェクトを配置できる領域を設定する Scene オブジェクトリテラルのインスタンスを定義します。
      Scene	アプリケーションのグラフィックコンテンツの描画表面のようなものです。scene インスタンス変数は、JavaFX のグラフィック要素を保持するために使用する content 変数を含み、アプリケーションのグラフィックコンテンツを定義します。インスタンス変数の width と height は、コンテンツ領域の幅と高さを定義します。Scene クラスについては、「JavaFX を使用した GUI アプリケーションの構築」にある「グラフィカルシーンでの UI オブジェクトの表示」のレッスンを参照してください。
      テキスト	シーンにテキストを表示するためのグラフィック要素を定義します。
      Font	シーンにテキストを表示するために使用するフォントを定義します。

      ---

      注: 詳細は、「JavaFX Script プログラミング言語について」にある「オブジェクトの使用」のレッスンを参照してください。

      ---



4. 次の例に示すように Stage オブジェクトを変更して、ウィンドウにタイトルが表示されるようにします。Scene オブジェクトを変更して、コンテンツ領域のサイズとアプリケーションに表示するテキストの両方を指定します。また、TextAlignment クラスの import 文を追加する必要もあります。
   
   
   1. Stage および Scene オブジェクトリテラルを次のように変更します。太字の行をコピーしてエディタに貼り付けることができます。エラーフラグが表示されることに注意してください。このエラーは、次のステップで削除します。

Stage {
     title: "My First JavaFX Sphere"
     scene: Scene {
         width: 300
         height: 300
         content: [
             Text {
                font: Font { size: 22 }
                x: 20, y: 90
               textAlignment: TextAlignment.CENTER
               content:"Welcome to \nJavaFX  World"

             }  //Text
        ] // content
     } // Scene 

} // Stage

2. エディタで任意の空白を右クリックし、「Fix Imports」(Ctrl+Shift+I) を選択してエラーフラグを削除します。
   
   次の import 文が Main.fx ファイルの最初に追加されます。

import javafx.scene.text.TextAlignment;

5. 次の図に示すように、「Palette」ウィンドウの「Basic Shapes」セクションを展開し、「Circle」要素を Text コードブロックの上の行にドラッグして、球の作成に使用する基本的な Circle オブジェクトを定義します。
   
   

   図 3: 「Palette」ウィンドウからの「Circle」要素のドラッグ。

6. 円がテキストを表示するのに適切なサイズとなるように、円のインスタンス変数を変更します。また、新しい RadialGradient 設定を追加し、円に奥行きの深さを加えて円がより球に見えるようにします。
   
   
   1. 次のソースコードの太字部分を使用してソースファイルを変更します。fill 変数の閉じ角括弧と閉じ中括弧を含め、太字の行をコピーしてソースエディタに貼り付けることができます。

Stage {
    title: "My First JavaFX Sphere"
    width: 300
    height: 300

    scene: Scene {
        content: [
            Circle {
                centerX: 100, 
                centerY: 100
                radius: 90

                fill: RadialGradient {
                        centerX: 75
                        centerY: 75
                        radius: 90 
                        proportional: false
                        stops: [
                            Stop {
                            offset: 0.0
                            color: Color.web("#3B8DED")
                            },
                            Stop {
                            offset: 1.0
                            color:Color.web("#044EA4")
                            }
                        ] // stops
                } // RadialGradient

             } // Circle
             Text {
               font: Font { size: 22 }
               x: 20, y: 90
               textAlignment: TextAlignment.CENTER
               content:"Welcome to \nJavaFX  World"
             }  //Text
        ] // content
     } // Scene  
} // Stage

2. エディタで任意の空白を右クリックし、「Fix Imports」(Ctrl+Shift+I) を選択してエラーフラグを削除します。
   
   次に示す import 文が Main.fx ファイルの最初に追加されます。

import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;   

7. コードを保存 (Ctrl+S) して、エディタツールバーの「Enable Preview」ボタン をクリックしてプレビュー機能をオンにします。
   
   次の図に示すように、先ほど球に見えるように変更した円が「JavaFX Preview」ウィンドウに表示されます。プレビュー機能を使用すると、作成中の GUI デザインの保存されている状態を表示できます。
   
   

   図 4: 「JavaFX Preview」ウィンドウに表示された球



8. デフォルトでは、テキストは黒です。次の例に示すように、fill 変数を使用してテキストの色を白に変更できます。
   

Text {
    font: Font { size: 22 }
    x: 20, y: 90
    textAlignment: TextAlignment.CENTER
    content:"Welcome to \nJavaFX  World"
    fill: Color.WHITE
}

9. 球の不透明度を変化させるアニメーションを追加します。
   
   
   1. opacity 変数を追加し、その初期値を 1.0 に設定します。
      
      
   この変数は、あとのステップで作成するタイムラインアニメーションで使用します。
   
   

var opacity = 1.0; 

Stage {
    title: "My First JavaFX Sphere"
    width: 300
    height: 300
    

2. 次のコーディング例に示すように、opacity インスタンス変数を Circle オブジェクトに追加し、このインスタンス変数を opacity 大域変数にバインドします。
   
   

Circle {
    centerX: 100, centerY: 100
    radius: 90
    opacity: bind opacity
    fill: RadialGradient {
        centerX: 75
        centerY: 75
        radius: 90
        proportional: false
        stops: [
            Stop {
                offset: 0.0
                color: Color.web("#3B8DED")
            },
            Stop {
                offset: 1.0
                color:Color.web("#044EA4")
            }
        ] // stops
    } // RadialGradient
}

3. 次の図に示すように、「Palette」ウィンドウの「Animation」セクションを展開して「Timeline」を選択し、「Timeline」要素を Stage コードブロックの真上の行にドラッグします。
   
   

   図 5: パレットからソースエディタへの「Timeline」要素のドラッグ。

   アニメーションは、javafx.animation.Timeline オブジェクトによって表された、タイムラインに沿って現れます。各タイムラインには、javafx.animation.KeyFrame オブジェクトによって表された、1 つ以上のキーフレームが含まれます。アニメーションについては、「JavaFX を使用した GUI アプリケーションの構築」にある「動画オブジェクトの作成」のレッスンを参照してください。


4. Timeline オブジェクトリテラルが次のように表示されるように、time インスタンス変数の値を 1s から 5s に変更します。

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 5s
            canSkip: true

        } // KeyFrame
    ] // keyFrames
} // Timeline

このタイムラインは、5 秒間隔で無期限に繰り返されます。この 5 秒という time インスタンス変数の値は、キーフレーム内の値が Timeline オブジェクトの単一サイクルで設定される経過時間を定義します。このチュートリアルの次のいくつかのステップでは、設定されるそれらの値を定義します。


5. 「Animation」の「Values」要素を、パレットから canSkip 変数の直後の行にドラッグします。
   
   

   図 6: パレットからソースエディタへの「Values」要素のドラッグ。

   Values は、ターゲット変数のリストと、KeyFrame の指定された時間にターゲット変数が補間するべき目的の値を定義します。
   
   
6. 次のソースコードの太字で示される行をコピーしてソースエディタに貼り付け、values インスタンスを変更します。このコードを実行すると、球の不透明度が変化します。

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 5s
            canSkip: true
            values : [
               opacity => 0.2 tween Interpolator.LINEAR  
            ] // values
        } // KeyFrame
    ] // keyFrames
} // Timeline
 

opacity 変数の目的の値は、キーフレームの 5 秒間隔内で定義されます。=> 演算子は、キー補間値またはオブジェクトプロパティーのリストを表すのに役立つリテラルコンストラクタ (特殊な表記) です。

この例の場合、tween 演算子を使用して、1.0 から 0.2 の不透明度の補間値を生成し、球の不透明度を段階的に変化させます。Interpolator.LINEAR は、線形時間補間を行う組み込み補間インスタンスです。

7. 別の KeyFrame インスタンスを追加して、次の 5 秒間で不透明度が 0.2 から 1.0 に段階的に変化するように設定します。

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 5s
            canSkip: true
            values : [
               opacity => 0.2 tween Interpolator.LINEAR
            ] // values
        } // KeyFrame
        KeyFrame {
            time : 10s
            canSkip: true
            values : [
               opacity => 1.0 tween Interpolator.LINEAR
            ] // values
        } // KeyFrame
    ] // keyFrames
} // Timeline

8. 次の例の太字部分で示すように、Timeline オブジェクトの宣言の末尾に .play(); を追加します。
   
   play() メソッドは、定義に基づいてタイムラインを再生します。完了した Timeline オブジェクトを次の例に示します。

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames : [
        KeyFrame {
            time : 5s
            canSkip : true
            values : [
            opacity => 0.2 tween Interpolator.LINEAR
            ]//values
        }//KeyFrame
        KeyFrame {
            time : 10s
            canSkip : true
            values : [
            opacity => 1.0 tween Interpolator.LINEAR
            ]//values
        }//KeyFrame
    ]
}.play(); //Timeline

10. テキストが表示される球にドラッグ動作を追加します。
    
    アプリケーションのグラフィックオブジェクトの位置は、絶対座標を使用して指定します。ドラッグ動作を設定するには、オブジェクトの座標がマウスポインタの位置によって決まるようにコードを変更するようにしてください。
    
    また、球とともに RadialGradient 設定とテキストの両方がドラッグされるようにしてください。同様の動作を複数のオブジェクトに設定する必要がある場合、これらのオブジェクトをグループ化してグループ全体にこの動作を実装することをお勧めします。
    
    
1. 変数 x および y を追加し、それらの初期値を 100.0 に設定します。
   
   これらの値は、Circle オブジェクトの位置をマウスポインタの位置にバインドするために使用します。

var opacity = 1.0;
var x = 100.0;
var y = 100.0;

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [

2. 次のコーディング例に示すように、Circle オブジェクトの位置を変数 x および y にバインドします。
   
   centerX および centerY 変数の代わりに、この Circle ノードオブジェクトの変換後座標に追加される X および Y 座標の移動量を定義する、translateX および translateY 変数を使用します。このコードを使用すると、円とともに放射線状グラデーションの塗り潰しもドラッグされるようになります。

scene: Scene {
    content: [
       Circle {
           translateX: bind x
           translateY: bind y

           radius: 90

3. RadialGradient 設定の中心点の座標を変更します。centerX 座標の新しい値を得るには、centerX の初期値である 75 から translateX の現在の値である 100 を減算します。したがって、-25 という値が得られます。同様の計算を centerY 座標にも行います。

fill: RadialGradient {
    centerX: -25
    centerY: -25
    radius: 90
    

4. エディタで任意の空白を右クリックし、「Fix Imports」(Ctrl+Shift+I) を選択してエラーフラグを削除します。Translate クラスのインポートを修正するには、javafx.transform.Translate を選択します。
   
   
5. Text オブジェクトの座標を指定する x および y 変数を削除します。次の例に示すように、Translate 変換を追加して、Translate オブジェクトの x および y 変数を大域変数 x および y にバインドします。

Text {
    font: Font { size: 22 }
    textAlignment: TextAlignment.CENTER
    content:"Welcome to \nJavaFX  World"
    fill: Color.WHITE
    transforms: [
        Translate{
            x: bind x - 76
            y: bind y - 10
        }
    ]
}

コードを保存して、変更したアプリケーションが同じように表示されるかどうかを「JavaFX Preview」ウィンドウで確認します。


6. 次の例に示すように、scene の content 変数を変更して、Circle および Text オブジェクトをグループ化します。

scene: Scene {
    width: 300
    height: 300
    content: Group {
        content: [
            Circle {
                translateX: bind x
                translateY: bind y
                radius: 90
                opacity: bind opacity
                fill: RadialGradient {
                    centerX: -25
                    centerY: -25
                    radius: 90
                    proportional: false
                    stops: [
                        Stop {
                            offset: 0.0
                            color: Color.web("#3B8DED")
                        },
                        Stop {
                            offset: 1.0
                            color:Color.web("#044EA4")
                        }
                    ] // stops
                 } // RadialGradient
              }//Circle

             Text {
                 font: Font { size: 22 }
                 textAlignment: TextAlignment.CENTER
                 content:"Welcome to \nJavaFX  World"
                 fill: Color.WHITE
                 transforms: [
                     Translate{
                         x: bind x - 76
                         y: bind y - 10
                     }
                 ]
             }  //Text
        ] // content
    } //Group
} // Scene

7. エディタで任意の空白を右クリックし、「Fix Imports」(Ctrl+Shift+I) を選択してエラーフラグを削除します。Group クラスのインポートを修正するには、javafx.scene.Group を選択します。
   
   
8. 「Action」の「onMouseDragged」要素を、パレットから Group オブジェクトの閉じ中括弧の直前にある行にドラッグします。

図 7: パレットからソースエディタへの「onMouseDragged」要素のドラッグ。

9. 次のソースコードの太字で示される行をコピーしてソースエディタに貼り付け、マウスドラッグイベントが発生した場合に呼び出される関数を定義します。

onMouseDragged: function( e: MouseEvent ):Void {
x = e.x;
y = e.y;
}

11. コードを保存して、プロジェクトを実行します。
    
    
    1. 「Projects」ウィンドウで FirstJavaFXSphere プロジェクトのノードを右クリックし、「Run Project」を選択します。
       
       IDE によってプロジェクトがコンパイルされ、標準実行モデルを使用してアプリケーションを実行するために必要なファイルが準備されます。プロジェクトのコンパイルが正常に完了すると、不透明度が変化する球が表示されます。
       
       
    2. マウスポインタで球をドラッグします。この時点では、アプリケーションウィンドウの境界の外に球をドラッグできます。次のステップでは、ドラッグ動作を改良して球が見えなくならないようにします。

12. 球のドラッグを制限するための計算に使用する大域変数 X および Y を追加します。
    

var x = 100.0;
var y = 100.0;
var X;
var Y;

1. 「Action」の「onMousePressed」要素を、パレットから onMouseDragged 関数の直前の行にドラッグします。
   
   
2. 次のソースコードの太字で示される行をコピーしてソースエディタに貼り付けて、マウスプレスイベントが発生した場合に呼び出される関数を定義します。

onMousePressed: function( e: MouseEvent ):Void {
    X = e.sceneX - e.node.translateX;
    Y = e.sceneY - e.node.translateY
}

3. ここで、e.sceneX は、マウスイベント e が発生した点の X 座標を示し、e.node.translateX は、マウスイベント e が発生したノードの左上の点の X 座標を示します。
4. 次のソースコードの太字で示される行をコピーしてソースエディタに貼り付けて、onMouseDragged 関数を変更します。

onMouseDragged: function( e: MouseEvent ):Void {
   if (e.sceneX - X <0) {
        e.node.translateX = 0;
    } else { if (e.sceneX - X > 280 - e.node.boundsInLocal.width){
           e.node.translateX = 280 - e.node.boundsInLocal.width;
    } else {
           e.node.translateX = e.sceneX - X;
    }
    }
    if (e.sceneY - Y <0) {
        e.node.translateY = 0;
    } else {if (e.sceneY - Y > 280 - e.node.boundsInLocal.height){
           e.node.translateY = 280 - e.node.boundsInLocal.height;
    } else{
         e.node.translateY = e.sceneY - Y;
    }
    }
}

13. コードを保存して、プロジェクトを実行します。
    
    これで、シーンの境界の外に球をドラッグできないようになりました。

お疲れさまでした。はじめての JavaFX アプリケーションの作成が完了しました。

同じコードをモバイルエミュレータで実行する方法を理解するには「モバイルエミュレータでの JavaFX アプリケーションの実行」、JavaFX Script 言語について理解を深めることができるサンプルについては「JavaFX サンプルの使用」、更なるリソースについては「JavaFX の詳細」ページをそれぞれ参照してください。