Hatena::ブログ(Diary)

suzukijの日記 このページをアンテナに追加 RSSフィード Twitter

2014-12-15

JavaFXアプリケーションのSceneGraphをScenicViewで確認する

これはJavaFX Advent Calendar 2014 15日目のエントリとなります。

昨日は@fukai_yasさんの「JavaFXでJavaとJavaScriptの連携」でした。


JavaFXで何か作っている時に表示が思い通りにならず、SceneGraphのツリー構造や各Nodeの状態を確認したくなることは多々あると思います。

で、ログを仕込んでアプリを起動して出力されたログを確認して、またログを仕込んで確認して、と面倒な作業の繰り返しになってしまうことも少なくありません。

そんな時、ScenicViewというツールJavaFXアプリケーションを確認すると便利なので紹介します。


「ScenicView」とは?

JavaFXアプリケーションのシーングラフの構造やシーングラフ上のNodeのプロパティを確認することができるツールです。

またNodeのプロパティツールから変更することも可能です。

ブラウザに付属しているデベロッパーツールみたいなものだと言えば分かりやすいでしょうか。

 

OracleJavaFX Third Party Tools and Utilities というページでも紹介されていますし、開発者はOracleJavaFX中の人なのでかなり有名なツールなんだと思います。

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を渡せます。


3. JVMオプション -javaagent を追加
-javaagent:ScenicView.jar

 確認対象のアプリケーションを起動する際に上記オプションを追加します。


試しにHTMLEditorを確認してみる

標準コンポーネントのHTMLEditorを表示するとこんな感じです。

左側にSceneGraph上のNodeのツリー構造、右側には選択したNodeのプロパティを確認することができます。

Nodeのプロパティはすべて確認できるようになっていますし、四角いアイコンがある項目はScenicViewから変更することも可能です。

対象のNodeが独自コンポーネントの場合でもpropertyメソッドがあればちゃんと項目として表示してくれます。

f:id:suzukij:20141214020921p:image


左側のツリーからNodeを選択するとアプリケーション上のコンポーネントハイライトしてくれる機能もあります。


上とは逆にアプリケーション上のコンポーネントを選択するとツリー上のNodeを選択してくれる機能もあります。


使いどころ

  • 開発時の表示の確認

FXMLを使用せずに動的にSceneGraphにNodeを追加したり削除したりするようなアプリケーションではツリー構造やNodeの状態が意図通りになっていないことがあったりするので確認に便利です。

また座標をゴニョゴニョしていたりする場合、慣れていないと大変だと思うのですが選択Node、Boundsのハイライトが参考になり理解を助けてくれると思います。

ただし全てのビューをSceneBuilderを使ってFXMLで表現できるようなアプリケーションであれば使用する必要はないかもしれません。


標準コンポーネントオープンソースアプリなどを参考にしたい場合、このツールで手軽に確認できるのは便利です。


リリース前の最新版の新機能を確認してみた

今後どのような機能が追加されるのか気になったのでリリース前の最新版を動かして確認してみたら面白い機能がありました。(便利な機能かどうかは別として)

ThreeDOMというタブが追加されているのでこれを選択するとシーングラフの構造を3Dで表現してくれるみたいです。面白いので画像貼っておきます。なんかすごい。。。


他にもCSSFXというタブも追加されてたりしたので今後の機能追加にも期待です。

JavaFXの開発をしていてまだScenicViewを使用されたことがない方は一度試してみてはいかがでしょうか?


明日は shunsuke.mori.393 さんです。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/suzukij/20141215/1418570419
リンク元