ついにベールを脱いだJavaFX

第4回 シェイプで遊ぶ

この記事を読むのに必要な時間:およそ 9 分

コードパレットを使用したコードの作成

スクリプトファイルを作成すると,自動的にエディタに表示されます。JavaFX Scriptファイルをエディタで表示すると,エディタの右側にコードパレットが表示されます。図15の赤い四角で囲まれた領域がコードパレットです。このコードバレットを使用することで,コードのひな形を作成してくれます。このため,比較的簡単にスクリプトを作成することができるのです。

図15 コードパレット

図15 コードパレット

コードパレットにはApplicationsやAction,Basic Shapesなどのカテゴリがあり,それぞれのカテゴリにいくつかの項目が含まれています。

では,実際にコードパレットを使用してみましょう。まずは,SwingのJFrameクラスに相当する,Stageクラスを使用してアプリケーションの大枠を作ってしまいましょう。StageはコードパレットのApplicationに含まれています。Stageをドラッグして,エディタの図16に示した箇所にドロップします。

図16 Stageをドラッグ&ドロップする

図16 Stageをドラッ

Stageをドロップすると,次のようなコードがエディタに表示されます。

リスト1 circlesample.fx

import javafx.stage.Stage;
import javafx.scene.Scene;
/*
 * circlesample.fx
 *
 * Created on 2008/12/06, 15:13:59
 */
 
  
 /**
 * @author sakuraba
 */
 
 // place your code here
Stage {
    title: "MyApp"
    scene: Scene {
        width: 200
        height: 200
        content: [  ]
    }
}

赤字で示した部分がStageをドロップしたことによるコードです。このコードはStageオブジェクトを生成し,titleアトリビュートに"MyApp",sceneアトリビュートに新たにSceneオブジェクトを生成して代入しています。Sceneオブジェクトは幅と高さが200ピクセル,contentアトリビュートは空のままです。

まずは,このスクリプトを実行してみましょう。先ほどと同じように,プロジェクト名を右クリックして表示されたポップアップメニューから[Run Project」を選択して実行します。ここでは,メインスクリプトファイルを設定していないので,メインスクリプトファイルを設定するためのダイアログが表示されます図17⁠。そこで,circlesample.fxを選択して[OK]をクリックすれば,実行されます。

このダイアログはメインスクリプトファイルを設定していない場合のみ表示されるので,2回目の実行からは表示されません。

図17 メインスクリプトファイルの選択

図17 メインスクリプトファイルの選択

通常の方法で起動するのでもかまわないのですが,エディタに表示されているスクリプトファイルを実行するだけであれば他の方法もあります。それはメニューバーの[実行]から[ファイルを実行]を選択するか,シフトキーを押しながらファンクションキーのF6を押す方法です。

スクリプトを実行した結果を図18に示しました。単に真っ白のウィンドウが表示されるだけです。

図18 circlesample.fxの実行結果

図18 circlesample.fxの実行結果

では,次に円を描画するコードを,コードパレットからドロップしましょう。円はコードパレットのBasic Shapesの中にあるCircleです。これをドラッグして,Sceneオブジェクトのcontentアトリビュートに代入している空のシーケンスの中にドロップします図19⁠。

図19 Circleのドラッグ&ドロップ

図19 Circleのドラッ

Circleをドロップすると,次のようなコードが生成されます(import文,コメントは省略しています⁠⁠。

リスト2

Stage {
    title: "MyApp"
    scene: Scene {
        width: 200
        height: 200
        content: [ Circle {
                centerX: 100, 
                centerY: 100
                radius: 40
                fill: Color.BLACK
} ]
    }
}

ちょっと見にくいので整形しましょう。コードの整形はエディタ部分を右クリックして表示されるポップアップメニューから[整形]を選択するか,Alt キーとShift キーとF キーを同時に押せばできます。しかし,整形能力はそれほど強力ではありません。とりあえず試してみて,思ったように整形されなければ,手作業で直すようにしましょう。

整形した結果を次に示します。

リスト3

Stage {
    title: "MyApp"
    scene: Scene {
        width: 200
        height: 200
        content: [ 
            Circle {
                centerX: 100, 
                centerY: 100
                radius: 40
                fill: Color.BLACK
            }
        ]
    }
}

円はjavafx.scene.shape.Circleクラスで表されます。Circleクラスのアトリビュートには中心位置を表すcenterXアトリビュートとcenterYアトリビュート,半径を表すradiusなどがあります。また,塗りつぶす色を指定するにはfillアトリビュート,円の線の色を指定するにはstrokeアトリビュートを指定します。

コードパレットで生成されるコードではcenterXとcenterYが100,半径が40になっています。fillとstrokeは色を表すjavafx.scene.paint.Colorクラスで指定します。Colorクラスには100種類を超える色がすでに定義されています。詳しくはAPIドキュメントをご覧ください。ここではfillに黒を表すColor.BLACKを指定しています。

では,このスクリプトを実行してみましょう。図20に実行結果を示します

図20 circlesample.fxの実行結果

図20 circlesample.fxの実行結果

著者プロフィール

櫻庭祐一(さくらばゆういち)

横河電機に勤務するかたわらJava in the Boxにて新しい技術を追い続けています。JavaOneは今年で11年目。名実共にJavaOneフリークと化しています。