Styling a JavaFX Control with CSS

Last week I wrote about how to create your own JavaFX control, using a DatePicker as an example. What is especially cool is that you can easily change the look and feel of any JavaFX control using CSS. For that purpose, we applied CSS-styles to several nodes in our component.

In this article, we'll override those styles to achieve a different look and feel of our component. I created a NetBeans project with the source code. You can download the source code for this example here:

DateChooser.zip

For my Eppleton-branded DateChooser I wanted to have a "LCD-calendar" theme and my logo as a background. Here are two before and after images of our control:

Before: The default style as defined in calendar.css.

After: Our new LCD-style. The base style class we defined is "date-chooser".

In our default css it only defines the -fx-skin we want to use. Let's start by creating a new css file named lcd.css and change the TestApplication class to use it:

scene.getStylesheets().add(TestApplication.class.getResource("lcd.css").toExternalForm());

The first thing we'll add is a simple gradient for the background.lcd.css

.date-chooser {
    -fx-background-color:linear-gradient(white,#DDDDDD);
}

As our next step we'll add a background image and move it to the bottom left. Since by default it would be repeated, we'll have to forbid that:

.date-chooser {
     ...
    -fx-background-image: url("images/background.png");
    -fx-background-repeat: no-repeat;
    -fx-background-position: left bottom;
}

Now you can see our background image behind the calendar cells:

For a cleaner look, I'd like to get rid of the background of unselected cells. So we'll change the calendar-cell to use an invisible background. I still wanted the background to change on hovering and I wanted to mark the selected date and the current date with a different background. That's why I define the background-radius and background-insets in my base class, even though we don't see it.

The text color will be slightly transparent because of the background image. As the last step we set Arial as the font and add a drop shadow effect for the LCD-look on all labels. Since our calendar-cell is derived from a label it will inherit these changes:

.label {    
     -fx-effect: dropshadow(two-pass-box , darkgray, 10, 0.0 , 4, 5);     
}

.calendar-cell { 
    -fx-background-color: rgba(255,255,255,0.0);
    -fx-background-radius: 15 15 15 15;
    -fx-background-insets: 6 6 6 6 ;
    -fx-text-fill: rgba(0,0,0,0.7);
    -fx-font: 16pt Arial;
}

This is the result:

Now let's change the background and text-fill for hovered, pressed, selected cells and for the one representing the current date (calendar-cell-today). calendar-cell-inactive are cells in the previous or following month that might fall in the first or last week of the month currently displayed.:

.calendar-cell:hover { 
    -fx-background-color: rgba(135,206,235,0.7);
    -fx-text-fill: white;   
}

.calendar-cell:pressed { 
    -fx-background-color: rgba(135,186,215,0.7);
    -fx-text-fill: white;   
}

.calendar-cell-selected { 
    -fx-background-color: rgba(105,176,195,0.7);
    -fx-text-fill: white;   
}

.calendar-cell-today { 
    -fx-background-color: rgba(155,155,19,0.7);
    -fx-text-fill: white;
}

.calendar-cell-inactive { 
    -fx-text-fill: darkgray;
}

This almost looks like what I wanted. I only need to change the buttons a bit, to add the drop shadow and flatten them a bit:

.button{
    -fx-effect: dropshadow(two-pass-box , darkgray, 10, 0.0 , 4, 5);
    -fx-background-color: rgba(205,205,205,0.7);
    -fx-background-radius: 15 15 15 15;
    -fx-background-insets: 2 2 2 2 ;
}

.button:pressed{
    -fx-background-color: rgba(180,180,180,0.7);
}

.button:hover{
    -fx-background-color: rgba(235,235,235,0.7);
}

.button:focused{
    -fx-background-color: rgba(205,205,205,0.7);

}

...and we're done:

I really like the fact that you can totally change the appearance of a component like this via CSS. Now compare the effort it took to make this component styleable to the effort you would have to change it's appearance in Swing. The CSS-support really is one of my favorite features of JavaFX.