ドキュメント



ご意見をお寄せください | 印刷 | PDF | ePub | Mobi
JavaFX: JavaFXスタート・ガイド

5 JavaFX CSSによる装飾的なフォーム

このチュートリアルでは、カスケード・スタイルシート(CSS)を追加することによって、人を引き付けるJavaFXアプリケーションにすることについて説明します。デザインを策定し、.cssファイルを作成して、新しいスタイルを適用します。

このチュートリアルでは、図5-1に示すように、ラベル、ボタンおよび背景色にデフォルトのスタイルを使用するログイン・フォームを取り上げ、CSSでいくつかの単純な変更を加えて、スタイル設定されたアプリケーションに変えます。

図5-1 ログイン・フォーム(CSSありとCSSなし)

図5-1の説明が続きます
「図5-1 ログイン・フォーム(CSSありとCSSなし)」の説明

この開始チュートリアルで使用するツールは、NetBeans IDEです。開始する前に、使用しているNetBeans IDEのバージョンでJavaFX 8がサポートされていることを確認します。詳細は、「Java SE Downloads」ページの「Certified System Configurations」ページを参照してください。

プロジェクトの作成

最初から開始ガイドに従って進めてきた場合は、このチュートリアルに必要なLoginプロジェクトはすでに作成されています。それ以外の場合は、Login.zipを右クリックしてファイルシステムに保存することで、Loginプロジェクトをダウンロードします。zipファイルからファイルを抽出し、NetBeans IDEでプロジェクトを開きます。

CSSファイルの作成

最初のタスクは、新しいCSSファイルを作成し、アプリケーションのメイン・クラスと同じディレクトリに保存することです。その後で、新しく追加したカスケード・スタイルシートがJavaFXアプリケーションに認識されるようにする必要があります。

  1. NetBeans IDEの「プロジェクト」ウィンドウで、Loginプロジェクト・ノードを展開し、次に「ソース・パッケージ」ディレクトリ・ノードを展開します。

  2. 「ソース・パッケージ」ディレクトリの下のloginフォルダを右クリックし、「新規」→「その他」を選択します。

  3. 「新規ファイル」ダイアログ・ボックスで、「その他」→「Cascading Style Sheet」を選択し、「次」をクリックします。

  4. 「ファイル名」テキスト・フィールドにLoginと入力し、「フォルダ」テキスト・フィールドの値がsrc\loginであることを確認します。

  5. 「終了」をクリックします。

  6. Login.javaファイルで、例5-1と同じようになるように、次に太字で示すコード行を追加することによって、Sceneクラスのstyle sheets変数をカスケード・スタイルシートを指すように初期化します。

    例5-1 stylesheets変数の初期化

    Scene scene = new Scene(grid, 300, 275);
primaryStage.setScene(scene);
scene.getStylesheets().add
 (Login.class.getResource("Login.css").toExternalForm());
primaryStage.show();

    このコードでは、スタイルシートをNetBeansプロジェクトのsrc\loginディレクトリで検索します。

背景イメージの追加

背景イメージを使用すると、人を引き付けるフォームを作成できます。このチュートリアルでは、リネンのような質感の灰色の背景を追加します。

最初に、background.jpgイメージを右クリックしてLogin NetBeansプロジェクトのsrc\loginフォルダに保存することによって、背景イメージをダウンロードします。

ここで、background-imageプロパティのコードをCSSファイルに追加します。パスはスタイルシートに対して相対的であることに注意してください。したがって、例5-2のコードでは、background.jpgイメージはLogin.cssファイルと同じディレクトリ内にあります。

例5-2 背景イメージ

.root {
     -fx-background-image: url("background.jpg");
}

背景イメージは.rootスタイルに適用されますが、これはSceneインスタンスのルート・ノードに適用されることを意味します。スタイル定義は、プロパティの名前(-fx-background-image)とプロパティの値(url("background.jpg"))で構成されます。

図5-2に、新しい灰色の背景を持つログイン・フォームを示します。

図5-2 灰色のリネンの背景

図5-2の説明が続きます
「図5-2 灰色のリネンの背景」の説明

ラベルのスタイル設定

次に拡張するコントロールは、ラベルです。.labelスタイル・クラスを使用しますが、これはスタイルがフォーム内のすべてのラベルに影響することを意味します。例5-3に、コードを示します。

例5-3 ラベルのフォント・サイズ、塗りつぶし、太さ、効果

.label {
    -fx-font-size: 12px;
    -fx-font-weight: bold;
    -fx-text-fill: #333333;
    -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );
}

この例では、フォント・サイズおよびフォントの太さを増し、灰色(#333333)のドロップ・シャドウを適用します。ドロップ・シャドウの目的は、濃い灰色のテキストと薄い灰色の背景の間にコントラストを追加することです。ドロップ・シャドウ・プロパティのパラメータの詳細は、JavaFX CSSリファレンス・ガイドの効果に関する項を参照してください。

拡張された「User Name」および「Password」ラベルを図5-3に示します。

図5-3 ドロップ・シャドウが適用された、大きく太くなったラベル

図5-3の説明が続きます
「図5-3 ドロップ・シャドウが適用された、大きく太くなったラベル」の説明

テキストのスタイル設定

ここでは、テキストWelcomeを含むscenetitleと、ユーザーが「Sign in」ボタンを押したときに返されるテキストであるactiontargetという、フォーム内の2つのTextオブジェクトに対する特殊効果を作成します。このような様々な方法で使用されるTextオブジェクトに、様々なスタイルを適用できます。

  1. Login.javaファイルで、テキスト・オブジェクトに現在設定されているインライン・スタイルを定義している次のコード行を削除します。

    scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20));

    actiontarget.setFill(Color.FIREBRICK);

    インライン・スタイルからCSSに切り替えることによって、デザインをコンテンツから分離します。このアプローチにより、設計者はコンテンツを変更しなくてもスタイルを簡単に制御できます。

  2. NodeクラスのsetID()メソッドを使用することによって、各テキスト・ノードのIDを作成します。例5-4に示すようになるように、次の太字の行を追加します。

    例5-4 テキスト・ノードのIDの作成

    ...
Text scenetitle = new Text("Welcome");
scenetitle.setId("welcome-text");
...
...
grid.add(actiontarget, 1, 6);
actiontarget.setId("actiontarget");
..

  3. Login.cssファイルで、ID welcome-textおよびactiontargetのスタイル・プロパティを定義します。スタイル名については、例5-5に示すように、IDの前に番号記号(#)を付けたものを使用します。

    例5-5 テキスト効果

    #welcome-text {
   -fx-font-size: 32px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
#actiontarget {
  -fx-fill: FIREBRICK;
  -fx-font-weight: bold;
  -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 );  
}

Welcomeテキストのサイズが32ポイントに増やされ、フォントがArial Blackに変更されます。テキストの塗りつぶしの色が濃い灰色(#818181)に設定され、インナー・シャドウ効果が適用されてエンボス効果が生成されます。インナー・シャドウは、テキストの塗りつぶしの色を背景の色の濃いバージョンに変更することで、任意の色に適用できます。インナー・シャドウ・プロパティのパラメータの詳細は、JavaFX CSSリファレンス・ガイドの効果に関する項を参照してください。

actiontargetのスタイル定義は、以前に確認したものと同様です。

図5-4に、2つのTextオブジェクトに対するフォントの変更とシャドウ効果を示します。

図5-4 シャドウ効果が適用されたテキスト

図5-4の説明が続きます
「図5-4 シャドウ効果が適用されたテキスト」の説明

ボタンのスタイル設定

次の手順では、ボタンにスタイルを設定し、ユーザーがマウスをあわせたときにスタイルが変わるようにします。この変更によって、ボタンがインタラクティブであることをユーザーに示します(標準的な設計手法)。

最初に、例5-6のコードを追加して、ボタンの初期状態のスタイルを作成します。このコードでは、後の日付でボタンをフォームに追加した場合に新しいボタンでもこのスタイルが使用されるように、.buttonスタイル・クラス・セレクタが使用されます。

例5-6 ボタンのドロップ・シャドウ

.button {
    -fx-text-fill: white;
    -fx-font-family: "Arial Narrow";
    -fx-font-weight: bold;
    -fx-background-color: linear-gradient(#61a2b1, #2A5058);
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 );
}

ここで、ユーザーがボタンにマウスをあわせたときのために、少し異なる表示を作成します。これは、hover擬似クラスで行います。例5-7に示すように、擬似クラスには、クラスのセレクタと状態の名前がコロン(:)で区切られて含まれています。

例5-7 ボタンのホバー・スタイル

.button:hover {
    -fx-background-color: linear-gradient(#2A5058, #61a2b1);
}

図5-5に、新しい青灰色の背景と白い太字のテキストを持つボタンの初期状態とホバー状態を示します。

図5-5 ボタンの初期状態とホバー状態

図5-5の説明が続きます
「図5-5 ボタンの初期状態とホバー状態」の説明

図5-6に、最終的なアプリケーションを示します。

図5-6 スタイル設定された最終的なアプリケーション

図5-6の説明が続きます
「図5-6 スタイル設定された最終的なアプリケーション」の説明

次に実行すること

次に試してみることをいくつか示します。

ウィンドウを閉じる

目次

JavaFX: JavaFXスタート・ガイド

展開 | 縮小