DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Java
  4. Fluent Design Style Button, Toggle Button, and Tooltip for Java, JavaFX

Fluent Design Style Button, Toggle Button, and Tooltip for Java, JavaFX

Want to learn more about using the fluent design style button and the toggle button for Java and JavaFX? Check out this post on how to use the latest version with JMetro.

Pedro Duque Vieira user avatar by
Pedro Duque Vieira
·
Aug. 31, 18 · Tutorial
Like (1)
Save
Tweet
Share
13.95K Views

Join the DZone community and get the full member experience.

Join For Free
This weekend, in my spare time, I’ve continued to work on JMetro. The end result is a new button and toggle button in both the dark and light style. These styles include a new animation when the button is pressed. This can be turned on and off through CSS.

Finally, I’ve quickly tweaked the tooltip style.

This bumps up the JMetro version number to 4.4.

JMetro Version 4.4

Sometimes, I’m impressed by how much I can achieve in just a few hours of working in JavaFX. I try to be as honest as possible. However, I’m biased since I’ve been working with it since JavaFX was still Beta (before version 1) and had its own scripting language (JavaFX script). 

Again, I am blown away by the fact that, in just a few hours here and there, I’m almost finished with this new iteration of JMetro, which included re-styling practically all JavaFX controls (new animations, new colors, new overall styles), including some that do not exist in the JavaFX framework. And, I completed all of that twice, since JMetro includes a light and dark version — not to mention designing code and the API design as well as visual design and UX, testing, and tweaking until I thought it was good enough. Personally, I’m impressed at how much I have achieved so far with the time I’ve spent.

Now, I don’t try to sell any specific technology. Because, like I used to hear Kirill Grouchnikov, now working at Google and a former software engineer that blogged about Swing: “the customer doesn’t care about the technology." The customer doesn’t care about the technology that was used. The customer cares whether the product works well or not.

I don’t mind working with other technologies. In fact, recently, I’ve been working in web development using JavaScript, HTML, etc. I always try to choose the best tool for the job, passions aside (of course, experience with a toolkit also counts).

In this blog, I will try to be as honest and unbiased as possible. Right now, I’m not affiliated with Oracle or with any other company that sells JavaFX products or JavaFX consultancy. I don’t have any investment in JavaFX, other than the fact that I’ve been using it for a very long time. Usually, I describe myself as a JavaFX consultant and freelancer, only because that’s what I have the most experience with. However, there are other technologies as productive as JavaFX out there. Still, I think it’s pretty impressive what you can achieve with just a few hours of work.

Button and Toggle Button New Style

In just a few short hours, I was able to completely re-implement the button style with a new animation once clicked and a new CSS property to turn on/off that animation.

First, this is the old light and dark style of the button:

Image title

Button — JMetro OLD light theme

Image title

Button — JMetro OLD dark theme

The “default” that you see above represents the style of the button when it is set as the default. Check out this API specification for more information.

The new style looks as follows:

Image title

Button — JMetro NEW light theme

Image title

Button — JMetro NEW dark theme

The colors for pressed, hover, and corresponding effects have changed. A new animation has also been added, which happens when the button is clicked. The button shrinks, when pressed, and then progressively come back to normal size. You can turn this animation on or off with the -shrink-animate-on-press CSS property. By default, it is set to on in the JMetro stylesheet:

.button, .toggle-button {

    -shrink-animate-on-press: true;
}


The toggle button style is highly based on the button. Here’s the old style:

Image title

Toggle Button — JMetro OLD light theme

Image title

Toggle Button – JMetro OLD dark theme

The new toggle button style now looks as follows:

Toggle Button JMetro light theme, Java, JavaFX theme, inspired by Fluent Design System (previous versions where named Metro)

Toggle Button — JMetro NEW light theme

Toggle Button JMetro dark theme, Java, JavaFX theme, inspired by Fluent Design System (previously named 'Metro')

Toggle Button — JMetro NEW dark theme

Tooltip New Style

The last addition to JMetro version 4.4 is a new style for the Tooltip. This was a quick tweak of the old style. Both light and dark versions look the same:

Image title

Tooltip – JMetro OLD theme

Image title

Tooltip – JMetro NEW theme

The colors were slightly tweaked and the font was made bigger.

Conclusion

In this blog post, I’ve expressed my opinion on how productive JavaFX can be. Particularly, this new JMetro iteration that was started a few weeks ago is extremely easy to use.

I’ve then mentioned what’s new in JMetro 4.4 version. This includes a new button and toggle button in the dark and light style with added CSS styleable animations, as well as a new tweaked tooltip style.

Here’s what I’ll be updating next:

  • Text Field style
  • Password Field style
  • Progress Bar style
  • Continue working to make it easy for developers to tweak JMetro colors in the future;
  • Somewhere down the line, probably around version 5, I’ll work on making JMetro available through Maven Central. There are some particularities to this project that don’t make it as easy as it could be.

The documentation for JMetro is on the JavaFX theme JMetro page. It hasn’t been updated, yet, with this last version.

JavaFX Design Light (web browser) Java (programming language)

Published at DZone with permission of Pedro Duque Vieira, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Using JSON Web Encryption (JWE)
  • Beginners’ Guide to Run a Linux Server Securely
  • 7 Awesome Libraries for Java Unit and Integration Testing
  • Kubernetes vs Docker: Differences Explained

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: