Desktop Java

Responsive Design with JavaFX

With CSS technologies it’s relatively easy to create a responsive design for your website. Depending on the sizeof the screen you can use a different CSS File and Layout. In JavaFX this might seem a bit harder at first sight, since CSS is only responsible for styling, but not for the layout. But using different FXML Files for the respective screen sizes and sharing a Controller is actually not that bad, and this way you can easily use SceneBuilder to preview the layouts on different screen sizes. In the code you either switch between the FXML-files depending on screen size, or you get rid of this by creating different deployments depending on the targeted device and copying the required files as part of your build.

But responsive design is not only be about size. For touch enabled devices it’s important to also use the right controls. At JayDay Jim Weaver gave an excellent presentation of how to create touch enabled UIs using JavaFX. You can download the presenation from the JayDay site: JayDay 2013. One of the things he proposes is to use the Pagination control, which is easier to use on a touch device than a TabPane.

Unfortunately that wouldn’t work well with our approach of reusing the controller, so we would have to create a Baseclass for the controller that has the common stuff and use

@FXML private Pagination pager

for the Touch device and

@FXML private TabPane pager

if the application runs on the desktop.

It would be much nicer if we could simply switch the Skin via CSS, as Paru Somashekar showed at JavaONE in her presentation with Jonathan Giles. In this presentation she shows an alternative Skin for a CheckBox, that can simply be set via CSS ( at around 27:15 ):

So you either create a deployment specifically for touch devices, that has the CSS, or you use something like this to find out if the device supports touch:


I decided to give it a try myself and convert the ChoiceWheel Control I created to a Skin for ChoiceBox:

For the FXML/CSS based approach I would not set the style via a styleclass on every CheckBox like Paru did, but enable the alternative Skin for all the Controls. In my case for all ChoiceBoxes:

.choice-box {
-fx-skin: "de.eppleton.controls.choicewheel.ChoiceBoxSkin";

No changes are required to the Controller. I think that’s a nice way to create an application that looks great on desktop as well as on a tablet or phone and it shows the strength of both FXML and CSS. Having a CSS-FXML pair per device size enables you to:

  • Organize the layout on a per device basis
  • Easily preview the design as it appears on different devices in SceneBuilder
  • Switch between different controls (touch / mouse) via CSS
  • Reuse the same Controller
  • Create deployments that only come with the required files for the targeted device

It would really be great to have more of these touch optimized Skins for common controls.

Reference: Responsive Design with JavaFX from our JCG partner Toni Epple at the Eppleton blog.

Toni Epple

Anton is a consultant worldwide for a wide variety of companies, ranging from startups to Fortune 500 companies, in many areas, including finance institutions and aerospace. His main interest is Client side development, and he has authored books and numerous articles on this topic. He is a member of the NetBeans Dream Team and a Oracle Java Champion. In 2013 he was elected as a JavaONE Rockstar, in 2014 he received a Duke’s Choice Award for his work on DukeScript.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Newest Most Voted
Inline Feedbacks
View all comments
Armando Reniery Rodas
Armando Reniery Rodas
10 years ago

Do you give me the code of a task manager that is like Windows, code in Java.
I need it, please…

Back to top button