Tuesday Mar 10, 2009

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...

<script src="http://dl.javafx.com/1.1/dtfx.js"></script><script src="/rakeshmenonp/resource/Sudoku/Sudoku.js"></script>

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!!

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_sudoku_css_support";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>
<script type="text/javascript"> digg_skin = 'compact'; digg_window = 'new'; </script> <script language="javascript" src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
<script src="http://slashdot.org/slashdot-it.js" type="text/javascript"></script>

About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« July 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today