JavaFXアプリケーションのSceneGraphをScenicViewで確認する
これはJavaFX Advent Calendar 2014 15日目のエントリとなります。
昨日は@fukai_yasさんの「JavaFXでJavaとJavaScriptの連携」でした。
JavaFXで何か作っている時に表示が思い通りにならず、SceneGraphのツリー構造や各Nodeの状態を確認したくなることは多々あると思います。
で、ログを仕込んでアプリを起動して出力されたログを確認して、またログを仕込んで確認して、と面倒な作業の繰り返しになってしまうことも少なくありません。
そんな時、ScenicViewというツールでJavaFXアプリケーションを確認すると便利なので紹介します。
「ScenicView」とは？
JavaFXアプリケーションのシーングラフの構造やシーングラフ上のNodeのプロパティを確認することができるツールです。
またNodeのプロパティをツールから変更することも可能です。
ブラウザに付属しているデベロッパーツールみたいなものだと言えば分かりやすいでしょうか。
Oracleの JavaFX Third Party Tools and Utilities というページでも紹介されていますし、開発者はOracleのJavaFXの中の人なのでかなり有名なツールなんだと思います。
v8.0.0 が2014/9にリリースされておりJavaFX 8 のアプリケーションにも正式に対応しているようです。
このツール自身もJavaFXで開発されておりソースはここで公開されています。
起動方法
公式サイトから ScenicView.jar をダウンロードします。
以下3つの起動方法があります。
1. jarを実行
この方法が一番簡単なのでこれで良いと思います。
ScenicView.jarをダブルクリックするとJDKのホームディレクトリを聞かれるので設定するだけです。
あとはツールが起動するのでその後に対象のJavaFXアプリを起動すると自動で検知しSceneGraphが表示されます。
2. コードから呼び出す
ScenicView.show(scene);
ScenicView.jarにクラスパス通して上記コードを呼び出すだけ。引数には対象のNodeかSceneを渡せます。
試しにHTMLEditorを確認してみる
標準コンポーネントのHTMLEditorを表示するとこんな感じです。
左側にSceneGraph上のNodeのツリー構造、右側には選択したNodeのプロパティを確認することができます。
Nodeのプロパティはすべて確認できるようになっていますし、四角いアイコンがある項目はScenicViewから変更することも可能です。
対象のNodeが独自コンポーネントの場合でもpropertyメソッドがあればちゃんと項目として表示してくれます。
左側のツリーからNodeを選択するとアプリケーション上のコンポーネントをハイライトしてくれる機能もあります。
上とは逆にアプリケーション上のコンポーネントを選択するとツリー上のNodeを選択してくれる機能もあります。
使いどころ
- 開発時の表示の確認
FXMLを使用せずに動的にSceneGraphにNodeを追加したり削除したりするようなアプリケーションではツリー構造やNodeの状態が意図通りになっていないことがあったりするので確認に便利です。
また座標をゴニョゴニョしていたりする場合、慣れていないと大変だと思うのですが選択Node、Boundsのハイライトが参考になり理解を助けてくれると思います。
ただし全てのビューをSceneBuilderを使ってFXMLで表現できるようなアプリケーションであれば使用する必要はないかもしれません。
- 自分以外が開発したJavaFXアプリケーションの確認
リリース前の最新版の新機能を確認してみた
今後どのような機能が追加されるのか気になったのでリリース前の最新版を動かして確認してみたら面白い機能がありました。（便利な機能かどうかは別として）
ThreeDOMというタブが追加されているのでこれを選択するとシーングラフの構造を3Dで表現してくれるみたいです。面白いので画像貼っておきます。なんかすごい。。。
他にもCSSFXというタブも追加されてたりしたので今後の機能追加にも期待です。
JavaFXの開発をしていてまだScenicViewを使用されたことがない方は一度試してみてはいかがでしょうか？
明日は shunsuke.mori.393 さんです。
