SceneBuilder Apply Gluon Theme CSS

Question

I am trying to apply a theme to my jfxml window. In the GUI of Scene Builder, it shows correctly as follows:

But when I compile and run, it shows the button and text area like this:

I've been searching the web for 3 hours now, and came up with no CSS loading method or anything like that..

Solution

While the Modena default themes you get in Scene Builder are part of the JavaFX built-in distribution (i.e. modena.css included in jfxrt.jar), the Gluon theme is not.

The Gluon controls and the Gluon theme that are included on Scene Builder are intended to be used in a Gluon Mobile project, that happens to run in Desktop as well as on Android and iOS devices.

You can use the Gluon plugin from your IDE to create such project. If you select MultiView with FXML project or Glisten-Afterburner project, you will have a project with FXML support. See the documentation here on how to get started.

Comments

[Oshan Mendis]

That's just the theme for the scene builder application itself. Like when you change the theme of your IDE, it will show all the fancy type of buttons and all the controllers styled, but in the end your very app is using the styling you have given on your own

[GreenROBO]

how can I add gluon mobile css to my JavaFX desktop application?

[José Pereda]

It is explained in my answer, you need to create a Gluon Mobile project, even if it is only intended for desktop. You can use the Gluon plugin or use any of the samples here, and then you will have it. But it requires a license.

[GreenROBO]

Oh ok. I got it! Thank you for your quick response!