FX Experience Has Gone Read-Only

I've been maintaining FX Experience for a really long time now, and I love hearing from people who enjoy my weekly links roundup. One thing I've noticed recently is that maintaining two sites (FX Experience and JonathanGiles.net) takes more time than ideal, and splits the audience up. Therefore, FX Experience will become read-only for new blog posts, but weekly posts will continue to be published on JonathanGiles.net. If you follow @FXExperience on Twitter, I suggest you also follow @JonathanGiles. This is not the end - just a consolidation of my online presence to make my life a little easier!

tl;dr: Follow me on Twitter and check for the latest news on JonathanGiles.net.

We have been working recently on a new theme for JavaFX 8. The current theme for FX, named Caspian, is showing its age and we wanted to take the opportunity to give JavaFX a face lift for 8. Because folks have created custom controls and designs for their app, we needed to make sure that selecting the theme was something that you could opt-out of. We will be providing both API and command line switches in 8 to allow you to specify caspian specifically. If you do nothing, you’ll get Modena, our new theme, by default. Without further ado this is what it looks like:

Modena-Windows

Trying for yourself

You can download build 74 and try it yourself today at http://jdk8.java.net/download.html. To try it out you need to enable it either by setting the command line flag -Djavafx.userAgentStylesheetUrl=modena or by adding the following to your Application start() method:

    @Override public void start(Stage stage) throws Exception {
        ....
        setUserAgentStylesheet(STYLESHEET_MODENA);
        ....
    }

In the future we will switch this so that Modena is the default and you will have to specify Caspian explicitly to use caspian. We’ve tried hard to make Modena compatible with Caspian so that as long as you haven’t been relying on specific insets / padding / etc, your application will “just work” with the new theme. This includes any custom CSS you have done that is relying on the theme colors defined in the caspian.css file.

Comparison to Caspian

Below for comparison is the same Mac and Windows 8 windows above but this time using the current Caspian theme.
Caspian sample windows2

Modena Test Application

We have been developing a testing application in our open source project. It has a bunch of tabs that let you see various aspects of the new theme. For example we have a test for text alignment horizontally and vertically across controls so when you lay them out in a form or toolbar they all line up nicely.
Modea Alignment Test
You can get the test app and run it your self it is in rt/apps/experiments/modena in our open source repo. You can clone the mercurial repo from hg.openjdk.java.net/openjfx/8/controls/rt. That repo will also contain the very latest working version of Modena.

Font size scaling

You may have noticed the difference in text size and the size of the controls in the windows above. One of the challenges we had with both Modena and Caspian is working with Windows Standard, Medium and Large fonts setting (Windows 7+ it is named 100%, 125% and 150%). We have handled this problem by setting the default font size in JavaFX to match the system it is running on. Then all the sizing for the controls is based on the “em” unit where 1em = font size. The result of this is as the font size changes the controls grow & shrink to match.

Font-Sizes

As well as scaling for different platforms and settings you can use this in your applications if you need smaller or larger controls for example in a tool palette you may want smaller sliders and combo boxes. In which case you can just set the font size for that panel in css to be smaller or larger. You can even set it relative to the platform font size so it will scale for people with high resolution screens.

Java

VBox myPanel = new VBox();
myPanel.addAll(new Slider(), new Button, new ComboBox());
myPanel.setId("myPanel");

CSS

#myPanel {
    -fx-font-size: 0.8em; /* 80% size of parent node */
}

All controls in Modena (Mac Font)

Modena-v0.7

Feedback

We would love to hear your feedback and experience with testing Modena with your applications. So please leave comments below. We are trying hard to please most people and have a style the most people will really like, but personal tastes vary a lot. So we will do our best to incorporate any feed back.