Is it possible to change the color of a ProgressBar object using pure Java

Flow
1

I currently have a class that extends FormLayout where I build a standard user-email-password panel.
I added a progress bar (https://vaadin.com/api/platform/14.3.3/com/vaadin/flow/component/progressbar/ProgressBar.html) and changing the background color is easy:

 progressBar.setValue(score);
 progressBar.getStyle().set("background-color", "red");

What I actually want to do however, is change the color of the actual bar (the value).
I can see here that there are two sub-parts of the progressbar (https://vaadin.com/components/vaadin-progress-bar/html-api/elements/Vaadin.ProgressBarElement). How do I access the “value” part of the progressbar in Java? I assume this is the actual part I want since it says “Progress-bar’s foreground”.

2

Since the Progress bar element uses a Shadow Dom, styling the value part is done a little different. [Vaadin Styling Docs]
(https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html).

I don’t think it’s possible using inline styles like you do. Instead, add a CSS file specifically for vaadin-progress-bar

Over your mainview class (if you want your stylings to apply globally) or over a more specific view or component that contains your ProgressBar, add the annotation CssImport using the themeFor attribute to specify the progressbars html tag.

@CssImport(value = "./frontend/styles/myProgressBarStyles.css", themeFor = "vaadin-progress-bar")
public class MainView extends VerticalLayout {
	...
}

<!--  frontend/styles/myProgressBarStyles.css -->
<!-- if unclear where the frontend folder should be located in the project => https://stackoverflow.com/a/57553974/3441504 -->
[part="value"]
 {
	background-color: red;
}
3

Kaspar Scherrer:
Since the Progress bar element uses a Shadow Dom, styling the value part is done a little different. [Vaadin Styling Docs]
(https://vaadin.com/docs/v14/themes/themes-and-styling-overview.html).

I don’t think it’s possible using inline styles like you do. Instead, add a CSS file specifically for vaadin-progress-bar

Over your mainview class (if you want your stylings to apply globally) or over a more specific view or component, add the annotation CssImport using the themeFor attribute to specify the progressbars html tag.

@CssImport(value = "./frontend/styles/myProgressBarStyles.css", themeFor = "vaadin-progress-bar")
public class MainView extends VerticalLayout {
	...
}

<!--  frontend/styles/myProgressBarStyles.css -->
[part="value"]

{

background-color: red;
}

Thank you. This works but I want to change the color dynamically during runtime. I have a score attribute ranging from 0 - 1.0 and depending on the current value, I want to change the color from red → orange → green.

I can see that the ProgressBar class has a setClassName method, can I declare classes within the css-file and set them using this method?

4

I can see that the ProgressBar class has a setClassName method, can I declare classes within the css-file and set them using this method?

Yes that’s how I would approach this scenario. It should work as long as you have a predefined set of colors/classes so you can prepare all the CSS class styles accordingly.

:host(.progress-red) [part="value"]
 {
	background-color: red;
}
:host(.progress-orange) [part="value"]
 {
	background-color: orange;
}
:host(.progress-green) [part="value"]
 {
	background-color: green;
}

and then whenever you call progressBar.setValue you determine which color you want based on the value and set the correct class name with progressBar.setClassName("progress-green"); for example.

5

Kaspar Scherrer:

I can see that the ProgressBar class has a setClassName method, can I declare classes within the css-file and set them using this method?

Yes that’s how I would approach this scenario. It should work as long as you have a predefined set of colors/classes so you can prepare all the CSS class styles accordingly.

:host(.progress-red) [part="value"]

{

background-color: red;
}
:host(.progress-orange) [part=“value”]
{
background-color: orange;
}
:host(.progress-green) [part=“value”]
{
background-color: green;
}


and then whenever you call `progressBar.setValue` you determine which color you want based on the value and set the correct class name with  `progressBar.setClassName("progress-green");` for example.

Works like a charm! Thank you.

6

If you need a fully dynamic version, it is also possible by defining a new variable in CSS and use it to set the background color to any value from Java, see https://cookbook.vaadin.com/dynamically-change-progressbar-color