読者です 読者をやめる 読者になる 読者になる

CSS による表示の変更

今日もITproで容量オーバーでカットした部分です。

HTMLがCSSを採用してから、GUIでもスタイルシートなどを使用して外部から見た目を変化させることが当たり前になってきました。

もちろん、JavaFXでもCSSをサポートしています。

JavaFXCSSを指定する方法は、スクリプト中に埋めこむ方法と、外部ファイルに記述して読み込む方法の2種類があります。

スクリプトにCSSを埋めこむ

まず、スクリプト中に埋めこむ方法について解説しましょう。

ベースとなるスクリプトを以下に示します。

Stage {
    title: "CSS Sample"
    scene: Scene {
        width: 200 height: 150
        content: [
            Label {
                layoutX: 10 layoutY: 20
                text: "Label"
            },
            Button {
                layoutX: 100 layoutY: 18
                text: "Button"
            },
            Rectangle {
                x: 50 y: 70 width: 100 height: 60
            }
        ]
    }
}

ラベル、ボタン、四角を表示するスクリプトです。実行すると、以下の図のようになります。


f:id:skrb:20101125142216j:image


ここに次のようなスタイルを追加します。

  • ラベル: フォントサイズ、背景色、文字色、パディング
  • ボタン: フォントサイズ、背景色、文字色
  • 四角: 塗り色、線色

スクリプトにCSSを埋めこむには、Nodeクラスのstyleプロパティを使用します。

Stage {
    title: "CSS Sample"
    scene: Scene {
        width: 200 height: 150
        content: [
            Label {
                layoutX: 10 layoutY: 20
                text: "Label"
                // CSS の設定
                style: "-fx-font-size: 24; -fx-padding: 0 5 0 5; "
                       "-fx-background-color: lightblue; "
                       "-fx-text-fill: midnightblue;"
            },
            Button {
                layoutX: 100 layoutY: 18
                text: "Button"
                // CSS の設定
                style: "-fx-font-size: 24; "
                       "-fx-background-color: lightblue; "
                       "-fx-text-fill: midnightblue;"
            },
            Rectangle {
                x: 50 y: 70 width: 100 height: 60
                // CSS の設定
                style: "-fx-fill: lightsteelblue; -fx-stroke: black;"
            }
        ]
    }
}

styleプロパティにCSSを記述します。

JavaFXで使用できるCSSのプロパティはすべて-fx-で始まっています。HTMLで使用するCSSのプロパティとは異なるので、注意が必要です。

JavaFXで使用できるCSSのプロパティに関しては以下のドキュメントを参考にしてください。

JavaFX CSS Reference Guide

では、実際に実行してみましょう。


f:id:skrb:20101125144759j:image



UIコントロールだけでなく、シェイプもCSSでスタイルを変更することができるのがうれしいところです。

外部ファイルでCSSを設定する

次に、外部のファイルに記述する方法です。

まずはNetBeansスタイルシートを作成しましょう。プロジェクトペインで、スタイルシートを作成するパッケージを右クリックします。すると以下の図のようなポップアップメニューが表示されるので、[新規]-[JavaFX カスケードスタイルシート]を選択します。


f:id:skrb:20101125155248j:image



すると、下図に示したダイアログが表示されるので、任意のファイル名を入力します。ここではstylesheetという名前にしました。右下の[完了]ボタンをクリックするとスタイルシートが生成されます。


f:id:skrb:20101125155627j:image

生成したスタイルシートはデフォルトで以下の内容が記述されています。

.scene {
    /* The default font for all content, it in inherited by all nodes */
    -fx-font: 12pt "Amble Cn";
 
    /* Main color palette that the user should play with to change colors of controls */
    -fx-accent: #0093ff;
    -fx-base: #d0d0d0;
    -fx-background: #f4f4f4;
    -fx-control-inner-background: white;
    -fx-focus-color: #0093ff;
    -fx-dark-text-color: black;
    -fx-mid-text-color: #292929;
    -fx-light-text-color: white;
}

sceneクラスセレクタで記述すると、シーン全体に対するスタイルの指定となります。

ここでは、以下のようなスタイルに変更します。

#label {
    -fx-font-size: 36;
    -fx-padding: 0 10 0 10;
    -fx-background-color: lightpink;
    -fx-text-fill: crimson;
}
 
#button {
    -fx-font-size: 36;
    -fx-background-color: lightpink;
    -fx-text-fill: crimson;
}
 
.rect {
    -fx-fill: tomato;
    -fx-stroke: darkred;
}


#で指定しているのがIDセレクタ、.で指定しているのがクラスセレクタになるのは、HTMLの場合と同じです。

では、スクリプトを更新しましょう。

Stage {
    title: "CSS Sample"
    scene: Scene {
        width: 200 height: 150
        
        // スタイルシートの指定
        stylesheets: [ "{__DIR__}stylesheet.css" ]

        content: [
            Label {
                layoutX: 10 layoutY: 20
                text: "Label"
                id: "label"
            },
            Button {
                layoutX: 100 layoutY: 18
                text: "Button"
                id: "button"
            },
            Rectangle {
                x: 50 y: 70 width: 100 height: 60
                styleClass: "rect"
            }
        ]
    }
}


外部スタイルシートを読み込むには、Sceneクラスのstylesheetsプロパティを設定します。プロパティ名が複数になっていることからも分かるとおり、複数のスタイルシートを読み込むことができます。

IDセレクタを使用する場合、Nodeクラスのidプロパティを指定します。クラスプロパティを使用する場合、styleClassプロパティを使用します。

実行結果を下図に示します。外部にスタイルシートを配置することにより、コンパイルをしなくてもスタイルを変更することができます。


f:id:skrb:20101125162859j:image



このようにJavaFXではCSSをサポートしていますが、制限もあります。

たとえば、":lang"のような疑似クラスはほとんどが使えません。使用できるのは、":presssed"、":focused"、またハイパーリンクに対する":visited"も使用できます。

これ以外にもエフェクトはドロップシャドウとインナーシャドウしか使用できないなどの制限があります。

詳しくはJavaFX CSS Reference Guideをご覧ください。