How to use CSS in JavaFX Part 4

今回も まだまだ JavaFX で CSS...

How to use CSS in JavaFX Part 2 でセレクタについて紹介しましたが、
なんと JavaFX でも 疑似クラス セレクタが使えるらしい...

JavaFX 1.2.1 で利用できる 疑似クラス セレクタは

• :hover
• :pressed
• :focused

のようだ。 説明は How to use CSS in JavaFX Part 2 の方にまとめました。

と言うことで...
今回は 簡単な使用例を紹介することに...

今まで紹介してきた CSS を使えば

Stage {
  scene: Scene {
    stylesheets: "{__DIR__}style.css"
    content: [
      Rectangle { id: "bg" }
      Group {
        content: [
          Rectangle { id: "foo",  styleClass: "cell" }
          Rectangle { id: "bar",  styleClass: "cell" }
          Rectangle { id: "hoge", styleClass: "cell" }
          Rectangle { id: "boo",  styleClass: "cell" }
        ]
    }
  }
}

のように たったこれだけで右図のような表示が可能なのです。
上のコードは 構造を表すコードのみで スタイルに関するコードが全く含まれていない。
とってもいい感じ...

このサンプル、右のイメージでは分かりにくいですが、実は

• コマに マウスカーソルがあたると赤色になる
• コマを クリックすると青色になる
• タブキーを押すと 黄色の枠が次のコマに移動する

といったこともできるのです。
興味のあるかたは実際に以下のボタンをクリックして試してみてください。

で、肝心な CSS ですが、こんな感じ...
スタイルが 構造から 完全に分離されていてとってもいい感じ...

style.css

.cell {
    width:   100;
    height:  100;
    fill:   #222222;
    stroke: #222222;
    strokeWidth: 0;
    focusTraversable: true;
}

.cell:hover {
    fill:   red;
    stroke: red;
    strokeWidth: 0;
}

.cell:pressed {
    fill:   blue;
    stroke: blue;
    strokeWidth: 0;
}

.cell:focused {
    stroke: #FFF04F;
    strokeWidth: 3;
}

#bg {
    width:  215;
    height: 215;
    fill:   black;
    focusTraversable: false;
}

#foo {
    layoutX: 5;
    layoutY: 5;
}

#bar {
    layoutX: 5;
    layoutY: 110;
}

#hoge {
    layoutX: 110;
    layoutY: 5;
}

#boo {
    layoutX: 110;
    layoutY: 110;
}

"javafx.scene.shape.Rectangle" {
    cache:  true;
    smooth: false;
}