JMetro

Introduction

A theme / look and feel for Java – JavaFX. This JavaFX theme, styles JavaFX controls based on the “Metro” design style introduced by Microsoft, which now is the Fluent Design System. 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.

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:

can you believe it, JMetro is used in software used by NASA!?!?

And in another app from NASA:

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, it will most probably be later available through Maven Central in the usual Jfxtras place:

<dependency>
  <groupId>org.jfxtras</groupId>
  <artifactId>jmetro</artifactId>
  <version>3.0.0</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, 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 includes styling existing JavaFX controls, adding controls that don’t exist in JavaFX but are provided by the original Metro design style and styling JavaFX controls that don’t exist in Metro but exist in JavaFX, basing myself on my experience and observation of how those controls would look if they had the Metro style applied.

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 this library can be found in JMetro blog posts, they can be found under JMetro blog post category.

Controls added to JavaFX

Toggle Switch

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

ToggleSwitch_LightTheme.gif

Toggle Switch (JMetro Light Theme)

Toggle Switch (JMetro Dark Theme)

Toggle Switch (JMetro Dark Theme)

More details about the Toggle Switch control can be found here.

Rating

This control exists in ControlsFX.

Rating – JMetro Light Theme

Rating – JMetro Dark Theme

Blog post:

Controls that required a new Skin

These controls require a new skin. You’ll still use standard JavaFX controls and all you have to do is have these skins available for the css parser to pick them up. So, basically you don’t have to do nothing because the new skin to use is already defined in the JMetro css.

TextField

JavaFX Textfields get an added clear button to the right.

TextBox – JMetro Light Theme

Text Box – JMetro Dark Theme

Blog posts:

PasswordField

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

Password Box – JMetro Light Theme

Password Box – JMetro Dark Theme

Blog posts:

Slider

Slider – JMetro Light Theme

Slider – JMetro Dark Theme

Blog posts:

Controls available in JavaFX and “Metro”

Button

Push Button – JMetro Light Theme

Push Button – JMetro Dark Theme

Blog posts:

Toggle Button

Toggle Button – JMetro Light Theme

Toggle Button – JMetro Dark Theme

Blog posts:

Check Box

Check Box – JMetro Light Theme

Check Box – JMetro Dark Theme

Blog posts:

Radio Button

Note: In the following animation I press the Radio Button to un-select it. Normally that won’t happen, you’ll usually press another Radio Button from the same group to un-select the previous one.

Radio Button – JMetro Light Theme

Radio Button – JMetro Dark Theme

Blog posts:

Tooltip

Blog posts:

Context Menu

Context Menu – JMetro Dark Theme

Blog posts:

Scroll Bar

ScrollBar – JMetro Dark Theme

ScrollBar – JMetro Light Theme

Blog posts:

Scroll Pane

ScrollPane – Dark Theme

ScrollPane – Light Theme

Blog posts:

Combo Box

ComboBox – JMetro Light Theme

ComboBox – JMetro Dark Theme

Blog posts:

Progress Bar

ProgressBar – JMetro Light Theme

ProgressBar – JMetro Dark Theme

Blog posts:

ListView

List Box – JMetro Light Theme

List Box – JMetro Dark Theme

Blog posts:

TableView

TableView – JMetro Light Theme

TableView – JMetro Dark Theme

Blog posts:

Controls not available in “Metro”

These are controls that are not available on the Metro guidelines, but exist in JavaFX. For this controls I tried to apply what I learned from the design of the available Metro 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 in the JavaFX library control.

Spinner – JMetro Light Theme

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.

DatePicker – JMetro Light Theme

DatePicker – JMetro Dark Theme

Blog posts:

Choice Box

Choice Box – JMetro Light Theme

Choice Box – JMetro Dark Theme

Blog posts: