JavaFX[1.3] – Power of CSS

There was a question related to setting of background color for TreeView. Yes we can do lot of customization of Controls using CSS. It may be a bit difficult at this point of time due to lack of proper documentation. But you can start playing with CSS using StyleEditor sample.

Below samples shows ListView and TreeView customized using javafx.css file.
Thanks to Jasper Potts for help

For Applet mode, click on above image. For standalone mode

Try it out and let me know feedback
It will be much much easier once the official documentation is in place..

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’;