SceneBuilderによるユーザインタフェースの作成

ではSceneBuilderにより,上記のUIを作成していきましょう.まずは全体の骨格を作り,すべてのコンポーネントを配置しましょう.その後,細かなプロパティを修正するような流れで開発を進めていきます.下の図は当面の目標である全体の骨格とすべてのコンポーネントを配置した様子です.このようになるよう,少しずつ進めていきます.

01

ではScene Builderを立ち上げます.下の図はScene Builderを立ち上げた直後の様子です.今回は上側にのメニューバーを伴うアプリケーションをもとに作成します.

02

下の図はメニューバーとAncherPaneのみコンポーネントがある状態を表します.このうちAnchorPaneは今回使わないため,まずはこれを削除します.画面左側にはコンポーネントをツリー構造で表されていますので,そこでAnchorPaneを選択し,Delキーで削除しましょう.

03

 まだ全然できていませんが,ひとまず保存しましょう.ここではjp.ac.nagano_nct.ashida_labパッケージにアプリケーションを作成したいため,同名のフォルダを作成し,そこへ保存してください.ファイル名はRPiCarController.fxmlとしておいてください.なお,この後出てくるボタントップに使う画像が含まれるimagesフォルダも同じフォルダに置くことにします.