JavaFX Scene BuilderによるUIの構築

前回は，NetBeansの次期バージョンである「NetBeans 7.2」と，Oracleが開発中の「JavaFX Scene Builder」（⁠以下，Scene Builder）を使ってJavaFXアプリケーションを作成する方法を紹介しました。今回は，自動生成されたソースコードの中身を見ながら，JavaFXアプリケーションの基本的な構造を解説します。

NetBeansで「JavaFX FXMLアプリケーション」形式のプロジェクトを作成した場合，初期状態のSample.fxmlをScene Builderで開くとUIは図1のようになっています。

左下のHierarchyパネルを見るとわかるように，AncherPaneの上にButtonとLabelのノード（AWT/Swingのコンポーネントにあたるもの）が配置されています。AnchorPaneはコンテナの一種で，外側の縁からの距離によって子ノードを配置するレイアウトが可能です。JavaFXのコンテナはそれぞれがレイアウトマネージャの機能を持つため，レイアウトに応じて使用するコンテナを選択します。

各ノードのプロパティやレイアウトの設定は，右側の「Properties」や「Layout」パネルで編集します。たとえば，Buttonのプロパティは図2のようになっています。fx:idにはFXML上のfx:id属性（後述）を指定します。このパネルでは，ノードの色やフォントなどの見た目を変更することもできます。

Buttonのレイアウトは図3のようになっています。AnchorPaneなので，「⁠Constraints」のところで固定したい縁をクリックすると赤く強調され，縁からの距離が指定できるようになります。

このように，UIの見た目やレイアウトを，コードを書かなくても設定できる点がScene Builderの特徴です。その一方で，Scene BuilderはUI構築のためだけのツールなので，ボタンをクリックしたときの処理などといったコントロールを設定することはできません。コントロールの部分はJavaプログラム側で行います。ただし，ユーザのアクションをどのコントローラで処理するのかという部分は，「⁠Document」パネルおよび各ノードの「Events」パネルで設定することができます。

Sample.fxmlのDocumentパネルは図4のようになっています。これは，このFXMLがjavafx.sample.SampleControllerクラスに関連付けられていることを表しています。また，ButtonのEventsパネルは図5のようになっています。これは，ボタンがクリックした際のイベントをhandleButtonAction()メソッドで受け取ることを表します。

次に，Sample.fxmlのソースコードを見てみましょう。NetBeansではファイル名を右クリックして［編集］を選択するとNetBeans上のXMLエディタで開けます（ダブルクリックするとSceneBuilderが立ち上がってしまいます）⁠。中身は次のようになっており，最初にimport宣言がきて，次にルートコンテナであるAnchorPaneのタグがあり，childrenタグの中に子ノードであるButtonとLabelが含まれていることがわかります。AnchorPaneにはfx:comtroller属性でコントローラのクラスが，ButtonにはonAction属性でイベントハンドラのメソッドが指定されています。

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" 
	    prefHeight="200" prefWidth="320" 
	    xmlns:fx="http://javafx.com/fxml" 
	    fx:controller="javafxapplication5.SampleController">
  <children>

    <Button layoutX="126" layoutY="90" text="Click Me!" 
	    onAction="#handleButtonAction" fx:id="button" />
    <Label layoutX="126" layoutY="120" 
	   minHeight="16" minWidth="69" fx:id="label" />

  </children>
</AnchorPane>