JMetro – Java, JavaFX Theme

JMetro, a Java, JavaFX theme

JMetro is a Java, JavaFX theme or look and feel. This Java, JavaFX theme, is inspired by the  “Metro” design style introduced by Microsoft, which now is the Fluent Design System, it is not a theme that tries to mimic the native Windows theme / look and feel. JMetro is composed by a set controls, stylesheets and skins.

For some of my opinions, facts and history of JMetro check out this blog post.

[Updated for version 4.5 – 15 September 2018]

Real examples

I’m a JavaFX and Swing Freelancer and Consultant or more generally a front end freelancer and consultant, I say that because I have a long experience with those technologies, especially JavaFX, but I like to better classify myself as an overall front end freelancer and consultant since I also have experience with web technologies, building web apps, etc, and knowledge / experience with User Interface Design, User Experience, etc. As a computer engineer I obviously know back end, and other areas of computer science but I prefer and have a greater experience with front end.

I want to show you 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 almost 5 years ago:

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

can you believe it, JMetro, the Java, JavaFX theme, is used in software used by NASA!? Thanks to Sean Phillips (@SeanMiPhillips), who’s behind these very interesting applications, and has let me know.

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:

How to get it

This library is available as a Maven dependency, for now you can get it from bintray and JCenter, it will most probably be later available through Maven Central in the usual Jfxtras place. Example (replace version number with the version you want):

<dependency>
  <groupId>org.jfxtras</groupId>
  <artifactId>jmetro</artifactId>
  <version>4.2</version>
  <type>pom</type>
</dependency>

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

The JMetro stylesheets are available int 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).

Inside JMetro project, the JMetro8 folder contains  the most recent work and what you need if you’re using java 8 and above. JMetro folder is older and contains what you need if you are using java versions before Java 8 (e.g. JavaFX 2). There are also new skins to be used in some controls.

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 (only if you allow).

How to use

If you want to know how stylesheets work check out the Oracle documentation.

To set JMetro as the theme you can now use the JMetro class.

First you call its constructor passing in the desired style: JMetro.Style.DARK or JMetro.Style.LIGHT, then you call applyTheme(…), which receives a Scene or a Parent (base class of Control, Region, etc)

new JMetro(JMetro.Style.LIGHT).applyTheme(root);

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 includes styling existing JavaFX controls, adding controls that don’t exist in JavaFX but are provided in the original Fluent Design and styling 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 those controls would look if they had the Fluent Design style applied and also how they should look to be in harmony with the other controls.

Two stylesheets exist: a dark stylesheet currently named JMetroDarkTheme.css for styling your app with a dark tone and a light stylesheet JMetroLightTheme.css 

More information about JMetro, the Java, JavaFX theme, can also be found in JMetro blog posts. They can be found on this site, under JMetro blog post category.

Each control section below has a list of blog posts that were published when this controls were added or changed. To check out more information about these controls read those blog posts.

Controls added to JavaFX

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 – JMetro light theme

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

Rating – JMetro dark theme

Blog posts:

Controls available in JavaFX and Fluent Design

Text Field

JavaFX Textfields get an added clear button to the right.

Text Field JMetro light theme. Java, JavaFX style inspired by Fluent Design (previously named Metro)

TextField – JavaFX theme JMetro light theme

Text Field JMetro dark theme. Java, JavaFX style inspired by Fluent Design (previously named Metro)

TextField – JavaFX theme JMetro dark theme

Blog posts:

 

Password Field

JavaFX PasswordFields get an added button to check the text entered in the Password field.

Password Field JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Field – JavaFX theme JMetro light

Password Field JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Password Field – JavaFX theme JMetro dark

Blog posts:

 

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

Blog posts:

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

Blog posts:

 

Toggle Button

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previous versions where named Metro)

Toggle Button – JavaFX theme JMetro light

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

Toggle Button – JavaFX theme JMetro dark

Blog posts:

 

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

Blog posts:

 

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

Blog posts:

 

Tooltip

Tooltip: Java, JavaFX theme JMetro style, inspired by Fluent Design System (previously named 'Metro').

Tooltip – JavaFX theme JMetro

Blog posts:

 

Context Menu

ContextMenu JMetro light theme. Java, JavaFX theme inspired by Fluent Design System (previously name 'Metro')

Context Menu – JMetro light style

ContextMenu JMetro dark theme. Java, JavaFX theme inspired by Fluent Design System (previously name 'Metro')

Context Menu – JMetro dark style

Blog posts:

 

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

Blog posts:

 

Scroll Pane

Scroll Pane JMetro light theme. Java, JavaFX theme inspired by Microsoft Fluent Design System.

ScrollPane – JMetro light theme

Scroll Pane JMetro dark theme. Java, JavaFX theme inspired by Microsoft Fluent Design System.

ScrollPane – JMetro dark theme

Blog posts:

 

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

Blog posts:

 

Progress Bar

Porgress Bar JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Progress Bar – JMetro Light Theme

Porgress Bar JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Progress Bar – JMetro Dark Theme

Blog posts:

 

List View

List View – JMetro Light Theme

List View JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro')

List View – JMetro Dark Theme

Blog posts:

 

Table View

Table View JMetro light theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro')

Table View – JMetro Light Theme

Table View JMetro dark theme. Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro')

Table View – JMetro Dark Theme

Blog posts:

 

Tree View

TreeView JMetro Light Style, Java, JavaFX theme, inspired by Fluent Design System(previously name 'Metro')

Tree View JMetro Light Style

TreeView JMetro dark style, Java, JavaFX theme, inspired by Fluent Design System(previously name 'Metro')

Tree View JMetro Dark Style

Blog posts:

 

Controls not available in Fluent Design

These are controls that are not available on 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.

Spinner

This control initially was created by Tom Eugelink and at that time didn’t exist in JavaFX, so I created a metro stylesheet for it back then. Later a Spinner control was created and added to the official JavaFX library, so I took the opportunity to refine the design and implement it for the JavaFX library control.

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

Spinner – JMetro Light Theme

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

Spinner – JMetro Dark Theme

Blog posts:

 

Date Picker

I started with a wireframe, but back then there was no official DatePicker control. When the official DatePicker control came out, I had to adapt the design and ditch the old wireframes.

Date Picker control JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Date Picker – JMetro light theme

Date Picker control JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro').

Date Picker – JMetro dark theme

Blog posts:

 

Choice Box

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

Choice Box – JMetro light style

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

Choice Box – JMetro dark style

Blog posts:

 

Tabs and TabPane

Tab and TabPane JMetro light style. Java, JavaFX theme, inspired by Fluent Design System (previously name 'Metro')

Tab / TabPane  – JMetro light style

Tab and TabPane JMetro dark style. Java, JavaFX theme, inspired by Fluent Design System (previously name 'Metro')

Tab / TabPane – JMetro dark style

Blog posts:

 

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

Blog posts: