JavaFX – Sudoku with CSS

This is a Sudoku game developed using JavaFX. The objective is not really to demonstrate Sudoku, but to show Cascading Style Sheets (CSS) support in JavaFX. This sample uses two CSS files – blue.css and black.css. These files have information about different user interface attributes such as color, font, shape…

For Applet mode, click on above image

For standalone mode

First lets create a style sheet…

.titleText {
    font-size: 20pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #79818C;

Here we have specified the font attributes family, weight, size, color etc.

Similarly a button can be created by a combination of Rectangle and Text as shown below:

.buttonText {
    font-size: 11pt;
    font-family: "Bitstream Vera Sans";
    font-weight: bold;
    fill: #FFE6D9;
.normalButton {
    fill: #8A9CB4;
    stroke: #79818C;
    strokeWidth: 2.0;
    arcWidth: 10;
    arcHeight: 10;

Now we need to associate this style-sheet with the top level container of JavaFX – Scene.

var stylesheets = "{__DIR__}blue.css";
Scene {
    content: []
    width: 281
    height: 408
    stylesheets: bind stylesheets

I have declared a variable stylesheet and have assigned the URL of the stylesheet file. Now I bind this value to stylesheets attribute of Scene. This will associate the CSS file with this Scene. I have used bind so that I can update the associated stylesheet at runtime.

Now I will associate the style-class defined in style-sheet to the specified Node. For example, we can apply the titleText style-class with the title node as shown below.

var title = Text {
    content: "Sudoku"
    effect: dropShadow
    styleClass: "titleText"

Similarly we can associate the button’s rectangle attributes as shown below..

var defRect = Rectangle {
    width: bind width
    height: bind height
    styleClass: "normalButton"

Cool! Now you can play Sudoku game and if you feel bored just change the look and continue playing!!

var dzone_url = “”;
var dzone_style = ‘2’;

digg_skin = ‘compact’;
digg_window = ‘new’;