Archives for category: CSS

We have been working really hard on the new Modena theme for JavaFX 8. I think we are finally really close so I wanted to share with you where we got to. I really hope you like the progress and direction. We took a lot of the feedback from the last blog into consideration. Overall though I am really happy and feel that this is going to do as much as we can to make JavaFX applications look great out of the box.

Modena example windows

Retina Mac
For those lucky enough to be running on Retina Mac then we also have support for Retina now in JavaFX 8 and with Modena so enjoy.

Trying for your self
The almost final version of Modena will be available this week in Java 8 Early Access build 81. For instructions for enabling Modena and running the test application see the first Modena blog post.


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:


Google has been kind enough to pull together a collection of great free fonts at For ages I have wanted a easy way to use these in my JavaFX applications. This week I added basic support to JavaFX for CSS @font-face support (see RT-10343). It should be going into JDK 8-b69 which will be available later this week.

Hello @font-face

I have some cool new stuff for you today. I have been working on porting some of the little tools I wrote for JavaFX 1.X. Also I was inspired by the web css button creator UiParade Button Builder. So I created a simple theming tool for JavaFX. This is something I have wanted to do for ages and is actually the second one I have written. The first started from the point of view of supporting every feature that can be done with CSS in JavaFX, and this turned out to be a huge undertaking as there is an amazing amount of flexibility in styling the JavaFX controls with CSS. So this one was inspired by the UiParade one and tried to give a simple set of controls to adjust the look. Some of them are quite clever that you adjust one slider and it is adjusting dozens of css properties in varying amounts for you. I have also made the source code available for all of these apps along with the custom controls like a color picker. So you can download it and see how its works. Hopefully we will add more tools to it over time as we have ideas or have time to do some.


One of Jasper’s favorite websites is called Dribbble, which is a place for designers to post whatever work they’re currently working on for others to view and be inspired from. I got hooked on Dribbble last Thursday and have been looking at a bunch of the mockups and itching to try implementing some of them in JavaFX. Here is my first attempt.

One of the use cases we used for our CSS support and our ToolBar API was that we wanted to support a style of toolbar button which (at least for me) was popularized on the Mac, which is referred to by Cocoa as a “segmented” button. This is essentially nothing more than an HBox of buttons that has been styled such that the first button has rounded left edges, the center buttons are squared up, and the last button has rounded right edges. In the image above by Bady, you can see the segmented button bar in the toolbar area of the application.

I started writing an article about how to write new UI controls for OpenJFX using all the internal APIs and architecture and so forth. But then I discovered that the control I was writing as a proof of concept was not using any private API at all, and actually was implementing the Skin differently than I had imagined previously, and I thought I ought to blog about it. Behold, the MoneyField!


I was inspired by Dean Iverson’s tweet with a audio equalizer in JavaFX:

#JavaFX rocks. Literally. An example from our upcoming Pro JavaFX 2 book:
and the equalizer view from that Pro JavaFX 2 example app:
. updated

So wanted to have a go at doing one my self, so little while later I have a design and built a working application. Demo video after the break.


A number of people have asked me recently can I create this look or that look using CSS in JavaFX. Or they have said that you could never do that! So I thought I would do a little experiment and try recreating a bunch of common button styles purely using CSS. So without further ado, here is the result: