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 = “http://blogs.sun.com/rakeshmenonp/entry/javafx_sudoku_css_support”;
var dzone_style = ’2′;

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