Fluent Design Style Button, Toggle Button, and Tooltip for Java, JavaFX

Finally, I’ve quickly tweaked the tooltip style.

This bumps up the JMetro version number to 4.4.

JMetro Version 4.4

Sometimes, I’m impressed by how much I can achieve in just a few hours of working in JavaFX. I try to be as honest as possible. However, I’m biased since I’ve been working with it since JavaFX was still Beta (before version 1) and had its own scripting language (JavaFX script). 

Again, I am blown away by the fact that, in just a few hours here and there, I’m almost finished with this new iteration of JMetro, which included re-styling practically all JavaFX controls (new animations, new colors, new overall styles), including some that do not exist in the JavaFX framework. And, I completed all of that twice, since JMetro includes a light and dark version — not to mention designing code and the API design as well as visual design and UX, testing, and tweaking until I thought it was good enough. Personally, I’m impressed at how much I have achieved so far with the time I’ve spent.

Now, I don’t try to sell any specific technology. Because, like I used to hear Kirill Grouchnikov, now working at Google and a former software engineer that blogged about Swing: “the customer doesn’t care about the technology." The customer doesn’t care about the technology that was used. The customer cares whether the product works well or not.

I don’t mind working with other technologies. In fact, recently, I’ve been working in web development using JavaScript, HTML, etc. I always try to choose the best tool for the job, passions aside (of course, experience with a toolkit also counts).

In this blog, I will try to be as honest and unbiased as possible. Right now, I’m not affiliated with Oracle or with any other company that sells JavaFX products or JavaFX consultancy. I don’t have any investment in JavaFX, other than the fact that I’ve been using it for a very long time. Usually, I describe myself as a JavaFX consultant and freelancer, only because that’s what I have the most experience with. However, there are other technologies as productive as JavaFX out there. Still, I think it’s pretty impressive what you can achieve with just a few hours of work.

Button and Toggle Button New Style

In just a few short hours, I was able to completely re-implement the button style with a new animation once clicked and a new CSS property to turn on/off that animation.

First, this is the old light and dark style of the button:

Button — JMetro OLD light theme

Button — JMetro OLD dark theme

The “default” that you see above represents the style of the button when it is set as the default. Check out this API specification for more information.

The new style looks as follows:

Button — JMetro NEW light theme

Button — JMetro NEW dark theme

The colors for pressed, hover, and corresponding effects have changed. A new animation has also been added, which happens when the button is clicked. The button shrinks, when pressed, and then progressively come back to normal size. You can turn this animation on or off with the -shrink-animate-on-press CSS property. By default, it is set to on in the JMetro stylesheet:

.button, .toggle-button {

    -shrink-animate-on-press: true;
}

The toggle button style is highly based on the button. Here’s the old style:

Toggle Button — JMetro OLD light theme

Toggle Button – JMetro OLD dark theme

The new toggle button style now looks as follows:

Toggle Button — JMetro NEW light theme

Toggle Button — JMetro NEW dark theme

Tooltip New Style

The last addition to JMetro version 4.4 is a new style for the Tooltip. This was a quick tweak of the old style. Both light and dark versions look the same:

Tooltip – JMetro OLD theme

Tooltip – JMetro NEW theme

The colors were slightly tweaked and the font was made bigger.

Conclusion

In this blog post, I’ve expressed my opinion on how productive JavaFX can be. Particularly, this new JMetro iteration that was started a few weeks ago is extremely easy to use.

I’ve then mentioned what’s new in JMetro 4.4 version. This includes a new button and toggle button in the dark and light style with added CSS styleable animations, as well as a new tweaked tooltip style.

Here’s what I’ll be updating next:

• Text Field style
• Password Field style
• Progress Bar style
• Continue working to make it easy for developers to tweak JMetro colors in the future;
• Somewhere down the line, probably around version 5, I’ll work on making JMetro available through Maven Central. There are some particularities to this project that don’t make it as easy as it could be.

The documentation for JMetro is on the JavaFX theme JMetro page. It hasn’t been updated, yet, with this last version.