ホーム » マルチプラットフォーム RIA 比較

Hello, world! - JavaFX Script 版

投稿者: attowave　日付: 木, 2007-12-06 06:45 

JavaFX Script を使用して、ベクタグラフィックスによる「Hello, world!」を作成します。

「Hello, world!」には 2通りのグラデーションをかけます。 これを「TabbedPane（タブペイン）」コンポーネントを使用して切り替え表示できるようにします。

開発環境として、Java 6 Update 3 がインストールされていることを前提としています。 JavaFX Script を使用するには、OpenJFX をインストールする必要がありますが、 これについては本稿の中で扱います。

当初は、Webページ上で動かせるように、Applet として作成することを考えていましたが、 現時点（2007年12月現在）で手軽に実現する方法を見つけることが出来なかったため、 デスクトップバージョンを作成することにします。 以下に、デスクトップでの実行イメージを掲載しておきます。

実行イメージ

OpenJFX のインストール

OpenJFX のインストールは、 ダウンロード した ZIPファイルを展開するだけです。 以下では、展開先として /usr/local/openjfx を指定しています。 展開先の下に trunk/lib ディレクトリが作成されて、その中に JARファイルがあることを確認しておきます。 

# pwd
/usr/local

# ls -l openjfx*zip
-rw-rw-r-- 1 root root 9746525 2007-12-06 01:36 openjfx-20070506220507.zip

# unzip -q openjfx-20070506220507.zip -d /usr/local/openjfx

# ls -la /usr/local/openjfx/trunk/lib
合計 2324
drwxr-xr-x 2 root root    4096 2007-05-08 01:37 .
drwxr-xr-x 8 root root    4096 2007-05-08 01:37 ..
-rw-r--r-- 1 root root  268145 2007-05-08 01:36 Filters.jar
-rw-r--r-- 1 root root 1942243 2007-05-08 01:36 javafxrt.jar
-rw-r--r-- 1 root root  142368 2007-05-08 01:36 swing-layout.jar

作成と実行

作成

適当なテキストエディタを使用して、hello.fx を作成します。

hello.fx 
import javafx.ui.*;
import javafx.ui.canvas.*;

var hello_h = Canvas {
    content: [
        Rect {
            x: 3, y: 3, width: 340, height: 90
            arcWidth: 20, arcHeight: 20
            strokeWidth: 5, stroke: black, fill: slateblue
        },
        Text {
            x: 30, y: 30
            content: "Hello, world!"
            font: Font {
                faceName: "Georgia"
                style: [ BOLD, ITALIC ]
                size: 40
            }
            fill: LinearGradient {
                x1: 0, y1: 0, x2: 1, y2: 0
                stops: [
                    Stop { offset: 0.1, color: darkorange },
                    Stop { offset: 0.9, color: yellow }
                ]
            }
        }
    ]
};

var hello_v = Canvas {
    content: [
        Rect {
            x: 3, y: 3, width: 340, height: 90
            arcWidth: 20, arcHeight: 20
            strokeWidth: 5, stroke: black, fill: slateblue
        },
        Text {
            x: 30, y: 30
            content: "Hello, world!"
            font: Font {
                faceName: "Georgia"
                style: [ BOLD, ITALIC ]
                size: 40
            }
            fill: LinearGradient {
                x1: 0, y1: 0, x2: 0, y2: 1
                stops: [
                    Stop { offset: 0.1, color: darkorange },
                    Stop { offset: 0.9, color: yellow }
                ]
            }
        }
    ]
};

Frame {
    title: "Hello, world!"
    content: TabbedPane {
        tabs: [
            Tab {
                title: "Hrizontal"
                content: hello_h
            },
            Tab {
                title: "Veritical"
                content: hello_v
            }
        ]
    }
    visible: true
}

実行

まずは、Java のバージョンが 1.6.0_03 (Java 6 Update 3) であることを確認します。 次に、上で作成した hello.fx を実行しますが、それには java のパラメータとして次の3つを指定します。

  • クラスパス(-cp)として、先にインストールした OpenJFX の JARファイルのパス
  • JavaFX Script の実行環境として、net.java.javafx.FXShell
  • 実行するスクリプトそのものとして、hello（.fx を指定しないことに注意）

$ java -version
java version "1.6.0_03"
Java(TM) SE Runtime Environment (build 1.6.0_03-b05)
Java HotSpot(TM) Server VM (build 1.6.0_03-b05, mixed mode)

$ java -cp .:/usr/local/openjfx/trunk/lib/* net.java.javafx.FXShell hello
compile thread: Thread[AWT-EventQueue-0,6,main]
compile 1.319
init: 0.39

compile, init が終了した後、実行イメージに掲載した画面が表示されることを確認します。

雑感

  • 2つの「Hello, world!」をコピー＆ペーストにより作成しています。 この点は、折角のスクリプトの良さが活かされていません。
  • スクリプトの実行の度にコンパイルされるのは辛いので、OpenJFX Compiler を試してみました。 しかし、GUI 関連をコンパイルしてくれないので、使用を断念しました。 OpenJFX Compiler Project は、極めて初期段階にあります。
  • 早いところ、OpenJFX が Java 本体にマージされてくれないと、使い勝手が悪いです。 Applet と一緒に OpenJFX も配布するなんて考えたくないですから。
  • 本格的なアプリケーションを作るとなると、JavaFX Script だけでは力不足で、Java のコードも書かなければなりません。 Java はまぁ良いとしても、Swing なども学習するということになったら負担が大きいだろうなぁ、、、

更新履歴

日付 内容
2007-12-11 追加TabbedPane による表示の切り替え
2007-12-06 初版
‹ Hello, world! - Adobe Flex 版上位Hello, world! - Silverlight 版 ›
»