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.

Tools:  Caspian Styler

This lets you customize the look of the default skin for JavaFX (Caspian) to create all kinds of themes. In the end it generates a CSS file that you can attach to your Scene and it will apply to all controls in your application. With a little customization of the selectors in the generated file you could make it apply on only certain named panels or controls. Would you guys like a button only one as well?

Tools: Animation Spline Editor

When you are animating in JavaFX you can apply an interpolator to the animation to control how the animation accelerates and decelerates. There are some preset ones built in like EASE_IN or EASE_OUT, there is also a customizable one created by Interpolator.SPLINE(…). This little tool lets you graphically experiment with the input to that function and see what the resulting animation looks like if applied to a scale, rotate, fade or translate animation. You can then hit the copy button to copy the code that is needed that you can then paste direct into your application.

Tools: Derived Color Calculator

JavaFX CSS has the advanced feature of derived colors. These are colors that are lighter or darker versions of some named color. This is used extensively throughout the default Caspian skin which is how we are able to do color theming with CSS like Caspian Styler above does. When you are working with derived colors you often have a design from a designer with an absolute color in it like #EEEEEE and you want to know what the derivation percentage would be from your chosen base color. This calculator will help work that out for you. It will also show you that you have to be careful choosing your base color as not all colors can be created from all base colors.

Getting the Application

I have packaged the application as a native Mac app bundle and as a Windows installer so it should be simple to get it installed and try it out.

Download Mac DMG   Download Windows Installer

The Code

There is a FX Experience GitHub repo with all the code so you can go grab it and play with it. We will be putting all the code from future blogs in there and slowly adding all the code from old blogs as well.