本格派エンジニアの工具箱

第37回 NetBeansとJavaFX Scene Builderで作るJava GUIアプリケーション その2

この記事を読むのに必要な時間:およそ 4 分

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のようになっています。

図1 JavaFX Scene BuilderによるUIの作成

図1 JavaFX Scene BuilderによるUIの作成

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

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

図2 Buttonのプロパティ

図2 Buttonのプロパティ

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

図3 Buttonのレイアウト設定

図3 Buttonのレイアウト設定

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

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

図4 コントローラとなるクラスの指定

図4 コントローラとなるクラスの指定

図5 イベントハンドラの指定

図5 イベントハンドラの指定

次に,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>

著者プロフィール

杉山貴章(すぎやまたかあき)

ONGS Inc.所属のプログラマ兼テクニカルライター。雑誌,書籍,Webメディアで多数の著作をもつ。

著書

コメント

コメントの記入