Snow Flower Look and Feel

Snow Flower Look And Feel (Snow Flower LnF) はクロスプラットフォームで多くの デスクトップOSで動作する JavaFX 向けのルックアンドフィールです。 雪面に咲く花をモチーフにデザインされています。美しい見た目と使いやすさを両立しホビーユースからビジネスユースまで幅広くサポートします。 Web のすべての環境で統一的したデザインで、どのプラットフォームでも同じルックスとなります。

Snow Flower LnF は YOSBITS の提案するデスクトップアプリケーションのアーキテクチャの為にデザインされています。

JavaFXはエンタープライズ・ビジネス・アプリケーション向けに、ハードウェア・アクセラレーション対応の軽量Java UIプラットフォームを提供する目的で設計されています。

特徴

Snow Flower LnF は 次の特徴を備えています。

美しいルックスと、より良い振る舞い

魅力的で美しいデザインと、ネイティブのデスクトップ環境に適合した振る舞いになっています。 JavaFX のデフォルトスキンより優れたユーザ体験をユーザーにもたらします。

コード資産の再利用

JavaFX と Swing と JavaScript のコード資産をシームレスに活用できるように配慮されています。

  • Snow Flower LnF は JavaFX の WebView に反映されます。Webベースのアプリケーションを、見た目にもシームレスにJavaFX アプリケションに統合することが出来ます。Webテクノロジーベースの多くのオープンソース資産を利用することが出来ます。

  • Snow Flower LnF は Swing の Nimbus LnF と組み合わても違和感がないデザインです。JavaFX のデフォルトのテーマ(Modena や Caspian)は Nimbus LnF と合わせると、ちぐはぐな見た目となっている問題を解消します。

動作環境

  • JavaFX 8 以上が動作するすべてのデスクトップOS

スクリーンショット

Controls

Button

Segmented Button

スタイルクラスを設定するだけでセグメントボタンを実現できます。
buttonA.getStyleClass().add("left-pill");
buttonB.getStyleClass().add("center-pill");
buttonC.getStyleClass().add("right-pill");

Radio Button

CheckBox

ComboBox and ChoiceBox

ComboBox popup

Spinner

Simple

スピンボタンの位置をスタイルクラスを指定することで変更できます。
spinner2.getStyleClass().add(
Spinner.STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL
);
spinner3.getStyleClass().add(
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL
);
spinner4.getStyleClass().add(
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL
);
spinner5.getStyleClass().add(
Spinner.STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL
);
spinner6.getStyleClass().add(
Spinner.STYLE_CLASS_SPLIT_ARROWS_VERTICAL
);

simple スタイルクラスを追加することでシンプルなルックスに変更できます。
spinner7.getStyleClass().add("simple");
spinner8.getStyleClass().addAll(
Spinner.STYLE_CLASS_ARROWS_ON_RIGHT_HORIZONTAL,
"simple"
);
spinner9.getStyleClass().addAll(
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_VERTICAL,
"simple"
);
spinner10.getStyleClass().addAll(
Spinner.STYLE_CLASS_ARROWS_ON_LEFT_HORIZONTAL,
"simple"
);
spinner11.getStyleClass().addAll(
Spinner.STYLE_CLASS_SPLIT_ARROWS_HORIZONTAL,
"simple"
);
spinner12.getStyleClass().addAll(
Spinner.STYLE_CLASS_SPLIT_ARROWS_VERTICAL,
"simple"
);

Slider

スタイル属性に -fx-colored:true を指定することで色付きのスライダーに変更できます。
slider.setStyle("-fx-colored:true");

スライド中は現在の値を表示できます。

ProgressBar

Picker

Date Picker popup

Color Picker popup

Custom Colors Dialog

Pagination

Bullet Style

スタイルクラスを設定するだけでバレットスタイルを実現できます。
pagination.getStyleClass().add(Pagination.STYLE_CLASS_BULLET);

// Simple
pagination2.getStyleClass().add(Pagination.STYLE_CLASS_BULLET);
pagination2.setStyle("-fx-arrows-visible:false;fx-page-information-visible:false");

HTML Editor

Containers

ScrollBar

SplitPane