torutkのブログ

ソフトウェア・エンジニアのブログ

プレゼン資料準備 #jjug_ccc #ccc_m6

Java JavaFX

5月20日（土）に日本Javaユーザーグループ主催のJavaイベント JJUG CCC 2017 Spring が開催されます。

今回は、20分のセッションで「JavaFXでデスクトップガジェット風プログラムを作る」というお題で話をさせていただきます。時間は夕方16:45〜17:05です。JavaFXの魅力が少しでも伝えられればと思います。

プレゼン資料の準備その1　情報カード

今回、プレゼン資料の下書きに情報カードを使ってみました。情報カードにはサイズ、罫線のバリエーションがいろいろありますが、次を使ってみました。大きさが5インチとスマートフォンの画面に近いもので、罫線は無地です。

情報カード 5×3 無地 C-531

情報カード 5×3 無地 C-531

スライドをイメージして下書きとして作成してみました。

いままでは、レポート用紙（方眼）にスライドの案を絵コンテ的に書いていました。今回も最初は次のようにレポート用紙に書いていたのですが、いまいちだったので情報カードを試してみました。


プレゼン資料の準備その2 JavaFXでスライドを表示

いままでJJUG CCCなどの発表では、PowerPointを使ってきました。
ですが、Java Championの櫻庭さんがずうっとJavaFXでスライドを表示する発表をしているのをみて、いつかJavaFXでスライドを表示しようと思っていました。今回、その第1弾に取り組んでみました。

といっても、FXMLでスライドを記述し、それを順番に表示するというシンプルなものです。
まだ作りかけですが、Githubのリポジトリに置いています。
https://github.com/torutk/javaslideviewer

スライド1枚につき1つのFMXLファイルを定義し、トップレベルのビューアの中にスライドを配置するPaneを置いて、前後操作でFXMLをロードして差し替える作りとしました。

FXMLでスライドを作成するなら楽だよね、と思っていましたが、全画面表示した際の解像度は使用するプロジェクタで変わるので、単純にはいきません。AnchorPaneは、上下左右の制約をピクセルで指定するので、解像度が不明な場合に対応が困難です。そこで、BorderPaneを主に使用し、見出しラベルをTOPに、本文をCENTERに、図と本文の組み合わせは、図をCENTERに、本文をRIGHTに配置する等の使い方としました。

なお、図を表示するのにJavaFX標準のImageViewはResize不可の部品なため、BorderPaneのCENTERに置いても画面に合わせて大きくはなりません。そこで、独自にResize可能なImagePaneを作成しそれを使用しています。

デモプログラム

ガジェット風プログラムの作成をステップバイステップで説明するデモプログラムです。

https://github.com/torutk/jjugccc2017spring-javafx

ContextMenuインスタンスを生成するとStackPaneの背景が透明化でなくなる
        // ウィンドウ枠の非表示と背景透明化
        scene.setFill(Color.TRANSPARENT);
        stage.initStyle(StageStyle.TRANSPARENT);

最初は、Sceneの塗りつぶし色を透明色に設定し、Stageのスタイルを透明化にすることで、表示させたいコントロールだけが表示されていました。

ところが、コンテキストメニュー表示を行うため、ContextMenuを生成したところ、背景の透明化がなくなり、白い塗りつぶしとなってしまいました。うーん、なぜだろう。

以前作ったアナログ時計ではそんなことがなかったので、コード（FXML）を見返してみると、ルートノードに設定したStackPaneの属性で背景色を透明に設定していました。

<StackPane style="-fx-background-color: transparent;"