JMetro Adds a New TableView Style in JavaFX

DZone 's Guide to

JMetro Adds a New TableView Style in JavaFX

A new TableView style has been added to the JMetro JavaFX theme. Click here to learn more!

· Java Zone ·
Free Resource

This time the TableView “Metro” style gets added to the Java, JavaFX theme JMetro. This amps up the JMetro version to 3.1.0.

The reason I didn’t add the Table style before is because, strangely, there isn’t a definition for the Table in the Fluent Design System (previously Metro). There is a preview control called DataGrid, but it is still in preview and will only be officially added later.

The JMetro Table style is a custom made style based on the Fluent Design System’s other controls and guidelines.

As usual, there is a dark and light theme.

JMetro Table View – Light Theme

JMetro Table View – Dark Theme

If you’re familiar with the standard JavaFX theme (Modena), you’ll also notice that the JMetro arrow that appears when sorting a column is different.

The border around the Table in the dark and light themes are not part of the control style. It was added to the Table in the sample app.

In the light theme, there is a light border below the header row that is not visible in the GIF. It is visible in a PNG image:

Image title

These are the relevant fixes that have been made in version 3.1.0:

  • Fix toggle switch style showing with rounded corners

As usual check out the Java JavaFX theme JMetro page for information on how to use JMetro theme.

Further Developments

In the next weeks, my intention is to make the further improvements to the library:

  • Add TreeView style
  • Improve Radio Button style
  • Improve Check Box style
  • Improve Toggle Switch style
  • Add the ability to change the accent color and other colors easily through a code call or CSS definition
java ,javafx ,theme ,jmetro ,style ,news ,tableview

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

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}