Category Archives: Metro

Metro style Spinner for Java (JMetro)

Here is Tom Eugelink’s spinner control from JFxtras with a metro style.It’s basically a control that allows the user to iterate through a list of values using an increment and decrement button.

I’ve changed the code on ListSpinner so you’ll have to use my version in order for the metro style css to work.

A sample app is included in the files.

Java Calendar with a metro style

Following a discussion with Tom Eugelink author of a Calendar control for JavaFX I’ve decided to have a try at styling it with a Metro like style.

There is no Calendar control or spinner control, which is used in Toms Calendar, in the windows 8 (metro) toolkit of controls, so I had to come up with a fresh new design for this. Actually the ComboBox of Metro behaves a bit like the spinner control of ios but still it’s not like the spinner control of previous Windows versions where you have up and down (or left and right) arrows to slightly increment/decrement the values.

I also had touch in mind, so the increment/decrement buttons in the spinner are far apart enough to not be accidentally touched instead of the other increment/decrement button you aimed for.

The following picture shows the current wireframe for the Calendar control. It is a high fidelity wireframe so this is actually how the control will ultimately look like:

calendar

What do you think?

Metro style Toggle Button for Java (JMetro)

Toggle button metro style:

You can get it at the usual places.

JMetro has  been recently blatantly copied by someone else who has than tried to make  it look like it was his own work. JMetro is under BSD license as are other components/controls present in the JFxtras repository, BSD license legally requires you to give credit to the original owner of the work.

There is no problem in using the work on commercial/non-commercial projects and on creating derivative work as long as you give credit to the original creator. Since I’m giving away my work for free I think the least I can ask for is some credit.

Metro style Combo Box for Java (JMetro)

This update brings the ComboBox control to the JMetro library. The following pictures show the light and dark theme:

There is a slight miss placement of the popup. Which according to Jonathan Giles has been fixed on JavaFX 8.

Metro style Scroll Pane for Java (JMetro)

Just a small update based on the metro style I’ve created for the scroll bars, here’s the ScrollPane:

I’ve also uploaded the code to the jfxtras-styles repository, so you can now get it from there also.

Metro style Scroll Bar for Java (JMetro)

Here is the Scroll Bar control with a metro style (light and dark theme):

ScrollBarLightThemeScrollBarDarkTheme There is a bug on javafx that won’t allow to change the style of the thumb when it is pressed.

The css code to style the thumb on this state is present on the stylesheets so  the pressed state style of the thumb will become visible, whenever the bug disappears from the javafx runtime.

As a reminder, all you need to do to style your whole application with this metro style is to add the desired stylesheet (the dark or the light theme file) to the root node of the scene.

One thing that is on the to-do list for this project is changing the controls sizes to better accommodate touch. Some controls are too small right now for that.

On the future I’ll be adding this to the JFxtras repository so besides being able to get it from the usual place you’ll also be able to get it from there.

Metro style Context Menu for Java (JMetro)

Another update to JMetro: Context Menu with a metro style.

The dark and light theme both have the same styling on this control:

contextmenu metro

You can’t see the mouse pointer because this was screen captured. It’s over the “Highlight” label.

You can get this from the usual place: https://www.dropbox.com/sh/xvx1w4535x1mjm6/ntbCK7PP9z

If you dig into the css code you’ll see that there’s also a commented out implementation of the tooltip control. Unfortunately JavaFX CSS for this control is currently faulty, so we’ll have to wait for another release of JavaFX to fix this.

One last note: if you haven’t submitted the survey to put JavaFX on mobile and tables, please do so here: http://fxexperience.com/2012/12/javafx-for-tablets-mobile/ . It will take you less than 5min and can make the difference between it actually happening or not.

Metro style Check Box for Java (JMetro)

Here is an update to JMetro: the Checkbox with a metro style.

A picture of the demo app running with the light and dark metro theme:

The first button has the focus, that’s why it has a dashed square around it. I’ve also made changes to the push button. You can get everything from the same place.

I’ve also changed how you apply the theme. Now all you have to do is add the style sheet and buttons and checkboxs will change style automatically. That’s because now I’m overriding the default look of the controls so you don’t have to add style class’s to them.

The fonts aren’t still the same as in Metro, I’ll try to see if I can change that in a later iteration. Even if you test this on Windows 7, which also has Segoe UI, it will be different because Segoe UI on windows 8 is slightly different.