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
Partner Zones AWS Cloud
by AWS Developer Relations
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
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Integrating AWS With Salesforce Using Terraform
  • Authorization: Get It Done Right, Get It Done Early
  • Introduction To Git

Trending

  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Integrating AWS With Salesforce Using Terraform
  • Authorization: Get It Done Right, Get It Done Early
  • Introduction To Git
  1. DZone
  2. Coding
  3. Java
  4. Metro Style Rating Control for Java (JMetro)

Metro Style Rating Control for Java (JMetro)

Pedro Duque Vieira user avatar by
Pedro Duque Vieira
·
Dec. 07, 13 · Interview
Like (0)
Save
Tweet
Share
3.55K Views

Join the DZone community and get the full member experience.

Join For Free

the rating control is one of windows first class citizens, it’s available in its control library, it allows a user to rate something from 0 to an x value. given the importance of today’s social interaction it’s no wonder it has gained the status of a library control.

controlsfx is a third party library of controls for javafx, it complements the standard library with some more useful controls and functionality which are not available straight from javafx’s standard library. one of the controls present is the rating control which i opportunely took the chance to use and style the metro way through css.

rating control

the rating control (default style)

in its default style, this control uses raster image files. one for the “selected” state:

selected-star

and one for the “unselected” state:

unselected-star

using this css code for the “unselected” state:

.rating > .container > .button {
  -fx-background-image: url("unselected-star.png");
}

and this for the “selected” state:

.rating > .container > .button.strong {
  -fx-background-image: url("selected-star.png");
}

“.strong” is the style class given to “selected” star buttons.

for jmetro i wanted to use vector based images instead of raster ones. to that effect i used the css property: “-fx-shape” and set the “-fx-background-image” to null which is the same as removing it.

rating - dark theme (mouse pressed)

rating control – dark theme (mouse pressed)

rating - dark theme

rating control – dark theme

rating - light theme (mouse pressed)

rating control – light theme (mouse pressed)

rating - light theme

rating control – light theme

advantages of using vector based images:

  • you can make them as big as you want without losing image quality
  • fill color, stroke color, etc can be tweaked through css
  • it occupies less space

by this, i’m not saying that vector based images should be used every time, there are certainly use cases where raster based ones are more convenient, specially at lower sizes.

in conclusion, you can do some really powerful stuff this way using only javafx css code. you can either rely on the usage of raster based images or vector based ones.

Java (programming language) Library Data structure Standard library JavaFX IT Light (web browser) Citizen (app) Advantage (cryptography)

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

Opinions expressed by DZone contributors are their own.

Trending

  • A Complete Guide to AWS File Handling and How It Is Revolutionizing Cloud Storage
  • Integrating AWS With Salesforce Using Terraform
  • Authorization: Get It Done Right, Get It Done Early
  • Introduction To Git

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

Let's be friends: