4 FXMLを使用したカスタム・コントロールの作成

プロジェクトの設定

JavaFX FXMLプロジェクトを設定するには、NetBeans IDEを開き、次の手順を実行します。

1. 「ファイル」メニューから、「新規プロジェクト」を選択します。

2. 「JavaFX」カテゴリで、「JavaFX FXMLアプリケーション」を選択します。「次」をクリックします。

3. プロジェクトにCustomControlExampleという名前を付けて、「終了」をクリックします。

4. このアプリケーションに意味のある名前になるように、名前をFXMLDocumentController.javaからCustomControl.javaに変更します。

   1. 「プロジェクト」ウィンドウで「SampleController.java」を右クリックし、「リファクタリング」→「名前の変更」を選択します。

   2. 「CustomControl」と入力してから、「リファクタリング」をクリックします。

5. 名前をFXMLDocument.fxmlからcustom_control.fxmlに変更します。

   1. 「FXMLDocument.fxml」を右クリックして、「名前の変更」を選択します。

   2. 「custom_control」と入力して、「OK」をクリックします。

基本的なユーザー・インタフェースの作成

TextFieldおよびButtonインスタンスを含む単純なカスタム・コントロールの構造を定義します。ルート・コンテナは、javafx.scene.layout.VBoxクラスのインスタンスとして定義されます。

1. custom_control.fxmlファイルを編集します。

2. NetBeans IDEで自動的に生成された<AnchorPane>マークアップを削除します。

3. 例4-1に示すように、ルート・コンテナのコードを追加します。

   例4-1 ルート・コンテナの定義

   <fx:root type="javafx.scene.layout.VBox" xmlns:fx="http://javafx.com/fxml">
       <TextField fx:id="textField"/>
       <Button text="Click Me" onAction="#doSomething"/>
   </fx:root>
   

4. 例4-2に示す未使用のimport文を削除します。

   例4-2 未使用のimport文

   <?import java.lang.*?>
   <?import java.util.*?>
   

コントローラの作成

この例では、CustomControlクラスがVBoxクラス(<fx:root>要素で宣言された型)を拡張し、それ自体をそのコンストラクタ内のFXMLドキュメントのルートとコントローラの両方として設定します。ドキュメントがロードされると、CustomControlインスタンスの内容にドキュメントの内容が移入されます。

1. CustomControl.javaファイルを開き、NetBeans IDEで自動的に生成されたコードを削除します。

2. 例4-3に示すように、コードを追加します。

   例4-3 FXMLドキュメントのルートとコントローラの両方としてのCustomControlクラス

   package customcontrolexample;
   
   import java.io.IOException;
   
   import javafx.beans.property.StringProperty;
   import javafx.fxml.FXML;
   import javafx.fxml.FXMLLoader;
   import javafx.scene.control.TextField;
   import javafx.scene.layout.VBox;
   
   public class CustomControl extends VBox {
       @FXML private TextField textField;
   
       public CustomControl() {
           FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(
   "custom_control.fxml"));
           fxmlLoader.setRoot(this);
           fxmlLoader.setController(this);
   
           try {
               fxmlLoader.load();
           } catch (IOException exception) {
               throw new RuntimeException(exception);
           }
       }
   
       public String getText() {
           return textProperty().get();
       }
   
       public void setText(String value) {
           textProperty().set(value);
       }
   
       public StringProperty textProperty() {
           return textField.textProperty();
       }
   
       @FXML
       protected void doSomething() {
           System.out.println("The button was clicked!");
       }
   }
   

FXMLソース・ファイルのロードおよびステージとシーンの定義

CustomControlExample.javaファイルには、メイン・アプリケーション・クラスを設定するためのコードが含まれています。これによりステージおよびシーンが定義され、FXMLソース・ファイルがロードされます。FXMLについてより詳細に言うと、このクラスでは、CustomControlクラスを使用してFXMLソース・ファイルがロードされます。

1. CustomControlExample.javaファイルを開きます。

2. 例4-4に示すように、FXMLLoaderクラスのコールを含むコードのリストを削除します。

   例4-4 FXMLLoaderクラスのコールの削除

   Parent root = FXMLLoader.load(getClass().getResource("Sample.fxml"));
   

3. 例4-5に示すように、CustomControlクラスのインスタンスを作成し、カスタム・コントロールのテキストを指定します。

   例4-5 CustomControlクラスのインスタンス化

   CustomControl customControl = new CustomControl();
   customControl.setText("Hello!");
   

4. ステージおよびシーンを設定するコードの行を削除し、例4-6に示すようにステージおよびシーンを定義します。

   例4-6 ステージおよびシーンの定義

   stage.setScene(new Scene(customControl));
   stage.setTitle("Custom Control");
   stage.setWidth(300);
   stage.setHeight(200);
   stage.show();
   

5. [Ctrl] (または[Cmd])キーと[Shift]キーを押しながら[I]キーを押して、import文を修正します。

カスタム・コントロールを作成した後は、例4-7および例4-8に示すように、その他のコントロールと同様に、このコントロールのインスタンスをコードまたはマークアップで使用できます。

HBox hbox = new HBox();
CustomControl customControl = new CustomControl();
customControl.setText("Hello World!");
hbox.getChildren().add(customControl);

<HBox>
    <CustomControl text="Hello World!"/>
</HBox>

CustomControlExample.zipファイルをダウンロードして、カスタム・コントロール・アプリケーションの完全なソース・コードを確認します。