JavaFX Script は、リッチ・クライアントとインターネット・アプリケーションを簡単に作成できるようにするために設計されたスクリプト言語です。極めて移植性の高いこの言語は、ローカルにインストールしなくても、Java 技術をサポートするシステムであればどのシステム上でも実行することができます。JavaFX Script を使えば、基礎となる Java 技術を利用して、どんなサイズの GUI でも、どんなに複雑な GUI を難なく作成することができます。

この記事では JavaFX Script 言語の基礎をひと通り紹介した後、サンプル・アプリケーションを用いて UI コンポーネントのいくつかを説明します。この記事を理解するには、Java プログラミング言語についての十分な理解と Swing で開発した経験が必要です。

JavaFX Script を使い始める前に

JavaFX Script でアプリケーションを開発する際には、JavaFX Script 開発環境がインストールされていると役立ちます。この環境には、JavaFX Script 専用に設計された IDE だけでなく、その他の Java 開発環境用の JavaFX Script プラグインも用意されています。この記事でのアプリケーション開発にお勧めするのは、Eclipse 用 JavaFX Script プラグインです (このプラグインならびに他の開発オプションについての詳細は、「参考文献」を参照してくだい)。

上に戻る

JavaFX Script の概要

JavaFX Script は静的型付き言語です。つまり、変数、パラメーター、メソッド戻り値すべてのデータ型が、コンパイル時に確定されます。また、JavaFX Script は宣言型プログラミング言語でもあるため、アプリケーションの作成方法ではなく、アプリケーションの特徴を記述します。画面上でアプリケーションをどのように表示するかを決定するアルゴリズムは、サポート・ソフトウェア (Swing の Java 2D API) に任されます。このような特質を持つことから、JavaFX Script は GUI の作成には最適だと言えます。

サンプル・アプリケーション・コードと、そこで使用される JavaFX Script GUI コンポーネントを理解しやすいように、まずはJavaFX Script 構文の基本をいくつか抜粋して概説します。

変数およびプリミティブ型

JavaFX Script には String、Boolean、Number、そして Integer の 4 つのプリミティブ型があります。表 1 に、この 4 つのプリミティブ型それぞれに対応する Java の型を示します。

上記の型の変数を使用するときは、いずれも var キーワードを指定します。Java 言語とは異なり、JavaFX Script では変数の型をその宣言のなかで指定する必要はありません。インタープリターが、変数の使い方を基に型を推測できるからです。ただし、JavaFX Script は静的に型付けされることから、宣言された変数の型はそのライフサイクル全体を通して変えることができせん。例えば、JavaFX Script で var myString = "Hello"; とある場合、Java コードでは var myString:String = "Hello"; がこれに相当します。

演算子

表 2 と表 3 に、JavaFX Script で使用する演算子と Java での対応する演算子を示します。JavaFX Script で式を作成する際には、この 2 つの表を参照してください。

関数およびオペレーション

JavaFX Script は、function キーワードを使用してプログラムの機能サブセットを表します。JavaFX Scriptでは関数に変数宣言と return 文を含めることが可能で、すべて中括弧で囲まれるため、単純な数学関数やクラスのゲッターおよびセッターに最適です。リスト 1 に、2 つの数値を加算する JavaFX Script 関数の例を示します。

                
function add(a,b) {
   var c = a + b;
   return c;
}

JavaFX Script でのすべてのプロシージャーは operation キーワードで示されます。プロシージャーにはいくつでも文を含めることができます。リスト 2 は、単純なオペレーションの例です。

                
operation helloWorld() {
   System.out.println("Hello world.");
}

上に戻る

JavaFX Script のサンプル・アプリケーション

JavaFX Script の基本的な GUI 機能のいくつかを説明するため、簡単な電卓のサンプル・アプリケーションを作成しました。このアプリケーションが持つ機能は、Microsoft® Windows® オペレーティング・システム付属の電卓が持つ機能の一部です。図 1 に、この電卓を示します。

フレームとメニュー

JavaFX Script アプリケーションのディスプレイは、Frame オブジェクトによって表されます。これは最上位レベルのウィンドウで、ここには枠、タイトル、そしてオプションのメニュー・バーがあります。リスト 3 に、この電卓のフレームの宣言を示します。

                
Frame {
   menubar: MenuBar {
      ...
   }
   //text displayed in title bar
   title: "Calculator"
   //size of frame
   height: 200
   width: 200
   //begin content layout
   content: GridBagPanel {
      ...
   }
   visible: true
}

JavaFX Script では、オブジェクトの属性はそのオブジェクトの宣言の中で定義されます。したがって、リスト 3 の宣言にある menubar、title、height、width、content、そして visible はすべて、Frame オブジェクトの属性です。title 属性には、ウィンドウのタイトル・バーに表示される String 値が含まれます。この値は、Calculator にしてあります (図 1 のウィンドウのタイトルを参照)。height および width 属性はウィンドウのサイズをピクセル単位で定義します。visible は、アプリケーションの起動時にこのフレームを表示するかどうかを決定する Boolean 属性です。

リスト 3 の Frame オブジェクトに宣言されている menubar 属性の値は、MenuBar オブジェクトとなっています。この MenuBar オブジェクトには、電卓ウィンドウの上端に表示されるメニューの名前とその内容を定義する Menu オブジェクトを 1 つ以上含めることができます。このサンプル・アプリケーションでは、Exit 操作のみが含まれる File メニューを宣言しています。このメニューの宣言は、リスト 4 のとおりです。

                
menubar: MenuBar {
   menus: Menu {
      text: "File"
      //first item in the menu
      items: MenuItem {
         text: "Exit"
         //on-click operation
         action: operation() {
            //exit the application
            System.exit(0);
         }
      }
   }
}

Menu オブジェクトには text 属性があります。この属性の値は、表示するメニューのタイトルを表す String です (このサンプル・アプリケーションでは File)。さらに、Menu オブジェクトには items という属性も含まれていて、その値は 1 つ以上の MenuItem オブジェクトにすることができます。MenuItem が表すのは、現行のメニューに表示する操作です。text 属性に MenuItem の名前を定義し、action 属性にはメニュー項目の振る舞いを決定するオペレーションを定義します。この電卓アプリケーションのユーザーが File > Exit を選択すると、action 属性に定義されたオペレーションが実行され、アプリケーションが終了するという仕組みです。

レイアウトと枠

もう一度、リスト 3 の Frame 宣言を見てください。この Frame オブジェクトの属性のなかでおそらく最も重要なのは、content 属性です。この属性の値となるウィジェット・オブジェクトが、タイトルとメニュー・バーの下のウィンドウ内に表示するコンテンツを定義します。つまり、電卓のテキスト・フィールドとボタンは、この content 属性内で作成されるということです。電卓上のボタンを規則正しく並べるため、リスト 5 に示すようにフォーマット設定したパネルを作成しました。

                
content: GridBagPanel {
   border: EmptyBorder {
      ...
   }
   cells: {
      ...
   }
}

JavaFX Script レイアウト・マネージャーは対応する Swing/AWT のレイアウトをカプセル化し、指定されたレイアウト・マネージャーを使って JPanel をインスタンス化します。この JPanel には、JavaFX Script オブジェクトが提供する属性によってコンポーネントが追加されます。表 4 に、JavaFX Script ウィジェットとそれぞれに対応する Swing/AWT レイアウト・マネージャーを示します。

同様に、JavaFX Script のそれぞれの枠も Swing の枠オブジェクトをカプセル化します。JavaFX Script の枠ごとに、Swing の枠構成オプションに対応する属性があります。表 5 に、対応する枠を示します。

リスト 5 を見るとわかるように、この電卓アプリケーションに使用するのは GridBagPanel です。GridBagPanel はコンポーネントを格子状 (縦と横) に並べますが、コンポーネントが同じサイズであることは要求しません。各 GridBagPanel がセルの格子を維持し、それぞれのコンポーネントは 1 つまたは複数のセルを占めます。GridBagPanel には border と cells という 2 つの属性があります。border 属性が定義するのは、GridBagPanel に表示する枠のタイプ (表 5 のいずれかのオブジェクト) です。この電卓アプリケーションの場合には、EmptyBorder オブジェクトを使用することにしました (リスト 6 を参照)。

                
border: EmptyBorder {
   top: 5
   left: 5
   bottom: 5
   right: 5
}

この空の枠は完全に透明で、border 属性で定義された分だけスペースを占有しますが、描画はしません。EmptyBorder の属性は top、left、bottom、right です。この 4 つの属性の値は、ディスプレイの上下左右で枠が占めるスペースの幅をピクセル単位で定義します。このサンプル・アプリケーションでは、グリッド・コンポーネントとパネル・ディスプレイの各辺との間の透明枠として 5 ピクセルを確保しています。

一方、GridPanel の cells 属性が定義するのは格子の内側のコンポーネントです。この属性の値は GridCell オブジェクトの配列で、それぞれの GridCell オブジェクトがグリッド内の 1 つのコンポーネントを表します。この GridCell 属性によって、オブジェクトの表示方法、そしてパネル内でのオブジェクトの位置が決まります。この電卓アプリケーションには 19 の GridCell オブジェクトがあり、そのうちの 1 つが電卓上端にあるテキスト・フィールド、2 つが Back ボタンと Clear ボタンに対応し、残りの 16 個が図 1 の電卓上に示されている数字と演算の各ボタンに対応します。リスト 7 に、電卓のテキスト・フィールド、Back ボタン、Clear ボタン、そして最初の 2 つの数字にそれぞれ対応する GridCell オブジェクトを示します。

                
cells:
      [ GridCell {
         anchor: WEST
         fill: HORIZONTAL
         //horizontal grid position
         gridx: 0
         //vertical grid position
         gridy: 0
         //column span
         gridwidth: 4
         content: textField
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 0
         gridy: 1
         gridwidth: 2
         content: Button {
            text: "Back"
            ...
         }
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 2
         gridy: 1
         gridwidth: 2
         content: Button {
            text: "Clear"
            ...         
         }
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 0
         gridy: 2
         content: Button {
            text: "7"
            ...
         }
      }, GridCell {
         anchor: WEST
         fill: HORIZONTAL
         gridx: 1
         gridy: 2
         content: Button {
            text: "8"
            ...
         }
      }]

リスト 7 を見るとわかるように、すべての GridCell オブジェクトには共通して anchor、fill、gridx、gridy、そして content という 5 つの属性があります。まず、anchor はコンポーネントが表示域より小さい場合に使用される属性で、表示域のどこにコンポーネントを配置するかを指定します。有効な値は、NORTH、SOUTH、EAST、WEST、NORTHWEST、NORTHEAST、SOUTHWEST、SOUTHEAST、CENTERです。

コンポーネントの表示域がコンポーネントより大きい場合には、fill 属性も使用されます。この属性は、コンポーネントのサイズを変更することになった場合にその方法を決定します。有効な値は表 6 に示すとおりです。

この電卓内のすべてのコンポーネントは表示域の左側 (WEST) に固定され、表示域の幅と同じになるように設定されています。

GridCell の gridx および gridy 属性は、グリッド内でのコンポーネントの位置を定義します。この 2 つの属性の値がコンポーネント表示域の左上隅を含むセルを指定します。基準セルの位置は gridx = 0, gridy = 0 です。

リスト 7 に定義された GridCell コンポーネントのうちの 3 つには、gridwidth 属性も含まれています。この属性は、グリッド行内でコンポーネントに占有させるセルの数を指定します。例えば、リスト 7 の最初の GridCell オブジェクト (電卓のテキスト・フィールド) では、gridwidth が 4 に指定されています。これはつまり、テキスト・フィールド・コンポーネントが 4 列にまたがるということです。また、gridx と gridy の値はどちらも 0 なので、テキスト・フィールド表示域の左上隅はグリッド域の最初の行と最初の列から始まることになります。

テキスト・フィールドとボタン

リスト 7 で定義された GridCell コンポーネントのそれぞれに、セルの表示域に描画する内容を定義するウィジェット値が含まれています。この電卓アプリケーションのセルに含まれるウィジェットは、テキスト・フィールド・ウィジェットおよびボタン・ウィジェットです。

リスト 7 では content 属性に直接、新しいオブジェクトを定義しています。ここで、JavaFX Script の多様性を紹介する別のシナリオとして、テキスト・フィールドを content 属性の外側で、変数 textField として定義してみます。この宣言はリスト 8 のとおりです。このようにテキスト・フィールドを定義すると、テキスト・フィールドに対応する GridCell の content属性には、変数名だけをその値として含められるようになります。

                
var textField = TextField {
   //indicates default value to appear in text field
   value: "."
   //indicates justification
   horizontalAlignment: TRAILING
   onChange: operation(s:String) {
      //don't change value if user types an invalid character   
   }
};

TextField オブジェクトには 4 つの属性があります。value 属性はテキスト・フィールドに表示するデフォルト値を定義し、horizontalAlignment 属性はテキスト・フィールドのコンテンツの位置調整を指定します。horizontalAlignment 属性に有効な値は、表 7 のとおりです。

この電卓アプリケーションのテキスト・フィールドには、TRAILING キーワードによって右寄せが指定されています。

テキスト・フィールド・ウィジェットの onChange 属性には、ユーザーがテキスト・フィールドのコンテンツを変更した場合の動作を決定するオペレーションが含まれます。ここでは、電卓アプリケーションによって無効な文字がないかどうかのチェックが行われます。

ボタンの定義方法もテキスト・フィールドの場合とほとんど同様です。ボタンは変数として宣言することも、あるいは親オブジェクトの content 属性に直接定義することもできます。リスト 9 は、Back ボタンの定義です。

                
content: Button {
text: "Back"
   action: operation() {
      //remove last character entered
   }
}

Button ウィジェットに含まれる属性は text と action の 2 つです。text の値はボタンに表示するテキストを示します。action 属性には、定義したボタンをユーザーがクリックしたときの動作を決定するオペレーションが含まれます。上記の Back ボタンは、リスト 8 に定義されたテキスト・フィールドに入力された最後の文字を削除することになっています。

JavaFX Script の UI には、この電卓の例で使用したウィジェットの他にも、多数のウィジェットを使用できます。この記事で紹介したレイアウトやウィジェット、そしてその他の GUI コンポーネントについての詳細は、「参考文献」に記載したリンクを参照してください。

上に戻る

まとめ

JavaFX Script は極めて動的かつ移植性の高い言語で、Swing で作成するような広範な GUI アプリケーションを、しかも遥かに少ないコードで作成することができます。JavaFX Script は構文の点では Java コードと異なりますが、基礎となる技術はほとんど同じです。JavaFX Script とその機能について詳細を調べて、この記事で得た知識を独自の JavaFX Script アプリケーションの作成にぜひ生かしてください。

参考文献

学ぶために

• JavaFX Community: JavaFX コミュニティーに参加してください。
  
  
• JavaFX Technology: Sun の JavaFX 情報源にアクセスして、この技術について詳細を学んでください。
  
  
• JavaFX Script API: JavaFX Script の API マニュアルを参照してください。
  
  
• Planet JFX: Planet JFX は、JavaFX スクリプト・プラットフォームに関する資料を集めたオープン・ソースのウィキです。早期からの導入者、開発者、そして Java の支持者からなるコミュニティーによって管理されています。
  
  
• 「JavaOne 2007: Sun が再びクライアントに力を入れ始めています」(Elliotte Harold 著、developerWorks、2007年6月): JavaOne 2007 で紹介された JavaFX Script やその他のクライアント・サイドのイニシアチブでの約束、そして課題について読んでください。
  
  
• 「First impressions: Sun's JavaFX platform for rich application development」(Ryan Paul 著、ars technica、2007年5月): 初期 JavaFX リリースについての評価と分析を読んでください。
  
  
• 「JavaFX Update: The Elephant Is Through the Door!」(James L. Weaver 著、AjaxWorld Magazine、2007年12月): openjfx-compiler プロジェクトの目標について説明しています。
  
  
• テクノロジーのブックストアで、この記事で取り上げた技術やその他の技術に関する本を探してください。
  
  
• developerWorks Java technology ゾーン: Java プログラミングのあらゆる側面を網羅した記事が、豊富に用意されています。
  
  

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

• JavaFX Script プラグイン: Eclipse および NetBeans 用のプラグインは JavaFX Community から入手できます。
  
  
• JavaFxPad: JavaFxPad で JavaFX Script コードを入力すると、すぐにその結果を調べられます。
  
  

議論するために

• developerWorks blogs から developerWorks コミュニティーに加わってください。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• JavaFX Script を使い始める前に
• JavaFX Script の概要
• JavaFX Script のサンプル・アプリケーション
• まとめ
• 参考文献
• 著者について
• コメント