- 1 Introduction
- 2 Real examples
- 3 How to get it
- 4 How to use
- 5 Contributing
- 6 Details
- 6.1 Controls added to JavaFX
- 6.2 Controls that required a new Skin
- 6.3 Controls available in JavaFX and “Metro”
- 6.4 Controls not available in “Metro”
- 6.5 Spinner
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.
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
First you call its constructor passing in the desired style:
JMetro.Style.LIGHT, then you call
applyTheme(…), which receives a
Scene or a
Parent (base class of
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.
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.
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 is a new control I’ve added to ControlsFX.
More details about the Toggle Switch control can be found here.
This control exists in ControlsFX.
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 (TextField in JavaFX)
JavaFX Textfields get an added clear button to the right.
Password Box (PasswordField in JavaFX)
JavaFX PasswordFields get an added button to check the text entered in the Password field.
Controls available in JavaFX and “Metro”
Push Button (Button in JavaFX)
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.
List Box (ListView in JavaFX)
Since my last post I added a border around the control.
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.
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.
- Metro Style Spinner For Java (JMetro) (outdated design and implementation)
- Metro Style Spinner For Java (JMetro) (2)
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.
- Java Calendar With A Metro Style
- Java Calendar With A Metro Style (Dark)
- Metro Style DatePicker For Java (JMetro)