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 と合わせると、ちぐはぐな見た目となっている問題を解消します。

動作環境

Java11 および JavaFX 11 以上が動作するすべてのデスクトップOS

スクリーンショット

Button

KuegZlFb0eQZ0r0z6ojRoscrEh5qLc4oFhoactSnTUVpMKuTmlJ XL4uVwkN99zfNBdNplt3xwVgzvlnRzKUo FRaPsv4hK 6M6 d1BqVkxx1Y4BjiCetYHqrq6Xls5IpuTl4UcnrA=w1486 h172 no

Segmented Button

IgXbwc5TbJYJGgpdIEZOO4JtqRrzyh8TqQsa9V1H1lUEHFCLzxW7ZAh Srf8Lb KeE1Xpko2RZI00 CiS6yDfTgCSAlfV598p4a1SqG3yAtM46AThLuFNLRwR0HExu070TJr StS4w=w214 h86 no

スタイルクラスを設定するだけでセグメントボタンを実現できます。

buttonA.getStyleClass().add("left-pill");
buttonB.getStyleClass().add("center-pill");
buttonC.getStyleClass().add("right-pill");

Radio Button

lp5I VtkxHdB788GDPbJLZCRval6BSn9fdFZ2yb82wGInJLTPZ5JzhDT28Iwm4P0SPmcRbma7Lns PtGVSPjJqbtqmlmrnlN4lBgZhpqCDB4JT3oA T hgoyUASWVmKKmaOq5hThgQ=w1002 h268 no

CheckBox

WPQHJmT7VATGH0TwUFrG0qZI9YApafLv4wJ LrzehtGC8t0yhB7qhX3gsJ1Pc7 ubPnKFvXl4XPjDn6qtYm6acQdX1gPLqvzfyB fQ1z2U2sIsrTPtvcoCmfxzaR A0beupOo0t CA=w1036 h372 no

ComboBox and ChoiceBox

BSYun yDBTDpj1biqeMaLAdNiWBJDcxRFdqTgC2deKMMxJMQcTRG7o3SjVa20y2O1nC5FoVPsuZatOEhYWMY SdviM8CuyDKY9YsSWXD691PlHRAoJofHUq2NXq5uwh6IpYwD2ex9g=w1136 h382 no

cdKLicmzTf5W2AGFy9ySMhyWu1gEmfIHYsf UGZjDPBZwRA3 FqR7sbaD4kvmoaGmuiGpvtpaZzktT2EnX2g14pPKtygnaLkcpe7no8HVIJZyoeMyMuYB3b66sqvA3 eRHS8p7CPKA=w414 h330 no

Figure 1. ComboBox popup

Spinner

4vpVMSP6X29AX76f4hZY4dGn4ll6Yg ZDuJKfMv6C8 V1oBKnTe jytqbb4aZffAPDgFk5mvzU lXa5twcVSNVhLVe6kfO7YwKCUwt6uXwd0AsWMRpbl3wquUxHHeCpg2It6RYvVDw=w756 h704 no

スピンボタンの位置をスタイルクラスを指定することで変更できます。

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
);

7G4ymRKFu05hxYdeFS821N mBG7R7yW5AudyA1lBI3kVGDF3avfCp1romoXfyCfzq6ooQsgz3t26sIsBImKnt6GSlGcbz6fR7yJIeFAIV4XjE84NjVG9L hYQFslVJ2 1p46BLX29w=w756 h642 no

Figure 2. simple

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

Figure 3. Date Picker popup

Figure 4. Color Picker popup

Figure 5. Custom Colors Dialog

Pagination

Qyi2sXNDhhpVcmIln9amJ0t ImGqo0GkiUUs7zJT8b3KM14Aph9jpgsCeNza8aBV0mkciVE5q1sjMPZ5fMgq ttBTw7BAaFLmOI4oB7TTErgOFAq eP1 Y41pqpRiIbfZh4 wQ5RiQ=w762 h110 no

BACJxc25i1Ssq8unLw6BTZIJjEAw3utOBh6A7TO2OS9fNM5z6e300ol1Qv ArpoEL C LDPfWawUcVmA0jDtSCZsqTLtX 1UAmWTfm8v K oIs4fCcMHj4BY5xM3pRVcyTUc7ALNA=w976 h1022 no

Figure 6. 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");