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:

PlatformImpl.isSupported(ConditionalFeature.INPUT_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.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

One Response to "Responsive Design with JavaFX"

  1. Armando Reniery Rodas says:

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

Leave a Reply


− two = 1



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close