JavaFXでデスクトップを遊ぶ「WidgetFX」


JavaFX+NetBeansでWidgetFXアプリを作るには


JavaFXでデスクトップを遊ぶ「WidgetFX」(後編)

小林 秀樹
2009/11/19

今回の主な内容

WidgetFXの開発環境を整えよう
NetBeansで作るJavaFXアプリの初歩
JavaFXアプリをWidgetFXウィジェットにする

作ったWidgetFXを動かしてみよう

キッチン・タイマ・ウィジェットもあるよ
自分で作ったウィジェットを公開するには
コラム 「良いウィジェットを作るコツ」
WidgetFXがビジネスチャンスに?

 前編の「Java Storeや携帯でも使われる? WidgetFXとは」では、JavaFX Scriptで開発されたデスクトップ・ウィジェット・プラットフォーム「WidgetFX」の概要や使い方、将来について紹介しました。

 今回は、ウィジェットの簡単な作り方を紹介するので、ぜひ読者の皆さんも一緒に作ってみてください。

WidgetFXの開発環境を整えよう


Java SE 6 Update 17

 WidgetFXのウィジェットを作るには、前回の「なにはともあれ、WidgetFXを試してみよう」でも説明した、Java SE 6 Update 10以上のJavaが必要です。2009年11月時点の最新バージョンはJava SE 6 Update 17です。まだ入手していない方は、こちらからダウンロードしてインストールしてください。

JavaFX SDK 1.2+NetBeans IDE 6.7.1

 WidgetFXは、JavaFX Scriptで開発するので、JavaFXのSDKも必要です。また、開発とデバッグを簡単・便利にしてくれるIDEもあった方がよいです。

 本稿では、JavaFX SDKとJavaFXプラグインが元から組み込まれた「NetBeans IDE 6.7.1 for JavaFX 1.2」を使用します。NetBeans IDE 6.7.1 for JavaFX 1.2は、JavaFXのWebサイトから入手できます。

図1 WidgetFXの使用例
図1 右上のオレンジ色のボタンをクリックしてNetBeans IDE 6.7.1 for JavaFX 1.2を入手する

 NetBeans IDE 6.7.1のシステム要件などを確認し、ダウンロードしたファイルをダブル・クリックして、インストーラの指示に従えばインストールは完了します。

WidgetFX SDK 1.2.1

 最後の1つ、WidgetFXのSDKを入手しましょう。WidgetFX SDKは、ダウンロードサイトから入手できます。2009年9月の原稿執筆時点のWidgetFXの最新バージョンは1.2.1です。WidgetFX SDK 1.2.1.zipを選択してダウンロードし、適当な場所に解凍してください。

 解凍したら「lib」フォルダにWidgetFX-API.jar、jnlp.jar、JFXtras-0.5.jarが入っています。ウィジェットの開発には、これら3つのJARファイルが必要となります。

NetBeansで作るJavaFXアプリの初歩

 最初に、とても簡単な「Hello, World」ウィジェットを作成しましょう。

JavaFX Scriptプロジェクトの作成

 まずは、NetBeansを起動します。起動したら、メニューから[ファイル]→[新規プロジェクト]を選択します。[新規プロジェクト]ダイアログのカテゴリのリストから[JavaFX]を選択し、右に表示されるプロジェクトから[JavaFX Script アプリケーション]を選択して、[次へ]ボタンを押します。

図2 [新規プロジェクト]ダイアログで[JavaFX Script アプリケーション]を選択
図2 [新規プロジェクト]ダイアログで[JavaFX Script アプリケーション]を選択

 [プロジェクト名]は、「HelloWorldWidget」としました。プロジェクトの場所は、好みの場所に設定してください。それから、[空のプロジェクト]のラジオボタンを選択しておきます。そして、[完了]ボタンを押してウィザードを終了します。

図3 [プロジェクト名]を「HelloWorldWidget」にして、[空のプロジェクト]を選択して[完了]
図3 [プロジェクト名]を「HelloWorldWidget」にして、[空のプロジェクト]を選択して[完了]

 これで、「HelloWorldWidget」プロジェクトと「helloworldwidget.Main.fx」ファイルが生成されました。

図4 生成されたHelloWorldWidgetプロジェクト
図4 生成されたHelloWorldWidgetプロジェクト

 以下は、生成されたhelloworldwidget.Main.fxファイルです。

package helloworldwidget;
 
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 : 16
                }
                x: 10
                y: 30
                content: "Application content"
            }
        ]
    }
}

ソースを書き換えて1度実行してみよう

 このソースを、ほんの少しだけ修正します。Stage {……}の中の記述を少し変えます。変更したソースは、次のようになります。

package helloworldwidget;
 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
 
Stage {
    title: "My First Widget"
    width: 250
    height: 80
    scene: Scene {
        content: [
            Text {
                font : Font {
                    size : 16
                }
                fill: Color.RED
                x: 10
                y: 30
                content: "Hello, World!"
            }
        ]
    }
}

 ここで、このプロジェクトを標準のJavaFXアプリケーションとして一度実行してみましょう。実行するには、[プロジェクト]ウィンドウでHelloWorldWidgetプロジェクトを右クリックし、[プロジェクトを実行]をクリックします。

図5 プロジェクトを実行
図5 プロジェクトを実行

図6 JavaFXアプリケーションとして実行
図6 JavaFXアプリケーションとして実行

 JavaFXアプリケーションとして実行すると、図6のようなウィンドウが表示されるはずです。

 次ページでは、作ったJavaFXアプリケーションをWidgetFXのウィジェットにする方法を紹介します。

  1-2-3

 INDEX 「JavaFXでデスクトップを遊ぶ「WidgetFX」(後編)」
Page1
  WidgetFXの開発環境を整えよう
NetBeansで作るJavaFXアプリの初歩
  Page2
  JavaFXアプリをWidgetFXウィジェットにする
作ったWidgetFXを動かしてみよう
  Page3
  キッチン・タイマ・ウィジェットもあるよ
自分で作ったウィジェットを公開するには
コラム 「良いウィジェットを作るコツ」
WidgetFXがビジネスチャンスに?


Java Solution全記事一覧



Java Agile フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Java Agile 記事ランキング

本日 月間
ソリューションFLASH