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>

Comments:

Nice can you build some demo about BlendMoes..

Posted by Farrukh Obaid on March 10, 2009 at 08:58 PM IST #

Thanks Farrukh. You may refer to "Effects Playground" sample - http://javafx.com/samples/EffectsPlayground/index.html. Click on "Open Image 2" to load the second image. Now select "Blend" option. It will show controls for different modes such as Multiply, Overlay, Difference etc. Hope this helps.

Posted by Rakesh Menon on March 11, 2009 at 08:18 AM IST #

@Farrukh I have posted a new blog on BlendMode - http://blogs.sun.com/rakeshmenonp/entry/javafx_blendmode_effect

Posted by Rakesh Menon on March 12, 2009 at 11:00 AM IST #

Hi Rakesh.

Do you know how can I refer to a relative image url into the css file?

Example:

public class MyClass extends Group{
id:"goBack";
var image:Image{}
...
init {
content = [
...
ImageView{ image:image; }
...
]
}
}

in the css:

...
#goBack.image {
url:url({__DIR__}/images/img.png)
}
...

thakyou for advanced

Posted by Antonio on May 19, 2009 at 01:24 PM IST #

@Antonio I haven't tried using image, so not sure if that will work. Need to try..

Posted by Rakesh Menon on June 11, 2009 at 08:15 AM IST #

Post a Comment:
Comments are closed for this entry.
About


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

Search

Categories
Archives
« April 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
   
       
Today