[Update 12 March, 2018: You should check out the Java, JavaFX theme page for updated information, things have changed]
Hi,
I’ve been studying the interface of Windows 8, so I thought why not do a windows 8 theme for Java and what better timing than this given that there are only 3 days left for windows 8 to be available.
My first control is the Windows 8 “Push Button”, it’s simply just the normal button that you’re used to.
I’ll be releasing two themes: a dark theme (JMetroDarkTheme.css) and a light theme(JMetroLightTheme.css). The GIF below was captured from the demo aplication.
Push Button – JMetro Dark Theme
Push Button – JMetro Light Theme
Together with the css files I’ve put an fxml file as an example. You can open it in Scene Builder then choose the style sheet you want to use by pressing “Preview -> Preview a style sheet…”. To see it in action click “Preview->Preview in window”.
The buttons are simply styled by adding the “.push-button” css class to a Button.
You can get the files here. Use them for any purpose, commercial or not.
This is looking sweet. Have you considered using the css variables defined in caspian instead of applying the css directly to the control classes? This removes a lot of edge cases where caspian might be peeking through if you forget to style a certain part of the control.
Sorry, I don’t understand what you mean. I have consulted caspian to know the css properties of Button.
Cheers,
Caspian defines some variables which it then sets on the control class properties, variable examples are -fx-base and -fx-dark-text-color. It might save you some work!
Hi Andy,
You would use -fx-base if you wanted a button equal to caspian buttons but with another color.
Cheers,
By the way, thanks for the compliment. I’m glad you like it ð
You might want to consider contributing this to the jfxtras-styles subproject (which is a repo collecting CSS styles for JavaFX).
Hi Jonathan,
Sure, I’ll look into it this week.
Cheers,
I think I’ll, most probably, need more than css styling for some of the metro controls though.. that might break the idea of having this in a repo for css styles.
It depends how those resources are brought in – if it is via CSS then that is no hassle.
I mean, I’ll need to create custom controls, that is custom implementations.
Is that necessary – I would have assumed JMetro was just modifying the CSS styling and not touching the skin code at all?
Take for instance the metro TextBox control. It has a cross button to clear all text inside the TextBox. That does not exist in JavaFX TextField
Ok – I understand. That makes it difficult to include it in JFXtras-styles.
Yep, you’re right
Nice. What I’d really love to see is a Metro-style redesign for NetBeans.
its really nice to do metro style in java.. is javafx a is good to do this.. i am fresher to javafx.. ð
It’s better than swing, for sure.
Thank you so much man, I’ve been looking for something like this for ages! ð
It’d be great if you made a progress bar aswell ð And maybe a loading spinning wheel but i guess that can’t be made with css alone
Yes you’re right.
Since the way to create custom controls is going to change in JavaFX 8 I most probably won’t do it before that.
Cheers,
Thank you!!
I have found this for a long time.
Thank you for your JMetro!!
Please tell me how to use metro like password field ? Please its not so clear
You can get it from Jfxtras.
THanks
This link to download is updated?
No. Download from here: https://github.com/JFXtras/jfxtras-styles/tree/master/src