JMetro

Introduction

A look and feel / theme for Java – JavaFX. This JavaFX theme, styles JavaFX controls based on the Metro design style introduced by Microsoft. JMetro is composed by a set controls and stylesheets.

How to get it

The JMetro stylesheets are available through the JFxtras library, you can get the files here. 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 can be found in the ControlsFX library.

If you’re using JMetro, please send me pictures of your app to . Would be interesting to check how all these controls fit together in a real application, since I haven’t had time to do that. Also for example uses (if you allow).

Details

If you want to know how styles are applied and stylesheets work check out the Oracle documentation.

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 

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.

Text Box (named Text Field in JavaFX)

JavaFX Textfields get an added clear button to the right.

TextBox – JMetro Light Theme

Text Box – JMetro Dark Theme

Blog posts:

Password Box (named PasswordField in JavaFX)

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

Blog posts:

Controls available in JavaFX and Metro

Push Button (named button in JavaFX)

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:

List Box (named List View in JavaFX)

Since my last post I added a border around the control.

List Box – JMetro Light Theme

List Box – JMetro Dark Theme

Controls not available on 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: