JMetro, a Java, JavaFX theme

I’m a JavaFX and Swing Freelancer and Consultant or more generally a front end freelancer and consultant. In my spare time, I like to work on open source projects. One of them is JMetro a Java, JavaFX theme or look and feel. This Java, JavaFX theme, is inspired by Fluent Design System,  a design style introduced by Microsoft. It is a redesign and improvement of “Metro” design and it is used on Windows.

JMetro is not a theme that tries to mimic the native Windows theme / look and feel, or a theme that is a direct copy of Fluent Design. It is rather a theme inspired by Fluent Design and adapted to fit the JavaFX SDK. There are also changes that have been made according to my personal opinions on some of Fluent Design’s particularities.

JMetro is composed by a set controls, stylesheets and skins.

[Updated for version 8.6.9 & 11.6.9 – 25 February 2020]

JMetro is currently targetted at Java 8 (JavaFX 8) and Java 11 (JavaFX11). Java 11 version will, most probably, also run on the latest JavaFX release. 

For some of my opinions, facts and past history of JMetro check out this blog post (information on current status will be outdated).

If you want to go more in-depth you should check out my blog posts on JMetro (JMetro category), especially the most recent ones focusing on Fluent Design: JavaFX theme JMetro post category. Also use the search textfield at the top of the site if you want to search for a particular control style.

Real examples

Here’s some of the notable companies and individuals known to be using JMetro:

Other companies reportedly using :

  • Google
  • Microsoft
  • Amazon
  • Huawei
  • Vodafone

If you are using JMetro please let me know and share. All this work is made on my spare time for free without getting anything in return. I just ask you to share and let me know that you are using it.

This is important because by seeing how it’s been widely used I can see what should be improved, it’s also important so I can keep motivated to continue.

Showcase

As a Freelance Consultant I’ve had the experience of using JMetro on some of the Apps I created for my clients. Next, I’ll show how a real JMetro and also FXRibbon app can look like. Generally, I need to keep client’s confidentiality, but for this one project, a big client from the U.S.A, I can reveal some screenshots. There are things I don’t like about it now and would have done differently, to my defense this was done around 2014:

JMetro Java, JavaFX theme real word example application JMetro Java, JavaFX theme real word example application JMetro Java, JavaFX theme real word example application

JMetro, the Java, JavaFX theme, is used in software used by NASA. Thanks to Sean Phillips (@SeanMiPhillips) for letting me know this and who’s behind these incredible applications.

Here in it’s well known application: Deep Space Trajectory Explorer, which was featured in Bloomberg:

 

And in another application from NASA, Trajectory Optimization Data Viewer:

 

A very nice application that I found on the internet using JMetro (from 2015):

 

An awesome chess game, created by John Sirach (video capture from June 2019):

Strengths and Key Principles of JMetro

Following are the key principles behind the architectural decisions that are made in JMetro and what are, in my opinion, the strengths and advantages of JMetro.

Leverages JavaFX Skins

JMetro tries to take full advantage of the JavaFX Skin mechanism. This means that JMetro tries, as much as possible to create new skins for the JavaFX controls that already exist in the JavaFX SDK without creating new ones (same goes for controls in third party libraries like ControlsFX).

For example, JMetro, adds behavior to the Slider control. It adds a popup that fades in and out when the user drags the thumb, that popup is always located over the thumb and shows the Slider current value. Instead of creating a new Control, similar to the Slider, that has this new added behavior, JMetro sets a new Skin for the Slider behind the curtains, that defines this new behavior and style. The new Skin is set in the JMetro stylesheets without the developer having to do anything.

The advantage of this is that your application is not tightly coupled with JMetro. You can switch to another theme easily, without having to change anything in the code that interacts with the Slider. This also means that you can set JMetro, in your existing app that was using Modena (or another theme), with just a few lines, like mentioned in the beginning of this section and JMetro will add all this new behavior to your controls, by setting new skins, behind the curtains, in JMetro stylesheets. You won’t have to change anything in your code that interacts with the standard JavaFX Slider control.

Look Integrated and Better on Windows

JMetro is inspired by Fluent Design which means that applications using JMetro will feel more familiar to Windows users. Given Windows users are about 90% of all Desktop users, this can be a big win.

Tries to Look, Good, Modern and Simple

JMetro follows latest trends in Design. It is a flat design. If your in a different O.S., JMetro won’t look as integrated, but it will still make your app look more modern and fresh.

Doesn’t Try to Mimic Fluent Design

JMetro doesn’t try to be a copy or mimic Fluent Design. It is instead inspired by it. Whenever I don’t like the Fluent Design specification or its Windows implementation, I do it differently.

Given there are also controls that don’t exist in Fluent Design but exist in JavaFX or that some JavaFX controls are slightly different than the Fluent Design ones, sometimes adaptations also need to be made and in the case of controls that don’t exist in FD, new styles have to be created.

How to get it

This library is available as a Maven dependency, you can get it from bintray JCenter and Maven Central. Example, using Gradle (replace version number with the version you want):

 compile 'org.jfxtras:jmetro:8.6.5'  

and you can also download the jar here if you prefer.

To use JMetro consult the section “How to use”. However for your reference you can check out JMetro stylesheets that are available in the JFxtras-styles repository. The files are here. The files are inside the JMetro project (jmetro directory).

Samples (code examples) can be found inside the samples project (samples folder).

Some controls styled in JMetro can be found in the ControlsFX library.

If you’re using JMetro Java, JavaFX theme, please send me pictures of your app to . It will be very important to check how you are using JMetro and adjust it to better fit the use cases. Also for example uses (if you allow).

You could also share it on Twitter and let me know.

It is also important for me, and to keep me motivated to continue, to know that JMetro is being used and how it is being used. Given all these unpayed work is given out for free, I just ask you to share it is being used and how 🙂

How to use

If you don’t know how stylesheets work, check out the Oracle documentation.

To set JMetro as the theme, use the JMetro class.

You need to pass the Style and Scene or Parent to JMetro. Either do this through the constructor or by calling the setters of the properties. The Style can be Style.DARK or Style.LIGHT. This is all you need to do. Internally JMetro will add the necessary stylesheets to the Scene or Parent.

 
... 
JMetro jMetro = new JMetro(Style.LIGHT); 
jMetro.setScene(scene); 

For more information check the Javadoc of the JMetro class.

Backgrounds

When changing from Style.LIGHT to Style.DARK, JMetro needs to know which containers are supposed to be a background. On those containers, their background color will change from a light color (close to white) when the Style is LIGHT to a dark color (close to black) when the Style is DARK. There are 2 ways to accomplish this:

Background Styleclass

Add the background styleclass to every Pane (Pane, BorderPane, HBox, etc) that is going to be a background.

Specific style classes used by JMetro are present in the class JMetroStyleClass. The background styleclass you should use in this case is JMetroStyleClass.BACKGROUND.

...
BorderPane borderPane = new BorderPane();
TabPane tabPane = new TabPane();
borderPane.getStyleClass().add(JMetroStyleClass.BACKGROUND);
borderPane.setTop(tabPane);
Scene scene = new Scene(borderPane, 500, 200);
... 

Automatic Coloring Of Panes

The previous way that was mentioned above, is the preferred way. However there’s a way in which JMetro will automatically color all Panes present in your application.

To enable this use the automaticallyColorPanes property in the JMetro class and set it to true.

Not like Modena

JMetro doesn’t work like Modena, in the sense that it isn’t a User Agent Stylesheet. At least for now. There is already an issue in the issue tracker to convert it into an User Agent Stylesheet.

All other themes I know of, also work this way.

Since JMetro is aScene or Parent stylesheet and not a user agent stylesheet, this means that every rule is JMetro is at the same level of priority as every rule you define yourself in your own stylesheets. Which means that you have to make your rules as specific or more than the rules in JMetro if you want to override rules in JMetro (google CSS specificity, if you don’t know what specificity means in the context of CSS).

At this moment there is no tool in JavaFX that will let you know which rules are being applied to each Node, and which of these is winning and so is being applied. As such, you have to consult JMetro stylesheets, use ScenicView, etc and figure out yourself, in case of conflict, which of the rules might be overriding rules you’ve defined and want to be applied.

Bottom line the rule with the highest specificity will win. And in the case of a draw the last defined rule wins.

Icons

JMetro provides you access to high quality, free icons, check this post for details: https://pixelduke.com/2020/02/25/jmetro-icons-version-8-6-9-and-11-6-9/

Contributing

Contributions via Pull Requests (PR) are welcome! Help grow this library if you like it! Before filling a PR please create an issue in the issue tracker.

Details

JMetro Java, JavaFX theme styles existing JavaFX controls, adds controls that don’t exist in JavaFX but are provided in the original Fluent Design and styles JavaFX controls that don’t exist in Fluent Design but exist in JavaFX. For controls that don’t exist in Fluent Design I base myself on my experience and observation of Fluent Design. I imagine how they should look to be in harmony with the other controls.

Currently all JavaFX controls from the standard SDK have a JMetro style (minus charts). Also other controls from other JavaFX third party libraries also have a JMetro style, namely the ControlsFX library.

JMetro is currently targetted at Java 8 / JavaFX 8 – JMetro version 8, and Java 11 / JavaFX 11 – JMetro version 11. Java 11 version will, most probably, also run on the latest JavaFX release.  The master branch contains the code of version 8, the branch “11” contains the code of version 11.

Given most of my paying clients are still on Java 8, JMetro version 8 is currently where I spend the greatest development effort. Although I also try to keep 11 working at its best.

Next, you’ll see just some of the examples of the controls (not all) that have a JMetro style. Some of the controls don’t exist in the Fluent Design specification and some exist in FD but not on the JavaFX standard SDK.

Some of the Controls added to JavaFX

These are controls that exist in Fluent Design but don’t exist in the standard JavaFX SDK.


Toggle Switch

The Toggle Switch is a new control I’ve added to ControlsFX.

Toggle Switch control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Fluent Design (previously named Metro)
Toggle Switch – JavaFX theme JMetro light
Toggle Switch control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Fluent Design (previously named Metro)
Toggle Switch – JavaFX theme JMetro dark

More details (blog posts) about the Toggle Switch control can be found here.


Rating

This control exists in ControlsFX.

Rating control JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Rating control – JavaFX theme JMetro light
Rating control JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Rating control – JavaFX theme JMetro dark

Some of the blog posts referencing this control:

Some of the Controls available in JavaFX and Fluent Design


Slider

Slider control JMetro light theme, Java, JavaFX theme, inspired by Microsoft Fluent Design System (previously named Metro)
Slider – JMetro light theme
Slider control JMetro dark theme, Java, JavaFX theme, inspired by Microsoft Fluent Design System (previously named Metro)
Slider – JMetro dark theme

Some blog posts about this control:


Button

Button JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Button – JMetro theme JMetro light
Button JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Button – JavaFX theme JMetro dark

Some blog posts about this control:


Check Box

Check Box control JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Check Box – JMetro light style
Check Box control JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Check Box – JMetro dark style

Some blog posts about this control:


Radio Button

Radio Button JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Radio Button – JMetro light style
Radio Button JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Radio Button – JMetro dark theme

Some blog posts about this control:


Scroll Bar

Scroll Bar control JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Scroll Bar – JMetro light theme
Scroll Bar control JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
ScrollBar – JMetro dark theme

Some blog posts about this control:


Combo Box

Combo Box JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Combo Box – JMetro light theme
Combo Box JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Combo Box – JMetro dark theme

Some blog posts about this control:


Progress Bar

Progress Bar JMetro theme, Java, JavaFX theme, inspired by Fluent Design (previously was Metro)
ProgressBar – JavaFX theme JMetro

Some blog posts about this control:

Some of the Controls not available in Fluent Design

These are some of the controls that are not available in the Fluent Design guidelines, but exist in JavaFX. For these controls I tried to apply what I learned from the design of the available Fluent Design controls, trying to make them live in harmony with the others.


Menu

Menu JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Menu – JMetro light style
Menu JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').
Menu – JMetro dark style

Some blog posts about this control: