背景

Material design はアプリだけでなく Web サイトでも使われていて、最近では大分見慣れてきた感があります。せっかくなのでデスクトップアプリでも Material design を取り入れてみたいところです。
今回は JFoenix という OSS を導入してみます。

Material design とは

Google が発表した新しいUIデザインのガイドラインで、Android OS 5.0 以降の標準 UI として採用されています。

JFoenix とは

JavaFX アプリケーションの見た目を Material design に変更できる UI ライブラリです。

特徴

マイグレーションコストが低いです。
基本的な JavaFX の Control を継承して作られているので、FXML ファイルを書き換えれば導入することができます。

ライセンス

元々 LGPL だったのが、最近 Apache version 2 に変更されました。企業でも使いやすくなっています。

Control クラス

標準の Control クラスに「JFX」の prefix がついた形で命名されています。
(ex) Button → JFXButton

テキストエディタで置換する場合は defaultButton 等のプロパティを書き換えないよう注意してください。

現在用意されている Control (GitHub Repository)

導入

ライブラリをダウンロード

プロジェクトのライブラリフォルダに配置

今回は libs 以下に置きます。

build.gradle の dependencies に下記を追加

compile fileTree(dir: 'libs', include: '*.jar')

FXML に下記の import を追加

<?import com.jfoenix.controls.*?>

FXML の Control クラスを対応する JFoenix のクラスに置換

ほとんどのクラスは頭に JFX を付けるだけで置き換え可能です。

デモ

試しに下記の JavaFX アプリケーションに JFoenix を導入してみました。

導入前

いかにもなデスクトップアプリの見た目です。

導入後

このような感じで、やや平面的な見た目になりました。

TextField にフォーカスが当たると下線が太くなります。

Button をクリックすると、ちゃんと Ripple 効果が出ます。

変更差分

前述の通り、 build.gradle と FXML ファイルの修正だけで適用できました。

備考

Toolbar や Toggle 、Snackbar等の、標準では用意されていない Control も揃っています。

2016/09/03 追記

OpenJDK9のEarly Access版を入れてみたところ、下記のエラーが発生しました。

java.lang.NoClassDefFoundError: com/sun/javafx/css/converters/PaintConverter
        at com.jfoenix.controls.JFXTextField$StyleableProperties.<clinit>(JFXTextField.java:212)
        at com.jfoenix.controls.JFXTextField.<init>(JFXTextField.java:163)

同名のクラスは、 JavaFX9 だと javafx.css.converter.PaintConverter にあるようです。
http://download.java.net/java/jdk9/jfxdocs/index.html

ちょっとこれはどうしようもないので、対応を待つかプルリクエストを送るしかなさそうです。

JFoenix で Material design を JavaFX に適用する

背景