お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

JavaFX を使って迅速にアプリケーションを作成する

JavaFX + Eclipse IDE = 容易に使える GUI

Ravikumar Vishwakarma, Software Engineer, IBM

Ravikumar Vishwakarma はインドのムンバイにある IBM India Software Lab の Staff Software Engineer であり、IBM WebSphere Content Pack Product チームに所属しています。彼は Content Pack の業務に 3 年以上従事しています。現在は IBM WebSphere BPM Stack 製品を使用して SOA アプリケーションを開発しています。現在は IBM WebSphere Lombardi を使用して BPM ソリューションを作成する業務を行っています。また、Lotus Forms Designer を使用した UI の作成にも従事したことがあります。

Rohit Sardesai, Software Engineer, IBM

Rohit Sardesai は IBM India Software Lab で Staff Software Engineer として働いており、Application and Integration Middleware (AIM) チームに所属しています。彼は Eclipse プラグイン開発、OSGI、Web 2.0 開発 (Dojo や REST) などに重要な技術スキルを持っています。彼は WebSphere Business Services Fabric (WBSF) を使用した動的ビジネス・アプリケーションの作成に関する連載記事を発表しています。また、彼はさまざまな Biztech プロジェクトにも積極的に参加しています。現在は BPM リポジトリーとクラスタリングに関する業務を行っています。

概要： Eclipse IDE を使用して JavaFX ベースの Rich Internet Application を作成する方法を学びましょう。この記事では JavaFX について紹介するとともに、Eclipse 用の JavaFX プラグインと JavaFX とを組み合わせて迅速に GUI アプリケーションを作成する方法について説明します。デスクトップ・エミュレーターとモバイル・エミュレーターの両方に対応したサンプル・アプリケーションを作成しながら、JavaFX の機能を学びましょう。またこの記事では、基本的なアニメーションの作成方法についても学びます。

タグを付ける!

日付: 2010年 10月 12日
レベル: 中級
この記事の原文: 英語
アクティビティー： 7509 ビュー
お気軽にご意見・ご感想をお寄せください：

はじめに

JavaFX は、デスクトップ機器やモバイル機器上で実行可能な RIA (Rich Internet Application) を作成するための、Java ベースのプラットフォームです。JavaFX を使用して作成されたアプリケーションは Java バイトコード・ベースであるため、Java ランタイム環境がインストールされた任意のデスクトップ機器、または Java2 ME をインストールした任意のモバイル機器で実行することができます。JavaFX を使用すると GUI プログラミングが非常に容易になります。というのも、JavaFX は宣言型の構文を使用しており、アニメーションのサポートもしているからです。

この記事では、JavaFX を使って RIA を作成する方法を一から学びます。JavaFX SDK をダウンロードしてインストールし、Eclipse 用の JavaFX プラグインもインストールしてから、サンプル・アプリケーションを作成しながら JavaFX の基本機能について学びましょう。

この記事で使用する Login Application と Animated Circle のサンプル・コードはダウンロードすることができます。

インストール

以下のステップに従って、JavaFX SDK と、Eclipse 用の JavaFX プラグインをダウンロードしてインストールします。

最新の Windows 版 JavaFX SDK インストーラーをダウンロードします (インストーラーの拡張子は .exe です)。ダウンロードが完了したら、この .exe ファイルをダブルクリックし、インストーラーを実行します。
インストール・ウィザードに指示されるステップを完了します。
Windows の場合、デフォルトのインストール場所は C:\Program Files\JavaFX\javafx-sdk-version です。
Eclipse IDE を起動して、ワークスペースの名前 (C:/workspace/jfx_projects など) を指定します。
「Help (ヘルプ)」 > 「Install New Software (新規ソフトウェアのインストール)」の順に選択します。
ポップアップ表示される「Install (インストール)」ダイアログで「Add (追加)」をクリックします。
図 1 に示すように、「Name (名前)」には「JavaFX Plugin Site」と入力し、「Location (ロケーション)」にはプラグインのインストール元として、「http://javafx.com/downloads/eclipse-plugin/」と入力します。

図 1. JavaFX プラグインのサイトを追加する

「OK」をクリックします。
インストールが必要な「JavaFX Feature」にチェックを入れます (図 2)。

図 2. インストールが必要な「JavaFX Feature」にチェックを入れる

「Next (次へ)」をクリックします。
「Install Details (インストール詳細)」ダイアログに JavaFX Feature のバージョンが表示されます。「Next (次へ)」をクリックします。
使用条件に同意し、「Finish (完了)」をクリックします。
プラグインのインストールに成功し、Eclipse ワークベンチの再起動を促す画面が表示されたら、Eclipse ワークベンチを再起動します。

デフォルト以外の場所に JavaFX SDK をインストールした場合、JAVAFX_HOME 変数の設定を促す画面が表示される場合があります (図 3)。Eclipse プラグインのインストールで JAVAFX_HOME というクラスパス変数が作成されなかった場合には、この JAVAFX_HOME クラスパス変数も作成する必要があります。このクラスパス変数には、JavaFX をインストールした場所を指定します。

図 3. JAVAFX_HOME クラスパス変数を設定する
「Classpath Variables (クラスパス変数)」ダイアログが表示され、JavaFX をインストールした場所の指定を促されます。

ログイン・アプリケーションを作成する

このセクションでは JavaFX のサンプル・アプリケーションを作成します。このアプリケーションではパスワードでユーザーを検証し、必要なクレデンシャルをユーザーが提供した場合には、そのユーザーがシステムにログインするのを許可します。ユーザーの認証が成功すると、Welcome 画面が表示されます。認証が成功しなかった場合には、Eclipse の「Console (コンソール)」ビューに認証の失敗に関する詳細が表示されます。ここでは JavaFX 用の Swing コンポーネントを使ってログイン画面を作成します。このログイン・アプリケーションのソース・コードはダウンロードすることができます。

新規の JavaFX プロジェクトを作成します。「File(ファイル)」 > 「New (新規)」 > 「Project (プロジェクト)」 > 「JavaFX」 > 「JavaFX Project」の順にクリックします (図 4)。

図 4. 新規 JavaFX プロジェクトを作成する

「Next (次へ)」をクリックします。
表示される画面で「Project name (プロジェクト名)」として「LoginApp」と入力し、「Desktop (デスクトップ)」プロファイルを選択します。この画面を図 5 に示します。

図 5. JavaFX プロジェクトを構成する

「Finish (完了)」をクリックします。
「LoginApp」プロジェクトの中に「com.sample.login」というパッケージを作成します。
この「com.sample.login」パッケージを右クリックし、「New (新規)」 > 「Empty JavaFX Script (空の JavaFX スクリプト)」の順に選択します。
名前には「Main」と入力し、「Finish (完了)」をクリックします。
このサンプル・アプリケーション用に、いくつかの変数を宣言する必要があります。リスト 1 に示すように、login というブール変数が必要です。この変数はユーザーのログイン状態 (最新のログインが成功したかどうか) を保持します。ユーザーが入力するユーザー名を保持できるように、ストリング変数 username を宣言します。また、このアプリケーションにログインできる唯一のユーザーとして、ハードコーディングされた、test というシステム・ユーザーもあります。

リスト 1. グローバル変数の宣言
var login = false; var userName = ""; var systemUser = "test";
「Snippets (スニペット)」ウィンドウで「Applications (アプリケーション)」タブを選択して展開します。
「Stage」オブジェクトを選択してソース・エディターにドラッグします (図 6)。Stage はユーザー・インターフェース用の JavaFX オブジェクトを保持するための最上位レベルのコンテナーです。

図 6. 「Stage」オブジェクトをエディターにドラッグする
この Stage 用に表示されるタイトルを編集し、「Login App」と入力します (図 7)。Stage の幅と高さはどちらも「300」に設定します。

図 7. 「Stage」オブジェクトを構成する

「Insert (挿入)」をクリックすると、Scene 要素が Stage に追加されます。Scene 要素は描画用のプラットフォームやサーフェイスのようなものであり、グラフィックス要素の描画に使用されます。Scene 要素に含まれる content 変数には子要素があります。
import 文を使って Scene に javafx.scene.Group 要素を追加します (リスト 2)。このグループは、作成される他のコントロールに対するコンテナーのように動作します。

リスト 2. group クラスをインポートする
import javafx.scene.Group;
content 要素に group 要素を追加します (リスト 3)。

リスト 3. content の中に group を追加する
content: [ Group { } ]
親のグループ・コントロールに子のコントロールを追加します。まず、SwingLabel クラスをインポートしてラベルを追加します (リスト 4)。

リスト 4. SwingLabel クラスをインポートする
import javafx.ext.swing.SwingLabel;
このグループの content 要素に以下のコードを追加します (リスト 5)。

リスト 5. グループに SwingLabel を追加する
content : [ SwingLabel { text : "User Name :"; } ]

ユーザー入力を受け付けるための、テキスト・フィールドのコントロールを追加します。SwingTextField クラスをインポートします (リスト 6)。

リスト 6. 変数の宣言


import javafx.ext.swing.SwingTextField;

下記で強調表示されているコードを追加することで、テキスト・フィールドを追加します (リスト 7)。

リスト 7. SwingTextField をグループに追加する


SwingLabel {
          text : "User Name :";
        	       
         },
SwingTextField {
          text : bind userName with inverse;
          columns : 10;
          editable : true;
          layoutX : 30;
          layoutY : 20;
          borderless : false;
          selectOnFocus : true;
           
             }

入力されたユーザー名の検証アクションを呼び出すボタンを追加します。ユーザー名がシステム・ユーザーと一致すると、そのユーザーはシステムにログインすることができます。import 文を使って JavaFX の SwingButton をインポートします (リスト 8)。

リスト 8. SwingButton クラスをインポートする


import javafx.ext.swing.SwingButton;

リスト 9 のコードを追加し、テキスト・フィールドのすぐ下にボタンを追加します。

リスト 9. グループに SwingButton を追加する


 SwingButton{
         translateX: 50
         translateY: 50
         text: "Submit"
         action: function(){
          if((userName != systemUser)) {
              println("Invalid UserName");
          }
          login = (userName == systemUser);
         }
        }

リスト 9 の action 関数は、入力された userName がシステム・ユーザーの名前と同じかどうかをチェックします。異なる場合には、このサンプル・アプリケーションはエラー・メッセージを出力します。同じ場合には、同じであるという結果が login というブール変数に保存されます。

ここまでの段階では、ログインに失敗した場合を扱いました。ログイン成功の画面に進むためには、login 変数の状態を使用する必要があります。それには if-else 文が必要です。そこで if-else 節を追加します。まず else 節の中に、content オブジェクトを中に持つ空のグループを追加し、下記で強調表示されているコードを追加します (リスト 10)。

リスト 10. if-else 節を追加する


                        content: bind if(not login)Group {
                        content: [
                        SwingLabel{
                        text: "User Name:"
                        },
                        SwingTextField {
                        text : bind userName with inverse;
                        columns : 10;
                        editable : true;
                        layoutX : 30;
                        layoutY : 20;
                },
                SwingButton{
                      translateX: 50
                      translateY: 50
                      text: "Submit"
                      action: function(){
                            if((userName != systemUser)) {
                                  println("Invalid UserName");
                            }
                            login = (userName == systemUser);
                      }
                }
              ]
             } 
 else Group{
                         content: [
              
                   	  ]
 
              }

最後に、ログインの成功を示すためのテキスト・メッセージと、ログアウト・ボタンを追加します。ログアウト・ボタンをクリックするとユーザーにはログイン画面が表示されます。そのために、Text クラスをインポートします (リスト 11)。

リスト 11. Text クラスをインポートする


 import javafx.scene.text.Text;

先ほど追加した else 節の Group 要素の content の本体の中に、リスト 12 のコードを追加します。

リスト 12. else 節の Group 要素に Text クラスと SwingButton を追加する


Text {
       x: 10 y: 30
       content: "You have successfully logged in."
      },
SwingButton{
     translateX: 10
     translateY: 50
     text: "Log out"
     action: function(){
 	userName = "";
 	login = false;
     }
 }

完全なコードをリスト 13 に示します。

リスト 13. LoginApp サンプル・アプリケーションのコード




package com.sample.login;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Group;
import javafx.scene.text.Text;

import javafx.ext.swing.SwingLabel;
import javafx.ext.swing.SwingTextField;
import javafx.ext.swing.SwingButton;

var login = false;
var userName = "";
var systemUser = "test";
Stage {
    title : "Login App"
    scene: Scene {
        width: 300
        height: 300
        content: bind if(not login) Group{
                          content: [
                             SwingLabel{
                                 text: "User Name:"
                             },
                             
                             SwingTextField {
                                 text : bind userName with inverse;
                                 columns : 10;
                                 editable : true;
                                 layoutX : 30;
                                 layoutY : 20;
                                  
                             },
                             SwingButton{
                                 translateX: 50
                                 translateY: 50
                                 text: "Submit"
                                 action: function(){
                                     if((userName != systemUser)) {
                                            println("Invalid UserName");
                                           
                                 }
                                 login = (userName == systemUser);
                                 }
                            }
                              
                         ]
                     } 
                     else Group{
                         content: [
              
              	   Text {
              	                 x: 10 y: 30
              	                 content: "You have successfully logged in."
              	              },
              	              SwingButton{
              	                 translateX: 10
              	                 translateY: 50
              	                 text: "Log out"
              	                 action: function(){
              	                  userName = "";
              	                  login = false;
              	               	}
              	              }
              	 
                   	  ]
                  }
             	} 
}

アプリケーションを実行する

このセクションでは、サンプル・ログイン・アプリケーションをテストします。まず、ここまでに加えた変更を保存します。

Main.fx ファイルを右クリックし、「Run As (実行)」 > 「JavaFX application (JavaFX アプリケーション)」の順に選択します。構成の設定をデフォルトのままにし、「Run (実行)」をクリックします。するとログイン・アプリケーションの新しいウィンドウが開きます (図 8)。

図 8. ログイン・アプリケーション
「abc」と入力し、「Submit (送信)」をクリックします。するとログインに失敗し、エラー・メッセージがコンソールに表示されます。
「test」と入力し、「Submit (送信)」をクリックします。するとシステムはこのユーザー名を受け入れ、ログインに成功します (図 9)。

図 9. ログインに成功する

モバイル・エミュレーター上で実行するアプリケーションを作成する

上記で作成した LoginApp では「Desktop (デスクトップ)」プロファイルを使用しました。このセクションでは、「Mobile (モバイル)」プロファイルを使用してモバイル・エミュレーター上で実行するアプリケーションを作成します。この例では、アニメーション化したグラフィックスを作成する方法を説明します。また、さまざまな時間間隔で透明度が変化する円を描画します。

新しい JavaFX プロジェクトを作成するために、「File (ファイル)」 > 「New (新規)」 > 「Project (プロジェクト)」 > 「JavaFX」 > 「JavaFX project (JavaFX プロジェクト)」の順にクリックします。
「Project name (プロジェクト名)」に「AnimatedCircle」と入力し、「Mobile (モバイル)」プロファイルを選択します (図 10)。

図 10. ログイン・アプリケーション

「Finish (完了)」をクリックします。
「com.sample.animation」という新しいパッケージを作成します。
空の JavaFX スクリプトを新規に作成します。「com.sample.animation」パッケージを右クリックし、「New (新規)」 > 「Empty JavaFX Script (空の JavaFX スクリプト)」の順に選択します。
「Name (名前)」に「Main」と入力し、「Finish (完了)」をクリックします。
「Snippets (スニペット)」ウィンドウで「Applications (アプリケーション)」タブを選択して展開します。
「Stage」オブジェクトを選択してソース・エディターにドラッグします。
「Title (タイトル)」には「AnimatedCircle」と入力します。他の項目はデフォルトのままにし、「Insert (挿入)」をクリックします。
「Snippets (スニペット)」ウィンドウで「Basic Shapes (基本形状)」タブを選択して展開します。
「Circle (円形)」要素を選択し、ソース・エディターの content[] 要素の中にドラッグ・アンド・ドロップします。「Insert Template (テンプレートの挿入)」ダイアログ・ボックスで、「fill」プロパティーには「Color.BLUE」と入力します (図 11)。

図 11. 円を追加する

「Insert (挿入)」をクリックします。
「Linear Gradient (リニアなグラデーション)」パターンを円に追加するためには、グラデーションをかける色を 2 色以上指定します。「Snippets (スニペット)」ウィンドウで、「Gradients (グラデーション)」タブをクリックして展開します。
「fill」の値から「Color.BLUE」を削除し、続いて「Linear Gradient (リニアなグラデーション)」オブジェクトを選択してソース・エディターにドラッグします (図 12)。

図 12. 「Linear Gradient (リニアなグラデーション)」パターンを円に追加する
ここで、このアプリケーションを実行し、ここまでの段階で作成されたものを見てみましょう。変更を保存したら、Main.fx ファイルを右クリックし、「Run As (実行)」 > 「JavaFX Application」の順に選択します。モバイル・エミュレーターのウィンドウが表示され、色がリニアに変化するグラデーションのある円が表示されます (図 13)。

図 13. Animated Circle アプリケーションがモバイル・エミュレーターで実行されている様子

アニメーションのサポートを追加する

この円にアニメーションのサポートを追加します。この例では、さまざまな時間間隔で円の透明度を変化させる手順を説明します。ここでは KeyFrame オブジェクトを含む Timeline オブジェクトが必要です。この例には 2 つの KeyFrame があります (円の透明度を 0.0 から 0.5 まで 5 秒間で変化させる KeyFrame と、次の 10 秒間に透明度を 0.5 から 1.0 まで変化させる KeyFrame)。

リスト 14 のコードを追加し、opacity という変数を定義します。

リスト 14. グローバル変数 opacity を宣言する
var opacity = 1.0;
この円に対するローカル変数を追加し、opacity グローバル変数にバインドします (リスト 15)。

リスト 15. グローバル変数を円の opacity プロパティーにバインドする
Circle { opacity : bind opacity; centerX: 100, centerY: 100, radius: 40,
「Timeline」要素を追加します。「Snippets (スニペット)」ウィンドウで、「Animations (アニメーション)」タブを選択して展開し、「Timeline」要素をエディターにドラッグします。「Insert Template (テンプレートの挿入)」ダイアログ・ボックスから、「time」の値として「5s」と入力します (図 14)。

図 14. Timeline を追加する

「Insert (挿入)」をクリックします。

図 15 は、「Timeline」要素をエディターにドラッグすると生成されるコードを示しています。

図 15.「Timeline」要素が追加された状態
「Animations (アニメーション)」タブから「Values (値)」要素をドラッグし、KeyFrame オブジェクトの canSkip 属性の後に配置します。「Insert Template (テンプレートの挿入)」ダイアログ・ボックスの中で、「variable」の値として「opacity」と入力します (図 16)。

図 16. KeyFrame に値を追加する

「Insert (挿入)」をクリックします。生成されたコードの中で、opacity の値を 0.5 に変更します (図 17)。

図 17. 値が追加された KeyFrame
図 17 の例の KeyFrame のすぐ下に、別の KeyFrame を追加します。この KeyFrame の time 変数は 10 秒であり、Values 要素によって透明度が 1.0 に変更されます。このコードは図 18 のようなものです。

図 18. 2 つの KeyFrame を持つ Timeline
最後に、この Timeline を再生するために、.play() を追加します (図 19)。

図 19. Timeline を再生する
このアプリケーションを再度実行し、アニメーション化された円の動作を確認します。

まとめ

この記事では、JavaFX について、また JavaFX を使って迅速に GUI アプリケーションを作成する方法について学びました。また、いくつかの例を通じて、Swing コンポーネントを使用してフォームを作成する方法、さらにはグラフィカル・アプリケーションの作成方法とアニメーションのサポートを追加する方法についても学びました。

上に戻る

ダウンロード

内容	ファイル名	サイズ	ダウンロード形式
Login Application Sample Code	LoginApp.zip	23KB	HTTP
Animated Circle Sample Code	AnimatedCircle.zip	2KB	HTTP

ダウンロード形式について

参考文献

学ぶために

JavaFX に関する最新ニュースその他の情報を入手してください。
JavaFX Sample Gallery をブラウズしてください。
JavaFX の Technical Documentation を読み、チュートリアルを試してください。
Vancouver 2010 Olympics のサイトで JavaFX の実際を見てください。

製品や技術を入手するために

JavaFX をダウンロードしてください。
IBM 製品の評価版をダウンロードするか、あるいは IBM SOA Sandbox のオンライン試用版で、DB2®、Lotus®、Rational®、Tivoli®、WebSphere® などが提供するアプリケーション開発ツールやミドルウェア製品を試してみてください。

議論するために