読者です 読者をやめる 読者になる 読者になる

asaのブログ

プログラミングの勉強まとめ

JavaFXでペイントツールのUIを作る

 JavaFXでのUI構築にはSceneBuilderという優れたツールが存在しますが、今回はJavaFXの基本から見ていくためにSceneBuilderを使わずにUIの設計を行ってみたいと思います。

 

 JavaFXの概要

 JavaFXでUIを構築していく際のキーワードは

  1. Stage
  2. Scene
  3. Node

の3つです。この3つのキーワードの関連は下の図のように表されます(汚い図ですいません)。

f:id:asa_r:20170512005854p:plain

最上位のコンテナにStageが存在し、SceneがStageに格納されています。JavaFXではこのSceneに対してNodeを追加していくことでUIを構築していきます。Nodeはツリー構造になっていてrootノードに子ノードがぶら下がっている形で表されます。

 

 NodeにはBorderPaneなどのレイアウトを持ったクラスが存在します。これらを組み合わせてUIを作っていきます。Oracleのリファレンスで紹介されているものを一覧で挙げておきます。

  1. BorderPane・・・上下左右、中央にNodeを配置できるレイアウトを提供します。
  2. Hbox・・・横方向にノードを配置できるレイアウトを提供します。
  3. VBox・・・縦方向にノードを配置できるレイアウトを提供します。
  4. StackPane・・・ノードをスタック構造で配置できるレイアウトを提供します。
  5. GridPane・・・グリッドを基にノードを配置できるレイアウトを提供します。
  6. FlowPane・・・縦横(HBoxとVBoxを併せたような)にレイアウトを提供します。
  7. TitlePane・・・ノードにタイトルを配置するレイアウトを提供します。
  8. AnchorPane・・・アンカーを基にリサイズしても崩れないレイアウトを提供します。

 

 ペイントツールのUI

 ためしに何の機能も持っていない空のJavaFXアプリケーションを作成してみました。全体の構造は下の通りです。

f:id:asa_r:20170512225218p:plain

 rootノードにBorderPaneをおき、メニューバーをHBoxとしてトップに配置し、ツールバーとパレット等を置くドックをVBoxで作り左右に置いた後、中央にキャンバスを生のPaneでラップしてから配置しました。実際にコードを走らせて見ると下のようになります。

 

f:id:asa_r:20170512225655p:plain

 

 コード

 参考までにコードはこのようになります。

gista510b13f7d2632f52ec9d7c48d4220df

 

  参考URL

 オラクル公式サイトが一番役に立ちました。後APIリファレンスも参考になります。

docs.oracle.com

mukai-lab.info