えいのうにっき

a-knowの日記です

JavaFX Scene Builderを触ってみた!

こんにちは、a-knowです。 昨日はオープンセミナー2012@岡山があったり、開発コンテスト24があったりと慌ただしい一日ではありましたが、それとは全く関係のないエントリを投下してみたいと思います。

最近、「(自分にとって)新しい技術のつまみ食い」の節操の無さが過ぎるようにも思うのですが、触ってみたいもんは仕方がない!と開き直ることにしまして、今回は「JavaFX Scene Builder」を触ってみましたので、その話題です。

Googleで調べても、まだあまり日本語の情報はないようで(ひしだまさんのところがとても丁寧にまとめられています)、「気にはなっているけど、日本語の情報の少なさにまだ多くの方が戸惑っている状況」なのかな〜?と、勝手に思ったり思わなかったり。

今回触るに至ったきっかけ

  • きっかけは、メインPCの買い替えでした。
  • OS(Windows)が32bit→64bitになり、自分の作っている「sa-boom!! client」の開発環境(Visual Editor on Eclipse)が(単純な引越しでは)動かなくなってしまいました
    • メッチャ古いEclipseを無理やり使ってたから...:-p
  • もちろん、新しいEclipseにVisualEditorを放り込めばいいんだろうけど・・・
  • 前々から気にはなってた(サンプルプロジェクトを少しいじったりはしてた)JavaFX 2での同プログラムの再構築の、良いタイミングじゃね?と考えることにした

現時点でのJava FX, Java FX Scene Builderの状況

  • 以前サンプルをいじったりしてたタイミングでは、Visual Editor的な(直感的にデザイン・controll/containerの配置ができる)ものがまだ整備されていなかった
  • 今回のタイミングで調べてみると、その位置づけであるツール「Scene Builder」が使えるようになっていることが判明。
    • とはいえ、JavaFX 2.2 SDK(Developer Version)が必要であるようでしたが。
      • “In order to compile your JavaFX controller source code that your FXML layout binds to, you must install the latest JavaFX 2.2 SDK Developer Preview software.”
    • Developer Versionで作り込みすぎるのもちょっと怖いけど・・・。

使う準備。まずはJavaFX 2そのものから

  • そもそも、JavaFX 2のGetting Start的なドキュメントはこちら
    • 「Getting Start」から見てみた
.root {
     -fx-background-image: url("background.jpg");
}
  • マウスオーバー時のボタンのデザイン変更もできる。
.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}
        - 「[http://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm:title=User Interface Design with FXML]」
            - FXMLを使ったデザインの仕方。と思われます
            - というのも、パッと見、こっちの方法では自分は作らないだろな・・・と思ってしまったので:-p
        - 「[http://docs.oracle.com/javafx/2/get_started/fxml_tutorial.htm:title=Animated Shapes and Visual Effects]」
            - 様々なアニメーション・視覚効果のお話。と思われます
            - これも見ていません・・・当面はこういうものを要するものを作る予定がないので。。
        - 「[http://docs.oracle.com/javafx/2/get_started/basic_deployment.htm:title=Deployment Quickstart]」
            - 完成したものの配布形式のお話。面白かった!
            - -スタンドアロンモード
            - --デスクトップアプリケーション。コンパイル済みのクラスファイルをまとめたjarファイルはNetBeans IDEにより常に自動的に作られていて(プロジェクトディレクトリ内、distディレクトリ)、これをダブルクリックするだけでOK!
            - -ウェブスタートモード
            - --同じく自動的に作られるjnlpファイルをダブルクリックするか、これまた自動的に作られるhtmlファイル内のリンクをクリックするだけでOK!
            - --このhtmlにマニュアルとか注意事項とかも書いちゃえば、ユーザーにも優しいですよね:-)
            - -ブラウザ実行モード
            - --上のモードとの、ドキュメント内での記述の意味の違いがよくわからんかったです・・・。
  • To run as a Web Start application, either click the link in the HTML page in your browser or double-click the JNLP file. The advantage of using the link in the browser is that the web page contains logic that uses the Deployment Toolkit, which checks to ensure that the minimum required version of both the Java and JavaFX Runtimes are installed on the user's system.
  • To run the application in a web page, open the HTML file in a browser.

で、やっとScene Builderの出番です(準備編)

  • 「Getting Start」の次の項目として、「Scene Builder」がありますね〜。独立した一項目なんですね〜。
  • Getting Started with JavaFX Scene Builder
    • 「Prepare for This Tutorial」をさっと流し読むと、なにやらこんな文言が。
      • “This tutorial requires that you already have JavaFX 2.2 Developer Preview software installed on your system and configured for use with the latest version of NetBeans 7.1.”
      • “You must download the JavaFX Scene Builder 1.0 samples that are included in the javafx_scenebuilder_samples-1_0-beta.zip file that is described in the previous section.”
    • ここでも冒頭に書いたとおり、JavaFX 2.2 SDK(Developer Version)が必要である様子。
    • ええい、面倒な!ここで、以下のものをダウンロード・インストール。

・・・で、やっとScene Builderの出番です(実践編)

  • 引き続き「Getting Started with JavaFX Scene Builder」。
    • まずはメインウインドウの簡単な説明から、既存のFXMLファイルを開き、別名で保存する手順を解説。
      • ここでつまづくことはないでしょう:-)
    • 次に、各controllを配置してみる。

    • サイズを親要素に合わせるには、「fit to parent」を使う

    • 続いて、UIとロジックをバインドする手順。

      • ドキュメントには「Click the Document pane in the Inspector panel.」とあるけど、今のバージョンではDocumentペインと表示はされていない??
      • 単に、rootのAnchorPaneを選択した状態で、画面右の「Code : AnchorPane」内「Controller class」で選べばいいみたい。
      • その後、各controllごとに「fx:id」を指定することで、UIとロジックが紐付けされる。
      • これはHierarchyペイン(fx:id showモードにして、各コントロールの右側でクリックすることで編集モードになる)でもPropertiesペイン(ドロップダウンリストからの選択式)でも、どちらでも行える。
      • ここに限らず、このドキュメントでは一つの目的に対していろんなアプローチを教えてくれるから、惚れてまいます。
    • その後もドキュメント通りに、各controllを配置していきます

      • 配置の際にガイドラインが出るのも、今や当たり前なのかもしれないけど、とてもいいですよね。
    • show sample dataが完成形をイメージする際にイイね!
      • 配置されたcontrollにあったサンプルデータを表示してくれる機能。↓なかんじ。

- wrap inもステキ。
    - 配置した各controllを、<span class="deco" style="font-weight:bold;">あとから(例えばHBoxとかで)自動でまとめる</span>ことができる機能!
    - まずはポンポンcontrollを配置していって、あとから適切にまとめていくこともできるなー。
- controllとイベントとのヒモ付は「Code」ペイン内の「On Action」などを指定することで行う。

- ウインドウのリサイズ時の挙動の指定も簡単!
    - LayoutのAnchorPane Constraint、HBox ConstraintsのHgrow、で
    - 上下左右のラインをクリックすることで、選択状態(赤線)にできる。
    - 選択状態にしておくことで、<span class="deco" style="font-weight:bold;">その外側の要素と連動させるかどうかの指定</span>になる。
        - このように選択しておくと・・・

        - このように、リサイズ時でも一緒についてくる。

        - 選択しないでおくと・・・

        - リサイズしても、要素は取り残されたまま。

    - で、<span class="deco" style="font-weight:bold;">fit to parentにしたものは自動的に全ての辺が選択状態になる</span>みたい。
    - Hgrowってのは、横幅を変化させたときにそれに連動して変化させるかどうか、の指定っぽい。
    - ここらへんのことは、[http://www.ne.jp/asahi/hishidama/home/tech/java/fx/sb/AnchorPane.html:title=ひしだまさんのところ]で、とてもわかりやすく解説されていました:-)

- カーソルキーでピクセル単位で移動。shiftキーを押しながらのカーソルキーで、10ピクセルごとの移動。
- こうして作ったUIに対して、cssを指定・適用することも可能!
    - ただ、スタイルを適用させたいcontrollひとつひとつに対して、StyleClassの指定はしなきゃいけないみたい。

できたよー!

これでなんとか基本は把握できたと思うので、あとは今回のゴールとなるものを作る過程で、いっこずつ調べていけばいいかな?

超・行き当たりばったり!なんとかなる!!

関連エントリ

blog.a-know.me

JavaFX GUIプログラミング〈Vol.1〉

JavaFX GUIプログラミング〈Vol.1〉

Javaプログラマーなら習得しておきたい Java SE 8 実践プログラミング (impress top gear)

Javaプログラマーなら習得しておきたい Java SE 8 実践プログラミング (impress top gear)