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

7 responses to “Example CSS Stylying in JavaFX”

  1. […] Heinrichs, a developer in the JavaFX team at Oracle, has explored the JavaFX CSS functionality, something he admits he was not involved in developing, and comes away pleasantly surprised by how […]

  2. […] Heinrichs, a developer in the JavaFX team at Oracle, has explored the JavaFX CSS functionality, something he admits he was not involved in developing, and comes away pleasantly surprised by how […]

  3. Inge Avatar
    Inge

    Nice!

    I’m trying to learn CSS for JFX right now, it would be really useful for me to use your CSS as an example for learning. A source code link would be very nice 🙂

    I will also take a look at caspian.css, working code is always the best documentation.

    1. Mike Avatar

      Hi Inge,

      thanks, glad you like it.

      I could publish the sources, but I think there are better ways to learn CSS on JavaFX. 🙂

      A good start is the tutorial: http://docs.oracle.com/javafx/2.0/css_tutorial/jfxpub-css_tutorial.htm

      If you prefer working code, use caspian.css, because it is documented. It looks huge and confusing at first, but actually it is well structured and you usually only need to refer to small sections of it.

      Last but not least there is the reference guide, which is extremely helpful once you understood the basics: http://docs.oracle.com/javafx/2.0/api/javafx/scene/doc-files/cssref.html

  4. Ray Avatar

    I am a c/C++ programmer and database SQL guy (embedded in that code) but never with Java.
    just to let you know I know how to program. now I want to do java and develop there J2ME and J2EE stuff.
    I want to write apps for Android and Iphone and equivalents. can you tell me what path i need to follow. I have windows 7 on a 3-gig RAM notebook. I know i need a develpment environment and a few other things,but, i havent been in the loop on Java and such.

    any help is appreciated.

    thanks

    Ray

    1. Mike Avatar

      Hi Ray, sorry for the late reply. I have been extremely busy lately, because I wrote a new web applicaton. (Here is a little teaser.)

      First of all you need to decide on what you want to focus on in the beginning. JavaME, JavaEE, Android, and iPhone are very different when it comes to the libraries. Btw. as of today you cannot develop iPhone applications in Java.

      If you are completely new to Java, I recommend to start with the Java tutorials. Especially the parts under “Trails Covering the Basics” are very helpful.

      Basically there are three IDEs that are widely used for Java development: Eclipse, NetBeans, and IntelliJ IDEA. As usual in our industry there are a lot of fierce battles being fought about which one is the best. Personally I think all of them have their advantages and disadvantages and I use all of them and select them depending on the task I am working on. Just try them and see which one resonates best with you. You cannot really make a wrong choice here, all three of them are very good IDEs.

  5. Example CSS Stylying in JavaFX…

    Thank you for submitting this cool story – Trackback from JavaPins…