Example CSS Stylying in JavaFX

To learn how to use CSS with JavaFX, I wrote a small application and created two new looks with CSS – and I must say I am truly impressed by its capabilities. Look for yourself how much you can do with CSS only.
 The last couple of weeks I spent some time looking at parts of the JavaFX runtime, I have not used before. For this I wrote a small application, which I want to use during one of my talks at 33rd Degree in Krakow, Poland, next week.

It took me a while to pick up CSS in JavaFX to be honest. One reason was, that it uses some features of CSS 3, that I was not familiar with. It was interesting to learn this stuff. Another reason was, that names for the same thing differ between JavaFX and “standard CSS” (e.g. color vs. -fx-text-fill). But I heard there are plans to fix that. Though the main reason why it took a while to use it efficiently was, that I did not know how to style a concrete control class. I ended up looking at the default stylesheet caspian.css to figure it out.

Overall I am very impressed and like CSS in JavaFX a lot. (Disclaimer: I was not involved in the design or implementation of the CSS functionality at any point. This is my honest opinion without any hidden motives.) ;-)

I think it is worth mentioning, that all of the examples are fully functional applications, layouts continued to work, and the Java code was not changed at all – all is done in CSS, even the bracket shapes in the last example. No images were used.

 

Screenshot of the application with the default stylesheet caspian.css

Screenshot of the application with a style inspired by Facebook

Screenshot of the application with a style inspired by  Star Trek